[html5.wirlernen.at] [Aufgaben zur Lektion] [Video zur Lektion]

Lektion 20: HTML und CSS - Quelltext validieren (überprüfen)

Wie du im Laufe dieser Einführung sicher schon feststellen konntest können einem beim Erstellen von Webseiten so manche Fehler unterlaufen. In diesem Abschnitt beschäftigen wir uns damit wie man überprüfen - man spricht auch von validieren - kann ob die eigene Webseite tatsächliche den Standards von HTML5 und CSS entspricht - du also z.B. die HTML - Tags und CSS - Styles richtig einsetzt. Dies ist deshalb wichtig da ja deine Webseiten von den Browsern richtig dargestellt werden sollen.
Damit die Validierung der Webseite funktionieren kann muss demjenigen der den HTML - Quelltext überprüft mitteilen welche HTML - Version die eigene Seite hat. In unserem Fall teilen wir durch den Doctype mit dass es sich um eine HTML5 Seite handelt:
<!DOCTYPE html> - dieser Doctype steht ja immer in der 1. Zeile des HTML-Listings.
Darüberhinaus teilen wir im head unserer Seite mit welchen Zeichensatz wir verwenden - bei HTML5 verwenden wir UTF-8:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
Zur Erinnerung siehst du hier unten noch einmal das kommentierte HTML5 - Grundgerüst mit dem DOCTYPE und der Angabe der Zeichenkodierung:
<!DOCTYPE html><!-- Hier steht der DOCTYPE der Datei -->
<html>
<head>
    <title>Einführung in HTML5</title>
    <!-- Hier unten wird die Zeichenkodierung auf UTF-8 festgelegt -->
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>

<body>
    Hier kommt der Inhalt der Seite hin...
</body>
</html>

Validierungen haben den großen Vorteil dass man einen konkreten Fehlerbericht bekommt der auf die (mehr oder weniger) genauen Fehlerstellen - meistens die Zeilennummer - verweist und mögliche Gründe für die Fehler aufzeigt. Im folgenden verweise ich auf 3 (von mehreren) Möglichkeiten den eigenen HTML - Quelltext validieren zu lassen:
1. Online Validierung bei W3C
2. Validierung mit der Firefox Erweiterung Html Validator
3. Validierung im Editor Scriptly

Quelltext online überprüfen bei W3C

Die Organisation W3C - das ist jene Organisation die auch den Standard für HTML5 und CSS festlegt - hat eine Möglichkeit entwickelt Webseiten überprüfen lassen zu können.
Um diese Möglichkeit nutzen zu können begibt man sich zur Validierung von
* HTML zur Internetadresse http://validator.w3.org/
* CSS zur Internetadresse http://jigsaw.w3.org/css-validator/
Dort hat man 3 Möglichkeiten der Überprüfung
1. Überprüfung mit Angabe der Internetadresse der eigenen Webseite - hier zuerst für HTML und dann CSS:
Validation Validation
2. Überprüfung durch Upload der HTML- bzw. CSS - Datei - hier zuerst für HTML und dann CSS:
Validation Validation
3. Überprüfung durch direktes Einfügen eines HTML / CSS- Listings in ein Formular - hier zuerst für HTML und dann CSS:
Validation Validation

Quelltext mit der Firefox Erweiterung Html Validator validieren

Für diejenigen die als Browser den Firefox verwenden ist die Erweiterung Html Validator besonders zu empfehlen.
Man kann diese Erweiterung für den Firefox bei Mozilla unter der folgenden URL herunterladen: https://addons.mozilla.org/de/firefox/addon/html-validator/
Für mehr Infos wie z.B. Installation und Funktionsweise der Erweiterung siehe u.a.: http://users.skynet.be/mgueury/mozilla/

Quelltext mit dem Editor Scriptly validieren

Wenn man mit dem Editor Scriptly arbeitet kann man die dort schon vorhandene Validierung verwenden - sie wird dort als Check bezeichnet. Die Möglichkeit direkt aus dem Editor heraus einen Quelltext zu validieren ist besonders praktisch und deshalb besonders zu empfehlen!
Damit du den Check des Editors Scriptly verwenden kannst muss das Informationen - Fenster geöffnet sein. Dieses Fenster wird
* über Drücken von F6
* über das Menü Optionen / Fenster & Symbolleisten / Informationen
geöffnet oder geschlossen.
In der Registerkarte Check musst du dann GANZ UNTEN - je nachdem was du validieren möchtest - HTML oder CSS wählen!
Validator
Bei der obigen Fehlermeldung kannst du z.B. schon rasch erkennen dass es anscheinend einen Fehler in Zeile 69 gibt und dass es mit größter Wahrscheinlichkeit etwas mit dem <a></a> - Tag zu tun hat...

Tipp: Ich würde dir empfehlen absichtlich ein paar Fehler in dein Listing einzubauen und dieses dann mit dem Check des Editors zu überprüfen und dann anhand der Fehlermeldung wieder richtig zun stellen.

Für mehr Infos klicke hier OBEN auf der Seite auf das Video - Symbol...
Augabenstellung:
1. Erkläre mit eigenen Worten (also kein einfaches Copy und Paste) was man unter der Validierung eines Quelltextes versteht!
2. Erkläre was mit eigenen Worten (also kein einfaches Copy und Paste) was man unter dem Doctype einer HTML - Datei versteht! Zur Beantwortung der Frage kannst du natürlich auch im Internet recherchieren!
3. Erkläre was mit eigenen Worten (also kein einfaches Copy und Paste) was man unter dem Zeichensatz einer HTML - Datei versteht! Zur Beantwortung der Frage kannst du natürlich auch im Internet recherchieren!
4. Welcher Zeichensatz wird in einer HTML5 - Datei benötigt? Wie kann man diesen für die HTML5 - Datei festlegen?
5. Im folgenden Listing sind 5 Fehler enthalten - korrigiere diese mit Hilfe der Check (Validierungs) - Funktion des Editors! Sorge ebenfalls dafür dass das Listing übersichtlich gestaltet ist - achte darauf was alles dazu gehört und mach es dir beim Programmieren nicht zu leicht!!! Du musst im Listing zusätzlich die korrigierten Fehler kommentieren bzw. erklären was du zur Verbesserung des Quelltextes gemacht hast! Speichere das fertige Listing mit dem Dateinamen 020a.html. Hinweis: Wenn das hier unten angeführte Listing nicht übersichtlich gestaltet war so zählt das NICHT zu den 5 Fehlern!
<!DOCTYPE html>

head>
Titel</title>
<meta http-equiv="content-type" content="text/html; charset=U-8">

</head>

<bod
Hier kommt der Inhalt des Dokuments hin
</body>
</html>

6. Im folgenden Listing sind 5 Fehler enthalten - korrigiere diese mit Hilfe der Check (Validierungs) - Funktion des Editors! Sorge ebenfalls dafür dass das Listing übersichtlich gestaltet ist - achte darauf was alles dazu gehört und mach es dir beim Programmieren nicht zu leicht!!! Du musst im Listing zusätzlich die korrigierten Fehler kommentieren bzw. erklären was du zur Verbesserung des Quelltextes gemacht hast! Speichere das fertige Listing mit dem Dateinamen 020b.html. Hinweis: Wenn das hier unten angeführte Listing nicht übersichtlich gestaltet war so zählt das NICHT zu den 5 Fehlern!
<TYPE html>
<html>

<head>
 http-equiv="content-type" content="text/html; charset=UTF-8">
</head>

<body>
<title>Titel</title>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit,
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
<p>nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>
<p>reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla</p>
<p>pariatur. Excepteur sint occaecat cupidatat non proident,</p>
<p>sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>
</htm>

7. Im folgenden Listing sind 5 Fehler enthalten - korrigiere diese mit Hilfe der Check (Validierungs) - Funktion des Editors! Sorge ebenfalls dafür dass das Listing übersichtlich gestaltet ist - achte darauf was alles dazu gehört und mach es dir beim Programmieren nicht zu leicht!!! Du musst im Listing zusätzlich die korrigierten Fehler kommentieren bzw. erklären was du zur Verbesserung des Quelltextes gemacht hast! Speichere das fertige Listing mit dem Dateinamen 020c.html. Hinweis: Wenn das hier unten angeführte Listing nicht übersichtlich gestaltet war so zählt das NICHT zu den 5 Fehlern!

<!DOCTYPE>
<html>

<head>
<title>Titel</tit>
</head>

<body>

<img ="images/Gerald_G_Cartoon_Cat_Face.jpg" width="800" height="592" alt="Cartoon" /><br>
<img src="images/Gerald_G_Cartoon_Cat_Face.jpg" width="100" height="592" alt="Cartoon" /><b
<img src="images/Gerald_G_Cartoon_Cat_Face.jpg" width="400" height="296" alt="Cartoon" /><br>
Die obige Grafik wurde am 19.7.2012 von der Open Clip Art Library heruntergeladen<br>
- URL: http://openclipart.org/detail/307/cartoon-cat-face-by-gerald_g
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</body>
</html>

8. Im folgenden Listing sind 5 Fehler enthalten - korrigiere diese mit Hilfe der Check (Validierungs) - Funktion des Editors! Sorge ebenfalls dafür dass das Listing übersichtlich gestaltet ist - achte darauf was alles dazu gehört und mach es dir beim Programmieren nicht zu leicht!!! Du musst im Listing zusätzlich die korrigierten Fehler kommentieren bzw. erklären was du zur Verbesserung des Quelltextes gemacht hast! Speichere das fertige Listing mit dem Dateinamen 020d.html. Hinweis: Wenn das hier unten angeführte Listing nicht übersichtlich gestaltet war so zählt das NICHT zu den 5 Fehlern!

<!DOCTYPE html>
<html>

<head>
<title>Titel</title>
<meta http-equiv="content-type" content="text/html;>
</head>

<body>

<table>
<tr>
<th>Kopfzelle</td>
<th>Kopfzelle</th>
<th>Kopfzelle</th>
<th>Kopfzelle</th>
</tr>

<td>Datenzelle</td>
<td>Datenzelle</td>
<td>Datenzelle</td>
<td>Datenzelle</td>
</tr>
<tr>
<td>Datenzelle</td>
<td>Datenzelle</td>
<td>Datenzelle</td>
<td>Datenzelle</td>
</tr>
<tr>
<td>Datenzelle</td>
<td>Datenzelle</td>
<td>Datenzelle</td>
<td>Datenzelle</td>
</tr>
</tab

<body>
</html>

9. Im folgenden Listing sind 5 Fehler enthalten - korrigiere diese mit Hilfe der Check (Validierungs) - Funktion des Editors! Sorge ebenfalls dafür dass das Listing übersichtlich gestaltet ist - achte darauf was alles dazu gehört und mach es dir beim Programmieren nicht zu leicht!!! Du musst im Listing zusätzlich die korrigierten Fehler kommentieren bzw. erklären was du zur Verbesserung des Quelltextes gemacht hast! Speichere das fertige Listing mit dem Dateinamen 020e.html. Hinweis: Wenn das hier unten angeführte Listing nicht übersichtlich gestaltet war so zählt das NICHT zu den 5 Fehlern!

< html>
<html>

<head>
<title>Titel</title>
<meta http-equiv="content-type" content="charset=UTF-8">
</head>

<body>
</video>
<video width="320" height="240" controls="controls">
  <source src="MeinFilm" type="video/mp4" />
  <source src="MeinFilm.ogv" type="video/ogg" />
Your browser does not support the video tag.

<body>
</html>

10. Im folgenden Listing sind 5 Fehler enthalten - korrigiere diese mit Hilfe der Check (Validierungs) - Funktion des Editors! Sorge ebenfalls dafür dass das Listing übersichtlich gestaltet ist - achte darauf was alles dazu gehört und mach es dir beim Programmieren nicht zu leicht!!! Du musst im Listing zusätzlich die korrigierten Fehler kommentieren bzw. erklären was du zur Verbesserung des Quelltextes gemacht hast! Speichere das fertige Listing mit dem Dateinamen 020f.html. Hinweis: Wenn das hier unten angeführte Listing nicht übersichtlich gestaltet war so zählt das NICHT zu den 5 Fehlern!

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- Hier folgt der Style - Bereich -->
<style type="text/css">
h1 {
text-align:right; /* Textausrichtung rechts*/
color:#008080; /* Angabe der Schriftfarbe */
font-size:30pt; /* Angabe der Schriftgröße */
font-weight: bold; /* Text wird fett ausgegeben*/
padding-bottom: 5px;
border-bottom: dotted 4px #2E9900;
}
h2 {
text-align:center; /* Textausrichtung zentriert*/
color:#F68080; /* Angabe der Schriftfarbe */
font-size:26pt; /* Angabe der Schriftgröße */
font-weight: bold; /* Text wird fett ausgegeben*/
}
hr {
border: thick; /* dicker Rand*/
background-color: #254322; /* Hintergrundfarbe */
}
a {
font-size:24pt /* Angabe der Schriftgröße */
text-decoration: underline; /* Text wird unterstrichen*/
background-color: #7F55FF; /* Hintergrundfarbe */
}
img {
border:4px solid #FFD42A; /* durchgezogener Rahmen mit
einer Stärke von 4px */
float: left; /* Die Grafik wird links ausgerichtet - der Rest
der Seite fließt rechts darum*/
}
p {
text-align:right; /* Textausrichtung rechts*/
margin-left:30px; /* Abstand zum linken Rand 30px */
color:#800047; /* Angabe der Schriftfarbe */
background-color: #FFD4FF; /* Hintergrundfarbe */
font-size:22pt; /* Angabe der Schriftgröße */
font-weight: normal; /* normales Schriftgewicht
- also z.B. NICHT Fett (bold)*/
}
/* Ein Hintergrundbild wird so oft wiederholt bis der Bildschirm ausgefüllt wird*/
body {background-image:url("images/beach-scene.jpg");}
</style>

</head>

<body>
<src="images/cocnut-cocktail.jpg" width="800" height="747" alt="" />
<h1>Die erste Überschrift</h3>
<h2>Die zweite Überschrift</h2>
<title>Einführung in HTML5</title>
<p>Hier kommt der Inhalt der Seite hin...</p>
<p>Mit diesem Link springst du zu <a href="http://www.wirlernen.at/" target="_blank">www.wirlernen.at<a></p>
<span style="font-size: 10px;position:absolute;bottom:50px">Verwendete Grafiken gefunden am 22.7.2012 unter der URL:http://openclipart.org/detail/170985/beach-scene-by-gnokii-170985 und http://openclipart.org/detail/170983/coconut-cocktail-by-gnokii-170983</span>

</body>
</html>