HTML’de hata ayıklama

HTML yazmak iyi olmasına iyidir ama ya bir şeyler ters giderse ve koddaki hatanın nerede olduğunu çözemezseniz? Bu makale, HTML’deki hataları bulmanıza ve düzeltmenize yardımcı olabilecek bazı araçları tanıtacaktır.

Hata ayıklama korkutucu değil

Kod yazarken genellikle her şey yolundadır; bir hatanın meydana geldiği o korkunç ana kadar. Yanlış bir şey yaptınız, bu nedenle kodunuz çalışmıyor – ya hiç çalışmıyor ya da tam olarak istediğiniz gibi değil. Örneğin, aşağıda Rust dili ile yazılan basit bir programı derlemeye çalışırken oluşan hatayı görüyorsunuz.

Burada, hata mesajının anlaşılması veya yazım hatasının bulunması nispeten kolaydır – “sonlandırılmamış çift alıntı dizesi”. Görsele bakarsanız, muhtemelen println!(Hello, world!"); satırında bir çift tırnak işaretinin eksik olduğunu görebilirsiniz. Ancak, programlar büyüdükçe hata mesajları hızla daha karmaşık ve yorumlanması daha az kolay hale gelebilir. Gerçi basit durumlar bile Rust hakkında hiçbir şey bilmeyen biri için biraz korkutucu görünebilir.

Hata ayıklamanın korkutucu olması gerekmez – herhangi bir programlama dilinde kod yazma ve hata ayıklama konusunda rahat olmanın anahtarı, hem dile hem de araçlara aşina olmaktır.

HTML ve hata ayıklama

HTML’yi anlamak Rust kadar karmaşık değildir. Tarayıcı sonucu göstermeden önce HTML’yi farklı bir biçimde derlemez (derlenmiş değil yorumlanmış). Ve HTML’nin öğe sözdizimini anlamak muhtemelen Rust, JavaScript veya Python gibi “gerçek bir programlama dili”nden çok daha kolaydır. Tarayıcıların HTML’yi çalıştırma şekli, programlama dillerinin çalıştırılma biçiminden çok daha serbesttir, bu hem iyi hem de kötü bir şeydir.

Hoşgörülü kod

Peki, hoşgörülüden ne anlamalıyız? Genelde kodda yanlış bir şey yaptığınızda karşılaşacağınız iki ana hata türü vardır:

• Sözdizimi hataları: Bunlar, yukarıda gösterilen Rust hatası gibi, kodunuzdaki programın gerçekten çalışmamasına neden olan yazım veya noktalama hatalarıdır. Dilin sözdizimine aşina olduğunuz ve hata mesajlarının ne anlama geldiğini bildiğiniz sürece, bunları düzeltmek genellikle kolaydır.
• Mantık hataları: Bunlar, sözdiziminin gerçekten doğru olduğu, ancak kodun olmasını istediğiniz gibi olmadığı, yani programın yanlış çalıştığı hatalardır. Sizi hatanın kaynağına yönlendirecek bir hata mesajı olmadığından, bunları düzeltmek genellikle sözdizimi hatalarından daha zordur.

HTML’nin kendisi sözdizimi hatalarından etkilenmez, çünkü tarayıcılar onu hoşgörülü bir şekilde çalıştırır, yani sözdizimi hataları olsa bile sayfanın görüntülenmeye devam edeceği anlamına gelir. Tarayıcıların, yanlış yazılmış etiketleri nasıl yorumlanacağını belirten yerleşik kuralları vardır, bu nedenle beklediğiniz gibi olmasa bile çalışan bir şey elde edersiniz. Bu, elbette, yine de bir sorun olabilir!

Not: HTML izin verilerek çalıştırılır, çünkü web ilk oluşturulduğunda, insanların içeriklerini yayınlamalarına izin vermenin sözdiziminin kesinlikle doğru olduğundan emin olmaktan daha önemli olduğuna karar verildi. Web, en başından beri daha katı olsaydı, muhtemelen bugün olduğu kadar popüler olmazdı.

Aktif öğrenme: Hoşgörülü kodun incelenmesi

HTML kodunun serbest doğasını incelemenin zamanı geldi.

1. İlk olarak, hata ayıklama örneği‘ni yerel olarak kaydedin. Bu örnek, keşfetmemiz için kasıtlı olarak bazı yerleşik hatalarla yazılmıştır (HTML biçimlendirmesinin iyi biçimli yerine kötü biçimli olduğu söylenir).
2. Ardından, bir tarayıcıda açın. Bunun gibi bir şey göreceksiniz:
3. Bu hemen harika görünmüyor; nedenini çözüp çözemeyeceğimizi görmek için kaynak koduna bakalım (yalnızca gövde içeriğine bakıyoruz):

<h1>HTML debugging examples</h1>

<p>What causes errors in HTML?

<ul>
  <li>Unclosed elements: If an element is <strong>not closed properly,
      then its effect can spread to areas you didn't intend

  <li>Badly nested elements: Nesting elements properly is also very important
      for code behaving correctly. <strong>strong <em>strong emphasised?</strong>
      what is this?</em>

  <li>Unclosed attributes: Another common source of HTML problems. Let's
      look at an example: <a href="https://www.mozilla.org/>link to Mozilla
      homepage</a>
</ul>

4. Sorunları gözden geçirelim:
   • Paragraf ve liste öğesi elemanlarının kapanış etiketleri yok. Yukarıdaki resme bakıldığında, bir öğenin nerede bitip diğerinin nerede başlaması gerektiğini anlamak kolay olduğundan, bu hatanın çalıştırma işlemini çok kötü etkilediğini söyleyemeyiz.
   • İlk <strong> elemanın kapanış etiketi yok. Öğenin nerede bitmesi gerektiğini söylemek kolay olmadığı için bu biraz daha problemlidir. Aslında, metnin geri kalanının tamamı koyu bir şekilde vurgulanmış.
   • Bu bölüm kötü bir şekilde iç içe geçmiş: <strong>strong <em>strong emphasised?</strong> what is this?</em>. Önceki sorundan dolayı bunun nasıl yorumlandığını söylemek kolay değil.
   • href Bu özelliğin kapanış çift tırnak işareti eksik. Bu en büyük soruna neden olmuş gibi görünüyor – bağlantı hiç oluşturulmamış.
5. Şimdi kaynak koddaki işaretlemenin aksine tarayıcının oluşturduğu işaretlemeye bakalım. Bunu yapmak için tarayıcı geliştirici araçlarını kullanabiliriz. Tarayıcınızın geliştirici araçlarını nasıl kullanacağınızı bilmiyorsanız, tarayıcı geliştirici araçlarını keşfetmek için birkaç dakikanızı ayırmak isteyebilirsiniz.
6. DOM denetçisinde, işlenen işaretlemenin nasıl göründüğünü görebilirsiniz:
7. DOM denetçisini kullanarak, tarayıcının HTML hatalarımızı nasıl düzeltmeye çalıştığını görmek için kodumuzu ayrıntılı olarak inceleyelim (incelemeyi Firefox’ta yaptık; diğer modern tarayıcılar da aynı sonucu vermeli ):
   • Paragraflara ve liste öğelerine kapanış etiketleri verilmiştir.
   • İlk <strong>öğenin nerede kapatılacağı belli değil , bu nedenle tarayıcı her bir ayrı metin bloğunu kendi etiketiyle belgenin en altına kadar sardı!
   • Yanlış yerleştirme, tarayıcı tarafından burada gösterildiği gibi düzeltildi:<strong>strong <em>strong emphasised?</em> </strong> <em> what is this?</em>
   • Eksik çift alıntı içeren bağlantı tamamen silindi. Son liste öğesi de şöyle görünür:
     <li> <strong>Unclosed attributes: Another common source of HTML problems. Let's look at an example: </strong> </li>

HTML doğrulama

Yukarıdaki örnekte gördüğünüz gibi HTML’nizin gerçekten iyi biçimli olduğundan emin olmak istersiniz. Ama nasıl? Yukarıdaki gibi küçük bir örnekte, satırlar arasında arama yapmak ve hataları bulmak kolay, peki ya devasa, karmaşık bir HTML belgesinde ne yapacağız?

En iyi strateji, HTML sayfanızı aşağıdakiler aracılığıyla çalıştırarak başlamaktır. İşaretleme Doğrulama Hizmeti— HTML, CSS ve diğer web teknolojilerini tanımlayan spesifikasyonlarla ilgilenen kuruluş olan W3C tarafından çalıştırılır. Bu web sayfası bir HTML belgesini girdi olarak alır, inceler ve size HTML’nizde neyin yanlış olduğunu söyleyen bir rapor verir.

Doğrulanacak HTML’yi belirtmek için bir web adresi sağlayabilir, bir HTML dosyası yükleyebilir veya doğrudan bir HTML kodu girebilirsiniz.

Aktif öğrenme: Bir HTML belgesini doğrulama

Bunu bizimkilerle deneyelim: örnek belge.

1. İlk olarak İşaretleme Doğrulama Hizmeti zaten açık değilse, bir tarayıcı sekmesinde açın.
2. Doğrudan Girişle Doğrulama sekmesine geçin.
3. Örnek belgenin tüm kodunu (yalnızca gövdeyi değil) kopyalayın ve İşaretleme Doğrulama Hizmetinde gösterilen büyük metin alanına yapıştırın.
4. Kontrol düğmesine basın .

Bu size hataların ve diğer bilgilerin bir listesini vermelidir.

Hata mesajlarını yorumlama

Hata mesajları genellikle yardımcı olur, ancak bazen o kadar da yardımcı olmazlar; biraz pratik yaparak kodunuzu düzeltmek için bunları nasıl yorumlayacağınızı öğrenebilirsiniz. Hata mesajlarını gözden geçirelim ve ne anlama geldiklerini görelim. Hatayı kolayca bulmanıza yardımcı olmak için her mesajın bir satır ve sütun numarasıyla geldiğini göreceksiniz.

• ” Bu belgenin dilini bildirmek için html içine lang özniteliğini eklemeyi düşünün.”: Bu bir hata değil, bir uyarı. Önerilen yöntem her zaman bir dil tanımlamaktır ve bu uyarı nasıl yapılacağını açıklar.
• “Bitiş etiketi li ima edildi, ancak açık öğeler vardı (2 adet)”: Bu mesajlar, kapatılması gereken bir öğenin açık olduğunu gösterir. Bitiş etiketi ima edilir, ancak aslında orada değildir. Satır/sütun bilgisi, kapanış etiketinin gerçekten olması gereken satırdan sonraki ilk satırı gösterir, yinede bu neyin yanlış olduğunu görmek için yeterince iyi bir ipucudur.
• “Kapatılmamış öğe strong“: Bunu anlamak zaten kolay — bir <strong> öğesi kapatılmamış ve satır/sütun bilgisi tam olduğu yeri gösteriyor.
• “Bitiş etiketi strong yuvalama kurallarını ihlal ediyor”: Bu, yanlış iç içe yerleştirilmiş öğeleri gösterir ve satır/sütun bilgileri nerede olduklarını gösterir.
• “Bir öznitelik değeri içindeyken dosyanın sonuna ulaşıldı. Etiket yoksayılıyor”: Bu oldukça şifreli; dosyanın sonu öznitelik değerinin içinde göründüğünden, muhtemelen dosyanın sonuna yakın bir yerde düzgün şekilde oluşturulmamış bir öznitelik değeri olduğu gerçeğine atıfta bulunuyor. Tarayıcının bağlantıyı oluşturmaması, hangi öğenin hatalı olduğu konusunda bize iyi bir ipucu vermelidir.
• “Dosyanın sonu görüldü ve açık öğeler vardı”: Bu biraz belirsizdir, ancak temelde düzgün bir şekilde kapatılması gereken açık öğeler olduğu gerçeğine atıfta bulunur. Satır numaraları dosyanın son birkaç satırını gösterir ve bu hata mesajı, açık bir öğe örneğini gösteren bir kod satırıyla birlikte gelir.
  Not : Bir öznitelik, bir kapanış alıntısının eksik olmasıyla sonuçlanabilir, çünkü belgenin geri kalanı özniteliğin içeriği olarak yorumlanır.
• “Kapatılmamış eleman ul“: Bu hata çok yararlı değil çünkü <ul> elemanının doğru kapandığını biliyoruz. Bu hata, <a> öğesinin eksik kapanış tırnak işareti nedeniyle öğenin kapatılmaması nedeniyle ortaya çıkar.

Her hata mesajının ne anlama geldiğini çözemiyorsanız, bunun için endişelenmeyin – aynı anda birkaç hatayı düzeltmeyi denemek de iyi bir fikirdir. Ardından, hangi hataların kaldığını göstermek için HTML’nizi yeniden doğrulamayı denersiniz. Bazen daha önceki bir hatayı düzeltmek, diğer hata mesajlarından da bizi kurtarır – birkaç hataya domino etkisine neden olabilir.

Aşağıdaki gibi bir sonuç gördüğünüzde hiç bir hatanızın kalmadığını anlayabilirsiniz:

Özet

İşte karşınızda, HTML’de hata ayıklamaya giriş. Bu yazı size kariyerinizde, daha sonra da CSS, JavaScript ve diğer kod türlerinde, hata ayıklamaya dair bazı yararlı beceriler kazandırmış olmalı. Aynı zamanda HTML’ye Giriş modülü öğrenme makalelerinin de sonunu işaret ediyor.