HTML/Giriş

HTML nedir?

HTML web sayfaları hazırlamak için kullanılan bir işaretleme dilidir, statiktir, istemci tarafında çalışır, tarayıcılar tarafından yorumlanır. W3C denen kâr gütmeyen kuruluş HTML için standartlar belirler, ancak bu standartlara uyup uymamak tarayıcıların inisiyatifine kalmıştır. Tarayıcılar bazı W3C spesifikasyonlarını desteklemezken bazen de kendileri yeni spesifikasyon eklemesinde bulunabilirler.

HTML dosyaları

Uzantısı html veya htm olan metin dosyalarına HTML dosyası denir. Dolayısıyla bir metin dosyası oluşturup uzantısını htm veya html yaparak bir tarayıcı tarafından yorumlanabilen bir HTML dosyası elde etmiş oluruz. HTML dosyaları HTML kodu içermelidir.

HTML dilinin yapısı

HTML belgelerinin içeriği genel olarak iki kısımdan oluşur:

Etiketler
Metin

Sayfada metin gösterilir; etiketler ise sayfada gösterilecek olan metni biçimlendirir (veya sayfaya resim eklemek gibi özel işleri yapar). HTML etiketlerinin genel biçimi şöyledir.

<etiket>Metin</etiket>

Burada etiket bir HTML etiketidir. Etiketin başlangıç imi <etiket> ile ve bitiş imi </etiket> ile gösterilir. Aradaki metin yazısı ise etiketten etkilenen içeriktir. Örneğin gerçek bir HTML etiketinden örnek verecek olursak:

<b>Koyu metin</b>

Burada etiketimiz <b>'dir ve görevi içeriğini koyu yapmaktır. Yani tarayıcı HTML belgesinde <b> ve </b> ile çevrelenmiş bir yazı gördüğünde bu yazıyı sayfada koyu gösterir.

Her HTML etiketinin çifti olacak diye bir şart yoktur. Bazı etiketlerin çifti olmayabilir. Örneğin:

<hr>

<hr> etiketi sayfaya yatay çizgi eklemek için kullanılır ve çifti yoktur.

Seçenekler

HTML etiketleri seçenek alabilir. Seçenekler etiketin etkisini özelleştirmek için veya etikete yapacağı iş hakkında ek bilgi vermek için kullanılır. Seçenekler HTML etiketlerine şöyle eklenir:

<etiket seçenek>Etiketin içeriği</etiket>

Gerçek bir HTML etiketinden örnek verecek olursak:

<hr noshade>

Burada noshade seçeneği sayfaya eklenen çizginin gölgesiz olmasını sağlar.

Seçenekler değer alabilir. Seçeneklere değerler şöyle eklenir:

<etiket seçenek="değer">

Gerçek bir HTML etiketinden örnek verecek olursak:

<hr width="100">

width seçeneği çizginin uzunluğunu belirtmek için kullanılır. Burada çizginin uzunluğu 100 piksel olacaktır.

Aslında HTML'deki seçeneklerin çoğu değer alan seçeneklerdir.
Bazen bir etiketin işlerlik gösterebilmesi bir seçeneğin (ve değerinin) mutlaka belirtilmesi gerekebilir. Bu seçeneklere zorunlu seçenek denir.
Seçeneklerin sırası önemli değildir.
HTML büyük-küçük harf duyarlılığı ile ilgili şu kurallara sahiptir:
- HTML etiketleri ve seçenekleri büyük-küçük harf duyarlılığına sahip değildir. Yani HTML etiket ve seçeneklerini büyük ya da küçük, ya da büyük-küçük karışık şekilde yazmakta özgürsünüz.
- Eğer değer veya etiket içeriği sayfada gözükecekse elbetteki büyük-küçük harf ayrımı önemli olacaktır. Çünkü metni büyük harflerle yazarsanız tarayıcı da ilgili içeriği sayfada büyük harflerle gösterecektir. Benzer şekilde metni küçük harflerle yazarsanız tarayıcı da ilgili içeriği sayfada küçük harflerle gösterecektir. Etiket içeriklerinin çoğu ve değerlerin bazıları sayfada gözükür.
- Eğer değer bir dosya adını belirtiyorsa üzerinde çalıştığınız HTML dosyanızı yükleyeceğiniz bilgisayarın işletim sistemi önemli hale gelmektedir. Linux ve türevi sistemlerde dosya isimlerinde büyük-küçük harf duyarlılığı vardır; ancak bu duyarlılık Windows sistemlerde yoktur. Bu yüzden yazdığınız HTML dosyasını işlatim sistemi Linux olan bir sunucuya yükleme olasılığınız varsa değerde belirtilen dosya ile değerin kendisi büyük-küçük harf durumu bakımından aynı olmalıdır. En garanti yöntem dosya isimlendirirken daima sadece küçük harfler kullanmak ve HTML dosyanızda bu dosyaları belirtirken de daima küçük harf kullanmanızdır. Bu sayede olası bir sorunun en başından önüne geçmiş olursunuz.
- Burada anlatılan büyük-küçük harf durumları İngiliz alfabesine göredir. Yani bu durumda <iframe> ile <İframe> HTML için tamamen farklı etiketlerdir.
Eğer bir etikete seçenek eklenmezse o seçenek için olan varsayılan değer kullanılır. Varsayılan değer tarayıcıdan tarayıcıya değişebilir. Ancak seçeneklerin çoğunda ortak bir varsayılanlık durumu vardır. Örneğin bütün tarayıcılar sayfanın arkaplan rengi HTML kodunda belirtilmemişse sayfanın arkaplan rengini beyaz yapar.
HTML, boşluk duyarlılığı bakımından şu kurallara sahiptir:
- HTML doğrudan veya dolaylı olarak aynı satırdaki iki metni ayıran birden fazla boşlukları tek boşluğa indirger.
- Eğer birden fazla boşluk iki metni ayırmıyorsa; yani boşluklar sayfanın veya satırın en başında veya en sonunda ise bu boşluklar yok sayılır.
- Tarayıcılar eğer bir satırın uzunluğu ekran genişliğinden büyükse otomatik olarak artan kısımları alt satıra kaydırır. Ancak burada bahsettiğimiz "satır" bu değildir. Tarayıcının yaptığı yeni satır oluşturma değil, metin kaydırmadır. Yani tarayıcıda birden fazla satırda gözüken bir içerik HTML kodu olarak aslında aynı satır olabilir.
Aslına bakarsanız HTML'de değerlerin Türkçe karakter veya boşluk içermiyorlarsa tırnak içine alınma zorunlulukları yoktur. Ancak bence daima tırnak içine almayı alışkanlık hâline getirin ve hep böyle kullanın.
HTML'de değerler çift tırnak arasına alınabileceği gibi tek tırnakla da (') çevrelenebilirler.

Bir HTML belgesinin genel yapısı

Bir HTML belgesinin genel yapısı şu şekildedir:

<html>
   <head>
      burası sayfanın baş kısmıdır.
   </head>
   <body>
      buraya sayfanın içeriği yazılır
   </body>
</html>

Bir HTML belgesi genel olarak iki kısımdan oluşur: baş ve gövde kısımları. HTML belgesinin baş kısmı <head> ve </head> etiketleri arasında belirtilir. Buraya sayfanın içeriği diyemeyeceğimiz kısımları yazılır, örneğin sayfanın başlığı burada belirtilir. Sayfanın gövde kısmı ise <body> ve </body> etiketleri arasına yazılır. Buraya sayfanın içeriği (sayfada ne gözükmesini istiyorsak) yazılır.

XHTML

XHTML, HTML'in daha katı kurallara sahip olan bir formudur. HTML, kuralları son derece esnek olan SGML üzerine kurulmuştur. Halbuki XHTML kuralları daha katı olan XML üzerine kuruludur. Aslına bakarsanız XHTML ile HTML arasındaki fark sadece etiket/seçenek/değerlerin kullanımında ortya çıkar. Yani XHTML bize yeni bir etiket/seçenek/değer sunmaz. Sadece HTML'in XML kurallarına uyacak şekilde yeniden düzenlenmiş hâlidir. XHTML, HTML'den farklı olarak aşağıdaki kurallara sahiptir:

Bütün etiket ve seçenekler tamamen küçük harfle yazılmalıdır. Eğer değerler sayfada görünmeyecekse veya bir dosya adı belirtmiyorsa tamamen küçük harflerle yazılmalıdır.
Bütün değerler mutlaka tırnaklarla kapatılmalıdır.
XHTML'de kapanmayan etiketlere izin verilmez. HTML'de kapanmayan etiketler XHTML'de <etiket /> şeklinde kullanılmalıdır.
Sayfanın başında mutlaka bir DTD bildirimi olmalıdır.
<html> etiketine xmlns seçeneği eklenmeli ve kullanılacak isim alanı bu seçeneğe değer olarak verilmelidir.

Bu kitapta örnekler XHTML kullanılarak verilecektir.

HTML5

HTML5, HTML'in yeni versiyonudur, ancak henüz tarayıcılar tarafından % 100 destek gördüğünü söylixsueyemeyiz. HTML5'in getirdiği yeni etiket/seçenek/değerlerin 2014 gibi tarayıcılar tarafından tam destek görmesi beklenmektedir. Bu kitapta HTML5'in getirdiği yeni etiket/seçenek/değerlerden günümüzde tarayıcılar tarafından geniş destek görenleri gösterilecektir.