XHTML‘de yapılan hataların çözümleri…

XHTML oluşturulduğu günden bugüne tüm webmaster lar sitelerini bu kurallara uygun hale getirmeye çalışıyorlar. Çünkü XHTML uyumlu siteler her türlü tarayıcıda optimize çalışarak hiç bir görüntü bozukluğuna neden olmuyorlar. Tabi bu çalışmalar yapılırken herkesin gözden kaçırdığı önemli bazı hususlar var. Bu nedenle de sitelerinin uyumluluğunu kontrol eden webmaster lar sürekli hata aldıklarını söyleyip duruyorlar. Aslında hatayı kendilerinde aramak yerine çabucak vazgeçiyorlar =) Durum böyle olunca bizde grafiktasarimmedya.com olarak bu hataların en önemlilerine değinmeye karar verdik. Şimdi gelin yaptığınız hatalara birlikte bakalım.

XHTML’de ‘img’ tagının kullanımı

XHTML ile bazı kodların kullanımı da değişti. Bunlardan en önemlisi resimlerinizin görünmesini sağlayan ‘img’ kodu. img taglarının kullanımında XHTML ile birlikte ‘alt’ tagınında kullanılması zorunluluğu getirildi. Yani örnek verilmesi gerekirse daha önceden kullandığınız;

şeklindeki kodlama xhtml kurallarına uymuyor. Bu nedenle sürekli uyum problemi yaşıyorsunuz. Aslında bu kodlamada hata yok. Bu şekilde yazdığınızda da internet tarayıcınız kodlamayı algılayacak ve göstermek istediğiniz resmi gösterecektir. Fakat sitenizi XHMTL ye uygun hale getirmek istiyorsanız buna uygun olarak kodlamanızı aşağıdaki gibi girmek zorundasınız.

Xhtml kurallarına göre img tagınızı takiben birde ‘alt’ tagı girilmek zorundadır. Yukarıda kırmızı ile işaretlediğim yer web sitenizdeki her img tagından sonra mutlaka yukarıdaki şekilde kullanılmalıdır. alt tagı ile simgeldiğiniz, eklediğiniz resime yapacağınız açıklamadır. Yukarıda “X” ile gösterilen yere eklediğiniz resmin açıklamasını yazabilirsiniz. Açıklama yazmak istemiyorsanız o kısmı alt=”" /> bu şekilde bırakmalısınız. Yada açıklama yazmak isteyenler için alt=”Grafik” /> şeklinde de gösterilebilir.

img kodlarında yapacağınız bu düzeltme ile xhtml hatalarınızın çoğunu düzeltmiş olacaksınız.

Not: ‘img’ tagında title=”" yazılmaz. title=”" kodlaması “a” tagında bulunur.

Xhtml’de bazı kodların kullanımı değişti…

Xhtml kullanımında bazı kodlamaların kapanış durumları da değişti. Örneğin satır atlatmak için kullandığınız “br” tagını artık “/” çizgisi ile kapatmak zorundasınız. Yani ;

resimde de görüldüğü gibi br ve hr taglarının kullanımı kırmızı renkte gösterildiği gibi değişmiştir. Aynen img tagında olduğu gibi bu kodların kullanımında da br> yada hr> şeklindeki kapanışlar internet tarayıcılarının birçoğu tarafından tanınacaktır. Fakat Xhtml kontrolünde hata almanıza neden olacaktır. Bu nedenle kullanılan bu iki kodun kapanışları mutlaka “/>” şeklinde bitmelidir.

Xhtml’de “id” tagı bir kere kullanılabilir…

Yazımıza bir css kod uyguladığımızda genelde “id” tagı ile tanımlar ve yapmak istediğimiz sonucuda ulaşırız. Ama Xhtml kontrolünde size id tagını birkez kullanabilirsiniz şeklinde bir uyarı gelir. Hatayı çözmek isteyen arkadaşların çoğunun bu işin içinden nasıl çıkacaklarını bilmediğini gördüm. Bu nedenle burada örneklerle ayrıntılı bir şekilde anlatmaya çalışacağım.

Bu şekilde yazdığınız css kodlamasını yazınız içerisinde “id” tagı ile belirttiğinizde yapmak istediğinizi elde edersiniz. Fakat aynı id tagını yazı içerisinde başka bir noktada yani 2. kez kullanmak istediğinizde Xhtml’de uyum problemi yaşarsanız. Çünkü Xhtml kurallarına göre “id” tagı birkez kullanılmalıdır. Peki bu durumda ne yapmanız gerekiyor.

Yukarıdaki resimde incelediğinizde kırmızı renkle gösterdiğim ufak değişiklikler sizi bu problemden de kurtaracaktır. yani id (#) tagı yerine class (.) tagı kullanmanız uyum probleminizi ortadan kaldıracaktır.

Xhtml’de Javascript ve Css kodları “header” şablonuna eklenemez…

Xhtml’deki önemli değişikliklerden biride burada önümüze çıkıyor. Javascript ve Css kodlarının header şablonunda kullanılması Xhtml’de yüzlerce hata almanıza neden olabiliyor. Aslında bu düzeltmenin HTML ile geldiğinide hatırlatmak isterim. Bunun defalarca söylenmesine rağmen bu hatayı yapan webmastarlar sürekli problem yaşamışlardır. Hatanın asıl kaynağı sizin kullanmış olduğunuz css yada javascript kodunun “body” tagları arasına girmesinden kaynaklanıyor.

Resimde gördüğünüz kodlamada göründüğü üzere mavi ile yazılmış css dosyanın çağırıldığı kodlama kırmızı ile belirtildiği üzere “body” taglarına arasına girmiş görünüyor. İşte asıl uyumsuzluk problemi burada başlıyor. Xhtml’ye göre “body” tagları arasında css yada javascript kodlaması olmaması gerekiyor. Buradaki hatayı düzeltmeniz sizi birçok hatadan kurtaracaktır.

Xhtml’de metatag yazılımı “/>” şeklinde kapatılmalıdır.

Metatag yazılımlarında da yapılan bir hatadan dolayı webmasterlar sıkça hata almaktadırlar. Bu hatanın düzeltilmeside aşağıdaki resimde verilmiştir.

Birçok kodlayıcı metatagların kapatılması gerektiğini unutuyor. Yaptığı bu hata Xhtml’de bu hatayı takiben birçok hata almanızada neden oluyor. İkinci kısımda gösterilen kırmızı renkli düzeltme ile bu hata ve devamında gelen birçok hatadan kurtulmanıza neden olacaktır.

Xhtml’de tüm taglar küçük harfle yazılmalıdır.

Alınan hataların büyük bölümüde bu kısımdan kaynaklanıyor. Kodlamacıların kafasına yazdığı css yada diğer tagların kullanımı uyum problemine neden oluyor. Xhtml’ye göre tüm taglar küçük harfle yazılmalıdır. Büyük harfle yazılması websayfanızda probleme neden olmaz. Fakat Xhtmlde uyum problemi çıkar.

Yukarıdaki iki resimde de görüldüğü üzere, ilk yazılımlar Xhtml ye göre yanlıştır. Kırmızı ile gösterdiğim yazılımlar ise doğru olandır. Bu şekilde yapacağınız düzeltmeler sizi uyum problemlerinden kurtaracaktır.

Xhtml’de tag kullanım sırası önemlidir.

Kodlamarın sıralamasında yapacağınız hatalar size uyum problemi olarak geri dönecektir. Çünkü Xhtml ye göre kodlamaların sırası önemlidir. HTML’de böyle bir uyum problemi yaşamazsınız. Asıl önemli olan kodların kapatılmasıdır. Kodları kapattığınız sürece istediğiniz sonucu elde edersiniz. Fakat Xhtml kodların kapatılması kuralı ile birlikte birde sıralamasına dikkat etmek zorundasınız. Yani;

resimde de gördüğünüz üzere b ve i taglarını kullanarak yazdığınız yazıyı bold ve italik duruma getirdiniz. İlk yazımda da istediğiniz sonucu elde edeceksiniz. Yani yazınız hem bold hemde italik olarak görünecek fakat xhtml de problem yaşayacaksınız. İkinci yazılımda kırmızı renk ile gösterilen düzeltmeyi yaptığınızda yani kodların sıralamasına dikkat ettiğinizde yazını hem bold hem italik hemde xhtml den tam not alacaktır. Bu hata sıklıkla “table” taglarında yapılmaktadır. Çünkü bildiğiniz üzere table ile yapacağınız düzenlemeler tbody, tr ve td kodlamalarınıda kullanırsınız. Bu kullanımda tagların kapatılması sırasında yapacağınız sıralama hatası probleme neden olacaktır. Table kodlamasındaki sıralama;

bu şekilde olmalıdır. Yani kodunuz “table” ile başlıyorsa yine “table” ile kapanmalıdır.

Not: Bu kodlara varsa “class” tanımlaması yapılabilir. Buradaki gösterim en sade şeklidir.

Bu yazımızda genel hatları ile xhtml de karşılaşılan hatalara değindik. Sitenizi xhtml de uyumunu kontrol ettikten sonra ilk önce yukarıda belirttiğimiz hataları çözün. Size çok karmaşık gelen hataları en sonra bırakın. Çünkü yukarıdaki hataları düzeltmeniz bu hatalardan kaynaklanan diğer hataların oluşmasına neden olabilir. Buda size çok sayıda problem çıkartabilir. Genel hatları ile yukarıdaki sorunlara değindiğinizde hata sayınızı en az indirirsiniz. Son çözüm olarak kalan hatalarınıza bakabilirsiniz.

Bu konuda size yardımcı olmak isteriz. Makalemizi okuduktan sonra hâlâ sorun yaşadığınızı düşünüyorsanız bu konu altında bize yazararak (aldığınız hatalar ile birlikte) iletebilirsiniz. Elimizden geldiğince size yardımcı olmaya çalışacağız.