Belge Tipi Bildirimi / Diğer Temel Etiketler
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.Belge Tipi (DOCTYPE) Bildirimi
Üçü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.
Konuya eklenmiş linkleri görmek için kayıt olmalısınız.
| 1 2 3 4 5 6 7 8 9 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
Konuya eklenmiş linkleri görmek için kayıt olmalısınız.
"><html> <head> <title>Başlık</title> </head> <body> <p>Bu bir deneme yazısıdır.</p> </body> </html> |
Konuya eklenmiş linkleri görmek için kayıt olmalısınız.
| 1 2 3 4 5 6 7 8 9 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
Konuya eklenmiş linkleri görmek için kayıt olmalısınız.
"><html> <head> <title>Başlık</title> </head> <body> <p>Bu bir deneme yazısıdır.</p> </body> </html> |
Konuya eklenmiş linkleri görmek için kayıt olmalısınız.
| 1 2 3 4 5 6 7 8 9 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "
Konuya eklenmiş linkleri görmek için kayıt olmalısınız.
"><html> <head> <title>Başlık</title> </head> <body> <p>Bu bir deneme yazısıdır.</p> </body> </html> |
Ayrıca belirtmeliyim ki <!DOCTYPE html> ile <!doctype html> yazmanız arasında bir fark yoktur. Her iki şekilde de yazabilirsiniz.
Konuya eklenmiş linkleri görmek için kayıt olmalısınız.
| 1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <head> <title>Başlık</title> </head> <body> <p>Bu bir deneme yazısıdır.</p> </body> </html> |
<!-- ... --> (yorum) etiketi
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...
Konuya eklenmiş linkleri görmek için kayıt olmalısınız.
| 1 2 3 4 5 6 7 8 9 | <!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> |
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
<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...
Konuya eklenmiş linkleri görmek için kayıt olmalısınız.
| 1 2 3 4 5 6 7 8 9 | <!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> |
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.
<time> etiketi
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...
Konuya eklenmiş linkleri görmek için kayıt olmalısınız.
| 1 2 3 4 5 6 7 8 9 10 | <!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> |
Şimdi de çıktımıza bakalım...
Yarın saat 10:00'da toplantımız var.
Önümüzdeki pazartesi ise şirket yemeğinde olacağız.
