Schon seit der Geburtsstunde des Internets in den frühen 90er Jahren wird die Sprache HTML (Hypertext Markup Language) zur Programmierung von Internetseiten eingesetzt. Auch wenn seitdem viele neue Technologien hinzugekommen sind, hat sich an der zentralen Rolle von HTML nichts verändert. Der HTML-Standard hat sich seit der Veröffentlichung der Version 4 durch das World Wide Web Consortium (W3C) lange Zeit kaum verändert. Erst mit der Einführung von HTML 5 wurde die Sprache spürbar erweitert. Der Grund hierfür ist einfach: Das Internet ist sehr schnell zu einem unglaublich großen Netzwerk geworden und HTML war eine der Kerntechnologien dieses Netzwerks. HTML tiefgreifend weiterzuentwickeln wäre eine herausfordernde Aufgabe gewesen.
Die einfachste Form von Webseiten besteht lediglich aus einer einzigen HTML-Datei. Hierzu wurden in den 90er Jahren einfache Text-Editoren verwendet. Die Dateien enthielten den zu veröffentlichten Textinhalt, der um Formatierungsangaben der Sprache HTML ergänzt wurden. War der Text veraltet, musste die Datei von Hand umgeschrieben werden. Das ist der Grund, warum solche Webseiten auch unter dem Namen "statische Webseiten" bekannt sind. Auch wenn solche Seiten selbstverständlich nicht den modernen Anforderungen an hochaktuelle Inhalte gerecht werden können, lässt sich an ihnen die grundlegende Funktionsweise von HTML sehr gut erklären.
HTML-Seiten werden auf einem Webserver bereitgestellt. Durch einen HTTP-Request kann ein Browser eine HTML-Seite vom Webserver anfragen. Der
Webserver antwortet mit einer HTTP-Response, die im Wesentlichen der HTML-Seite entspricht (siehe nachstehende Abbildung). Der Browser
interpretiert den HTML-Code und stellt ihn in einer für Menschen lesbaren Form dar. Auf welche Weise die Inhalte dargestellt werden, ist vom
W3C nicht bis ins letzte Detail spezifiziert. Deswegen gibt es je nach Browser teilweise unterschiedliche Darstellungsformen für die
gleichen HTML-Sprachelemente.
| Hinweis |
| Seit der Jahrtausendwende wurde parallel zu HTML die Variante XHTML entwickelt. Sie basiert auf der Sprache XML, unterscheidet sich im Funktionsumfang aber nicht von HTML. XHTML-Seiten besitzen die Dateiendung ".xhtml". |
Das wichtigste Konzept von HTML sind die in Tags eingefassten Elemente. Mit ihnen können alle wichtigen strukturellen Eigenschaften eines Textes festgelegt werden. Es gibt zum Beispiel Elemente, die einen Textabschnitt als Überschrift, Absatz oder Liste kennzeichnen. Andere fügen Zeilenumbrüche oder Bilder ein oder geben an, dass ein bestimmter Abschnitt fett oder kursiv dargestellt werden soll. Sogar Formulare mit Eingabefeldern und Schaltflächen können mit HTML-Tags definiert werden. Die Syntax der Tags ist dabei stets gleich: Sie bestehen aus einem Start- und einem Ende-Tag. Dazwischen befindet sich der Text, auf den sich das Element bezieht:
<tagname>Inhalt</tagname>
Wenn sich ein Element nicht auf einen Inhalt bezieht, z.B. weil es lediglich einen Zeilenumbruch oder ein Bild einfügt, dann darf es auch in einer verkürzten Schreibweise definiert werden:
<tagname />
Elemente können Attribute besitzen, z.B. um präzisere Angaben über die gewünschte Formatierung machen zu können. Die Syntax ist in diesem Fall wie folgt:
<tagname attribut="Wert">Inhalt</tagname>
Absätze werden in HTML mit dem Tag p formatiert und die Ausrichtung eines Absatzes erfolgt über das Attribut
align. Ein erster HTML-Code lautet:
<p align="center">Dies ist ein zentrierter Absatz</p>
Man muss wissen, wie eine gültige und nach dem W3C-Standard vollständige HTML-Seite aufgebaut ist. Man kann sich mithilfe eines
Browsers den Quelltext einer Webseite anschauen.
Webseiten unterscheiden sich zwar in Umfang und Struktur stark, haben aber stets den gleichen Grundaufbau: In den meisten Fällen
handelt es sich um XHTML-Seiten, denen im Vergleich zu reinen HTML-Dateien ein XML-Tag vorangestellt ist. Damit der Browser weiß, wie er die
Datei und die darin enthaltenen Informationen interpretieren soll, folgt darauf die Deklaration des Dokumenttyps.
<?xml version="1.0" encoding="UTF8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Nach diesen beiden Zeilen beginnt die eigentliche HTML-Seite. Alle Elemente der Seite müssen in dem Tag html eingefasst sein
(bei XHTML-Seiten ist dessen Attribut xmlns vorgeschrieben). Dann ist die Datei in zwei Teile untergliedert: einen
Kopfteil (head) mit allgemeinen Informationen über die Seite (wie z.B. der Titel, Autoren, Erstellungsdatum etc.) und
einen Rumpf (body) mit dem eigentlichen Inhalt. In einem einfachen Editor kann zu den oben genannten
Dokumenttyp-Deklarationen der folgende HTML-Code hinzugefügt werden:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Artikelverwaltung</title>
</head>
<body>
<p>Willkommen auf der Web-Anwendung zur Artikelverwaltung!</p>
</body>
</html>
Die Seite wird vom Browser wie folgt dargestellt:
Für die Strukturierung von HTML-Seiten gibt es weitere Elemente. Hierzu findet man die Tags h1, h2, ..., h6 zur Formatierung
von Überschriften mit bis zu sechs unterschiedlichen Gliederungsebenen, br für Zeilenumbrüche sowie Tags für
die Definition von beliebig ineinander verschachtelbaren Aufzählungen (ul), nummerierten Listen (ol) und deren
Elemente (li). Damit lässt sich ein etwas komplizierteres Beispiel umsetzen:
<body>
<h1>Artikelverwaltung</h1>
<h2>Übersicht über alle Artikel</h2>
<ul>
<li>Artikel 1</li>
<ul>
<li>Name: Filzpantoffeln "Rudolph"</li>
<li>Beschreibung: "Wunderschöne Filzpantoffeln mit roter Nase"</li>
</ul>
<li>Artikel 2</li>
<ul>
<li>Name: Handtasche "Handtasche Cosmopolita"</li>
<li>Beschreibung: "Modische Filz-Handtasche mit praktischer Cocktailglas-Halterung"</li>
</ul>
</ul>
<p>Bitte beachten Sie: <br /> Diese Seite ist nur ein Entwurf!</p>
</body>
Zusammen mit den üblichen Kopfdaten einer HTML-Seite stellt der Browser die Inhalte wie folgt dar:
Auch Bilder können in HTML eingebunden werden. Im Gegensatz beispielsweise zu Bildern in Word-Dokumenten werden sie aber nicht in der
Datei eingebettet, sondern ähnlich einem Link verwiesen. Dazu führt HTML das Tag img ein, mit Attributen
für den Verweis auf die Bilddatei (src), für einen alternativen Text, falls das Bild nicht verfügbar ist
(alt), und optionalen Attributen wie einem Titel (title) sowie width und height für
die Maße des Bildes.
Der bestehende HTML-Code kann um folgende Zeile ergänzt werden:
<img src="Filzschuhe.jpg" alt="Auf dem Bild sind Filzschuhe zu sehen." width="170px" height="170px"
title="Filzschuhe 'Rudolph'" />
Das Bild wird jedoch unter dem Text plaziert, eine Tabelle kann hier Abhilfe schaffen. Auch hierfür bietet HTML einige Tags an:
table umschließt die Tabelle. Um die Tabelle zeilenweise aufzubauen, umschließt tr eine Zeile mit Zellen
(td). Die Anzahl der Spalten ergibt sich aus der Anzahl der Zellen in der längsten Zeile. Optional kann mit
th eine Kopfzeile definiert werden. Das Attribut border von table ermöglicht die Formatierung
eines Rahmens.
Als Beispiel zeigen wir, wie anstelle der Liste eine Tabelle aus Artikeln aufgebaut sein kann:
Es gibt noch eine Vielzahl weiterer Elemente, die HTML zur Strukturierung von Text bietet.
Um herauszufinden, ob ein XHTML-Code auch dem Standard entspricht, stellt das W3C für diesen Zweck einen Online-Validator zur Verfügung.