Blog Akademi HTML Eğitimi için video eki de eklenmiştir. Dilerseniz yazılı eğitimden sonra video içeriği de izleyebilirsiniz. Video eki için tıklayın.

Aşağıdaki dersi tamamlarken ‘Örnek:’ başlığı altında verilenleri kendi bilgisayarınızda ‘Not Defteri’ ni kullanarak kaydedip Google Chrome kullanarak test etmeniz önerilmektedir.

Html Nedir?

HTML (Hyper Text Markup Language) internet üzerinde web sayfası oluşturmak için kullanılan bir betik dilidir. HTML dosyalarının aktarımı için HTTP (Hyper Text Transfer Protocol) kullanılır. HTML dosyaları sunucu bilgisayarın sabit diskinde .html ya da .htm uzantısı ile saklanır. Yazdığımız html dosyaları düz yazı dosyalarından başka bir şey değildir. Yani yazdığımız html dosyalarını bir C ya da Pascal programında olduğu gibi bir derleyici ile derlememize gerek yoktur.

Bir siteye girdiğimiz zaman bize görüntülenen ilk sayfa index.html, index.htm, index.asp, index.php ya da default.htm dosyalarından birisidir. index.* dosyaları UNIX ve türevi sunucu sistemler, default.htm dosyasıda WinNT ya da türevi sistemler için giriş sayfası olur. Yukarıda saydıklarımızın dışında uzantısı değişik birçok biçemdeki sayfalar da sunucu sistemin ayarları değiştirilerek giriş sayfası yapılabilir.





HTML Etiketleri

Etiket, HTML dosyasında kullanılan komutlara verilen addır. HTML içinde kullanılan tüm etiketler “<” işareti ile başlar ve “>”ile biter. Ayrıca etiketin yorum aralığı da “</etiket ismi>” kalıbı ile bitirilir. Aşağıda etiket kullanımına kısa bir örnek verelim.

<etiket1>…Burası etiket1’in yorum aralığı…</etiket>
<etiket2>
….Burası etiket2’nin yorum aralığı…
….
<etiket3>…Burada etiket3 tanımlı…</etiket3>
…Etiket2 hala tanımlı…

</etiket2>

Görüldüğü gibi en son, etiket2 </etiket2>etiketi ile kapatılıyor. Dikkat ederseniz değişik etiketler birbirlerinin içinde kullanılabiliyor. Yani açık etiketin içinde başka bir etiket açıp istediğiniz işlemi gerçekleştirebiliyorsunuz. Etiketin bitiş işaretini (</etiket ismi>) vermediğiniz sürece o etiket tanımlı olarak işlem görür.
Tüm HTML dosyaları <html> etiketi ile başlayıp </html> etiketi ile son bulur. Bunun yanında <html> etiketi ile <HTML> etiketi arasında hiçbir fark yoktur. Ancak etiketleri küçük harflerle yazmaya alışmanızı öneririm. İleride XHTML kodları yazmak zorunda kalabilirsiniz ve XHTML dilinde etiketlerin küçük harflerle yazılması zorunludur.

HTML dosyaları temel olarak iki bölümden oluşur. Bunlar HEAD (Başlık) ve BODY (Gövde) kısımlarıdır. Başlık kısmında ziyaretçiye görünmeyen, sayfa hakkında tanımlayıcı bilgiler bulunur. Gövde kısmı ise web sayfamızın ziyaretçiye görünen kısmını yani asıl kısmını oluşturur.

<html> </html>

Sayfamızın head ve body bölümleri bu etiketin yorum aralığında tanımlıdır.

<html>
<head>… head etiketinin içeriği ….</head>
<body>
….
body etiketinin içeriği
….
</body>
</html>

Birinci satırda <html> etiketi ile HTML sayfamıza başlıyoruz. Daha sonra <head> ve <body> etiketleri <html> etiketi içerisinde tanımlanıp içerikleri yazılıyor. En son olarak da </html> etiketi ile HTML sayfamızı bitiriyoruz.

<head> </head>

Yorum alanında sayfamız hakkında bilgilerin bulunduğu bir etikettir. Örneğin sayfamızın başlık bilgisinin bulunduğu TITLE etiketi ya da arama motorlarına bilgi sağlamak için oluşturulan META etiketi bu etiketin yorum alanında tanımlanır.

<body> </body>

HTML dosyamız içindeki en geniş içerikli etiket budur. Ziyaretçiye görünen herşey bu etiketin yorum alanında tanımlanır. Ayrıca bu etiket içinde kullanılan bileşenlerle de sayfamızın bazı temel özelliklerini belirtebiliriz.

Body etiketinin bileşenleri :
text = “renk”
Sayfanızdaki yazıların rengine renk ile belirtilen değeri verir.
link = “renk”
Sayfanızdaki bağların rengine renk ile belirtilen değeri verir.
vlink = “renk”
Sayfanızdaki ziyaret edilmiş bağların rengine renk ile belirtilen değeri verir.
alink = “renk”
Sayfanızdaki aktif bağların rengine renk ile belirtilen değeri verir.
bgcolor = “renk”
Sayfanızın arka plan rengine renk ile tanımlı değeri verir.
background = “resim_dosyası”
Eğer arka planda sade bir renk değil de bir resim kullanmak istiyorsanız,resim_dosyası kullanacağınız resmin adını temsil eder.

<title> </title>

Sayfamızın başlık bilgisi bu etiket altında yer alır. Bu etiket head etiketi içinde kullanılmak zorundadır.
<head>
<title>İlk HTML denemem</title>
</head>

Örnek:

<html>

<head>
<title>HTML Öğren</title>
</head>

<body>

</body>
</html>





Başlıklar

Bu etiketler basit olarak bir başlık kullanmak istediğimiz zaman, başlığı yazmak için kullanılan etikettir. Etiketin kullanımında “Hx” ifadesindeki “x” 1 ile 6 arasında değerler alabilen bir tamsayıdır. Bu etiket ile ekrana basılabilecek en büyük boyutlu yazı <H1> etiketi ile, en küçük boyutlu yazı <H6> etiketi ile basılır.
Bu etiket ile birlikte bir önceki etiket olan <p> etiketindeki gibi dört yer belirleme kodu kullanılabilir. Etiketin kullanımı <h1 align=”center”>Bu benim en büyük başlığım!</h1> şeklindedir. Etiketin yorum aralığındaki metin başlık olarak ekrana basılır.

Örnek:

<html>

<body>

<h1>İnteraktif HTML Öğren</h1>

</body>

</html>


Paragraflar

<p> ve </p> etiketleri ise paragraf oluşturmak için kullanılır. P etiketi içinde yine body etiketinde olduğu gibi birtakım tanımlamalar yapılabilir.
<p> etiketinin bileşenleri
align = “left”    Paragrafı sola dayalı olarak yazar.
align = “right”    Paragrafı sağa dayalı olarak yazar.
align = “center”    Paragrafı ortalar.
align = “justify”    Paragrafı sola ve sağa dayalı olarak yazabilmek için sözcüklerin ara boşluklarını değiştirir.
class = “css_etiketi”    Önceden tanımlı bir CSS dosyasındaki font-size, color… gibi özellikleri paragrafa uygular.
style = “css:tanımı1;css:tanımı2;…”    font-size, color… gibi css tanımlarını paragrafa uygular.

<p align="justify">
Burada bir metin var.<br>
Bir alt satıra geçtiğimi sanıyorum!   Bu örnekte
yazımı bir paragraf içinde yazıyorum.
</p>

<br> Etiketi

BR etiketinin sonlandırıcısı (</br>) yoktur, yani bir yorum aralığından söz edilemez. BR etiketi bulunduğumuz satırdan bir satır aşağı geçmek için kullanılır.

Örnek:

<html>

<body>

<p>Bu bir paragraftır.</p>

</body>

</html>





Metinler

<font> Etiketi

HTML dosyası içinde yazdığımız yazıların ekrana nasıl bir çıktı vereceğini bu etiket ile belirleriz. Uyumlu yazı tipleri ve renkler ile sayfanıza güzel bir görünüm kazandırabilirsiniz. Bu etiketin kullanımına alternatif olarak sayfanızda CSS de kullanabilirsiniz. CSS kullanımı sayesinde fazla kod yazımından da kurtulmuş olursunuz. Etiket ile birlikte yazı tipi, renk ve boyut belirtmek üzere üç kod kullanılır.

Font etiketi kodları

face = “yazıtipi”    Kullanılacak yazı tipi belirlenir.
color = “renk”    Yazacağımız yazının rengi belirlenir.
size = “boyut”    Yazımızın boyu belirlenir.

<p><font face="tahoma" size="3" color="maroon">
<b>Burada bir yazı var.</b></font></p>

<p><font face="tahoma" size="4" color="maroon">
<b>Burada bir yazı var.</b></font></p>

<p><font face="tahoma" size="5" color="maroon">
<b>Burada bir yazı var.</b></font></p>
Aşağıdaki etiketler yazı tiplerinin nasıl yorumlanacağını belirten etiketlerdir.
<b>kalın</b>, <i>eğik</i>, <s>üzeri çizili</s>, <u>altı çizili</u>,
<small>küçük</small>, <big>büyük</big>, <tt>daktilo yazısı</tt>

kalın, eğik, üzeri çizili, altı çizili, küçük, büyük, daktilo yazısı

<sub> <sup> Etiketleri

Formül ve benzeri metinleri yazarken kullanılır.

H<sub>2</sub>SO<sub>4</sub> <br>
E = mc<sup>2</sup>

H2SO4
E = mc2

Örnek:

<html>

<body>

<b>HTML</b>

</body>

</html>


Linkler

<a> etiketi bir adres belirterek başka sitelere, sayfalara ya da aynı sayfanın farklı bölümlerine bağ vermek veya eposta adreslerini yazmak için kullanırız. Web istemciler genellikle öntanımlı olarak bağları altı çizili ve mavi olarak görüntüler. etiketinin bir yorum aralığı vardır ve çeşitli tanımlayıcı kodlar da etiket ile birlikte kullanılabilir.

Bağ vermek için kullanılan kodlar

href = “URL” Yorum alanındaki bileşene tıklandığında yorumlanacak adres.
target = “hedef” Yorum alanındaki bileşene tıklandığında sayfanın açılacağı yer belirtilir.
name = “isim” Sayfa içi bağlantılarda başka bir bağın hedefi olacak yeri belirtmek için kullanılır.
type = “mime_türü” Hedefin içeriğini belirtmek için kullanılır.

<a href=”http://www.blogakademi.com”>BlogAkademi.com</a>

BlogAkademi.com

Örnek:

<html>

<body>

<a href=”www.facebook.com”> Facebook Sosyal Pylaşım Platformu</a>

</body>

</html>

ÇIKTI:

Facebook Sosyal Pylaşım Platformu





Resimler

Sayfamıza resim yerleştirmek için kullanılan etikettir. Etiketin kullanımına geçmeden önce Internet üzerinde kullanılan resim dosyası biçemleri üzerinde durmak istiyorum. Internet üzerinde en çok kullanılan resim dosyası biçemleri GIF, JPG ve PNG’dir. Bu biçemlerin seçilmesindeki amaç sayfanın yüklenmesini kolaylaştırmaktır. Windows ortamında en çok kullanılan resim formatı olan BMP’lerin web üzerinde kullanılmamasının en büyük sebebi, iyi resim kalitelerine karşın bunun bir bedeli olarak boyutlarının çok büyük olmasıdır. Kullanılan üç biçemin kendine has bazı özellikleri vardır.
GIF biçemi 256 renk kullanarak ve JPG biçemi de resmin kalitesinden biraz kısarak boyut sorununu halleder.

Bunun yanı sıra sayfamızda, mecbur kalmadıkça, büyük boyutlarda (hem ebat hem de kb olarak) resimler kullanmaktan kaçınmak sayfamızın yüklenmesini kolaylaştıracaktır. Yine bu etikette de sonlandırıcı yoktur. Yani bir yorum aralığı belirtmez.

Bu etiket altında kullanacağımız resmin bazı özelliklerini belirtmek için tanımlayıcı bazı kodlar kullanırız. Bu kodları aşağıdaki tabloda belirtelim.

Resim kullanımı için yardımcı kodlar

Girilecek Kod Görevi
src = “resim_dosyası” Kullanacağımız resim dosyasının tam yolunu yazarak, hangi resmin kullanılacağını belirtiriz.
width = “genişlik” Resmin genişliği burada tanımlanır.
height = “yükseklik” Resmin yüksekliği burada tanımlanır.
vspace = “düşey_aralık” Resmimizi eğer metin içinde kullanıyorsak metne olan dikey uzaklığı.
hspace = “yatay_aralık” Resmimizi eğer metin içinde kullanıyorsak metne olan yatay uzaklığı.
alt = “metin” Resmin üzerinde fare ile bir süre beklendiğinde çıkan açıklayıcı bilgi burada tanımlanır.
border = “değer” Resmin dışında çerçeve çizgisi olacaksa “1”, olmayacaksa “0” değeri kullanılır..

 

<img src=”../resimler/banner.jpg _cke_saved_src=”../resimler/banner.jpg width=”250″ height=”85″ alt=”Bilgisayar Topluluğu”>

Yukarıdaki satır bulunduğumuz dizinin bir üstünde bulunan “resimler” dizinindeki “banner.jpg” dosyasını belirtilen ölçüler doğrultusunda ekrana basar. (Resmin boyutlarını belirtmek zorunlu değildir!).

“Alt” kodu ile tanımlı kısım da resmin üzerinde belli bir süre beklendiğinde “Bilgisayar Topluluğu” yazısının belirmesini sağlar.

Örnek:

<html>
<body>

<h3>Resimler</h3>

<img src=”resimler/resim.jpg” width=”300″ height=”240″>

</body>
</html>


Listeler

<ol> etiketi kullanılarak oluşturulan listeler sıralı listelerdir. Sıralama sayısal, alfabetik ya da romen rakamları ile yapılabilir. <ul> etiketi ile oluşturulan listelerde ise sıralama elemanı bir grafik semboldür. <li> etiketi bu etiketlerin yorum aralığında kullanılarak liste öğeleri verilir.

Liste kullanımı için yardımcı kodlar :

Girilecek Kod Görevi
type = “listeleme türü” Bu alanda belirtilebilecek değerler aşağıda ayrı tablo olarak gösterilecek.
start = “değer” Sadece <ol> etiketi içindir. Sıralama elemanının başlangıç değerini belirtmekte kullanılır.
value = “değer” Sadece <li> etiketi içindir. Yorum aralığındaki liste öğesinin numarasını belirtmek amacıyla kullanılır. start = "değer" parametresi ile belirtilen değer, sayısal olmasa bile burada sayısal bir "değer" belirtilebilir.
Sıralamasız liste (<ul>) türü değerleri:

Sıralamasız listlerde liste öğelerini belirtmek için 3 sembol ismi kullanılır:

  1. disc – İçi dolu bir daire görüntüler
  2. circle – İçi boş bir daire görüntüler
  3. square – İçi dolu ya da boş bir kare görüntüler
Sıralı liste  ( <ol> ) türü değerleri
Türü Sıralama
1 Onluk tabanda numaralama (1,2,3,4,…)
i Küçük rakamlarla romen sayıları (i,ii,iii,iv,…)
I Büyük rakamlarla romen sayıları (I,II,III,IV,…)
a Küçük harflerle alfabetik (a,b,c,…)
A Büyük harflerle alfabetik (A,B,C,…)
Örnek :
<ol type="i">
  <li> Birinci öğe...</li>
  <li> İkinci öğe ...
     <ul type="square">
       <li>İkinci öğenin bir öğesi...
       <li>İkinci öğenin başka bir öğesi...
     </ul>
  </li>
  <li> Üçüncü öğe...</li>
</ol>

Yukarıdaki kodun istemcinizdeki görüntüsü aşağıdakine benzer olacaktır.

  1. Birinci öğe…
  2. İkinci öğe …
    • İkinci öğenin bir öğesi…
    • İkinci öğenin başka bir öğesi…
  3. Üçüncü öğe…

 

Örnek:

<html>
<body>

<ol type=”i”>
<li> otomobil</li>
<li> kamyon </li>
<ul type=”square”>
<li> tekerlek </li>
<li> direksiyon </li>
</ul>
</li>
</ol>





Tablolar

Tablolar <table>. . . . </table> etiketleri arasında oluşturulur. <table> etiketinden sonra daima <tr> gelir. Her satır tanımlandığında <tr>, her hücre tanımlandığında da <td> etiketi kullanılır.

<table border="1">
<tr><td>1. hücre</td><td>2. hücre</td><td>3. hücre</td></tr>
<tr><td>4. hücre</td><td>5. hücre</td><td>6. hücre</td></tr>
</table>
1. hücre 2. hücre 3. hücre
4. hücre 5. hücre 6. hücre

 

Bağımsız Değişkenler

<table border="" cellpadding="" cellspacing="" width="" height="" bgcolor="" align="" valign="">
<td height="" width="" bgcolor="" align="" valign="" colspan="" rowspan="">

border : Çerçevenin kalınlığını belirler. border=”0″ dersek tabloda çerçeve bulunmaz, bu miktarı arttırdıkça çerçevenin kalınlığı da artar.

cellpadding , cellspacing : Hücre elemanlarının sınırlara olan uzaklığı cellpadding, satır ve sütunların uzaklığı ise cellspacing değişkeni ile belirtilir.

bgcolor: <table bgcolor=”red”> şeklinde kullanarak bütün tablo ya da <td bgcolor= “red”> şeklinde sadece tek bir hücre renklendirilir.

align : Hücredeki elemanın yatay konumunu belirler ve “right, left, center” opsiyonları ile kullanılır.

valign : Hücre elemanının düşey konumunu belirler ve opsiyonları “top, bottom, middle”dır.

colspan , rowspan : Aynı satırdaki hücreleri birleştirmek için colspan, aynı sütundaki hücreleri birleştirmek için de rowspan değişkeni kullanılır. Birleştirilen hücreye ait <td>. . </td> etiketi silinir.

<table border="1">
<tr><td>1. hücre</td><td>2. hücre</td><td>3. hücre</td></tr>
<tr><td rowspan="2">4. hücre</td><td colspan="2">5. hücre</td></tr>
<tr><td>6. hücre</td><td>7. hücre</td></tr>
</table>

1. hücre 2. hücre 3. hücre
4. hücre 5. hücre
6. hücre 7. hücre

 

Örnek:

<html>
<body>

<table border=”1″>
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
</tr>
<tr>
<td>satır 1, sütun 1</td>
<td>satır 1, sütun 2</td>
</tr>
<tr>
<td>satır 2, sütun 1</td>
<td>satır 2, sütun 2</td>
</tr>
</table>

</body>
</html>





Formlar

Formlar <form>. . . </form> etiketleri arasında oluşturulur. Form bilgilerini action değişkeninin içine yazdığınız dosyaya veri olarak gönderebilirsiniz. Formlar sayesinde anket ve geribildirim uygulamaları hazırlayabilirsiniz.

<form name="kimlik" action="gonder.php" method="get">
Isim/soyad : <input type="text" size="20" name="isim"><br>
Doğum yeri : <input type="text" size="20" name="dogumyer" ><br>
Doğum tarihi : <input type="text" size="10" name="dogumtarih" ><br>
Cinsiyet : <input type="radio" name="cins" value="erkek" > Erkek

<input type="radio" name="cins" value="kiz"> Kiz<br>
Hobiler:<br>
<input type="checkbox" name="muzik" >Müzik dinlemek<br>
<input type="checkbox" name="manti" >Manti açmak<br>
<input type="checkbox" name="bungee" > Bungee Jumping<br>
<input type="checkbox" name="aikido">Aikido<br>
<input type="checkbox" name="halay">Halay çekmek<br>
<input type="checkbox" name="diger">Diğer :<br>
<textarea rows="4" cols="30" name="diger"></textarea><br>
Şifrenizi giriniz:<br>
<input type="Password" size="15"><br>
<input type="submit" value="GÖNDER"> <input type="reset" value="SIL">
</form>

 

Isim/soyad :
Doğum yeri :
Doğum tarihi :
Cinsiyet : Erkek Kiz
Hobiler:
Müzik dinlemek
Manti açmak
Bungee Jumping
Aikido
Halay çekmek
Diğer :

Şifrenizi giriniz:

 

 

action: Formun gönderileceği adresi belirtir.
method=”get”:Formdaki bilgiler başka bir dosyaya gönderilecekse kullanılır.
method=”post”:Formdaki bilgiler bir adrese postalanacaksa kullanılır.
type=”text” : Tek satırlık bir metin alanı açar.
size=”” :Bu metin alanının boyutunu belirler.
type=”checkbox” : Çok seçenekli bir sorunun birden fazla yanıtını almamızı sağlar.
type=”radio” : Tek seçenekli bir sorunun tek yanıtı alınır.
type=”submit” : formu action‘la belirtilen dosyaya yönlendiren bir buton yaratır.
type=”reset” :Bu butona basınca form boş hale gelir
type=”password” : Bir password alanı olusturur. Buraya girilen her karakter * şeklinde görünür.
<textarea rows=”” cols=””> :type=”text” gibi tek satırlı değil de çok satırlı bir metin alanı istiyorsak bu etiketi kullaniriz. cols metin alanının uzunluğunu, rows ise yüksekliğini pixel cinsinden verir.

Select ve option etiketlerini kullanarak seçimlik liste (menü) oluşturabiliriz. Option etiketi ile belirtilen her bir değer listenin bir elamanını oluşturur ve fareyle seçilen bu elemanlardan biri select etiketinde belirtilen değişkenin değeri haline gelir.

<select name="otolar">
<option>Alfa Romeo</option>
<option>BMW</option>
<option>Peugeot</option>
<option>Renault</option>
<option>Seat</option>
<option>Lada</option>
</select>

 

Örnek:

<html>
<body>

<form>
Ad: <input type=”text” name=”ad” /><br />
Soyad: <input type=”text” name=”soyad” />
</form>

</body>
</html>





Çerçeveler

Sayfamıza çerçeve desteği katmak için kullanılan etiket <frameset> etiketidir. Etiketin kullanımına geçmeden önce yabancı olan okuyucular için çerçeve kavramını açıklamak istiyorum. Çerçeve desteği içeren bir sayfa oluşturmak için en az üç tane normal HTML dosyasına ihtiyacımız vardır. Bu üç dosyadan biri hangi HTML dosyalarının çerçeveleri oluşturacağını belirler. Diğer ikisi de çerçeveleri oluşturur. Çerçeve kullanımına en güzel örnek yahoo ve hotmail gibi eposta sunucularının kullanıcı arayüzüdür.

Frameset yardımcı kodları

Girilecek Kod Görevi
cols = “değer” Bir çerçevenin ekrandaki genişliğini verir.
rows = “değer” Bir çerçevenin ekrandaki yüksekliğini verir.
frameborder = “değer” Çerçeveler arasında çizgi olup olmayacağı belirlenir
<frameset cols=”125,*” frameborder=”0”>
  <frame name=”menu” target=”ana” src=”menu.html” scrolling=”auto”>
  <frame name=”ana” src=”ana.html” scrolling=”auto”>
  <noframes>
   <body>
    <h1>Oppps...Web istemcinizin frame desteği yok!!!!</h1>
   </body>
</noframes>
</frameset>

Yukarıdaki HTML kodlarını index.html adlı bir HTML dosyası içine yazıp dosyayı çalıştırmamız halinde hata ile karşılaşırız. İstemci HTML kodumuzda verilen bilgi doğrultusunda bulunduğumuz dizinde ana.html ve menu.html dosyalarını da arayacaktır. Bu dosyaları yazıp dizine kaydetmemiz halinde istemci penceresinin sol tarafından itibaren 125 piksellik alan <frame> etiketi ile belirtilen menu.html dosyasına ayrılacaktır. Frameset etiketi ile birlikte kullanılan frameborder = “0” kodu kullandığımız çerçeveler arasında çerçeve çizgisi oluşması engellenecektir.

 

Örnek:

<html>
<body>

<frameset cols=”25%,75%”>
<frame src=”frame_a.htm” />
<frame src=”frame_b.htm” />
</frameset>

</body>
</html>





Artık HTML temellerini biliyorsun. Bu ders ile Html temellerini tam olarak öğrenemediysen video içeriğe de göz atabilirsin. Bunun için menüden Video’yu seçebilirsin.

Blog Akademi sana bu konuda yardımcı olduysa sosyal medyada paylaşmayı ve diğer eğitimlerimizden de faydalanmayı unutma.