W3C Validator – XHTML – Css Hata Çözümleri Hata Kodları
Biliyoruz ki sitelerimizin W3C standartlarına uygun olması arama motorları tarafından sitemizin sevilmesini sağlıyor. Sitelerimizi W3C standartlarına uygun yaparsak sitemize büyük fayda sağlayacaktır. Sitelerimizi XHTML web biçimleme diliyle W3C standartlarına uygun yapabiliriz. XHTML web biçimleme dili W3C standartları tavsiyesidir. XHTML web biçimleme dilini biraz açalım. XHTML açılımı: EXtensible HyperText Markup Language (Genişleyebilir Hiper Metin Anlamlandırma Dili). XHTML, HTML dili yerine kurulmuş ve onun yerine kullanılmaktadır. Temiz, düzenli ve gereksiz kodlardan arınmış HTML yazımını sağlar. Aşağıda W3C uyumluluk sorununu ve çözümlerini maddeler halinde verdim.Ve Hatalarınızı Konu Altında Yorum Yaparak Hatalarınızda Yardımcı olabiliriz.
Etiketleri İç İçe Kapatın
HTML ile etiketleri iç içe kapatma diye bir şey yok. Ama XHTML ile etiketleri ve parametreleri iç içe kapatma zorunluluğumuz var. Bu işlemi siteniz üzerinde gerçekleştirmediğiniz zaman sitenizin W3C standartları uyumluluğunu sorgulattırırken daima hata verir.
Hatalı Kod: <b><i> Etiketleri İç İçe Kapatmak </b></i>
Doğru Kod: <b><i> Etiketleri İç İçe Kapatmak </i></b>
Etiket ve Parametre İsimlerini Küçük Harflerle Yazın
HTML ile etiket ve parametre isimlerini küçük-büyük harflerle yazsak birşey olmuyordu. XHTML ile etiket ve parametre isimlerini küçük harflerle girmek zorundayız.
Hatalı Kod: <SPAN title=”Açıklama”><B> Etiketleri ve Parametreleri Küçük Harflerle Yazmalıyız </b></SPAN>
Doğru Kod: ><span title=”Açıklama”><b> Etiketleri ve Parametreleri Küçük Harflerle Yazmalıyız </b></span>
XHTML Etiketlerini Kapatın
HTML ile aşağıdaki hatalı kodda gördüğünüz gibi yapıyorduk. Ama XHTML web biçimleme dili ile TÜM etiketleri kapatmak zorundayız. Örneğini aşağıdaki Doğru Kodda görebilirsiniz.
Hatalı Kod: <img src=”resim.gif” alt=”açıklama”>
Doğru Kod: <img src=”resim.gif” alt=”açıklama” />
XHTML ve W3C Uyumlu Bağlantılar
Sitesinde bağlantı verip W3C uyumluluk sorunu yaşayan bir çok arkadaşımız var. Aşağıda vereceğim bağlantılar tamamen XHTML ve W3C uyumlusudur. Sorun yaşayan arkadaşlarımız sitelerindeki bağlantıları aşağıdaki gibi yaparlarsa hiçbir sorunla karşılaşmayacaklarını göreceklerdir.
<a href=”http://www.Erdinckoc.com.tr”>Erdinç Koç</a>
veya
<a href=”http://www.Erdinckoc.com.tr” title=”Web Günlüğü”>Web Günlüğü</a>
XHTML ve W3C Uyumlu Resim Kodları
En çok hata alınan etiketlerden birisi img etiketidir. Sitenize resim eklerken aşağıdaki XHTML ve W3C tam uyumlusu olan kodları kullanabilirsiniz.
<img src=”erdinckoc.jpg” alt=”erdinckoc” />
DOCTYPE’ı Büyük Harflerle Yazın
DOCTYPE tanımlamasını büyük harfle yazın aksine W3C uyumluluğu olmaz.
Hatalı Kod: <!doctype html public “-//w3c//dtd xhtml 1.0 strict//en” “http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd” >
Doğru Kod: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Özellik Değerlerini Tırnaklar İçersinde Girin
Mesela bir td değerine yüksekliği HTML ile tırnaksız girebiliyoruz ama XHTML ile tırnaklar ile girmek zorundayız.
Hatalı Kod: <td height=100%>
Doğru Kod: <td height=”100%”>
Özellik Değerlerini Ayrı Ayrı Girmeyin
Sitenizde artık etiketlere özel widht yada height vs. gibi attribute kesinlikle girmeyeceksin. Girerseniz hata alırsınız. Bu iki özelliği css dosyasından çağırarak yapacaksınız.
Hatalı Kod: <td widht=”100%” height=”100%”>
Doğru Kod: <td>
“Warning: Cannot modify header information – headers already sent by …”
Diğer bir sorun internet explorer’da kodu görmeseniz bile bir satırlık bir alan işgal eder ve siteniz üstten bir satır aşağıya iner. Dilediğiniz kadar css ile sıfırlamaya çalışsanızda yukarıdaki boşluğu bunu başaramazsınız çünkü orada BOM vardır.
Sayfanızda Türkçe karakterlerin tamamen bozuk görünmesine neden olabilir.
Çözüm
Çözüm oldukça basit. Dosyanızı UTF-8′e çevirirken yazı düzenleyicinizde BOM olmadan UTF-8 seçeneğini seçmelisiniz. Malesef bunu yapmak için direk kodları silemiyoruz çünkü yazı düzenleyiciler bu karakterleri görmüyor. Biz dosyanın dil yapısını değiştirerek bu işaretten kurtulacağız. En çok kullanılan iki düzenleyici olan Notepad2 ve Notepad++ yazılımlarında resimle nasıl bu işaretten kurtulabileceğinizi gösterelim.
Notepad++ (Benim Tercihim)
Notepad++ programında Format altında BOM olmadan UTF-8 (UTF-8 without BOM)’u seçerek sorunu giderebilirsiniz.
Not 1: Mevcut bir dosya ANSI formatında ve Türkçe karakter içeriyorsa onu dönüştürmek için Dönüştür (UTF-8 Without BOM) seçeneğini seçerseniz karakterleriniz bozulmadan BOM’suz UTF-8 formatında kodlamaya geçebilirsiniz.
Not 2: Türkçe karakterli dosyayı dönüştürmenin uzun yolu ise şu şekildedir. Önce Ctrl+A ile tüm yazıyı seçip Kes’in. Ardından dosyanın formatını resimlerdeki gibi değiştiri. Sonra kestiklerinizi tekrar yapıştırın ve dosyanızı kaydedin.
Notepad2
Notepad2 programında File->Encoding altında sadece UTF-8 olan seçeneği seçerek sorunu çözebilirsiniz
Not: Arkadaşlar HTML ile XHTML karıştırmayalım lütfen. Sitelerinizin W3C XHTML uyumlusu olup olmadığını XHTML Validator aracıyla görebilirsiniz.
The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported.
Yani diyor ki BOM’lu dosyaların bazı düzenleyicilerde ve tarayıcılarda problem çıkardığı bilinmektedir. Bu nedenle BOM daha iyi desteklenene kadar bu işareti kullanmaktan kaçınsanız iyi olur.
Not 2: BOM, özellikle tema Türkçe’leştirmelerinde dikkat edilmesi gereken bir husus.
BOM Utf-8 hakkında söyleyeceklerim bu kadar. Erdinç Koç
