HTML Etiketler 1

09.12.2018

1.373

Web sayfaalarında kullanılan HTML dili etiketleri konu anlatımı.

HTML(Hyper Text Markup Language)

HTML, diğer programlama dillerinden farklı olarak sadece görsel düzenleme için kullanılmaktadır. HTML ile sayfadaki metin, resim, animasyon ve diğer nesnelerin nerede nasıl görüntüleneceği ayarlanır.

HTML herhangi bir text (metin) editörü (Notepad,Word, Notepad++, Dreamweaver, …) ile hazırlanabilir. Biz Notepad++ üzerinde kodlama yapacağız.

Notepad++ ile kodlama yaparken web sayfamızda Türkçe karakter problemi yaşamamak için editörümüzün karakter kodlamasının UTF-8 olması gerekmektedir.

Aşağıdaki resimde notepad++’da UTF-8 ayarlarının nereden yapılacağı görülmektedir.

Bu ayar için Ayarlar–>Tercihler–>Yeni Belge–>Kodlama–>UTF-8 yolu takip edilir.

Adobe Dreamweaver programında varsayılan ayar UTF-8‘dir bu nedenle herhangi bir ayarlama yapmak gerekmemektedir.

Kaydedilecek olan web sayfalarının uzantısı .html olmalıdır. Ana sayfanın adı ise index.html olmalıdır. Öncelikle sitemizi barındıracak bir klasör oluşturduktan sonra tüm sayfalarımızı bu klasörün içine uzantısını .html vererek kaydetmekte yarar vardır.

HTML Yazım Kuralları

Programlama dillerinin kendilerine özgü kuralları vardır. HTML dilinin de kendine özgü bazı kuralları vardır. Bunlardan en önemlileri şunlardır:

Komutlar büyük ya da küçük harfle yazılabilir. (<html> veya <HTML>)
Komutlarda Türkçe’ye özgü karakterler kullanılmaz. (ç, Ç, ğ, Ğ, ı, İ, ö, Ö, ş, Ş, ü, Ü)
Komutlar < > işaretleri arasında yazılır ve buna etiket (tag) adı verilir.
Bazı etiketler hariç her etiketin bir kapanışı vardır.(<html>…..</html>)
Açılan bir etiket kapatılmalıdır. İlk açılan etiket en son kapatılır ve etiketi kapatma sırasında “/” işareti unutulmamalıdır. (<html><body><p>…</p></body></html>)

Kodların okunabilirliğini artırmak için bir etiket bitmeden başka bir etiket açılırsa sonradan açılan etiket girinti verilerek yazılmalıdır. (Girinti vermeden yazılan kodlar da çalışır, sadece görsel açıdan düzensiz görünür.)

Aşağıda iç içe açılmış ve kapatılmış HTML etiketleri görülmektedir.

<html>
	<head>
		<title>......</title>
	</head>
	<body>
		<h1>......</h1>
	</body>
</html>

Etiketlerin Açılış ve Kapanışları

Yeni HTML versiyonlarında her etiketin bir kapanışının olması gerekmektedir. İlk HTML versiyonlarında bazı etiketler kapatılmazken tüm bu etiketler de artık kapatılmaktadır.

Bir HTML etiketi; açılışı ile kapanışı arasında etkilidir. Kapanışın açılıştan farkı önüne / işaretinin konmasıdır.

Açılış Kapanış

<etiket>……….</etiket>

Yeni HTML versiyonlarında açılış ile kapanış aynı anda şu şekilde yapılabilmektedir.

Açılış-Kapanış

<etiket/>

İç içe yazılmış olan etiketlerin kapanışında önce içteki etiketlerin kapatılmasına sonra dıştaki etiketlerin kapatılmasına dikkat edilir.

Aşağıda etiket kodlarının yazılışına ait örnek görülmektedir.

<etiket1>
        <etiket2>
                <etiket3>......</etikt3>
        </etikt2>
</etikt1>

Aşağıda birden fazla iç içe HTML etiketi açma kapama örneği görülmektedir.

<html>
    <head>
           <title>Bilişim Teknolojileri Sayfamıza Hoş Geldiniz</title>
           <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body>
           <h1>Alanımızdaki Dersler</h1>
           <ul>
	<li>Bilişim Teknolojilerinin Temelleri</li>
	<li>Programlama Temelleri</li>
	<li>Ofis Programları</li>
	<li>Bilişim Teknik Resmi</li>
           </ul>
    </body>
</html>

Yukarıdaki HTML kodu çalıştırıldığında sayfamızın görüntüsü şöyle olacaktır.

Burada dikkat ederseniz meta etiketinin kapanışı kendi içinde yapılmıştır. Diğer etiketler de ise; açılan bir etiketin kapanışı yapılmadan yeni bir etiket açıldığında ikinci açılan etiket kapatılmadan ilk etiket kapatılmamıştır.

Örneğin: <body> altında <ul> açıldığından; </ul> kapatıldıktan sonra </body> kapanışı gelmiştir.

Parametre Kullanımı

Bazı etiketleri biçimlendirmek için etiketin açılışına yazılan parametre denilen özellikler vardır. Bu özellikler (parametreler) sayesinde etikete ait diğer özellikler kullanılabilmektedir. Parametreleri yazarken şunlara dikkat edilmelidir.

Parametreler açılış etiketlerinin içine yazılır.
Her parametre bir boşluk ile ayrılır.
Parametreye eşittir (=) ile atanan değer çift tırnak içinde yazılır.
Her etiketin farklı parametresi olabileceğinden doğru parametreleri doğru etiketlerde kullanmalıyız.

Kullanımı:

Açılış Kapanış

<etiket parametre1=“değer1” parametre2=“değer2” … > .…. </etiket>

Örnek: body etiketinin bgcolor parametresine red değerini atayarak web sayfasının arkaplan rengini kırmızı yapalım.

<body bgcolor=“red”>

………….

</body>