Bu dersimizde HTML'de "belge tipi bildirimi"nin ne olduğunu ve önemini kavrayacağız. Daha sonra diğer birkaç temel HTML etiketinin ne olduğunu ve ne işe yaradığını öğreneceğiz.
Üçüncü dersimizin son örneğinde sizden bir pekiştirme yapmanızı istemiştim. Dikkat ettiyseniz bu örneğin en başında <!DOCTYPE html> şeklinde bir HTML etiketi vardı. İşte şimdi bu etiketin ne olduğunu ve önemini öğreneceğiz.
tipi, diğer adıyla DOCTYPE oluşturacağımız web sayfalarında olmazsa olmaz bir bildirim zorunluluğudur. Bu etiket tarayıcının yaptığımız sayfanın ne olduğunu anlamasını sağlamaya yarar. Eğer <!DOCTYPE html> adlı bir etiketi oluşturdurduğunuz sayfanın en başına eklediyseniz tarayıcı oluşturduğunuz bu sayfanın bir web sayfası olduğunu anlayacak ve yazdığınız diğer kodları HTML'e göre yorumlayacaktır. Eğer bu etiketi eklemezseniz tarayıcınız Quirks Mode (Garip Mod) adlı bir formatta çalışacak ve oluşturduğunuz sayfayı kendi çabaları ile yorumlamaya çalışacaktır. Sonuç olarak, belge tipi bildirimi bir zorunluluktur ve oluşturduğunuz tüm web sayfalarının başında bu bildirim olmak zorundadır.
HTML5'ten önce Strict, Transitional ve Frameset adlı üç farklı belge tipi bildirimi vardı. Şimdi bunların kullanımlarını görelim...
Strict: Diğer belge tiplerine göre daha katı bir denetim sağlar. Kullanım dışı <font> elementi gibi elementleri içermez.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Başlık</title>
</head>
<body>
<p>Bu bir deneme yazısıdır.</p>
</body>
</html>
Transitional: En çok kullanılan belge tipi bildirimiydi. Strict'e göre daha esnektir ve bazı hataları göz ardı edebilir.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Başlık</title>
</head>
<body>
<p>Bu bir deneme yazısıdır.</p>
</body>
</html>
Frameset: Frame'lerle (çerçevelerle) yapılan web sayfalarını belirtmekte kullanılırdı.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Başlık</title>
</head>
<body>
<p>Bu bir deneme yazısıdır.</p>
</body>
</html>
HTML5 ile birlikte tüm bu uzun belge tipi bildirimleri ortadan kalktı. Artık tek yapmamız gereken sayfamızın başına, <html> etiketinden önce <!DOCTYPE html> yazmak. Bu şekilde tarayıcı bu bildirim tipini yorumlayacak ve sayfamızın bir HTML5 sayfası olduğunu anlayacaktır.
Ayrıca belirtmeliyim ki <!DOCTYPE html> ile <!doctype html> yazmanız arasında bir fark yoktur. Her iki şekilde de yazabilirsiniz.
<!DOCTYPE html>
<html>
<head>
<title>Başlık</title>
</head>
<body>
<p>Bu bir deneme yazısıdır.</p>
</body>
</html>
Kod yazarken yazdığımız kodların yanına ileride bu kodun ne olduğunu ya da neden kullanıldığını hatırlamak için yorumlar eklemek isteyebiliriz. Ya da başka biri bizim yazdığımız kodları okurken not bırakmak isteyebiliriz. Bunun için <!-- ... --> şeklinde yazılan yorum etiketini kullanmalıyız.
Şimdi aşağıdaki örneği inceleyelim...
<!DOCTYPE html>
<html>
<head>
<title>Başlık</title><!-- Site başlığı burada olacak -->
</head>
<body>
<p>Bu bir deneme yazısıdır.</p>
</body>
</html>
<title> etiketinin yanına "Site başlığı burada olacak" şeklinde bir not bıraktım. Şimdi bu kodların çıktısına bakalım...
Başlık
Bu bir deneme yazısıdır.
Görüldüğü gibi yazdığım yorum tarayıcı ekranıma yansımadı. Sayfanızın neresine yorum bırakırsanız bırakın yazdığınız bu notlar hiçbir zaman kullanıcılar tarafından görünmeyecktir. Sadece siz ve sizin yazdığınız kodları inceleyen kişiler bu notları okuyabilir.
<address> etiketi sayfa ya da site sahibi hakkında iletişim bilgilerini içermek için kullanılan bir etikettir. Eğer <body> etiketi içerisinde yazarsak sayfa sahibi hakkında iletişim bilgileri içermelidir. <article> etiketi içerisinde yazarsak ise yazdığımız makale hakkında iletişim bilgileri içermelidir. <article> etiketini size daha öğretmediğim için şimdilik bu konuda takılmanıza gerek yok.
Örneğimizi inceleyelim...
<!DOCTYPE html>
<html>
<head>
<title>Başlık</title>
</head>
<body>
<address>Tüm hakları saklıdır.<br />2013 deneme.com</address>
</body>
</html>
Çıktımıza bakalım...
Başlık
Tüm hakları saklıdır.
2013 deneme.com
<address> etiketi sitemizin footer kısmı olarak tabir edilen site bilgilerinin olduğu kısımda <small> etiketi ile birlikte kullanılırsa en uygun yazım biçimini elde etmiş oluruz.
Dilimizde "zaman" anlamına gelmektedir. Çok sık kullanılmaz. 24 saatlik bir zaman dilimini ya da gregoryan takvim zamanını belirtmek için kullanılır.
Örneğimize bakalım...
<!DOCTYPE html>
<html>
<head>
<title>Başlık</title>
</head>
<body>
<p>Yarın saat <time>10:00</time>'da toplantımız var.</p>
<p>Önümüzdeki <time datetime="2013-04-29">pazartesi</time> ise şirket yemeğinde olacağız.</p>
</body>
</html>
<time> etiketi kullanıcılar tarafından görülmez. datetime atfı ile birlikte kullanıldığında sunucu bu tarihi yorumlar ve programına ekler.
Şimdi de çıktımıza bakalım...
Başlık
Yarın saat 'da toplantımız var.
Önümüzdeki ise şirket yemeğinde olacağız.
Bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.