HTML ve XHTML
XHTML de aslında, bir HTML dökümanıdır fakat XML kurallarına uygun olarak yazılmıştır. (XML; başka bir yazılım dilidir.)
Aslında XHTML korkulacak bişe değil. HTML dökümanınızı şimdiye kadar öğrendiğimiz kurallara sadık kalarak yazarsak olur size bir XHTML dökümanı...
XHTML Nedir?
- XHTML; EXtensible HyperText Markup Language kelimelerinin kısaltılmışıdır. Yani esnetilebilir (extensible) HTML demektir.
- HTML ile neredeyse aynıdır.
- Kuralları HTML'e göre daha katıdır.
- Tıpkı bir XML dökümanı yazıyormuş gibi yazılır.
- XHTML, bütün önemli tarayıcılarda sorunsuz çalışır.
Neden XHTML?
İnternetteki bir çok sayfa "kötü" HTML kodlarıyla oluşturulmuştur.
Mesela aşağıda kötü bir html kodu vardır ve bir çok tarayıcıda da sorunsuz çalışır:
<html>
<head>
<title>bu kötü bir HTML</title>
<body>
<h1>Kötü HTML
<p>Bu bir paragraf
</body>
<head>
<title>bu kötü bir HTML</title>
<body>
<h1>Kötü HTML
<p>Bu bir paragraf
</body>
Dikkat ettiysek, yukarıdaki html dökümanında; <html> ve <head> tagları kapatılmamıştır yani HTML kurallarına uyulmamıştır. İşte bu yüzden, bu bir HTML dökümanıdır ama XHTML değildir.
Günümüzde, farklı tarayıcı teknolojileri ile karşı karşıyayız. Kullanıcılarımız, web sayfalarımızı, sadece bilgisayarlarından değil, tabletlerden veya akıllı telefonlardan da görmek isteyebilmektedir. Bir çok akıllı cihazın tarayıcısı da kötü kodlanmış bir HTML sayfasını yourmlamakta güçlük yaşamaktadır.
XML, kusursuzca kodlamanın gerektiği bi kodlama dilidir ve HTML'e benzer.
XML ve HTML'in güçlerini birleştirdiğimizde XHTML ortaya çıkar.
XHTML'in HTML'den En Önemli Farkları
- DOCTYPE belirtilmesi zorunludur: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - <html> tagının içerisine bir xmlns özelliği atamak zorunludur: <html xmlns="http://www.w3.org/1999/xhtml">
- <html>, <head>, <title>, and <body> tagları ve kapanmaları zorunludur.
- İçiçe konulmuş kutular gibi html tagları da uygun şekilde iç içe yazılmaldır. Buna uygun yuvalanma denir. İçteki html elemanının tagı kapatılmadan dışındaki kapatılmamalıdır. (İçiçe konulmuş kutuların hepsinin kapağını kapatabilmek için en içten dışa doğru kapatmak zorundayız. Örnek: <b><i>Burada italik ve kalın bir yazı vardır</i></b>)
- Bütün elemanların kapatma tagları (</html> </body> </h1>...) yazılmalıdır.
- Bütün elemanlar, küçük harflerle yazılmalıdır.
- Bütün dökümanlar, tek bir kök dizininde olmalıdır.
- Elemanlara atadağımız özellikler (attribute) (color, width, background-color...) küçük harflerle yazılmalıdır.
- Elemanlara atadığımız özelliklere verdiğimiz değerler (value), tırnak içine alınmalıdır. (color="red" gibi...)
- Elemanlara atadığımız özelliklerde (attribute), minimizasyon (kısadan ifade etme) yasaklanmıştır.
İşte bu kurallara uygun olarak yazdığımız her bir HTML dökümanı, otomatikman oluyor size bir XHTML dökümanı...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dökümanın başlığı</title>
</head>
<body>
burada sayfa içeriği bulunur
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dökümanın başlığı</title>
</head>
<body>
burada sayfa içeriği bulunur
</body>
</html>
XHTML Elemanları Uygun Bir Şekilde Yuvalanmalıdır
Bu yanlış: Önce, içerideki eleman kapatılmalıdır.
<b><i>This text is bold and italic</b></i>
Bu doğru:
<b><i>This text is bold and italic</i></b>
XHTML Elemanları Mutlaka Kapatılmaldır
Bu yanlış: Bütün elemanlar kapatılmalıdır.
<p>Bu bir paragraf
<p>Bu da başka bir paragraf
<p>Bu da başka bir paragraf
Bu doğru:
<p>Bu bir paragraf</p>
<p>Bu da başka bir paragraf</p>
<p>Bu da başka bir paragraf</p>
Boş Elemanlar Da Kapatılmalıdır
Bu yanlış: Boş elemanlar da kapatılmalıdır.
Alt satır: <br>
Yatay çizgi: <hr>
Resim: <img src="mutlu.gif" alt="Mutlu surat">
Yatay çizgi: <hr>
Resim: <img src="mutlu.gif" alt="Mutlu surat">
Bu doğru:
Alt satır: <br />
Yatay çizgi: <hr />
Resim: <img src="mutlu.gif" alt="Mutlu surat" />
Yatay çizgi: <hr />
Resim: <img src="mutlu.gif" alt="Mutlu surat" />
XHTML Elemanları Küçük Harflerle Yazılmalıdır
Bu yanlış: Elemanların taglarında, küçük harfler kullanılmalıdır.
<BODY>
<P>This is a paragraph</P>
</BODY>
<P>This is a paragraph</P>
</BODY>
Bu doğru:
<body>
<p>Bu bir paragraftır</p>
</body>
<p>Bu bir paragraftır</p>
</body>
XHTML Elemanlarının Özellik (attribute) Adları Küçük Harf Olmalıdır
Bu yanlış: Elemanların özelliklerinde küçük harfler kullanılmalıdır.
<table WIDTH="100%">
Bu doğru:
<table width="100%">
Özelliklere Atanan Değerler Tırnak İçinde olmalıdır.
Bu yanlış: Elemanların özelliklerine atanan değerler tırnak içinde olmalıdır.
<table WIDTH=100%>
Bu doğru:
<table width="100%">
Özellik Minimizasyonu Yasaklanmıştır
Bunlar yanlış:
<input type="checkbox" name="vasita" value="araba" checked />
<input type="text" name="soyad" disabled />
Bunlar doğru:
<input type="checkbox" name="vasita" value="araba" checked="checked" />
<input type="text" name="soyad" disabled="disabled" />
HTML Dökümanı XHTML Dökümanına Nasıl Dönüşür?
- Her sayfanın en üstüne bir XHTML <!DOCTYPE> elemanı eklenir.
- Her sayfanın <html> tagının içine bir xmlns özelliği eklenir.
- Bütün taglar ve özellikleri küçük harfe dönüştürülür.
- Boş elemanlar kapatılır.
- Bütün özelliklerin değerleri tırnak içine alınır.
Hiç yorum yok:
Yorum Gönder