HTML/CSS - Fehlersuche - Einführung
1. Die Abschnitte
- Überblick
- Der HTML Validator
- Arbeiten mit dem HTML Validator
- Der CSS Validator
- Arbeiten mit dem CSS Validator
- Firebug
- Elemente auswählen
- Die Layout-Ansicht
- CSS-Anweisungen ändern
- Überschriebene Anweisungen
- Ein paar Hinweise zu Firebug
2. Vorwort
Nachdem ich bereits zu JavaScript und PHP ein Tutorial zum Thema Fehlersuche verfasst habe, ist nun HTML und CSS dran. Allerdings sieht die Sache hier ein wenig anders aus, da Fehler nur Auswirkung auf die Darstellung haben. Und es sich bei beiden nicht um echte Programmiersprachen handelt. Trotzdem muss man natürlich auch hier Hand anlegen, denn wenn der Auftritt aussieht wie Sau, dann kommt das nicht so gut an.
3. Tools
Beim Tutorial zur Fehlersuche mit JavaScript habe ich euch ja schon auf die entsprechenden Entwicklertools hingewiesen. Und die gelten nicht nur für JavaScript, sondern auch für HTML und CSS.
Validatoren
Als erstes möchte ich euch auf den HTML Validator hinweisen. Dieses nützliche Addon für den Firefox solltet ihr auf jeden Fall installieren. Den Download dazu findet ihr hier.
Als nächstes hätten wir dann den CSS Validator vom W3C. Für den benötigt man auf jeden Fall eine Online-Verbindung. Und einen eigenen Webspace. Gut bei dem kann man ein wenig tricksen, aber dazu komme ich später.
4. Ein wichtiger Hinweis
Ich zeige euch hier, wie man die oben aufgeführten Tools benutzt. Und wie man damit möglichen Fehlern auf die Schliche kommen kann. Das mache ich aber nur anhand sehr einfacher Beispiele, um euch die Prinzipien vor Augen zu halten. Mehr nicht. Ich gebe euch die Werkzeuge an die Hand. Damit arbeiten zu lernen müsst ihr selber. Und immer an den schönen Spruch denken.
"Wer einmal weiß, wie ein Hammer funktioniert, für den besteht die ganze Welt nur noch aus Nägeln." [Quelle: unbekannt]
Ein Hinweis
Eigentlich lautet das korrekte Zitat anders. Es passt hier leider nicht ganz. Trotzdem reiche ich es mal nach. Und Dank an Manuel für den Hinweis.
"Ich denke, wenn man nur einen Hammer hat, neigt man dazu die ganze Welt als Nagel zu sehen." [Quelle: Abraham Maslow]
5. Die Daten
... zum Rumspielen findet ihr wie immer rechts unter dem gleichnamigen Punkt. Allerdings gibt es diesmal keinen Lösungscode. Ich zeige euch die Fehler und es ist eure Aufgabe, die zu finden und zu eliminieren. Pro Abschnitt gibt es dazu die entsprechende(n) Datei(en). Darauf weise ich dann aber dezidiert hin.
6. Die Vorgehensweise
Der HTML Validator
Zunächst werde ich euch zeigen, wie man damit arbeitet und die entsprechenden Fehler findet. Aber Obacht! Selbst wenn der Code valide ist, so heißt das nicht, dass er syntaktisch korrekt ausgezeichnet ist. Nein, darum müsst ihr euch selber kümmern.
Der CSS Validator
Anschließend beschäftigen wir uns mit dem Teil. Und dort zeige ich euch auch, wie man es nutzen kann, wenn man im Besitz einer Internetverbindung ist. Sonst macht das Arbeiten damit ehrlich gesagt keinen Spaß.
Firebug
Da dieses Addon über zahlreiche Funktionen im Bezug auf HTML und CSS verfügt, werden wir uns damit sehr intensiv beschäftigen. Und anschließend werdet ihr ohne dieses Addon wohl kaum noch arbeiten möchten.
Ein Hinweis
Die Entwicklertools anderer Browserhersteller arbeiten vom Prinzip her genau so wie Firebug. Es gibt da den ein oder anderen Unterschied und möglicherweise fehlt auch die ein oder andere Funktionalität. Aber damit könnt ihr euch beschäftigen, wenn das Interesse vorhanden ist.
7. Ganz wichtig!
Für dieses Tutorial solltet ihr auf jeden Fall einen Webserver euer Eigen nennen. Das hängt zwar primär mit dem CSS Validator zusammen aber ihr solltet, wenn nicht schon geschehen, endlich mal mit der Zeit gehen. Die Informationen dazu findet ihr hier und hier.