0 gün Seviye 1 Avar Teknolojileri

Hata Bulma ve Doğrulama

Ders 31/45 · 6 dakika · 2 soru · 1 egzersiz

Bu dersin sonunda HTML kodunuzdaki hataları bir araçla bulup düzeltebileceksiniz.

“Görünüşü düzgün” yeterli değil

Tarayıcılar hatalı HTML’i sessizce düzeltmeye çalışır. Bu, kullanıcının bozuk sayfa görmemesini sağlar ama hatalarınızı da gizler. Üstelik farklı programlar aynı hatayı farklı şekilde yorumlayabilir.

W3C doğrulayıcı

validator.w3.org adresi, HTML kodunuzu kurallara göre kontrol eden ücretsiz bir araçtır.

  1. Siteyi açın.
  2. Validate by Direct Input sekmesine geçin.
  3. Kodunuzu kutuya yapıştırın.
  4. Check düğmesine basın.

Hata mesajlarını okumak

Sonuçlar şöyle görünür:

Error: Stray end tag strong.
From line 8, column 38; to line 8, column 46
  • Error düzeltilmesi gereken bir hatadır. Warning ise bir uyarıdır.
  • İlk bölüm sorunun ne olduğunu, ikinci bölüm nerede olduğunu söyler.
  • Mesaj İngilizce olsa da içindeki etiket adı ve satır numarası çoğu zaman yeterlidir.
Önce ilk hatayı düzeltin

Tek bir hata, arkasından onlarca hata mesajı doğurabilir. Örneğin kapatılmamış bir etiket birçok satırı etkiler. En üstteki hatayı düzeltip yeniden kontrol edin.

Sık görülen hatalar

  • Kapatılmamış etiketler
  • Yanlış sırada kapatılan etiketler
  • Aynı id değerinin iki kez kullanılması
  • alt niteliği olmayan resimler
  • ul veya ol dışında kullanılan li
  • Eksik meta charset veya title
  • p etiketinin içine yazılan blok elemanlar
Sık yapılan hatalar

Hata mesajına bakmadan rastgele değişiklik yapmak. Mesajdaki satır numarasına gidin.

Hata mesajındaki satırın her zaman sorunlu satır olduğunu sanmak. Bazen asıl hata birkaç satır yukarıdadır.

Soru 1

Doğrulayıcı 40 hata gösteriyor. Nereden başlamalısınız?

  • En üstteki hatadan :: Doğru. Diğerleri bu hatanın sonucu olabilir.
  • En alttaki hatadan :: Sonraki hatalar genellikle öncekilerin sonucudur.
  • Rastgele bir hatadan :: Sırayla ilerlemek daha verimlidir.
Soru 2

Sayfa ekranda düzgün görünüyor. Kodda hata olmadığı söylenebilir mi?

  • Evet :: Tarayıcılar birçok hatayı sessizce düzeltir.
  • Hayır :: Doğru.
  • Yalnızca Chrome’da düzgün görünüyorsa :: Hangi tarayıcı olursa olsun görünüş tek başına yeterli değildir.

Bozuk sayfayı düzeltin

Aşağıdaki hatalı kodda altı sorun var. Kopyalayıp doğrulayıcıda deneyin.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kulüp</title>
</head>
<body>
  <h1 id="baslik">Kodlama Kulübü</h1>
  <h2 id="baslik">Etkinlikler</h2>
  <p><strong><em>Cuma toplanıyoruz</strong></em></p>
  <li>Python çalışması</li>
  <img src="logo.png">
  <p>Bize <a href="katil.html">katılın!</p>
</body>
</html>
Sorunları göster
  1. meta charset satırı eksik.
  2. baslik değeri iki kez id olarak kullanılmış.
  3. strong ve em yanlış sırada kapanıyor.
  4. li bir liste içinde değil.
  5. Resmin alt metni yok.
  6. a etiketi kapatılmamış.
Bütün hataları düzeltin

Sayfayı düzeltilmiş haliyle yazın. İkinci başlığın id değeri etkinlikler olsun. Liste ul olsun. Resmin alt metni Kulüp logosu olsun.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kulüp</title>
</head>
<body>
  <h1 id="baslik">Kodlama Kulübü</h1>
  <h2 id="etkinlikler">Etkinlikler</h2>
  <p><strong><em>Cuma toplanıyoruz</em></strong></p>
  <ul>
    <li>Python çalışması</li>
  </ul>
  <img src="logo.png" alt="Kulüp logosu">
  <p>Bize <a href="katil.html">katılın!</a></p>
</body>
</html>

Bu derste öğrendikleriniz

  • Tarayıcılar hataları gizleyebilir, bu yüzden görünüşe güvenilmez.
  • W3C doğrulayıcı HTML hatalarını satır numarasıyla gösterir.
  • Hataları en üsttekinden başlayarak düzeltin.

Dersi bitirdin mi?Bu dersi tamamladın.

İlerlemen bu tarayıcıda saklanır.