[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 lang="de">
<head>
    <title>Einführung in HTML5</title>
    <!-- Hier unten wird die Zeichenkodierung auf UTF-8 festgelegt -->
    <meta 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. Validierung mit dem Visual Studio Code Editor
2. Online Validierung bei W3C

Quelltext mit dem Visual Studio Code Editor validieren

Die von uns bereits in der 3. Lektion installierte Extension HTMLHint ermöglicht, dass im Visual Studio Code Editor mögliche Code - Fehler unterwellt und im unteren Bereich Fehlermeldungen angezeigt werden, wenn der Quelltext Fehler enthält.
Wenn die Fehler ausgebessert wurden, erscheint im unteren Mitteilungsbereich sinngemäß der Hinweise "Es wurden bisher keine Probleme im Arbeitsbereich erkannt.".
Die Fehlermeldungen enthalten meist auch Hinweise welcher Tag Fehler aufweist und z.B. nicht geschlossen wurde.
Es gibt auch Hinweise in welcher Zeile (angeblich) der Fehler auftritt - meistens sollte man sich aber besonders genau den in der Fehlermeldung erwähnten Tag und die Anweisungen im Code unmittelbar oder nach der angezeigten Zeile ansehen.
Der Visual Studio Code Editor ermöglicht es - neben den vorhandenen Fehlermeldungen - rasch herauszufinden ob im Code alle Anfangs- und Endtags vorhanden sind - man wählt dazu mit der Maus einen Tag und schaut ob der dazu gehörende Tag optisch hervorgehoben wird:
Durch falsche Fehleranzeigen nicht verwirren lassen
Hier Beispiele für Fehlermedungen und deren Behebung:
#01 Durch falsche Fehleranzeigen nicht verwirren lassen
Der Fehler liegt im unteren Beispiel nicht - wie angezeigt - in der Zeile 12 beim a - Tag sondern in der Zeile 11 da dort ein > fehlt ...
Durch falsche Fehleranzeigen nicht verwirren lassen
#02 Fehlender <!DOCTYPE html>
Der Fehler liegt im unteren Beispiel darin, dass <!DOCTYPE html> am Anfang des Codes vergessen wurde ...
Fehlender <!DOCTYPE html>
#03 fehlende oder zu viele Tags
Der erste gezeigte Fehler im unteren Beispiel liegt im fehlenden head - Öffnungstag.
Der zweite gezeigte Fehler besteht darin, dass es einen überflüssigen head - Endtag gibt.
Der dritte gezeigte Fehler besteht im fehlenden Anker bzw. a - Tag.
fehlende oder zu viele Tags
#04 Fehlerhaft geschriebene Tags
Hier wird als Fehler angeigt, dass der ig - Tag - nicht eingefügt worden sei - tatsächlich wurde aber der Tag falsch geschrieben , denn es handelt sich um einen img - Tag.
Man benötigt also häufig Grundkenntnisse zu den HTML - Tags um einige Fehler ausbessern zu können :-)
fehlende oder zu viele Tags

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 - ich zeige dies am Beispiel von HTML
1. Überprüfung mit Angabe der Internetadresse der eigenen Webseite (Validate by URI)
2. Überprüfung durch Upload der HTML- bzw. CSS - Datei (Validate by File Upload)
3. Überprüfung durch direktes Einfügen eines HTML / CSS- Listings (Validate by Direct Input) in ein Formular
Quelltext prüfen bei W3C

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 charset=UTF-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 lang=>

<head>
meta 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 lang="de">

<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.12.2020 von der Open Clip Art Library heruntergeladen<br>
- URL: https://openclipart.org/detail/307/cartoon-cat-face-by-gerald_g
<meta 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 lang="de">

<head>
  <title>Titel</title>
  <meta charset="UTF-8">
</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 lang="de">

<head>
  <title>Titel</title>
  <meta charset="UTF-8">
</head>

<body>
</video>
<video width="320" height="240" control>
  <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 lang="de">
<head>

<meta charset="UTF-8">
<!-- Hier folgt der Style - Bereich -->
<style>
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="https://www.wirlernen.at/" target="_blank">www.wirlernen.at<a></p>
<span style="font-size: 10px;position:absolute;bottom:50px">Verwendete Grafiken gefunden am 19.12.2020 unter der URL:https://openclipart.org/detail/170985/beach-scene-by-gnokii-170985 und https://openclipart.org/detail/170983/coconut-cocktail-by-gnokii-170983</span>

</body>
</html>