HTML ve Başlıca HTML Etiketleri

AÖF Web Tasarımı ve Kodlama HTML

HTML #1

Web dünyasında uzun zamandır “HTML bir programlama dili midir?” sorusuyla karşı karşıya kalınıyor.
Cevap: Hayır, değildir. HTML’nin açılımı HyperText Markup Language şeklindedir ve “Hiper Metin İşaretleme Dili” anlamına gelmektedir.

Bu cevap, ikinci bir soruyu da beraberinde getirmektedir. “Öyleyse işaretleme dili nedir?”

Markup Language (İşaretleme Dili) bir doküman içerisindeki nesnelerin yerleşim bölgelerini, hangi nesnenin kullanılacağını ve biçimlendirme ögesi olarak referans alınacak kaynakları (CSS gibi) belirttiğimiz bir dildir. Konumuz dahilinde olan HTML de web sayfası üzerindeki elemanların biçimsel öğelerini (italik, kalın yazı vs.) ya da kullanılacak elemanların (div kutuları, meta etiketleri, site başlığı vs.) sıralamasını belirtebildiğimiz bir basamaklı yapıdır.

Boş bir web sayfasında “iskelet” olarak adlandırabileceğimiz HTML basama yapısı aşağıdaki gibidir:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Yukarıdaki örneğimizde <!DOCTYPE html> etiketi, dosyamızın HTML5 uyumlu bir web sayfası dosyası olduğunu tarayıcıya anlatmaktadır.
Ardından gelen <html lang=”tr”> etiketi ile de bu sayfanın dilinin Türkçe olduğu belirtilmiştir.

HTML dosyası iiskeleti

Temel olarak HTML sayfaları <html> ….. </html> etiket bloğu arasında oluşturulur. Bunların arasında bulunan <head> ….. </head> etiket bloğu sayfamızın header (kafa/baş) bilgilerini gireceğimiz, sayfadaki unsurların yüklenmesinden önce yapılacakları içeren script dosyalarını çalıştırabileceğimiz, sayfa ile ilgili biçimlendirme dosyalarını (CSS) çağırabileceğimiz bloktur. Temel mimari bu sayılan etiket blokları arasında oluşmaktadır.

Head bloğundaki META etiketleri gerek arama motorlarına gerekse tarayıcıya web dokümanı hakkında bir takım bilgiler verilmek üzere yazılır. <meta charset=”UTF-8″> şeklinde yazılmış etiketimiz, dokümanda kullanılan karakter setinin uluslararası set olan UTF-8 formatında olduğunu belirtmektedir. Bu meta etiketi sayfadaki karakterlerin bozuk görüntülenmesini önlemek amaçlıdır. Türkçe için uluslararası standart karakter seti ISO-8859-9 şeklindedir. Meta charset etiketinde UTF-8 yerine ISO-8859-9 yazarsak doküman karakter setini Türkçe yapmış oluruz.
Viewport isimli meta etiketimizde de sayfamızın mobil uyumluluğu ile ilgili ayarlar yapılmaktadır. Sayfanın ne kadar yakınlaştırılabileceği, genişliğin cihaza göre mi ayarlanacağı gibi unsurlar ayarlanabilmektedir.

Örneğimizdeki bir başka önemli etiket de <title> …. </title> etiketidir. Sayfamızın başlığını bu etiket içerisine yazmalıyız. Örneğin şu an incelediğiniz sayfada tarayıcının üst kısmında (başlık çubuğu / title bar) ” HTML ve Başlıca HTML Etiketleri ” yazmaktadır. Çünkü sayfa kodları içerisine <title> etiketi, bahsedilen başlığı (HTML ve Başlıca HTML Etiketleri) içermektedir.

<body> …… </body> etiketleri arasına (sayfanın gövde kısmına) da sayfamızda görüntülenmesini istediğimiz web nesnelerini yerleştirmeliyiz. Bir kutu (div), yazı (font), resim (img), paragraf (p) vb. etiketlerin tamamı body bloğuna yazılmalıdır. Sayfa yüklendikten sonra çalıştırılmasında sakınca olmayan JavaScript kodlarını da body etiketi kapanmadan hemen önce yani </body> öncesine yazmamız uygun olacaktır. Böylece sayfa yüklenmesi doğru ve hızlı ilerleyecektir.