HTML, XHTML and CSS XHTML
XHTML, EXtensible HyperText Markup Language’in kısaltmasıdır. XHTML neredeyse HTML 4.01’ın aynısıdır. XHTML, HTML’in daha sıkı ve açık bir versiyonudur. XHTML, HTML’in XML olarak tanımlanmasıdır. XHTML,W3C tarafından önerilmektedir.
Neden XHTML? Birçok web sayfası kurallı yazılmamış HTML içermektedir. <html> <head> <title>This is bad HTML</title> <body> <h1>Bad HTML </body>
XHTML, HTML ve XML’in bir bileşimidir. XML’de bütün ifadeler doğru şekilde tanımlanmalıdır. XML veriyi tanımlamak için, HTML ise veriyi göstermek için kullanılmaktadır. XML ve HTML’in güçlü yanları birleştirilerek geleceğin web dili olan XHTML ortaya çıkmıştır.
En Önemli Farklar XHTML elemanları doğru şekilde bağlanmalıdırlar. XHTML elemanlarının hepsi kapatılmalıdır. XHTML elemanları (tagları) küçük harflerle yazılmalıdırlar. XHTML elemanlarının bir kök elemanı bulunmalıdır.
Doğru Şekilde Bağlanmalıdırlar HTML’de <b><i>This text is bold and italic</b></i> XHTML’de <b><i>This text is bold and italic</i></b>
Doğru: <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> Hatalı: <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> <li>Milk</li> </ul>
Taglerin hepsi kapatılmalıdır Yanlış: <p>This is a paragraph <p>This is another paragraph Doğru: <p>This is a paragraph</p> <p>This is another paragraph</p>
Yanlış: A break: <br> A horizontal rule: <hr> An image: <img src="happy.gif" alt="Happy face"> Doğru: A break: <br /> A horizontal rule: <hr /> An image: <img src="happy.gif" alt="Happy face" />
Tagler küçük harflerle yazılmalıdır Yanlış: <BODY> <P>This is a paragraph</P> </BODY> Doğru: <body> <p>This is a paragraph</p> </body>
Bir kök elemanına ihtiyaç duyarlar Bütün XHTML elemanları <html> kök elemanına ihtiyaç duyar. <html> <head> ... </head> <body> ... </body> </html>
Bazı yazım kuralları Özellik (Attribute) isimleri küçük harflerle yazılmalıdır. Özellik isimleri tırnak içine alınmalıdır. Özellik isimleri tam yazılmalıdır. Name özelliği yerine id özelliği kullanılmalıdır. XHTML DTD’si zorunlu elemanları tanımlamaktadır
<table width="100%"> <table width=100%> Yanlış: <table WIDTH="100%"> Doğru: <table width="100%"> <table width=100%>
Yanlış: <input checked> <input readonly> <input disabled> <option selected> <frame noresize> Doğru: <input checked="checked" /> <input readonly="readonly" /> <input disabled="disabled" /> <option selected="selected" /> <frame noresize="noresize" />
Yanlış: <img src="picture.gif" name="pic1" /> Doğru: <img src="picture.gif" id="pic1" />
Zorunlu XHTML elemanları Bütün XHTML dosyaları DOCTYPE tanımını içermelidir. Ve <html>,<head>, <title> ve <body> taglarını bulundurmalıdır. <!DOCTYPE Doctype goes here> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title goes here</title> </head> <body> </body> </html>
<!DOCTYPE> Bir XHTML dosyası üç temel kısımdan oluşmaktadır. DOCTYPE tanımlaması <head> kısmı <body> kısmı <!DOCTYPE ...> <html> <head> <title>... </title> </head> <body> ... </body> </html>
Örnek bir XHTML dosyası <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>simple document</title> </head> <body> <p>a simple paragraph</p> </body> </html>
Document Type Definitions (DTD) DTD bir web sayfasının yazım kurallarını belirtmektedir. DTD, sayfada uygulanacak kuralları içermektedir. Üç tip DTD vardır STRICT TRANSITIONAL FRAMESET
XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Strict tipi, HTML’den vazgeçilen tagları içermemektedir.
XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> HTML’de vazgeçilen ve yeni tagleri desteklemektedir.
XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> HTML’de vazgeçilen ve yeni tagleri desteklemekte hem de frameleri içermektedir.