META TAG'lar ve HEAD Verilerini Hazırlamak Kaliteli hazırlanmış bir sitenin iskeleti şu şekildedir:
| <HTML> <HEAD> <TITLE>...</TITLE> </HEAD> <BODY> ... </BODY> </HTML> |
Peki sitemizin <HEAD> ile başlayan tagından sonra </HEAD> yazan yere kadar hangi bilgileri gireriz. Bu derste bu konuda biraz çalışma yapacağız.
Öncelikle sitemizin en önemli öğesi olan site başlığının yazılması var. Bunu TITLE tagının arasına yazarız ve kullanıcı bunu browser (tarayıcı) ın en üstünde ve görev çubuğunda görecektir.
| <TITLE>BAŞLIK BURAYA GELECEK!</TITLE> |
Sonrasında META TAGLAR yerleştirilir. Bunlardan önemli olanlar şu şekildedir:
CHARSET
Yazı kod sayfasıdır. Bu sizin HTML Belgesinde kullandığınız yazının dili hakkında tarayıcıya bilgi vermektedir. Aşağıdaki iki satır Türkçe dil kodlaması ile yazıldığını belirtmemizi sağlar. Bu şekilde Türkçe karakterler sorunsuz görüntülenecektir.
| <META HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-9"> <META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1254"> <META HTTP-EQUIV="Content-Language" CONTENT="TR"> |
Eğer hazırladığımız sayfa ingilizce ise bunu belirtmek için aşağıdakini yazmalıyız.
| <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <META HTTP-EQUIV="Content-Language" CONTENT="en-GB"> |
Hazırlayanla ilgili Bilgiler
3 meta tag isteğe bağlı kullanabiliriz. Aşağıda örnek var.
| <META HTTP-EQUIV="Author" CONTENT="muratelic"> <META HTTP-EQUIV="Copyright" CONTENT="Programlama Türkiye, Q-Basic Türkiye"> <META HTTP-EQUIV="Reply-to" CONTENT="muratelic@hotmail.com"> |
Bu Taglar özellikle editör kullanarak HTML belgesi hazırlayanlarda otomatik olarak bulunur. Örneğin 'Author' tagı Netscape Navigatorlerin editörü içindir. Bu bir çeşit tescildir hazırlayan hakkında bilgi sunar. Başka bir fonksiyonu yok.
Site Hakkında Bilgi Vermek
Bunlar oldukça önemli taglardır. Site hakkında bilgi verir arama motoruna.
| <META NAME="Description" CONTENT="Programlama Türkiye! Sitede bazı programlama dilleri hakkında bilgiler bulabilirsiniz."> <META NAME="Keywords" CONTENT="programlama, qbasic, vbasic"> |
Description bölümü açıklama kısmıdır. Sitenizin başlığını tekrar yazabileceğiniz gibi açıklama da ekleyebilirsiniz. Keywords kısmı ise arama motorlarında arandığında bulunabilecek kelimelerdir. Bu bölümde oldukça önemli. Aralara virgül (,) koyarak ne yazılsa ve arama motorunda listelense diye düşündüklerinizi yazabilirsiniz.
Arama Botlarına Bilgi Vermek
Arama motorları Crawl/Spider yöntemleri ile sitenizi taramaktadır. Bu tarama sırasında siz eklediğiniz bu taglarla ona yardımcı olabilir ya da engelleyebilirsiniz.
| <META NAME="Robots" CONTENT="INDEX, FOLLOW"> <META NAME="Revisit-After" CONTENT="7 days"> |
Revisit-After ise ona sonra tekrar gel gibi bir komutta bulunmaktır. Örneğin 7 days, haftaya tekrar gel demek :)
Sitenin Çevrimdışı Gösterilmemesi
Bunun için aşağıdaki bölümleri eklemeliyiz. Bu şekilde sitemiz çevrimdışı çalışmayacak şekilde ayarlanacak ve çevrimdışı dosyalarda bulunmayacaktır.
| <meta name="Pragma" content="no-cache"> <meta http-equiv="Expires" content="Mon, 06 Jan 1990 00:00:01 GMT"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Expires" content="-1"> <meta http-equiv="Cache-Control" content="must-revalidate"> |
Hepsini de kullanabilirsiniz ama eğer çevrimdışı çalışmamasını istiyorsanız sayfanın no-cache yazanı eklemeniz yeterli olacaktır.
Sayfanın Yenilenmesini Sağlamak
Bir süre sonra sayfanın otomatik yenilenmesini ya da farklı bir sayfaya yönlenmesini bu şekilde belirtiriz. Aşağıdaki 60 yazan örnek 1 dk sonra sayfayı otomatik yenileyecektir. Ama eğer başka bir sayfaya yönlendireceksek bu süre sonunda URL ile yolu belirterek o sayfanın yüklenmesini sağlayabiliriz.
| <META HTTP-EQUIV="Refresh" CONTENT="60"> <META HTTP-EQUIV="Refresh" CONTENT="3;URL=http://www.some.org/some.html"> |
Linklerin gideceği yeri belirlemek
Aşağıdaki ifade ilgili sayfada açılacak bağlantıların _top frame'i içinde görüntülenmesini sağlayacaktır. Eğer Frame Kullanıyorsanız ya da linklerin başka sayfada açılmasını sağlamak istiyorsanız kullanabilirsiniz.
| <META HTTP-EQUIV="Window-target" CONTENT="_top"> |
Sayfa Geçiş Efektleri
Microsoft DHTML kütüphanesine özel sayfa geçiş efektlerini Meta Tag kullanarak yapabiliriz. Bunlar görsel olarak sayfa geçişlerini güzelleştirmektedir.
| <!-- Giriş yapıldığında daire belirir --> <meta http-equiv="Page-Enter" content="revealTrans(Duration=3.0,Transition=2)"> <!-- Sayfadan çıkarken ekran sola kayar --> <META http-equiv="Page-Exit" CONTENT="progid:DXImageTransform.Microsoft.Slide(Duration=2.500,slidestyle='HIDE')" /> |
Daha fazla seçenek için Microsoft MSDN Library DHTML sayfası'nı ziyaret edebilirsiniz.
Web Sayfası Standartlarına Uymak
|
|
Hazırladığınız belge standartlara uygun mu? Bunu test etmek için buraya tıklayın. Eğer uygunsa yandaki simgeyi sitenize yerleştirin. Bu kurallara uygun bir web sayfası olduğunu gösterecektir. Yalnız kontrol ederken HTML yani başlangıç tagının üstüne aşağıdaki yeri eklemek gerekiyor. Bu belgenizin türünü bildiriyor. |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
Bu bilgi Front Page, Dreamweaver vb. programlar tarafından otomatik eklenmektedir. Ama eğer HTML yi not defteri kullanarak sıfırdan yazıyorsanız eklemenizde fayda var.
