Multimedia-Datenformate

Kapitel 12 : HTML

Übersicht

HTML (Hypertext Markup Language) ist ein Format zur Darstellung von Informationen aller Art, unabhängig vom verwendeten Betriebssystem oder Rechner. Dieser Text beschreibt den Syntax des HTML-Formats, den grundsätzlichen Aufbau von HTML-Dokumenten, die vorhandenen Formatierbefehle, das Anlegen von Verweisen zu anderen Dokumenten und wie man Grafiken einbindet. Weiterhin wird gezeigt, wie man durch Skripten interaktiv mit dem Leser kommunizieren und auf externe Datenquellen zugreifen kann. Am Schluß erfolgt noch ein Ausblick auf HTML+, eine Erweiterung von HTML.

Einführung in HTML

Geschichtliches

HTML wurde innerhalb des WorldWideWeb-Projektes am Europäischen Labor für Teilchen-Physik bei Genf (CERN) entwickelt. Ziel des WWW-Projektes war es, den Zugriff auf und das Suchen nach Informationen einfacher und einheitlicher zu gestalten. Information sollte von jedem Rechner aus, unabhängig vom Standort, Betriebssystem oder Benutzungsoberfläche, in einem einheitlichen Format zugängig sein. Ebenso sollten Dokumente über sogenannte HyperLinks miteinander verknüpfbar sein, um Referenzen zwischen Dokumenten zu ermöglichen. Ein weiteres Ziel war auch die rechnerunterstützte Suche nach Dokumenten über automatisch generierte Index-Dateien. Begonnen wurde das WWW-Projekt 1989, Anfang 1993 gingen die ersten WWW-Server ans Netz.

Aufbau von HTML-Dokumenten

HTML-Dokumente sind Text-Dateien, die spezielle Steuer- und Formatierbefehle, sogenannte Tags enthalten. Ein HTML-Tag besteht aus einem Namen und evtl. Parametern. HTML-Tags sind eingeschlossen von < und >. Alle Tags, die nicht leer sind, d.h. z.B. Text enthalten, benötigen weiterhin ein Ende-Tag, welches durch </ und > eingeschlossen ist. Die Groß/Kleinschreibung spielt bei Tags keine Rolle.

Man unterscheidet verschiedene Stufen von HTML-Befehlen:

Level 0:
Befehle dieser Stufe müssen von allen Browsern verstanden und angezeigt werden. Level 0-Befehle sind Block-, Anker- und Listenbefehle.
Level 1:
Befehle dieser Stufe benötigen eine grafische Benutzungsoberfläche und dürfen von textorientierten Browsern ignoriert werden. Level 1-Befehle sind Änderungen der Schriftart und Befehle zur Anzeige von Grafiken.
Level 2:
Level 2-Befehle sind Formulare und Befehle zur Darstellung von speziellen Sonderzeichen.
Ein HTML-Dokument wird eingeleitet durch <HTML> und abgeschlossen durch </HTML>. Innerhalb des Dokumentes gibt es den Kopfteil, begrenzt durch <HEAD> und </HEAD>, der nur einige ausgewählte administrative Daten, jedoch keinen Text enthalten darf, und den Hauptteil, begrenzt durch <BODY> und </BODY>. Innerhalb des Hauptteils befinden sich sämtliche Informationen und Steueranweisungen, die das Dokument darstellen soll.

Die im Kopf erlaubten Elemente sind im einzelnen:

<TITLE>
Dieses Tag gibt den Titel des Dokumentes an, dieser sollte kurz und aussagekräftig sein.
<ISINDEX>
Gibt an, daß an das Dokument Suchanfragen gestellt werden können; dieses Tag wird normalerweise vom Server automatisch generiert, wenn er Suchanfragen verarbeiten kann.
<BASE>
Gibt den Pfad an, in dem sich das Dokument befindet. Dies ist dann von Nutzen, wenn im Dokument Referenzen ohne volle Pfadangabe existieren und das Dokument einmal nicht innerhalb des üblichen Kontextes gelesen wird.
<LINK>
Gibt die URLs (zur Erklärung des Begriffs URL siehe Kapitel "Was ist ein URL?") von anderen Dokumenten an, zu denen dieses Dokument eine Beziehung aufweist.
<NEXTID>
Ermöglicht es, eine Variable zur Dokumentenverwaltung zu definieren.
Um auch ältere Dokumente noch darstellen zu können sind die meisten Browser in der Lage, auch Dokumente ohne die HTML-, HEAD- und BODY-Tags zu verarbeiten. In diesem Fall wird das komplette Dokument als Hauptteil angesehen.

Verschiedene Strukturelemente

Überschriften

Es existieren sechs verschiedene Stufen von Überschriften, die entsprechenden Tags lauten 
<H1> <H2> <H3> <H4> <H5> <H6>
<H1> ist die oberste Stufe, mit ihr sollte der Beginn eines Dokumentes überschrieben werden. Es ist nicht empfehlenswert, beim Erstellen von Unter-Überschriften einzelne Stufen zu überspringen.

Formatierhilfen
Kommentare
Kommentare innerhalb von HTML-Dokumenten sind eingeschlossen durch <!-- und -->, sie dürfen allerdings nicht verschachtelt werden. Kommentare werden vom Browser ignoriert und nicht angezeigt.
Zeilenumbruch
Leerzeichen und -zeilen in HTML-Dokumenten werden vom Browser in der Regel ignoriert, da Informationen über Zeilenwechsel und Beginn eines neuen Abschnittes in den einzelnen Strukturanweisungen enthalten sind. Sollte es einmal nötig sein, einen Zeilenumbruch zu erzwingen, so geschieht dies mit Hilfe der <BR>-Anweisung.
Absatz
Der Beginn eines neuen Absatzes wird durch <P> markiert, er führt standardmäßig beim Browser dazu, den Text nach etwas Abstand zu Beginn einer neuen Zeile fortzuführen.
Vorformatierter Text
Vorformatierter Text, wie z.B. Listings, kann durch <PRE> und </PRE> eingeschlossen werden. Text innerhalb dieser Tags wird in der Regel in einem nichtproportionalen Zeichensatz dargestellt, wobei alle Leerzeichen und -zeilen sowie Zeilenumbrüche direkt übernommen werden. Sämtliche HTML-Tags behalten jedoch ihre Gültigkeit und werden auch innerhalb des <PRE>-Blocks dargestellt.
Längere Zitate
Längere Zitate werden am Besten in einem eigenen Abschnitt dargestellt. Dies erreicht man durch <BLOCKQUOTE> und </BLOCKQUOTE>. Text innerhalb dieser Tags wird normalerweise vom Browser eingerückt oder in Schrägschrift und als separater Absatz mit etwas Abstand zum normalen Text angezeigt.
Verschiedene Schriftarten
Unter HTML gibt es zwei verschiedene Typen von Schriftarten, physikalische und logische. Erstere geben direkt die Art der Schrift an (fett, schräg, usw.) während letztere sagen, um welche Art Text es sich handelt und dem Browser die Entscheidung über die tatsächliche Darstellung überlassen. Alle Schriftartenbefehle benötigen ein Start- und ein Ende-Tag. Folgende physikalische Schriftarten existieren:
<TT>
Nichtproportionaler Typewriter-Zeichensatz
<B>
Fettschrift
<I>
Italic oder Schrägschrift
<U>
Unterstrichen
Folgende logische Schriftarten stehen zur Verfügung:
<EM>
Hervorgehoben, wird dargestellt durch Schrägschrift.
<STRONG>
Stärkere Hervorhebung, wird dargestellt durch Fettschrift.
<CODE>
Wird verwendet für Befehle und Quellcode, dargestellt durch nichtproportionalen Zeichensatz.
<SAMP>
Eine Folge von Buchstaben.
<KBD>
Wird bei Anleitungen zur Darstellung des vom Benutzer einzugebenden Textes verwendet.
<VAR>
Für die Darstellung von Variablennamen.
<DFN>
Für die Definition von Ausdrücken, wird dargestellt durch Fett- oder Schrägschrift.
<CITE>
Wird verwendet für Zitate, dargestellt durch Schrägschrift.
Hier ein Beispiel für die Verwendung der Tags: 
<CMD>rm</CMD> [<ARG>-r</ARG>] [<ARG>-f</ARG>] <VAR>filename</VAR>

Listen

Zur Zeit stehen folgende Listen-Typen zur Verfügung:
Einfache Listen (Unnumbered Lists):
Diese werden eingeleitet durch <UL>. Sie zählen die einzelnen Elemente ohne laufende Numerierung auf, stattdessen wird ein neutrales Aufzählungszeichen vorangestellt. Welches Zeichen dazu verwendet wird ist Browser-abhängig, möglich sind z.B. Punkte, Striche oder Sternchen. Jedes Listenelement wird eingeleitet durch <LI>.
Aufzählende Listen (Numbered Lists):
Sie sind den einfachen Listen sehr ähnlich, nur werden bei ihnen die Listenelemente fortlaufend durchnumeriert. Das zugehörige Listen-Tag lautet <OL>
Beschreibende Listen (Descriptive Lists):
Elemente einer beschreibenden Liste bestehen aus dem Titel der zu beschreibenden Sache, welche in irgendeiner Form besonders hervorgehoben wird, sowie dem Beschreibungstext. Eine beschreibende Liste wird eingeleitet durch <DL>, der Titel durch <DT> und der Beschreibungstext selbst durch <DD>.
Es existieren noch weitere Listentypen wie z.B. <MENU> oder <DIR>. <MENU> ist eine in der Darstellung etwas kompaktere Form von <UL>, <DIR> ist für eine Liste von kürzeren Elementen gedacht, die auch in mehreren Spalten auf dem Bildschirm dargestellt werden können.

Listen können beliebig verschachtelt werden, man sollte sich jedoch nicht darauf verlassen, daß der Browser die einzelnen Verschachtelungsebenen hinreichend eindeutig darstellen kann (z.B. durch Wechsel des Aufzählungszeichens).

Links zu anderen Dokumenten

Ein Link wird eingeleitet durch <A (A steht für "Anchor"), gefolgt von einem oder mehreren der folgenden Parameter:
HREF
Gibt einen URL auf ein Zieldokument an, auf das beim Anwählen des Links gesprungen werden soll. Nur durch Angabe des HREF-Parameters wird ein Link aktiv und selektierbar.
NAME
Wird verwendet, um innerhalb eines Dokumentes eine Markierung anzugeben, welche im HREF-Parameter angegeben werden kann. Somit können einzelne Stellen in einem Dokument (z.B. Unterkapitel) direkt angesprungen werden.
REL
Ermöglicht es, eine "Beziehung" zu dem Zieldokument zu definieren.
REV
Gibt ebenfalls eine Beziehung zwischen Dokumenten an, jedoch in der entgegengesetzten Richtung, d.h. ein Link von A nach B mit REL="X" ist das gleiche wie ein Link von B nach A mit REV="X".
URN
Gibt eine eindeutige Kennummer für das Dokument an, um dem Browser die Möglichkeit zu geben, das doppelte Laden von Dokumenten zu erkennen und zu verhindern. Dies ist noch in der Entwicklung.
TITLE
Gibt den Titel des Zieldokumentes an, damit der Browser diesen darstellen kann. Dieser Titel sollte identisch sein mit dem durch <TITLE> definierten im Kopf des Zieldokumentes.
METHODS
Gibt dem Browser die Art des Zieldokumentes an.
Alle diese Parameter sind optional, jedoch macht ein Link ohne HREF- oder NAME-Parameter nicht viel Sinn.

Danach wird das Tag mit > beendet, gefolgt vom Text oder der Grafik, welche den Link repräsentieren sollen. Abgeschlossen wird der Link durch </A>.

Hier einige Beispiele: 

Willkommen bei der
<A HREF="http://info.cern.ch/hypertext/WWW/MarkUp/MarkUp.html">
Mutter aller WWW-Seiten</A>.

Naehere Information erhalten Sie in <A HREF="#kapitel17">Kapitel 17</A>.

...

<A NAME="kapitel17">Kapitel 17
Durch den Browser formatiert könnte das etwa so aussehen:

Willkommen bei der Mutter aller WWW-Seiten.

Naehere Information erhalten Sie in Kapitel 17.

...

Kapitel 17

Grafiken

Grafiken können auf zwei Arten in HTML-Dokumente eingebunden werden, einmal über Hyperlinks, hier wird die Grafik erst bei Anwählen des Links geladen und über ein Anzeigeprogramm dargestellt, oder als sogenanntes "inline image", hier befindet sich dir Grafik im Dokument zwischen dem Text und wird direkt bei Laden des Dokumentes mitgeladen und angezeigt. Der Befehl zum Einbau von Grafiken lautet 
<IMG SRC="Bild-URL" ALIGN="Textansatz" ALT="Alternativdarstellung">
Bild-URL:
Dies ist ein URL auf die Grafik, im einfachsten Fall ist es eine lokale Datei, es kann aber auch ein Link auf eine Grafik auf einem weit entfernten Rechner sein. Derzeit unterstützte Grafik-Formate sind GIF und X-Bitmaps (übliche Endung: .gif, .xbm, .xpm)
Textansatz:
Dieser Wert gibt an, wo die dem <IMG> nachfolgenden Textzeilen beginnen sollen, an der Oberkante, in der Mitte oder der Unterkante des Bildes. Mögliche Werte sind TOP, MIDDLE oder BOTTOM. Diese Angabe ist freiwillig, der voreingestellte Wert ist BOTTOM.
Alternativdarstellung:
Gibt an, was bei nicht-grafikfähigen Browsern an Stelle der Grafik gezeigt werden soll. Hier kann z.B. der Inhalt des Bildes in wenigen Worten erklärt werden. Auch diese Angabe ist freiwillig, voreingestellt ist das Wort IMAGE.
Grafiken können auch innerhalb von Links verwendet werden, so daß ein Anwählen der Grafik zu einem neuen Dokument führt. Dies wird folgendermaßen realisiert: 
<A HREF="anderes_Dokument.html"><IMG SRC="button.gif">Click!</A>
Hier sind sowohl das Wort "Click!" als auch die Grafik sensitiv.

Man sollte mit eingebundenen Grafiken sehr sparsam umgehen, da der Betrachter bei Anwählen der Seite nicht über die Menge der Grafiken informiert und so völlig unvorbereitet von diesen "überflutet"wird. Insbesondere bei sehr langsamen Übertragungsleitungen ist dies ein Ärgernis. Viele Browser geben dem Benutzer auch die Möglichkeit, das automatische Laden von eingebundenen Grafiken auszuschalten und diese erst auf Wunsch anzuzeigen.

Sonderzeichen

Der für HTML gültige Zeichensatz ist ISO Latin-1 (ISO 8859-1). Auf Rechenanlagen, die nur in der Lage sind, 7-Bit-Zeichen darzustellen, können Zeichen oberhalb von 127 durch spezielle "character entities"gebildet werden. Diese beginnen immer mit einem Kaufmannsund (&), gefolgt vom Zeichennamen und abgeschlossen durch ein Semikolon. Auf diese Weise können alle Sonderzeichen dargestellt werden, auch wenn sie auf dem Rechner oder der Tastatur des Dokumentenautors nicht verfügbar sind. Das deutsche "ä" wird beispielsweise durch &auml; repräsentiert, ein "Ä" wäre &Auml;, ein "ß" wäre &szlig;. Das Kaufmannsund selbst wird durch &amp; dargestellt. Für eine komplette Liste aller verfügbaren Zeichennamen siehe http://www.uni-passau.de/~ramsch/iso8859-1.html.

Was ist ein URL?

URL steht für Uniform Resource Locator und ist eine Referenz auf eine Datei oder sonstige Ressource. Diese Referenz wird benötigt z.B. beim Einbinden von Grafiken oder bei Links zwischen Dokumenten. Das Aufbau-Schema eines URLs ist 
dienst://host.domain[:port]/pfad/dateiname
Die Angabe des Ports kann meist entfallen, es wird dann der für den angegebenen Dienst definierte Standardport verwendet. Als Dienste werden nahezu alle bekannten Internet-Dienste unterstützt. Die wichtigsten sind
http
Dies gibt eine Datei oder ein Verzeichnis auf einem WorldWideWeb-Server an.
file
Gibt eine lokale Datei an.
gopher
Gibt eine Datei auf einem Gopher-Server an.
ftp
Gibt eine Datei oder ein Verzeichnis auf einem FTP-Server an.
mailto
Erlaubt es, eine e-mail zu versenden.
Weitere Dienste, auf die ein URL verweisen kann sind WAIS, telnet, tn3270 oder news.

Beispiele: 

Fuer den Index vom AmiNet bitte
<A HREF="ftp://ftp.uni-paderborn.de/pub/aminet/INDEX">hier anklicken</A>.

...

Bei Nichtgefallen einfach eine <A HREF="mailto:ukbx@rz.uni-karlsruhe.de">
Mail an mich schicken</A>

Browser

Die Funktionsweise eines Browsers

Ein Browser ist ein Programm, das ein HTML-Dokument einliest, die darin enthaltenen HTML-Befehle interpretiert und darstellt. Meist sind sie WorldWideWeb-Browser, d.h. sie sind auch in der Lage, eine Verbindung zu einem anderen Rechner im Internet aufzubauen und von dort€otels