İçerikler
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ı"/>
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.
<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.
