W3C Validator Hataları ve Çözümleri


Bu yazımda ise W3 hatalarının nasıl çözülmesi gerektiğini bilmeyenler için açıklama gereğinde bulundum. Bu hatalar genellikle yanlış ya da eksik kullanılan HTML yapılarından oluşmaktadır. Karşılaştığım hatalardan hatırladıklarımı burada nasıl düzeltileceğini göstereceğim. Ayriyeten ara ara güncellemelerde yapacağım. Şimdi gel gelelim hatalarımızı çözüme kavuşturmaya.

<img> Tagından Doğan Hatalar ve Çözümleri

Bu tag kullanılırken yapılacak olan en basit hatalardan birisi alt belirtilmemiş ya da yükseklik ve genişlik belirtilmemiş olmasıdır. Alt tagını isterseniz boş geçebilirsiniz ama doldurmanız sizin açınızdan daha iyi olacaktır. Dikkat edilecek diğer bir konu ise / işaretinin kullanımıdır. Doğru bir img tagı kullanımı ise şu şekilde olmalıdır.

<img src="resim.jpg" width="100" height="100" alt="Resim Dosyası"/>

<link> <img> <meta> Gibi Tek Açılan Taglardaki Hatalar ve Çözümleri

Bu hata ise genelde / işaretinin kullanım eksikliğinden dolayı olmaktadır. Örnek vermek gerekirse kullanımları şu şekilde olmaktadır. Buradaki asıl bomba ise; <br> tagındadır. Br tagı da tek kullanımlı olduğundan dolayı onunda sonuna / işareti konulmalıdır.

<link rel="stylesheet" href="style.css" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-9"/>
<br />

Div'e Link Verirken Yapılan Hatalar ve Çözümleri | En Çok Hata Alınan Olay!

Bu hata ise w3'de karşımıza çıkan en sık hatalardan bir tanesidir. HTML taglarına doğrudan link vermek standartlar dışında olduğundan dolayı hata mesajları almanız kaçınılmaz olacaktır. Bunun nedeni nesnelerin büyüklük ve küçüklük diye ifade edilen olaylarının olmasındandır. Yani div > a'dan. Bundan dolayı da <a>; <div>'i kapsayamaz.

<a href="#" title="Link Başlığı">
<div id="baslik">Merhaba W3</div>
</a>

Şimdi yukarıdaki örneğimize baktığımıza çoğumuz burada hata yok ki diyebilir. İşte bu bizim alışmış bir kodlamamız olduğunu göstermektedir. Buradaki yanlış; <a>'nın içinde <div> değil, <div>'in içinde <a> olmalıdır. Bu yukarıdaki hatalı kodun doğru yazımı şu şekilde olmalıdır;

<div id="baslik">
<a href="#" title="Link Başlığı">Merhaba W3</a>
</div>

Şimdi daha bir ince ayrıntıya inmekte gerekir. Her link bunun gibi basit çözülmeyebilir. Örnek verecek olursak şöyle bir hatalı link yapımız olsun;

<a href="#" title="Link Başlığı">
<div id="baslik"></div>
</a>

Yukarıdaki kodda şöyle bir şey olabilir; Baslik adında bir id tanımlanmış ve bu css ile şekillendirilmiş. Mesela bu bir arka plan resim belirlemesi olsun. O zaman bu kullanımı nasıl düzenlememiz gerekecek? İşte şu yöntemler kullanıla bilinir;

<div onclick="location.href='#'" style="cursor:pointer" id="baslik"></div>

Yukarıdaki gibi bir <a> tagı kullanılmadan <div>'e tıklandığında işlem yaptırabiliriz. Böylece hata almamış temiz bir kodlama yaparız. Ha ben javascript kullanmadan yapmak istiyorum illa div kullanacağım onunda içinde <a> olacak diyorsanız o zaman css ile düzenlememizle şu şekilde yapabiliriz;

#baslik a{background:url(baslik.jpg);width:100px;height: 100px;display:inline-block}
<div id="baslik">
<a href="#" title="Link Başlığı"></a>
</div>

Yukarıdaki gibi bir Css kullanımı yaptığınızda <a> objemiz gerekli genişlik ve yüksekliği alacağından dolayı yanlış kullanımdaki görünüme kavuşacaktır. Tabi bu arada örnekteki değerler değişkendir.

Kapatılmayan Taglardan Doğan Hatalar

Olur ya unutkanlıktan dolayı bir tagı kapatmayı unutur ya da yanlışlıkla silerseniz işte o zaman w3 hatası ile karşılaşırsınız. Bunun için tag açıp kapatırken mutlaka dikkat etmek gerekmektedir.

Birden Fazla ID Tanımlaması Yapmak | Sık Yaşanan Bir Diğer Hata!

Bu hata ise yapmış olduğunuz kodlamanız da vermiş olduğunuz id ismini birden fazla kullanmaktan dolayı olmaktadır. ID değeri büyük bir nesne olduğundan dolayı bir kez kullanılmalı ve içerisinde classlar ile bir şablon yapısı oluşturulmalıdır. Bunun için çözüm ise ID yerine Class kullanmaktır.
- 14.08.2013 / 01:01:04 1

Sosyal Medya Paylaşım Alanı

Bunlarda İlginizi Çekebilir

Html Dersleri

W3C Validator Hataları ve Çözümleri

Kategori: Html Dersleri | 14.08.2013
12:10 Javascript

Javascript ile Popup (Açılır) Pencereler Oluşturma

Kategori: Javascript | 13.05.2014
8:26 Php Dersleri

Mysqlde Arama İşlemi (Like)

Kategori: Php Dersleri | 03.05.2013
5:56 Php Dersleri

Htmlspecialchars ile Html Taglarını Ekrana Basmak

Kategori: Php Dersleri | 03.05.2013
Php Dersleri

Yorum Listesi (1) # YorumYap

  • Hakan Simyager Dingil (22.08.2013 - 12:11:00)
    Çok güzel konu :D link hatasını bilerek oyle yapıyorum işime geliyo diyebilirim :D

Hadi Sende Yorum Yap!

Yorum Gönderilmiştir. Onaylandıktan Sonra Mesajınız Yayınlanacaktır.