Eine vollständige Webseite mit HTML
Eine vollständige HTML-Datei
Betrachten wir nun den Quelltext einer vollständigen HTML-Datei, um die Funktionsweise von HTML zu verstehen. Der Quelltext lässt sich so wie hier abgedruckt in einem Texteditor eingeben und als Datei mit der Endung .html oder .htm abspeichern. Aus Gründen der Übersichtlichkeit ist der abgedruckte Quelltext mit Einrückungen versehen. Die Einrückungen verdeutlichen die Struktur der HTML-Datei.
Quelltext und Verschachtelungsstruktur
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>HTML Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<div id="Kopf">
<h1>
HTML Lernen - Grundlagen und Tutorials
</h1>
</div>
<div id="Inhalt">
<p>
Die Links führen zu den Online-Lerninhalten der Webseite HTML-Lernen - Grundlagen und Tutorials!
</p>
<ul>
<li><a href="https://www.html-lernen.info/">Html-Lernen - Grundlagen und Tutorials</a> - Die Gestaltung Ihrer eigenen Webseite mit HTML</li>
<li><a href="https://www.html-lernen.info/html-lernen.html">HTML Lernen</a> - Es handelt sich bei HTML um eine einfache Sprache</li>
<li><a href="https://www.html-lernen.info/html5-lernen.html">HTML5 Lernen</a> - Die neuen Features von HTML5</li>
<li><a href="https://www.html-lernen.info/css-lernen.html">CSS Lernen</a> - Cascading Style Sheets, kurz CSS,</li>
</ul>
</div>
</body>
</html>
Markup-Sprachen wie HTML sind für die Abbildung von verschachtelten Datenstrukturen ausgelegt. Der Quelltext ist am leichtesten nachvollziehbar, wenn er als Schachtelstruktur verstanden wird. Die äußerste Schachtelebene stellt das html-Element dar, markiert durch den Anfang mit der Zeichenfolge <html> und das Ende mit </html>. Die Dokumenttypangabe vor <html> lassen wir an dieser Stelle außen vor.
Das html-Element schließt zwei bedeutende Elemente ein. Das erste dieser Elemente ist das head-Element, markiert durch den Anfang <head> und das Ende </head>. Das head-Element ist für HTML-Kopfdaten gedacht, wie zum Beispiel den Titel des Dokuments, markiert durch den Anfang <title> und das Ende </title>. Das zweite Element innerhalb des html-Elements ist das body-Element für die im Browser sichtbaren Inhalte, markiert durch <body> bzw. </body>.
Innerhalb des body-Elements enthält das Beispiel-Listing weitere Elemente, auf die wir an dieser Stelle nicht weiter eingehen. Zu erkennen ist jedoch, dass die Verschachtelung der Elemente den gleichen Gesetzen folgt: Elemente beginnen und enden innerhalb anderer Elemente.