inf-schule | Einstieg: Fehler im Quelltext » Experimente mit einem HTML-Validierer

Experimente mit einem HTML-Validierer

Fehlertoleranz von Browsern

Browser sind erstaunlich fehlertolerant. Sie versuchen stets, den Quelltext in irgendeiner Weise sinnvoll darzustellen, auch wenn der Quelltext Fehler enthält. Warum also so akribisch die Regeln befolgen, wenn der Browser die Fehler doch so gut ausbügeln kann?

Wenn der Quelltext Fehler enthält, weiß man eigentlich nicht so genau, wie Browser damit umgehen und wie sie die Webseite schließlich anzeigen. Es gibt inzwischen eine große Anzahl von Browsern und es werden ständig neue entwickelt – auch für immer neue Geräte. Wenn man will, dass eine neu erstellte Webseite von allen Browsern richtig angezeigt wird, dann muss man sie entweder alle durchtesten (das macht sehr viel Arbeit – und was ist mit Browsern, die noch gar nicht existieren?), oder man hält sich an alle Syntax-Regeln. (Ganz einfach, oder?)

Automatisierte Fehlersuche

Bestimmt ist dir beim Erstellen von eigenen Webseiten schon aufgefallen, wie schnell dabei Fehler passieren. Es führt deshalb kein Weg daran vorbei, Fehler zu finden und zu beheben. Das gilt übrigens ganz genauso beim Programmieren.

Fehlersuche ist ein schwieriges und aufwendiges Geschäft – insbesondere, wenn der zu untersuchende Quelltext lang und kompliziert ist. Das HTML-Tool von inf-schule bietet schon eine erste Hilfe. Es achtet zum Beispiel darauf, ob ein geöffnetes Tag auch wieder geschlossen wird, und ob die Elementstruktur – also, wie die einzelnen Elemente ineinander verschachtelt wurden, – Sinn ergibt. Letztlich überprüft das Tool also, ob die Syntaxregeln von HTML eingehalten wurden. Genauso arbeiten auch moderne Text-Editoren, mit denen Profis Webseiten erstellen.

Validierer

Leider findet das HTML-Tool aber noch nicht alle Fehler. Dafür gibt es Spezialsoftware – sogenannte Validierer. Ein Validierer überprüft, ob die Syntax-Regeln einer formalen Sprache eingehalten worden sind. Dafür sind die Syntax-Regeln, die wir bisher nur in Worten formuliert haben („HTML-Elemente bestehen in der Regel aus einem öffnenden und einem schließenden Tag.“, ...), auch formal festgehalten, sodass sie automatisiert abgearbeitet werden können. Ein Dokument, das alle Regeln befolgt, heißt valide.

Aufgabe 1

(a) Öffne den Validierer auf der Seite https://validator.w3.org/ und füge den HTML-Quelltext von unterhalb der Aufgabe als „File Upload“ oder „Direct Input“ ein.

(b) Analysiere die Ausgabe. Es folgt eine ganze Liste von Fehlern und außerdem eine grafische Darstellung der gefundenen Fehler. Verschaffe dir einen Überblick.

(c) Gehe nun die Fehlermeldungen nacheinander durch und versuche, die Fehler direkt auf der Seite des Validierers zu beheben. Überprüfe ab und zu den aktuellen Zwischenstand. Schaffst du es, alle Fehlermeldungen auszuräumen? Wenn du eine Meldung nicht verstehst, versuche erst die anderen abzuarbeiten. Ziel ist ein solcher Anblick:

<!DOCTYPE html>
<html>
<hea>
    <meta charset="UTF-8">
    <title>Heraus aus dem Schloss – ein HTML-Abenteuer</title>
</head>
<bod>
    <h1>Heraus aus dem Schloss – ein HTML-Abenteuer</h2>

    <h2>Der Weg ins Schloss</h2>

    <p>
        Du bist schon den ganzen Tag unterwegs. Das Handy ist leider vor zwei Stunden ausgegangen 
        und so langsam wird es wirklich dunkel. Vielleicht war es keine gute Idee, an dieser einen 
        Kreuzung vom Wanderweg abzuweichen. Aber der Weg sah so verlockend aus ... Und nun stehst 
        du hier und weißt gar nicht mehr, wo du bist. Doch was ist das dort vorne? Da brennt doch 
        Licht! Du gehst zügig auf das Licht zu.
    </p>

    <img src="img/eingang.jpg" alternative="Schloss width="300">

    <b>
        Das Licht kommt von einem imposanten Schloss. Im Innenhof rufst du einige Male, doch niemand 
        reagiert. Das Haupt-Portal ist aber einen Spalt offen. „Kann ich einfach eintreten?“, denkst 
        du dir. Doch draußen zu bleiben – in der Kälte und im Dunkeln – ist ja auch keine Option. 
        Vorsichtig schlüpfst du durch den Spalt.
    </p>

    <p>
        „Knall!“ Die Tür fällt fest hinter dir ins Schloss. „Ich hatte die Tür doch gar nicht 
        berührt,“ wunderst du dich. Diese Verwunderung sollte aber in den nächsten Stunden erst 
        Unbehagen und schließlich blanker Verzweiflung weichen ...
    </p>

    <h3>Der Innenhof</h3>

    <p>
        Du befindest dich im Innenhof des Schlosses. Alles ist still und verlassen. Du siehst dich 
        um und entdeckst, dass das Hauptportal, durch das du hereingekommen bist, nun verschlossen 
        ist. Vor dir führt eine Wendeltreppe auf einen kleinen Turm hinauf, der mit dem restlichen 
        Schloss verbunden ist. Links und rechts von dir führen zwei Türen ins Gebäude. Sie sind 
        jedoch völlig von Rosen überwuchert. 
    </p>

    <p>
        Was möchtest du tun?
    </p>
    <ul>
        <li><a href="stockwerk-hoch.html">Gehe die Wendeltreppe nach oben</a></li>
        <li><a href="tuer-rechts.html">Gehe zur Tür rechts</li></a>
        <li><a href="tuer-links.html">Gehe zur Tür links</a></li>
	/ul
</bod>
</htm>