XHTML nedir, XHTML kuralları ve HTML sayfayı XHTML formatına çevirmek


Extensible HyperText Markup Language kelimesinin kısaltılmışıdır. XHTML’ in türkçe anlamı Genişletilebilir Büyütülmüş Metin İşaretleme Dili‘ dir. 

XHTML, HTML’ in eksik yapısının tamamlanması için yapılmış bir web standartıdır. HTML’ in eksik yapısı XHTML ile tamamlanmıştır.  HTML dilini daha düzenli bir hale getirmiştir. XHTML kesinlikle bir programlama dili değil, web standartıdır.  XHTML, HTML ile neredeyse aynıdır. Dediğimiz gibi HTML’ e bir kaç yeni kural eklenmiştir. 
XHTML nedir?
XHTML 26 Ocak 2000’de W3C  tarafından kabul edilmiştir. 

NOT: W3C web standartlarını belirleyen örgüte verilen isimdir.  HTML kodlarının her tarayıca aynı şekilde görünmesi için kararların verildiği yerdir. 

XHTML ile hazırlanan sayfalar daha hızlı açılır, bütün web taracıyıcılarında sorunsuz olarak çalışır ve web siteleri daha düzgün bir görünüme kavuşturur. 

Peki HTML’ de ne eksikti?

HTML ile sayfa tasarlarken etiketleri kapatmasanızda, eksik etiket girsenizde, etiket sırasını önemsemesenizde ve hatta bazı etiketleri yanlış yazsanızda tarayıcınız hata vermeden sayfanızı görüntüleyebilir.  İşte bu durumu ortadan kaldırıp düzgün web sayfalarının oluşturulabilmesi için, bir standart oluşturmak için XHTML piyasaya sürüldü. 

HTML’ in eksik yapısını incelemek ve XHTML’ i anlamak için XHTML kurallarına bakmak gerekir. 

XHTML kuralları

    1. XHTML sayfalarda DOCTYPE bulunması zorunludur. 

Sayfaları tasarlarken sayfanın başında mutlaka döküman tipini yazmalısınız. ibaresini sayfa başına belirtmek gerekiyor. Örnek bir DTD kullanımına bakalım.

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 DOCTYPE(DTD) nedir?

Sayfanın hızlı açılması için tarayıcının önceden döküman tipini görmesi gerekmektedir. DTP bunu sağlamaktadır. 

Üç tip XHTML döküman biçimi(DTD) vardır. 

  • Transitional DTD Tanımlaması: Sayfa HTML’ in eski yapısı ile yapılacaksa bu kullanım biçimi eklenir. 

  • Strict DTD Tanımlaması: Bu tanımlama ile HTML ve XHTML kurallarına uygun daha düzenli bir sayfaya erişmek için kullanılır.

  • Frameset DTD Tanımlaması: HTML çerçeveler kullanılacaksa bu kullanım biçimi sayfaya eklenir. 

  1. XHTML sayfalarda bulunması gereken temel etiketler.
XHTML sayfalar bulunması gereken temel etiketler 5 tanedir. Bunlar:
#DOCTYPE
#HTML
#HEAD
#TITLE
#BODY
Geçerli bir XHTML sayfası oluşturmak istiyorsanız bu etiketlerin tamamını kullanmak zorundasınız.
Örnek bir kod yapısı gösterelim.



başlık

içerik

  1. XHTML sayfalarda XML tanımlaması yapılmalıdır.
XHTML sayfalarda html etiketinin yanında xml tanımlaması yapmak gerekiyor. Bu tanımlama şu şekildedir:

Kullanım biçime örnek gösterelim.



başlık

içerik


XML nedir?

Farklı verileri orjinal halleriyle tek bir ortamda tutan, bilgiye en hızlı şekilde ve bulunan ortamdan bağımsız bir şekilde çalıştırabilen bir yapıdır. XML, belgelerin tanımlanabilmesi için kullanılan uluslararası bir standarttır.  Kısaca şu şekilde diyebiliriz: Hazırlanan her türlü veri evrensel biçimdeki formatı XML’ dir. Yani her her ortamda çalışabilen bir yapıdır. 

  1. Her XML tabanlı HTML sayfasında bir tane kök element bulunmalıdır.
HTML sayfalar xml tabanlı olduğundan, her sayfada bir kök element bulunmalıdır. HTML’ de kök elementolduğundan bu etiket sadece bir kere kullanılmalıdır. 
Kullanım biçime örnek gösterelim.



başlık

içerik


  1. Etiketler sırasıyla kapatılmalıdır.
 Etiket açıp kapatma biçimine dikkat edilmelidir. Önce açılan etiket en son kapatılmalıdır. 
Örnek:

merhaba

  1. Açılan etiketler kesinlikle kapatılmalıdır.
 XHTML sayfaları tasarlarken mutlaka tüm etiketler kapatılmalıdır. 
Yanlış kullanıma örnek:

başlık

Doğru kullanım:

başlık

#Tekli olan etiketlerde kapatılması gerekir.  Tekli etiketlerde “/” işareti etiketin başına eklenir. Örnekten bakabilirsiniz. 

Örneğin satır başı etiketi için bir kullanım gösterelim.

merhaba

  1. Bütün etiketler küçük harflerle girilmelidir.
 

 Bütün etiketler küçük harfle girilmelidir. Büyük harf kesinlikle kullanılmamalıdır. 
  1. Etiket içerisindeki olan özelliklerde küçük harflerle girilmelidir.
Etiketler gibi etiket özellikleride küçük harfle yazılmalıdır, aynı şekilde büyük harf kesinlikle kullanılmamalıdır.
Örnek:

 

  1. Etiket içerisindeki özelliklere verilen değerler tırnak içinde yazılmalıdır.
XHTML sayfa içerisinde etiket özelliklerine verilen değerler tırnak içerisinde verilmelidir. Yukardaki verilen blue değerinde de tırnak içinde yazıldığını görebilirsiniz.
Örnek:

img src ="resim.png" />

  1. Özellikler kısa formatta yazılmamalıdır.
 XHTML sayfalarda özellikler kısa formatta yazılmaz. 
Yanlış kullanım:

Doğru kullanım:

  1. “name” paramatresi yerini “id” parametresini kullanılmalıdır.
HTML sayfalarda bildiğiniz gibi name parametresini kullanıyorduk. XHTML sayfalarda name parametresi yerine artık id parametresini kullanacağız. 
Örnek:

Yukardaki kuralları uyguladığınız zaman XHTML bir sayfaya ulaşmış olacaksınız. 

Bir HTML sayfayı XHTML formatına çevirmek

Bir HTML sayfayı XHTML formatına çevirebilmek için yukardaki kuralları inceleyip HTML sayfanızda bu kuralların uygulanıp uygulanmadığını inceleyerek ve kuralları HTML sayfanıza uygulayarak, bir HTML sayfayı XHTML standartına uyarlamış oluruz. Bunu bizde hazırladığımız basit bir uygulama ile sizlere gösterelim.  (Elinizde varolan bir web sayfasının hatalarını görmek istiyorsanız konu sonundaki linkimize gitmenizi öneriyoruz.  Çünkü bir web sayfasının kodlarını tek tek incelemek oldukça zahmetli bir iştir. Hatalarınızı test bir servis sayesinde bu işlemi kolaylıkla yapabilirsiniz.)



Merhaba



Bu şekilde hazırladığınız bir web sayfa XHTML standartlarına uygun bir web sayfa olmayacaktır.

Eksikleri yukarda verdiğimiz XHTML kurallarıma bakarak giderelim.

Birinci kuralımız diyorki: XHTML sayfalarda DOCTYPE bulunması zorunludur. Öyleyse sayfamıza bir DOCTYPE koyuyoruz.




Merhaba



İkinci kuralımız: XHTML sayfalarda bulunması gereken temel etiketler demiş. Sayfamızda gördüğünüz gibi title etiketi eksiktir. Bu eksikliği giderelim. etiketi eksiktir. Bu etiketimizi tamamlayalım. 



başlık

Merhaba



üçüncü kuralımız:  XHTML sayfalarda XML tanımlaması yapılmalıdır, der. XML tanımlamamızı yapalım.




başlık

Merhaba



Dördüncü kuralımızda Her XML tabanlı HTML sayfasında bir tane kök element bulunmalıdır, diyor. Baktığımız zaman kök element olan html’ den bir adet bulunmaktadır. Öyleyse bu yönden eksiğimiz yok demektir. 

Beşinci kuralımız: Etiketler sırasıyla kapatılmalıdır. Baktığımız zaman herhangi bir sıralama hatasını görmüyoruz.

Altıncı kuralımız: Açılan etiketler kesinlikle kapatılmalıdır.  Kapatılmamış etiketleri aşağıdaki resimde görebilirsiniz.

#Tekli olan etiketlerde kapatılması gerekir.  Tekli etiketlerde “/” işareti etiketin başına eklenir. Kuralımızın bir ayrıntısıydı. Yukarıda gördüğünüz üzere br ve p etiketleriyle birlikte diğer iki etikette kapatılmamıştır. Aynı zamanda h1 etiketinin kapatılmadığınıda görebilirsiniz.

Bu eksiğimizide giderelim. 




başlık

Merhaba



 Yedinci kuralımız: Bütün etiketler küçük harflerle girilmelidir. Kodlarımızın en sonki haline bakarsanız bazı etiketlerde büyük harf kullanıldığını görebilirsiniz. 

Düzenlenmiş hali şu biçimdedir:




başlık

Merhaba



Sekizinci kuralımız: Etiket içerisindeki olan özelliklerde küçük harflerle girilmelidir. İncelediğimiz zaman burdada hata göremiyoruz:

Dokuzuncu kuralımız: Etiket içerisindeki özelliklere verilen değerler tırnak içinde yazılmalıdır.  Bu etiketlerde tırnak içinde yazılmadığını görüyoruz. 

Düzenleyip tekrar gösterelim. 

Onuncu kuralımız: Özellikler kısa formatta yazılmamalıdır. Herhangi bir kullanım yoktur. 

Onbirinci kuralımız: “name” paramatresi yerini “id” parametresini kullanılmalıdır.  Hatalı etiketi görebiliyoruz.

Düzenlenmiş hali:

 Sayfamızın en son hali şu şekilde olmuştur:




başlık

Merhaba



XHTML formatına çevirdiğimiz bu sayfayı test etmek için şu konumuzu ziyaret ederek, XHTML sayfayı test etmeyi, XHTML sayfanın eksiklerini görebilmeyi öğrenebilirsiniz.  Ayrıca varolan bir web sayfanız varsa ve bu sayfanızın hatalarını görmek istiyorsanız söz konusunu konumuza gidin. 

Author: Ali Göksel Bektaş

Simenty kurucu ortağı. Küçüklüğünden beri website yapan Ali bulunduğu web sektöründe 10 yıldan fazla tecrübesı vardır. Bisiklet sürmeyi, kek yemeyi ve rahat koltukları sever.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.