Web Site Tasarım Kodları (HTML)
HTML
Tüm World Wide Web dokümanları HTML adı da verilen Hypertext Markup Language kullanılarak yaratılmıştır. Bu dil, bir dokümanı gizli etiketlerle işaretleyerek Web dokümanları yaratmanızı sağlar. Bu HTML etiketleri, bir Web dokümanının sunumunu, yapısını, etkileşimini belirler; bunlar < ve > karakterleriyle çevrilmiştir. Bunun bazı örnekleri paragraflar için
etiketi, satır kesmesi için
etiketi ve resimler için <IMG> etiketi olabilir.
Bir Web dokümanını tarayıcınıza yüklerken bu etiketlerin hiçbirini görmemenize karşın, bunların doküman üzerinde yarattıkları etkilerin tümünü görebilirsiniz.
Muhtemelen çoğu zaman, herhangi bir HTML editörü kullanırken Web sayfalarınız bu HTML etiketlerine hiç bakmadan yaratacaksınız. Çoğu kişi, HTML'i geri planda kullanarak, dilin karmaşık kısımlarını gizleyen HTML editörleri ile çalışmanın daha kolay olduğunu düşünüyor. Ama hangi editörü kullanırsanız kullanın sonuçta kaynak koda bir göz attığınızı fark edeceksiniz. Yani profesyonelleşme yolunda ilerlemek istiyorsanız eninde sonunda HTML kodlamasına girmeniz gerekecek.
Bu yazımızda, bir Web sayfasında karşınıza çıkabilecek tüm HTML etiketlerinin amacını ve işlevini bulacaksınız. Bu, World Wide Web Consortium'un tanımladığı en güncel sürüm olan HTML 4.0'ı kapsıyor.
HTML 4.0'daki etiketlerin çoğu aynı niteliklere (attribute) sahiptir. Aşağıdaki listede bunların en sık kullanılanlarını görüyorsunuz:
accesskey="karakter": Form denetimlerinde ve (anchor) etiketlerinde, doküman öğesine erişim için kullanılabilen tek karakter.
align="metin": Bir dokümanın bir kısmındaki bilginin hizalanması.
alt="metin": Resimleri, formları, nesneleri ve bir dokümanın diğer kısımlarını tanımlayan alternatif metin.
char="karakter": Bir tablonun içeriği hizalanırken, bir hizalama ekseni olarak davranan karakter.
charoff="sayı": Tablo içeriğini hizalarken, eksen karakterinden itibaren bırakılacak boşluk sayısı.
class="metin": Doküman öğesine atanmak üzere birbirinden boşluklarla ayrılmış bir veya daha fazla sınıf ismi.
dir="metin": Metin ve tabloların doğrultusu: "ltr" (left-to-right, yani soldan sağa) veya "rtl" (right-to-left, yani sağdan sola).
disabled: Bir form üzerindeki denetimi kullanıcı girdisini idare edemeyeceği şekilde iptal eden bir nitelik.
id="metin": Doküman öğesine verilecek isim.
lang="metin": Bir doküman öğesinin niteliklerinde ve içerdiği metinde kullanılan dil.
name="metin": Doküman öğesi için bir isim.
onblur="script": Bir doküman öğesi kullanıcı girişi odağını yitirdiğinde olan bir olay.
onchange="script": Bir doküman kullanıcı girişi odağını yitirdiğinde ve değeri odaktayken değiştirilen bir doküman öğesi.
onclick="script": Kullanıcı doküman öğesine fareyle tıkladığında olan bir olay.
ondblclick="script": Kullanıcı doküman öğesi üzerine fareyle çift tıkladığında olan bir olay.
onfocus="script": Bir doküman öğesi, kullanıcı girişi odağını aldığında olan bir olay.
onkeydown="script": Bir tuş basıldığında olan bir olay.
onkeypress="script": Bir tuşa basılıp bırakıldığında olan bir olay.
onkeyup="script": Bir tuş bırakıldığında olan bir olay.
onload="script": Tüm doküman veya bir frameset'teki tüm çerçeveler yüklendiğinde olan bir olay.
onmousedown="script": Fare doküman öğesi üzerindeyken fareyle tıkladığında olan bir olay.
onmouseout="script": Fare, bir doküman öğesi üzerindeyken o öğeden uzaklaşırken olan bir olay.
onmouseover="script": Fare imleci bir doküman öğesi üzerine getirildiğinde olan bir olay.
onmousemove="script": Fare imleci bir doküman öğesi üzerindeyken hareket ettirildiğinde olan bir olay.
onmouseup="script": İmleç bir doküman öğesi üzerindeyken kullanıcı fare öğesini bıraktığında olan bir olay.
onreset="script": Bir formdaki tüm kontroller resetlendiğinde olan bir olay.
onselect="script": Bir metin işleme kullanıcı kontrolü seçildiğinde olan bir olay.
onunload="script": Bir doküman bir pencere veya çerçeveden atıldığında olan bir olay.
readonly: Bir form kontrolündeki bir değerin değiştirilemeyeceğini belirten bir nitelik.
style="metin": Bu bağımsız doküman öğesi için stil bilgisi.
tabindex="sayı": Doküman öğesinin sekme sırasındaki konum.
target="metin": Bir dokümanın içinde açılması gereken çerçevenin adı.
title="metin": Bir doküman öğesi hakkında açıklayıcı metin.
usemap="URI": Bir imagemap'in doküman öğesiyle ilişkilendirilecek URI'si, bunun mevcut öğesinin name niteliğine uyması gerekir.
valign="metin": Tablo hücreleri içindeki bilginin dikey hizalaması
HTML
Etiketler
Bu bölümde, HTML'nin 4.0 versiyonunun bir parçası olan etiketlerin açıklamalarını göreceksiniz. Burada etiketlerin listelenmesinde büyük harfler kullanılmaktadır. Geleneksel olarak, bu etiketlerin büyük veya küçük harfle yazılması önemli değil, ancak W3C'nin gelecekteki tanımlarında etiketlerin çoğunda sadece küçük harflerin kullanılması gerekebilir ( burada gördüğünüz tek istisna). Yani, HTML kodlarken, etiketleri küçük harflerle yazmalı veya kendinizi bunları birkaç yıl içinde değiştirmeye hazırlamalısınız.
Amacı: Bu etiket bir dokümanın ilk satırı olarak görülür ve kullanılan HTML versiyonunu belirtir.
Başlangıç Etiketi: Gerekli
Bitiş Etiketi: İzin verilmez
Nitelikler: Yok
Eski Nitelikler: Yok
Diğer Nitelikler: Yok
Aşağıdaki örnekte üç etiketi kullanılmaktadır:
Bu etiketlerin her biri, bir URI içerir. Bu URI'lerin dosya adları sırasıyla strict.dtd, loose.dtd ve frameset.dtd. Bu isimler, dokümandaki HTML desteğinin seviyesini aşağıdaki şekilde tanımlar:
Strict: Doküman eski hiçbir şeyi ve çerçeveleri kullanmaz.
Loose: Doküman, dilin görsel sunumla ilgili bazı eski öğelerini kullanır.
Frameset: Doküman, bir önceki düzeydekiyle aynı eski öğeleri kullanır ve ayrıca çerçeveler içerir.
İdeal olarak, Strict 'ın kullanılması gerekir, çünkü bu HTML 4.0'la tam olarak uyumludur. Loose kullanmanın tek nedeni, Style Sheet'ler gibi sunuyla ilgili bazı HTML 4.0 öğelerinin henüz Web tarayıcısı geliştiricileri tarafından tam olarak desteklenmemesidir.
Amacı: Bu etiket bir yer imini (anchor) gösterir: Bu, World Wide Web'deki başka bir kaynakla ilişkili bir doküman parçasıdır. Bu aynı dokümanın iki kısmı arasında bir ilişki yaratmak için de kullanılabilir.
Başlangıç Etiketi: Gerekli
Bitiş Etiketi: Gerekli
Özel Nitelikler:
coords="metin": Bir imagemap alanının yer imiyle (anchor) ilişkili geometrik şeklinin koordinatları.
name="metin": Yer iminin ismi.
href="URI": URI'i tarafından belirtilen, yer iminin ilişkilendirilmesi gereken Web üzerindeki bir kaynak.
hreflang="metin": Bir href niteliği tarafından belirtilen kaynağın dili.
type="isim": Web üzerinde ilişkili kaynağın içerik tipi.
rel="bağ_tipi": Geçerli dokümanın Web üzerindeki ilişkili kaynakla ilişkisinin tipi.
rev="bağ_tipi": Web üzerindeki ilişkili kaynağın geçerli dokümanla ilişkisi.
shape="metin": Yer imiyle ilişkili bir imagemap alanının geometrik şekli.
charset="metin": Web üzerindeki ilişkili kaynağın karakter kümesi
Eski Nitelikler: Yok
Diğer Nitelikler: accesskey, class, dir, id, lang, onblur, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, tabindex, target, title
�
Amacı: Bu etiketin içinde kısaltma olan bir metin yer alır.
Başlangıç Etiketi: Gerekli
Bitiş Etiketi: Gerekli
Özel Nitelikler: Yok
Eski Nitelikler: Yok
Diğer Nitelikler: class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title
�
Amacı: Bu etiketin içinde sözcüklerin baş harflerinden oluşan bir kısaltma yer alır.
Başlangıç Etiketi: Gerekli
Bitiş Etiketi: Gerekli
Özel Nitelikler: Yok
Eski Nitelikler: Yok
Diğer Nitelikler: class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title
�
Amacı: Bu etiket, tüm dokümanın veya dokümanın belirli bir kısmının yazarının irtibat bilgilerini içerir. Web tarayıcılarının çoğu, bu bilgiyi diğer yazılardan farklı bir tarzda gösterir.
Başlangıç Etiketi: Gerekli
Bitiş Etiketi: Gerekli
Özel Nitelikler: Yok
Eski Nitelikler: Yok
Diğer Nitelikler: class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup
Bu etiket artık kullanılmamaktadır. Günümüzde tarayıcıların çoğu Java applet'leri için etiketini destekler. Java Plug-In'i durumunda, diğer plug-in'lerde olduğu gibi etiketi kullanılabilir.
Amacı: Bu etiket, bir imagemap üzerinde bir bağla ilişkilendirilmesi gereken bir alanı belirtir.
Başlangıç Etiketi: Gerekli
Bitiş Etiketi: İzin verilmez
Özel Nitelikler:
href="URI": Imagemap'in ilişkilendirilmesi gereken bir URI.
shape="metin": Alanın geometrik şekli
coords="metin": Geometrik şeklin koordinatları
nohref: Bu nitelik alanın kendisiyle ilişkili bir bağlantıya sahip olmadığını belirtir.
Eski Nitelikler: Yok
Diğer Nitelikler: accesskey, alt, class, dir, id, lang, name, onblur, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, tabindex, target, title
HTML
�
Amacı: Bu etiket, koyu gösterilmesi gereken metni içerir. Bu etiket eskimiş değildir, ancak HTML 4.0 tanımlarında daha iyi bir alternatif olarak Style Sheet kullanımı tavsiye edilmektedir.
Başlangıç Etiketi: Gerekli
Bitiş Etiketi: Gerekli
Özel Nitelikler: Yok
Eski Nitelikler: Yok
Diğer Nitelikler: class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title
Amacı: Bu etiket, dokümanın temel URI'sini açık olarak tanımlamakta kullanılır. Temel URI, dokümandaki tüm izafi URI'lerle bir arada kullanılarak Web üzerindeki bir kaynağı tam adresi oluşturulur.
Başlangıç Etiketi: Gerekli
Bitiş Etiketi: İzin verilmez
Özel Nitelikler:
href="URI": Dokümanın temel URI'si.
Eski Nitelikler: Yok
Diğer Nitelikler: target
�
Bu etiket artık kullanılmamaktadır.
�
Amacı: Bu etiket, normal yazı tipine göre daha büyük gösterilmesi gereken metni içerir. Hâlâ kullanılmaktadır, ancak HTML 4.0 tanımında daha iyi bir alternatif olarak Style Sheet kullanımı önerilmektedir.
Başlangıç Etiketi: Gerekli
Bitiş Etiketi: Gerekli
Özel Nitelikler: Yok
Eski Nitelikler: Yok
Diğer Nitelikler: class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title
�
Amacı: Bu etiket, doküman görüntülenirken kendi paragrafında görünmesi gereken bir alıntı metin bloğunu içerir. Daha kısa alıntılar etiketinin içinde kullanılabilir.
Başlangıç Etiketi: Gerekli
Bitiş Etiketi: Gerekli
Özel Nitelikler:
cite="URI": Alıntının kaynağı hakkında bilgi içeren bir dokümanın adresi.
Eski Nitelikler: Yok
Diğer Nitelikler: class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title
etiketi, bir alıntı söz konusu olmasa da, bir metin bloğuna girinti vermek için yaygın olarak kullanılmaktadır. Bu kullanım tarzı, HTML 4.0 ile eskimiştir ve aynı etkinin sağlanması için Style Sheet kullanımı önerilir.
�
Amacı: Bu etiket, doküman Web tarayıcısı gibi bir program tarafından yüklendiğinde görünmesi gereken doküman içeriğini içerir. Pek çok sunu niteliği artık kullanılmamakta, aynı iş için
www.netcity.com.nu
