Web Sayfaları İçin Doğru Doküman Türü (DOCTYPE) Tanımlaması Yapmak

Birçok web tasarımcının atladığı ya da görmezden geldiği “Doküman Türü” tanımlamalarının neden önemli olduğu ve doğru yapılması gerektiğini bu makalede inceleyeceğiz.

Dokümanlar Ana Sayfası / Web teknolojileri / Web tasarım ve geliştirme

Bu doküman toplam 1 sayfadan oluşmaktadır. Gösterilen 1/1 İlk sayfadasınız

Web sayfanızı hazırladınız, modern teknolojiler doğrultusunda CSS ve (X)HTML ile donattınız ve DOM (Document Object Model) standartlarına uygun olarak yenilediniz peki sırada ne var. Bunca zamandır uğraştığınız üzerinde çalıştığınız şeyler verdiğiniz bir yanlış karar ile heba olabilir ki bu hata; muhtemelen yanlış tanımlanmış (ya da tanımlanmamış) doküman türü belirtimi olarak tabir edebileceğimiz "DOCTYPE" olduğunu tahmin etmek o kadar da zor değil. İyi ama nedir bu "DOCTYPE" ?

Genel bir bilgi vermek gerekirse; web sayfalarınızın tarayıcı tarafından nasıl yorumlanacağını başka bir değişle nasıl görüntüleneceğini ve bu görüntüleme işlemi sırasında hangi standart ve tanımlamaları (DTD: Document Type Definitions / Doküman türü tanımlamaları) kullanacağını belirten ve (X)HTML dokümanlarının en üst kısmında yer alan ifadelerdir diyebiliriz. Biliyorum uzun ve karışık bir cümle oldu ama bu tanım "DOCTYPE" bilgisinin işlevini anlatmak için ancak bu şekilde yapılabiliyor. Kısacası sayfanın nasıl görüntüleneceğini belirliyor.

İçinizde "tarayıcı aynı sayfayı ne kadar farklı yorumlayabilir ki?" sorusunu soranlarınız olabilir bunu açıklayabilmek için tarayıcıların gelişimine kısaca bir göz atmamız ve günümüz modern tarayıcılarına ulaşana kadar ne tür değişimler olduğunu anlatmamız gerekecek.

Kısaca Tarayıcı Tarihi ve Uyumluluk sorunsalı

2000'li yılların başından itibaren inanılmaz bir hızla büyüyen ve gelişen Bilişim ve Internet sektörü ve bu sektörün kilit noktası olan "web sayfaları" bugünlere gelene kadar birçok badire atlattı diyebiliriz. 1997'nin ikinci yarısından itibaren kızışan web tarayıcı piyasası; kullanıcıları çekmek ve rakiplerine kaptırmamak için tarayıcı üreticilerini olmaması gereken şeyleri yapmaya yöneltti. Üreticiler yeni kullanıcılar kazanabilmek için "Olağanüstü" olarak adlandırdıkları özellikler ve HTML dokümanlarını görüntüleme teknikleri geliştirerek sayfa içeriği ne olursa olsu son kullanıcıya elle tutulur bir görünüm vermeye çalıştılar. 1998-99 döneminde doruk noktasına ulaşan bu "Tarayıcı Savaşı" döneminin iki büyük rakibi olan Netscape Navigator 4 ve Internet Explorer 4 arasında büyük çekişmelere tanık oldu. Bu rekabet, dönemin Bilişim ve Bilgisayar Kültürü dergileri tarafından kapak konusu yapılacak denli önem kazanmıştı.

Bu iki farklı tarayıcı birbirlerinden çok farklı bir doküman obje metotlarına sahiptiler ve HTML dokümanlarının birbirlerinden çok farklı bir şekilde yorumluyorlardı. Bu fark iki tarayıcı da farklı görünen tasarımlar, ara boşluklar (whitespace), anlamsız genişlemeler ve CSS yorulmada hatalar oluşmasına kadar dayandı. Nitekim bu farklılıklar web sayfası yapımcılarını iki farklı tarayıcı için farklı CSS stil dosyaları hazırlamaya kadar götürdü. Böylece uyumluluk sorunsalı (incompatibility) yaratılmış oldu.

Tarayıcılardan hiçbiri "Standart yorumlama" yeteneklerine sahip olmadığından web tasarımcılarda bu savaşlara ayak uydurarak W3C (World Wide Web Consortium / Web komisyonu) standartlarına uymayacak ve asla geçerli olamayacak sayfalar yapma alışkanlığı edindiler. Şüphesiz buradaki sorumluluğun bir kısmı da, dönemin web sayfası yapım ve HTML düzenleme yazılımlarına düşüyor. Tasarımcıların isteklerini karşılamak adına bu tarayıcılar HTML dokümanlarını bir etiket çorbası (Tag soup) haline getiriyorlar fakat kimse bu durumdan şikâyetçi olmadığından işler gayet tıkırında ilerliyordu.

Ek Bilgi: Tag Soup; geçersiz kodlar ve üreticiye özel elemanlar (etiket/tag), özellikler (attribute) içeren kodlardan oluşan (X)HTML dokümanlarını anlatmak için kullanılan bir terimdir.

Tarayıcı savaşlarının bu iç karartıcı ortamında Windows için Internet Explorer 5 yayınlandığında hiçbir şey daha iyi olmadı. Öte yandan IE5, IE4 deki uyumsuzlukları daha da dayanılmaz bir hale getirdi. Netscape cephesinde ise bir sessizlik hâkimdi ve yeni bir ürün yayınlanmadı, birileri uyanmaya başlamıştı sanki...

Modern Web Dünyasına Geçiş

Internet Explorer 5 Macintosh işletim sistemleri için yayınladığında tarayıcı savaşlarının o güne kadarki tek olumlu getirisi olan bir şey Microsoft'un Macintost Internet Explorer geliştirme takımı (Microsoft MacIE Team) tarafından ortaya atıldı. Bu gelişme ile artık tarayıcı, modern tasarım süreçlerinin bir getirisi olan W3C yaptırımlarına uygun olarak sayfaları yorumlayacak ve bunun için "Standart Mod" adı verilen bir görüntüleme tekniği kullanacaktı. Aynı şekilde eski ve demode sayfalar olarak tabir edilen etiket çorbalarını da son kullanıcıya olabildiğinde düzgün gösterebilmek için ise eski tarayıcıların görüntüleme özelliklerini taklit eden "Garip Mod" (Quirk Mod) denen bir görüntüleme tekniğini devreye sokacaktı.

Bu ayrımın tarayıcılar tarafından yapılabilmesini sağlamak amacı ile birçok yöntem gündeme getirildi ve dikkate alındı fakat bunlardan sadece bir tanesi kullanım kolaylığı ve pratik çözümü ile diğerlerinden ayrıldı. Bu yöntem "DOCTYPE" tanımlaması idi. Teoriye göre her dokümanın başında nasıl yorumlanacağını belirten bir kod bloğu yer alacak ve doküman buna göre yorumlanacaktı. Örnek olarak;

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 

Bu tanımlama yeterince güçlü ve kullanışlı görünüyordu ve işe yaramıştı. Bu bağlamda;

"DOCTYPE" bilgisi eski ve geçişken (Transitional) olan (ya da "DOCTYPE" bilgisi olmayan) dokümanlar eksik yorumlanacak veya garip moda çalıştırılacaktır. Bu bir "hata" durumu olarak nitelendirilebilir. Sayfalar eski tarayıcılara göre yorumlanacak en azından yorumlanmaya çalışılacaktır.
Kesin (Strict) "DOCTYPE" tanımlaması olan (X)HTML dokümanları katı ve geçerli yorumlama kurallarına göre görüntülenecektir. Bu tanımlamalar W3C belirlemelerine olabildiğince yakın bir biçimde uygun olarak HTML ve CSS ya da diğer ara yüz dillerinin yorumlamasının sağlayacaktır.

Tasarımcılar için inanılmaz derecede kullanışlı "DOCTYPE değişimi" (DOCTYPE switching) tekniği sadece Macintosh için yazılmış olup Internet Explorer 5 ile sınırlı kalıp kalmayacağı merak uyandırıyordu ve sevinç uyandıran bir gelişme olarak Windows için Netscape 6 ve Internet Explorer 6 bu tekniği benimsediler. En nihayetinde standart uyumlu dünyanın kapıları aralanmıştı.

Detaylarla DOCTYPE

Tarayıcı dünyasının gelişimini ve "DOCTYPE" kavramının nasıl ortaya çıktığını gördüğümüze göre artık konuya biraz daha bilinçli ve yakından bakmanın vakti geldi. Öncelikle bir "DOCTYPE" bilgisi nelerden oluşuyor onlara bir deyinelim. İçeriğini oluşturan bileşenler boşluklar ile birbirinden ayrılarak standart bir yapı teşkil ederler. Bu bileşenler;

Doküman tanımlama bilgisi ifadesi. (<!DOCTYPE)
Dokümanın en üst elemanının (root element) tanımlaması aynı zamanda jenerik kimlik bilgisini de ifade eden isim. (HTML)
PUBLIC kelimesini takiben çift tırnak içinde doküman türü tanımlaması (DTD) bilgisi. Bu bilgi aynı zamanda dokümanımızın türünü de belirlemesi açısından "DOCTYPE" tanımlamasının en önemli kısmıdır. (PUBLIC "-//W3C//DTD HTML 4.01//EN")
DTD tanımlamasını takiben çift tırnak içinde bu tanımlama bilgisini tamamlayan URI ve etiketin kapatılması. ("http://www.w3.org/TR/html4/strict.dtd">)

Ek Bilgi: URI ve URL kelimeleri birbirleri ile karıştırılsalar ve birbirleri yerine kullanılsalar da aralarındaki en önemli fark URL adreslerinin web de geçerli bir kaynağa işaret ederken (bir web sayfası yada dosya/doküman), URI adreslerin bu kısıtlamaya sahip olmamalarıdır. Yukarıda da gördüğünüz üzere DTD tanımlama bilgilerinin neler olduğunu gösteren bir URI yer almaktadır. Bu adres bir web sayfası ya da doküman olmamasına karşın tarayıcılar tarafından değerlendirilen bir kaynaktır.

Bu şekilde bir doküman türü belirtimi yapmak mümkün. Bu yapı çerçevesinde yapılabilecek başlıca "DOCTYPE" belirtimleri ise şu şekilde.

HTML 4.01

Kesin / Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 

Geçişken / Transitional

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

Kesin / Strict

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 

Geçişken / Transitional

 
<!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">
 

Frameset

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 

XHTML 1.1

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 

XHTML Mobil

 
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile
1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 

Dreamweaver içerisinde DOCTYPE belirtimi

Dreamweaver ile sayfanızın "DOCTYPE" bilgisini belirlemek ve değiştirmek için Modift / Page Properties menüsünden ulaşabileceğiniz sayfa ayarları iletişim penceresindeki "Title/Encoding" sekmesini kullanabilirsiniz.

Sayfanızın ihtiyaçları doğrultusunda buradaki doküman türü belirtimlerinden birini seçmeli ve dokümanlarınızı bu tür çerçevesinde inşa etmelisiniz. Şimdi bu türlere göre sayfalarımızın nasıl farklı yorumlanacağını ve nasıl inşa etmemiz gerektiğine deyinelim.

Tarayıcıların Doküman Türü Seçimi (Doctype Sniffing)

Tarayıcılar sayfanızda bulunan doküman türü belirtimine bağlı olarak sayfanızı hangi modda görüntüleyeceklerine karar veriyor demiştik. Hangi tarayıcının, hangi doküman türünde, hangi modda çalıştığını görmek için Henri Sivonen'in "DOCTYPE belirtimi ile doğru tasarım modunun aktivasyonu" adlı makalesindeki tabloyu inceleyebilirsiniz.

Tablo 1: DOCTYPE bilgisine göre tarayıcı modları değişimi tablosunu görmek için tıklayınız.

Tabloda geçen:

Q: Garip mod (Quirks mode)
S: Standart mod
A: Kısmı standart mod (Almost Standards mode)

NS6
Mozilla 0.6...0.9.4 ve Netscape 6.0...6.2.3

Old Moz
Mozilla 0.9.5 through 1.1 alpha and Mozilla 1.0

Moz & Safari
Mozilla 1.0.1, Mozilla 1.1 beta and later, Firefox and Netscape 7, Safari v73 aka. 0.9 through Safari v125.11 aka. 1.2.4

Opera 7.5
Opera 7.5

Opera 7.10
Opera 7.10...7.23

IE 6 & Opera 7.0
Windows IE 6 ve Opera 7.0...7.03

Mac IE 5
Mac IE 5.0...5.2.3

Konq 3.2
Konqueror 3.2.2...3.3 (possibly also 3.1...3.2.1; I have not been able to confirm)

Ek Bilgi: Garip (Quirks) ve Standart modların ne olduklarına deyinmiştik. Bunların yanı sıra Mozilla, Safari ve Opera 7.5 tarayıcılarının sahip olduğu üçüncü bir mod olan; "Kısmi standart mod" (Almost Standards mode) ise birazdan deyineceğimiz CSS2 belirtimleri ve kutu modelini kabul eden ve geleneksel eski stil genişlik belirtimlerini acımasızca geri çevirmeyen, eski tarayıcılar ile modern yorumlama tekniği arasında konumlandırabileceğimiz bir moda da sahipler. Mac IE 5, Windows IE 6, Opera 7.5 öncesi ve Konqueror bu üçüncü moda ihtiyaç duymazlar zira kendilerinin "standart" modu Mozilla'nın "kısmi standart" moduna oldukça yakındır.

Tablonun bir özetini geçmek gerekirse; (http://www.fatihhayrioglu.com/ adresinden alıntıdır)

XHTML dokümanında tam bir "DOCTYPE" tanımı yapıldı ise tarayıcı Standart Modda çalışacaktır.
HTML 4.01 dokümanı için "DOCTYPE" ve Kesin (strict) DTD tanımı yapıldığında tarayıcı Standart Modda çalışacaktır.
"DOCTYPE" ve geçişken (transtional) DTD URI tanımlı halinde tarayıcı Standart Modda çalışacaktır.
"DOCTYPE" ve geçişken (transtional) DTD URI adresi yok ise doküman Garip Modda yorumlanacaktır.
Kötü formatlanan veya "DOCTYPE" kullanılmayan HTML ve XHTML dokümanları Garip Modda yorumlanacaklardır.

Türler arası yorumlanma farkları

Bu bağlamda belli başlı bazı kavramlar karşımıza çıkmakta. Bunların başında da XHTML ile HTML arasındaki farkları bilmekten geliyor. Bu iki türün neler olduklarını ve genel hatları ile kullanım amaçlarını belirtmek gerekirse; gelişen web teknolojileri ve XML kaynaklı bir ortak veri standartlarına doğru yaklaştığımız bu günlerde HTML'in bu ihtiyaçları karşılayamaması ve modern tekniklere adapte edilememesinden dolayı XHTML (Extensible Hypertext Markup Language) bu ihtiyacı karşılamak amacı ile ortaya çıktı diyebiliriz. XHTML'in getirdiği ve birçok web tasarımcı ve geliştiricinin beklide en çok bildiği fark tekil etiketlerin kapanması işlemidir. (örneğin HTML içerisinde <br> olarak kullanılan yeni satır etiketi XHTML içerisinde <br /> olarak kullanılmalıdır)

Fakat bu durum birçok geliştirici tarafından tam olarak algılanamamış ve XHTML sanki HTML'in bir sonraki sürümüymüş gibi davranıp tüm sayfa yapılarının XHTML belirtimlerine ve kurallarına uyması gerekiyormuşçasına sayfalarını yeniden yapılandırmışlardır. Bu sözü edilen sayfalarda hiçbir zaman W3C geçerlemelerinden geçemeyecek olan modern etiket çorbaları olarak web dünyasında yerlerini almışlardır. XHTML türü için doğru yapılandırmalar hakkında daha kapsamlı bilgiyi makalenin sonundaki "Doğru XHTML Sunumu" bölümünden edinebilirsiniz. XHTML cephesinde durum böyle bir de diğer yorum farklarına deyinelim.

CSS kutu modeli (Box model)

Tarayıcıların standart modlarının en belirgin ortaya çıktığı durum CSS2 ile hayatımıza giren ve modern tasarım ihtiyaçlarını karşılamak üzere ortaya çıkmış olan "kutu modeli" (Box Model) olarak tabir edilen boyutlandırma sistemidir. Kutu modeli hakkında ayrıntılı bilgi için;

Genel bir özet olarak kutu modeli derki;

Bir objenin (kutunun) tüm genişliği; içerik (content area) + çerçeve kalınlığı (border) + kenar boşluları (padding) değerlerinin toplamına eşittir. Yani CSS'de "width: 300px" olarak belirtilen bir DIV etiketinin genişliği sadece içerik alanının (content area) belirtir. Eğer bu DIV etiketinin çerçeve kalınlığı 1 piksel ve içeriğin DIV sınırlarına olan uzaklık bilgisi (padding) de 10 piksel ise bu DIV etiketinin toplam kapladığı alan:

sol çerçeve+sol boşluk+içerik+sağ boşluk+sağ çerçeve

1+10+300+10+1=322 pikseldir.

CSS kutu modeli şematik görnümü

Modern tarayıcılar Standart mod ile çalışırken bunu algılayıp yaptığınız biçimlendirmeleri buna göre yorumlarlarken, diğer taraftan Garip mod ile çalışırken eski tarayıcılar gibi yorumlar. Eski tarayıcılarda ise bu 300 piksellik genişlik DIV etiketinin toplam genişliğini bildirir ve içeriğin genişliği, kenar boşluları ve çerçeve genişliği bu değerden çıktıktan sonra kalan değere (300-22=278 piksel) eşittir. Bu durum bile tek başına sayfamıza doğru doküman türü tanımlamasını yapmak için oldukça yeterli bir sebep değil mi? Ama bununla bitmiyor.

Inheritance ve Tablolar

Benzer olarak CSS yorum farklarından biri de alt etiketlerin etkilenmesi (inheritance) durumudur. Örnek olarak aşağıdaki kodu incelersek;

 
<body style="font-family: Courier; color: purple;
font-size: x-large;">
<table>
<tr><td>Tablo içindeki yazı büyük mü?</td></tr>
</table>
 

Bu kod modern XHTML ve HTML gereksinimleri ile Standart modda tablo içindeki metninde büyük ve yazı tipi de "Courier" olarak yorumlanırken, Garip modda (eski tarayıcılarda) tablo içerisindeki metin büyük olmayacak ve kullanıcının tarayıcısının yazı tipi ayarları çerçevesinde standart metin olarak yorumlanacaktır. Bu durumu gözlemlemek için sizde bir HTML dokümanı oluşturup "DOCTYPE" bilgisini silerek tarayıcının verdiği tepkiyi görebilirsiniz.

Standart ve Garip mod arası yorum farkı

Bu durum özellikle geleneksel teknikler çerçevesinde sayfa tasarımını tablo kullanarak görünmez bir ızgara üzerine inşa eden geliştiricileri oldukça yıpratmıştır. Bunun sebepleri arasında tabloların artık bu iş için kullanılmaması gerektiğinin yanı sıra sayfalarımızı Standart modda çalışmak üzere tasarlamamız gerektiğini bize bildiren güzel bir örnek olarak karşımıza çıkıyor.

Harf duyarlılığı

HTML 4.01 ve XHTML 1.0 belirtimlerinde "class" ve "id" tanımlamaları büyük küçük karakter duyarlılığına sahiptir. Bunun yanı sıra "id" belirtimleri rakam ile başlayamaz ve sadece alfa nümerik karakterlerden oluşabilir. Yani "1stTitle_Başlık", geçerli bir "id" değildir.

Bu harf duyarlılığı çerçevesinde Standart modda aşağıdaki kod çalışmayacak yani metin kırmızı olmayacaktır. Fakat Garip modda metin kırmızı olacak yani "TestThisClass" ilgili paragrafa uygulanacaktır. Dokümanda bir "DOCTYPE" tanımlaması yapılmadığını düşünürsek bu kod tarayıcılar tarafından garip modda çalıştırılacaktır.

<html>
<head>
<title>Harf duyarlılığı</title>
<style type="text/css">
p.TestThisClass {color: red;} 
</style>
</head>
<body>
<p class="testthisclass">Bu metin kırmızı değil!</p> 
</p>
<p>
</body>
</html>
 

Standart ve Garip mod arası yorum farkı

Buna benzer olarak CSS1 ve CSS2 "class" ve "id" tanımlamalarında altçizgi (_) kullanımına izin vermezken garip modda kullanımının bir önemi yoktur.

Değer Belirtimleri

Bu kısım tamamı ile IE4/Win ve IE5/Win kapsamındadır. Internet Explorer'ın eski sürümlerinde aşağıdaki gibi bir sitil kodu geçerli olacaktır.

h1 {color: FF0000;}     /* octothorpe sembolü (#) eksik! */
h2 {font-size: 18 px;}  /* birim ile rakam arasında boşluk var */
table {width: 500;}     /* Birim belirtilmemiş */
 

Yukarıdaki ilk kuralda renk kodu için # sembolü belirtilmemiş. CSS1 ve CSS2 de tüm renk kodları "#FF0000" şeklinde belirtilmelidir. İkinci kuraldaki birim ile miktar arasındaki boşluk olmaması gereken bir ifadedir. Boşluk yeni bir özelliğin belirtilmeye başlandığını göstermektedir. Üçüncü kuraldaki miktarın birimi belirtilmemiştir ve muhtemelen 500 piksel olarak tasarlanan genişlik olması gerektiği gibi görünmeyecektir. Doğru kullanım aşağıda gösterilmiştir.

h1 {color: #FF0000;}
h2 {font-size: 18px;}
table {width: 500px;}
 

Doğru XHTML Sunumu

İhtiyaçlarınız ve istekleriniz doğrultusunda kullanmanız gereken "DOCTYPE" tanımlamasını belirledikten sonra bu belirtime uygun bir sayfa inşa ederek W3C geçerlemeleri (Validator) tarafından kabul gören sayfalar hazırlayabilirsiniz. Neden sayfalarımızı geçerlememiz gerektiği ve bunun için yapabileceklerimiz hakkında daha detaylı bilgiyi Roger Johansson'ın "Web Standartlarını Kullanarak Geliştirmek" başlıklı nefis makalesinden alabilirsiniz.

XHTML kullanmaya karar veren bir çok geliştirici sadece "DOCTYPE" tanımlaması yapıp sayfa kodlarını XHTML uyumlu hale getirmenin yeterli olduğunu düşünmekteler. Fakat XHTML'in temel amacı olan XML kaynaklı verilerin sayfa içerisinde sunumu işlevleri için "DOCTYPE" tanımlamasının yanı sıra tarayıcının sunulan dokümanı değerlendirme şeklini belirleyen "MIME Type" bilgisinin de doğru gönderilmesi gerekmektedir. Standart olarak kullandığımız HTML dokümanlar için MIME türü bilgisini "text/html" olarak belirtmek yeterlidir. Zira HTML bir "zengin metin" yapı dilidir ve metin olarak sunulup tarayıcı tarafından CSS kuralları çerçevesinde yorumlanır. Fakat XHTML bir uygulama türü olarak değerlendirilmesi gereken bir yapı dilidir ve MIME türü bilgisi "application/xhtml+xml" olarak sunulmalıdır. Bu MIME türü bilgisi tarayıcıya bu dokümanın bir XML verisi içerdiğini ve bu çerçevede görüntülenmesini bildirir ki XHTML dokümanlarının anlam kazanmasını sağlayan şey de budur zaten. Yapılan en büyük hatalardan biri olan XHTML dokümanlarının "text/html" olarak sunulması hakkındaki Ian Hickson tarafından kaleme alınan "XHTML dokümanlarının text/html olarak gönderilmesinin zararları" başlıklı makaleden konuya dair detaylı bilgi alabilirsiniz.

Peki, XHTML dokümanını "text/html" olarak sunarsak ne olur? Cevap basit "Hiçbirşey!" Yani doküman XHTML olmaktan ziyade bir metin dokümanı olarak değerlendirilecektir. Yani bir nevi "doğan görünümlü şahin" durumu söz konusu olacak, doküman XHTML olarak inşa edilmeye başlanıp sonuçta bir HTML dokümanı olarak sunulacaktır. Bu durum XHTML'in kullanım amacına hiç uymayan ve olmaması gereken bir durumdur. Zira XHTML dokümanının XML verisi içerdiğini ve bunun XML olarak tarayıcı tarafından değerlendirilmesi gerektiğini belirmiştik.

Öte yandan XHTML'deki katı yazım kuralı hataları uyumlu bir tarayıcı ile (Mozilla ve Opera'nın son sürümleri) ekrana bir hata mesajı ile yansıtılacak ve ziyaretçinin sayfayı doğrudan görmesi engellenecektir. Fakat HTML ve ya "text/html" olarak sunulan dokümanlarda yazım kuralları tarayıcı tarafından tolare edilebilecek düzeyde ise (bir tablo hücresinin eksik olması ya da kapanmayan bir etiket gibi) ziyaretçiye bir şey belirtmeden sayfa yorumlanmaya devam edecektir.

Burada hatalı yazım kuralı içeren bir XHTML dokümanının geçerleme motorlarındaki geçerlemelerden olumlu cevap almasından ziyade siteyi gezen ziyaretçi hata ile birebir muhatap olacak ve sayfayı göremeyecektir. Fakat "text/html" olarak sunulan HTML dokümanlarındaki hatalar sadece web tasarımcının sorunudur ve ziyaretçi tarayıcısının yetenekleri ve hatanın boyutu çerçevesinde sayfayı görüntülemeye devam edecektir.

XHTML kullanımının oldukça katı kurallar çerçevesinde yorumlandığını söylemiştik. Bu durum birçok geliştiriciyi HTML kullanmaya yönelten başlıca sebeplerden biridir. Örneğin HTML'de çalışsan JavaScript kodlarının çoğu XHTML dokümanlarında çalışmayacaktır. Bunun sebebi XHTML dokümanlarındaki JavaScript kodlamalarının tamamen DOM tabanlı olarak yapılması gerektiği gelmektedir.

XHTML dokümnalarındaki yorumlanma hataları

Durum bu kadarla da kalmıyor. Günümüz modern tarayıcılarının çoğu "application/xhtml+xml" dokümanlarını tanıyıp yorumlama yeteneğine sahiptir fakat Internet Explorer (IE7 dahil) henüz böyle bir desteğe sahip değildir. (IE6 dokümanı bir XML DOM ağaç yapısı halinde görüntülemektedir)

Doküm. türü	text/html	application/xhtml+xml	application/xml	text/xml
HTML 4	Olmalı	Olamaz	Olamaz	Olamaz
XHTML 1.0 (HTML Compatible)	Olabilir	Olmalı	Olabilir	Olabilir
XHTML 1.0 (other)	Olmamalı	Olmalı	Olabilir	Olabilir
XHTML Basic	Olmamalı	Olmalı	Olabilir	Olabilir
XHTML 1.1	Olmamalı	Olmalı	Olabilir	Olabilir
XHTML + MathML	Olmamalı	Olmalı	Olabilir	Olabilir

Tablo 2: Dosya Türlerine göre MIME türü bilgileri

Hangi DOCTYPE tanımlamasını kullanmalıyım?

Hal böyleyken web geliştiriciler tam olarak hangi yapı dilini kullanacakları konusunda kararsız kalmaktadırlar. Şu anda kullanıcıların %70 civarının Internet Explorer kullanarak web sayfalarını görüntülediğini düşünürsek bu karar gerçektende oldukça zor bir hal almaktadır. Bu aşamada eğer yeni tasarım yapmaya başlayan bir web geliştirici iseniz veya spesifik olarak XHTML'e ihtiyacınız olmadığı durumlarda dokümanlarınızda HTML DOCTYPE bilgisini kullanmanızı tavsiye edeceğim.

Söz gelimi eğer XHTML kullanmakta ısrarlı iseniz veya buna ihtiyacınız olduğu bir projede çalışıyorsanız; modern tasarım ihtiyaçları ile koşulların çeliştiği bu durumlarda geliştiricinin imdadına sunucu taraflı diller yetişmektedir. Roger Johansson'ın "Web Standartlarını Kullanarak Geliştirmek" makalesinden aldığım aşağıdaki yöntemler ile sayfalarınızı tarayıcıların "application/xhtml+xml" uyumuna göre "DOCTYPE" tanımlamasının değiştirilebildiği çözümler sunabilirsiniz.

PHP kullananlar için: dokümanın en üst kısmına aşağıdaki satırları yerleştirmelisiniz. (Dokümanda DOCTYPE belirtilmemiş olmalı)

<?php
if (stristr($_SERVER[HTTP_ACCEPT], "application/xhtml+xml") || 
stristr($_SERVER["HTTP_USER_AGENT"],"W3C_Validator")) {
header("Content-Type: application/xhtml+xml; charset=iso-8859-9");
header("Vary: Accept");
echo("<?xml version="1.0"
encoding="iso-8859-9"?>n");
}
else {
header("Content-Type: text/html; charset=iso-8859-9");
header("Vary: Accept");
}
?>
 

ASP VBScript kullanıyorsanız;

<%
If InStr(Request.ServerVariables("HTTP_ACCEPT"),"application/xhtml+xml") > 0 
Or InStr(Request.ServerVariables("HTTP_USER_AGENT"),"W3C_Validator"> 0 Then
Response.ContentType = "application/xhtml+xml"
Response.Write("<?xml version=""1.0""encoding=""iso-8859-1""?>" & VBCrLf);
Else
Response.ContentType = "text/html"
End If
Response.Charset = "iso-8859-1"
%>
 

Benzer bir uygulama olarak Keystone Websites bünyesindeki "Serving up XHTML with the correct MIME type" makalesinde de bir PHP uygulaması bulmanız mümkün.

Bitirirken

Tüm makale boyunca "DOCTYPE" tanımlamasının ne olduğundan ve sayfalarımızı doğru doküman türü tanımlaması ile sunduğumuzda kazanacağımız avantajların neler olacağına deyindik. Bilinçsiz bir biçimde önümüze konan her yeni şeyin aslında o kadar da "yeni" ve yararlı olmadığının altını çizdik. Bu anlamda, Mehmet Doğan tarafından kaleme alınan "Günün Modası Sadelik" isimli makalede de dile getirildiği gibi "nasıl sorusundan ziyade neden sorusu ile olaylara yaklaşmalı ve attığımız her adımın yaptığımız her şeyin bilincinde olmamız" gerektiğini belirterek bu yazıya son vermek istiyorum.

Düzeltmeler;

5 Ocak 2007:

Makalenin sonuna "Düzeltmeler" bölümü eklendi. Böylece okuyucuların makalede yapılan değişiklikleri takip etmeleri kolaylaştırıldı.
Bazı yazım hataları düzeltildi.
HTML ve XHTML arası farkların neler olduğu ve doğru MIME türü bilgisinin getirdiği faydaların anlatıldığı bölümler biraz daha genişletildi.

Kaynaklar

Web Standartlarını kullanarak Geliştirmek
http://www.456bereastreet.com/lab/developing_with_web_standards/tr/
Picking A Rendering Mode
http://www.ericmeyeroncss.com/bonus/render-mode.html
Activating the Right Layout Mode Using the Doctype Declaration
http://hsivonen.iki.fi/doctype/
Serving up XHTML with the correct MIME type
http://keystonewebsites.com/articles/mime_type.php
Sending XHTML as text/html Considered Harmful
http://www.hixie.ch/advocacy/xhtml
Fix Your Site With the Right DOCTYPE!
http://www.alistapart.com/articles/doctype/
Use the Right Doctype
http://www.oreillynet.com/lpt/a/163
Ten reasons to learn and use web standards
http://www.456bereastreet.com
Altı Üstü Tasarım Mehmet Doğan
http://www.altiustutasarim.com
Fatih Hayrioğlu'nun Not Defteri
http://www.fatihhayrioglu.com/
World Wide Web Consortium
http://www.w3c.org

Bu doküman toplam 1 sayfadan oluşmaktadır. Gösterilen 1/1 İlk sayfadasınız

Yorumlar

Yorum 10 Temmuz 2008 Perşembe 02:17:18 | Yazan: buraqq

teşekkür ederim gerçekten yararlı oldu...

Toplam 1 adet yorum mevcut « - 1 - »

Yorum ekleyebilmek için öncelikle üye girişi yapmanız gerekmektedir

Son eklenenler

Bölüm 4 - Fancybox ile Resim Galerisi Oluşturma (111) - 31 Ağus 2010 Sal 01:06:40

Bölüm 3 - Resimleri Kategorilerine Göre Listeleme (61) - 31 Ağus 2010 Sal 01:05:12

Bölüm 2 - Upload And Resize Image With Developer ... (61) - 31 Ağus 2010 Sal 01:03:46

Bölüm 1 - Tablosuz Tasarım ( Div ) (139) - 31 Ağus 2010 Sal 01:02:06

Adobe Developer Toolbox CS4 ve Duyuru Sayfası (57) - 31 Ağus 2010 Sal 00:59:19

Yazan

	Orhan Veli Firik
	Orhan
	Eklenme tarihi
	05 Aralık 2006 Salı 00:42:11
	Puan ver
	Ortalama: 0

Üye girişi

Üye ol Üye olmak istiyorum

Parolamı unuttum Şifremi hatırlamıyorum

Üyelik aktivasyon

Eklentiler (extensions)

Sitemizden indirdiğiniz eklentileri nasıl yükleyeceğinizi ve kullanacağınızı bilmiyorsanız bu makaleden başlayabilirsiniz. Genel olarak Dreamweaver eklentileri üzerine kısa bir yazı buyrun...