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>
<pre><code>&lt;h2&gt;Der Weg ins Schloss&lt;/h2&gt;

&lt;p&gt;
    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&szlig;t gar nicht mehr, wo du bist. Doch was ist das dort vorne? Da brennt doch 
    Licht! Du gehst z&uuml;gig auf das Licht zu.
&lt;/p&gt;

&lt;img src="img/eingang.jpg" alternative="Schloss width="300"&gt;

&lt;b&gt;
    Das Licht kommt von einem imposanten Schloss. Im Innenhof rufst du einige Male, doch niemand 
    reagiert. Das Haupt-Portal ist aber einen Spalt offen. &bdquo;Kann ich einfach eintreten?&ldquo;, denkst 
    du dir. Doch drau&szlig;en zu bleiben &ndash; in der K&auml;lte und im Dunkeln &ndash; ist ja auch keine Option. 
    Vorsichtig schl&uuml;pfst du durch den Spalt.
&lt;/p&gt;

&lt;p&gt;
    &bdquo;Knall!&ldquo; Die T&uuml;r f&auml;llt fest hinter dir ins Schloss. &bdquo;Ich hatte die T&uuml;r doch gar nicht 
    ber&uuml;hrt,&ldquo; wunderst du dich. Diese Verwunderung sollte aber in den n&auml;chsten Stunden erst 
    Unbehagen und schlie&szlig;lich blanker Verzweiflung weichen ...
&lt;/p&gt;

&lt;h3&gt;Der Innenhof&lt;/h3&gt;

&lt;p&gt;
    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&uuml;hrt eine Wendeltreppe auf einen kleinen Turm hinauf, der mit dem restlichen 
    Schloss verbunden ist. Links und rechts von dir f&uuml;hren zwei T&uuml;ren ins Geb&auml;ude. Sie sind 
    jedoch v&ouml;llig von Rosen &uuml;berwuchert. 
&lt;/p&gt;

&lt;p&gt;
    Was m&ouml;chtest du tun?
&lt;/p&gt;
&lt;ul&gt;
    &lt;li&gt;&lt;a href="stockwerk-hoch.html"&gt;Gehe die Wendeltreppe nach oben&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="tuer-rechts.html"&gt;Gehe zur T&uuml;r rechts&lt;/li&gt;&lt;/a&gt;
    &lt;li&gt;&lt;a href="tuer-links.html"&gt;Gehe zur T&uuml;r links&lt;/a&gt;&lt;/li&gt;
/ul

</bod>
</htm>

Aufgabe 2

Validiere nun alle Webseiten, die du selbst erstellt hast.

←Zurück Weiter→