HTML Dersleri (1) : Yapı ve sayfa üstbilgi etiketleri

Dikkat: Bu yazının yazılma tarihinin üzerinden en az 60 gün geçmiş. İçerisindeki bilgiler güncelliğini yitirmiş olabilir. Yorumları ve güncellemeleri göz önünde bulundurarak yazıyı takip ediniz.

Doctype (Döküman kodlama türü)

Döküman türü, tarayıcıların, kodladığınız sayfanın ne olduğunu anlamasına yardımcı olur. Doctype, web standartlarına göre (w3c) zorunludur. Yani bir sayfanın türü belirtilmek zorundadır. Bu derslerde HTML kodlama üzerine yoğunlaştığımızdan "Geleneksel html türü" bizim işimizi görecektir. İleride doctype hakkında başka bir makalede bahsedeceğim.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

html etiketi

Tüm html kodlarının bulunması gereken blok bu bloktur.

head etiketi

HTML açılış etiketinden sonra sayfa bilgi etiketlerinin bulunması gereken bloktur. title, meta, style etiketlerini bu blok içerisinde yazmalıyız.

title etiketi (Başlık)

Tarayıcı penceresinin başlığında görüntülenen sayfa başlığını belirlemenizi sağlar.

meta etiketi

Sayfa bilgi değişkenlerini belirler. Sayfa hakkında birçok bilgiyi bu etiketle ayarlarız. Sayfa oluşturan programın adı, sitenin yazarı, sayfa hakkında anahtar kelimeler, sayfanın kısa tanımı, tarayıcı için özel ayarlar (sayfanın son kullanım tarihi vs) gibi çok fazla özellik ayarlanabilir. Bu ayarlamalardan bazıları;
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-9">
Sayfanın karakter kodlamasını Türkçe olarak ayarlamamızı sağlar. UTF-8 kullanmanızı öneririm, tüm yazı karakteri ailelerini içerir.
<meta http-equiv="Refresh" content="X" URL="http://">
Bulunulan sayfayı yönlendirir. Eğer URL="..." kısmı girilmezse bulunduğu sayfayı, yüklendikten X saniye sonra yeniden yükler. Eğer girilirse sayfa yüklendikten X saniye sonra belirtilen adrese yönlenir.
<meta http-equiv="keywords" content="kelime1, kelime2, kelime3 ...">
Sayfanın içeriğine ait anahtar kelimeleri belirler. Arama motorlarında bu anahtr kelimelere göre sayfa incelenir.

body etiketi (Sayfa kodları)

Bütün sayfa içeriğini bu blok içerisine yazın. Sayfa hakkında bazı görünüm ayarlarını da bu etiketin özniteliklerini ayarlayarak belirleyebiliriz. Bunlar;

bgcolor="RENK_KODU" : Sayfanın artalan rengini belirler.
background="RESIM_DOSYASI_ADRESI" : Artalan resmini belirler.
text="RENK_KODU" : Geçerli metin rengini belirler.
link="RENK_KODU" : Geçerli link rengini belirler.
(NOT : alink, aktif linkler. vlink, ziyaret edilmiş linkler)
topmargin="X" : Üstten kaç piksel boşluk bırakılıp sayfa içeriğinin başlayacağını belirler.
(NOT : left, right, bottom ile diğerleri de belirlenebilir.)

Bunların hepsi sayfanın stilleri ile ilgili özelliklerdir. Onun için bu öznitelikleri CSS ile ayarlamaya çalışın/alışın.

base etiketi

Sayfadaki linklerle ilgili geçerli çalışma tabanını belirler.
href="http://" parametresi eklenerek sayfadaki bütün linklerin o site üzerinde çalıştığını belirleyebilirsiniz.
target="main" parametresi ile sayfadaki bütün linklerin "main" çerçevesi içerisinde açılmasını sağlayabilirsiniz.

link etiketi

Dış bir dosya ile ilişki yaratır. Genel 2 özellik için kullanılır. Bunlar;
<link rel="stylesheet" type="text/css" href="stil_dosyasi.css">
şeklinde kullanıldığında stil.css stil dosyası ile sayfayı ilişkilendirir. Yani stil.css'deki stilleri sayfaya uygular.
<link rel="shortcut icon" href="favicon.ico">
Favori (bookmark) listenizde, masaüstü kısayolları gibi dosyalanmış sayfa kısayollarında sayfa hakkında simge belirlemenizi sağlar.

style, script ve noscript etiketleri

Sayfa için javascript kodu çalıştırabilmemizi sağlar. Günümzde javascript desteklemeyen browser programı neredeyse bulunmuyor. Ancak desteklemeyen veya desteği kapalı olan programlar için noscript etiketi kullanarak anlanılmayan kısımları geçmiş olursunuz.
Bu sayfanın kodlarını incelemenizi öneririm. Kaynak kodu açıp sayfa yapısı etiketlerinde verdiğim değerleri gözden geçirin, Stil ve javascript tanımlarıma bakmaya çalışın. Çok daha fazla fikir verecektir.
Hazırlayan : Mehmet Fatih YILDIZ

Bu döküman 30.02.2008 tarihinde yeniden düzenlenmiştir.

Yorumlar

Üye Resmi Hakan Karakaş
3 Nisan Perşembe ´08 21:21
Html'i yeni görmeye başladık derslerde. Hoca çok iyi biliyor ve anlatıyor. Bizim içinde bu gibi sitelerin yardım almamıza ve çalışmalarımıza yardımcı olduğu için emeği geçen herkese çok teşekkür ederim.
Üye Resmi ahmet koca
8 Nisan Çarşamba ´09 16:18
merhabalar
dersinizi yeni okumaya başladım.
yaralı bir makale olmuş.
teşekkürler.
Üye Resmi nizamettin yıldırım
11 Temmuz Cumartesi ´09 20:32
Böyle faydalı bilgileri bizlerle paylaştığınız için tşkler hocam.. Saygılar Hürmetler
26 Ekim Pazartesi ´09 15:28
<meta http-equiv="Refresh" content="X" URL="http://">
Bulunulan sayfayı yönlendirir. Eğer URL="..." kısmı girilmezse bulunduğu sayfayı, yüklendikten X saniye sonra yeniden yükler. Eğer girilirse sayfa yüklendikten X saniye sonra belirtilen adrese yönlenir.

demişsiniz

bende altaki kodu denemedim ama 3 sn sonrahttp://mfyz.com/ adresine gitmesi gerekmiyormu gene aynı sayfada yenileme yapıyor url yazsamda yazmasamda aynı işlemi yapıyorum

<meta http-equiv="Refresh" content="3" url="http://mfyz.com/">
26 Ekim Pazartesi ´09 21:43
ah çok yanlış yazmışım   :-)

<meta http-equiv="refresh" content="5;url=http://mfyz.com" />

gibi olmalı. Yani content'in içinde saniyeden sonra noktalı virgül var, ayrıca url'i tanımlayan değişkenin değer tanımlamasında çift tırnak yok.

Yazarken yanlış yazmışım, yakın zamanda düzelteceğim
Yeni Yorum *
İletişim Bilgileri
*
*
E-Posta adresiniz gösterilmeyecektir.
(unut)
Güvenlik Kodu *

Gönderiliyor