Publizieren im Web - Hypertext Markup Language

Zur Einführung hier die Zusamenfassung aus der aktuellen Spezifikation der Version 2.0 (auch verfügbar als ASCII-Text):

The HyperText Markup Language (HTML) is a simple markup language used to create hypertext documents that are portable from one platform to another. HTML documents are SGML documents with generic semantics that are appropriate for representing information from a wide range of applications. HTML markup can represent hypertext news, mail, documentation, and hypermedia; menus of options; database query results; simple structured documents with in-lined graphics; and hypertext views of existing bodies of information.

HTML has been in use by the World Wide Web (WWW) global information initiative since 1990. This specification roughly corresponds to the capabilities of HTML in common use prior to June 1994. It is defined as an application of ISO Standard 8879:1986 Information Processing Text and Office Systems; Standard Generalized Markup Language (SGML).

SGML und HTML

Die Standard Generalized Markup Language (SGML) nach dem Internationalen Standard ISO 8879 dient der Definition von Dokumenten-Typen und zugehörigen Markup Languages, in denen Dokumente solcher Typen geschrieben werden. HTML ist eine solche Markup Language, deren Definition zwischen den Instanzen, die HTML-Dokumente erzeugen bzw. interpretieren, implizit bekannt ist.

Allgemein bestehen SGML-Dokumente aus den drei Teilen:

Deklaration
Enthält die Document Type Declaration (DTD) eines konkreten Dokumenten-Typs (mit der zugehörigen Markup Language).
Prolog
Verweist auf die im folgenden verwendete DTD.
Instanz
Inhalt und Markup des eigentlichen Dokuments.
Bei HTML ist die DTD implizit, der Prolog
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN//2.0">
wird i.d.R. auch fortgelassen.

HTML-Elemente und -Tags

HTML-Dokumente sind Textdateien im Zeichensatz ISO 8859-1 oder dessen Teilmenge ISO 646 (entspricht ASCII), angereichert um Markup-Elemente zur logischen Strukturierung des Dokuments.

Die einzelnen Elemente der Sprache HTML wie Überschriften, Absätze, Listen-Strukturen, Hervorhebungen werden angegeben in der Form

Start tag Content End tag
Die öffnenden Start tags bestehen aus <, Name, evtl. Attributen und >, die zugehörigen schließenden End tags aus </, dem gleichen Namen und >. Bei einigen Tags wie <BR> gibt es kein End tag.

Die Namen werden aus (bis zu 71) Buchstaben und Ziffern gebildet, beginnend mit einem Buchstaben; Groß-/Kleinschreibung wird nicht unterschieden.

Attribute werden aus Paaren Name = Wert gebildet, teilweise bestehen sie nur aus dem Namen.

Die Zeichen, die in der Markup-Sprache eine besondere Bedeutung haben, nämlich <, > und & müssen, wenn sie im Text vorkommen sollen, selbst als Markup angegeben werden, und zwar als sog. Entities &lt;, &gt; bzw. &amp;. Auch für die Nicht-ASCII-Zeichen von ISO 8859-1, z.B. die nationalen Umlaute, sind solche Entities definiert.

Zeilenwechsel, mehrfache Leer- bzw. Tabulatorzeichen werden - außerhalb des speziellen Preformatted-Elementes - als einfache Trennzeichen interpretiert und haben keine Bedeutung für Formatierung und Layout des Dokumentes. Kommentare in HTML-Dokumenten können eingegeben werden durch eine Klammerung des Kommentartextes mit <!-- und -->.

Behandlung unbekannter Tags und Attribute

Tags oder Attribute, deren Namen z.B. ein WWW-Browser nicht kennt, sollen so behandelt werden, als ob sie in dem Dokument garnicht vorhanden wären. Diese Regel ermöglicht die Darstellung "neuerer" Dokumente durch "ältere" Browser.

Das bekannte Beispiel: Netscape kennt HTML-Erweiterungen für die Darstellung von zentriertem und blinkendem Text, die viele Web-Autoren gerne zur Gestaltung ihrer Dokumente einsetzen. Andere Browser können solche Dokumente immer noch darstellen - nur eben ohne den beabsichtigten Effekt.

Grobstruktur von HTML-Dokumenten, Head und Body

HTML-Dokumente werden durch die Tags
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
in einen Head- und einen Body-Teil eingeteilt - ähnlich wie z.B. EMail-Messages nach RFC822.

Der Kopf (Head-Teil) enthält Information über das Dokument, nur der Body enthält den eigentlichen Dokumententext, der z.B. im Textfenster eines graphischen WWW-Browsers dargestellt wird.

Achtung: Dieser Kopf eines HTML-Dokumentes, der z.B. auch zu der auf einer Platte gespeicherten Fassung des Dokumentes gehört, ist nicht zu verwechseln mit dem HTTP-Header, der bei der HTTP-Übertragung dem Dokument vorausgeht. Beide haben unterschiedliche Funktionen, stehen evtl. aber in Beziehung über das Meta-Tag im Head-Teil.

Elemente im Head-Teil

Title

<TITLE>Titel des Dokumentes</TITLE>

Meta

<META HTTP-EQUIV="HTTP-Header" CONTENT="Value " >
<META NAME="Name" CONTENT="Value " >
"Meta"-Information über das Dokument, die nicht mittels eines anderen Elementes angegeben werden kann. In der ersten Form wird sie vom HTTP-Server in den HTTP-Header übernommen. Diese Methode kann z.B. benutzt werden, um den Expires:-Header zu setzen und damit den Ablauf der Gültigkeit/Relevanz eines Dokumentes bereits in seinem Kopf auszudrücken. (Andere Methoden hierfür etwa beim CERN-HTTP-Server arbeiten mit eigenen Meta-Dateien.)

Weitere Head-Elemente

<ISINDEX>
drückt aus, daß das Dokument ein suchbares Index-Dokument ist, d.h. ein GET mit dem Dokumenten-URL ergänzt um ? und einem Suchwort bzw. mehreren Suchworten durch + getrennt kann an den HTTP-Server gesendet werden, um eine Suchanfrage zu stellen.
<BASE HREF="URL">
kann benutzt werden, um den "Basis"-URL des Dokumentes - auch außerhalb des Kontextes eines HTTP-Zugriffs - anzugeben, mit dem Verweise innerhalb des Dokumentes auf andere ergänzt werden können.

Elemente im Body-Teil

Überschriften

<H1>Größte Überschrift</H1>

Größte Überschrift

<H2>Zweitgrößte Überschrift</H2>

Zweitgrößte Überschrift

<H3>Drittgrößte Überschrift</H3>

Drititgrößte Überschrift

<H4>Viertgrößte Überschrift</H4>

Viertgrößte Überschrift

<H5>Fünftgrößte Überschrift</H5>
Fünftgrößte Überschrift
<H6>Kleinste Überschrift</H6>
Kleinste Überschrift

Absätze

<P> Text </P>, häufiger <P> alleine, markiert Absätze; Zeilenwechsel, auch Leerzeilen, haben diese Bedeutung nicht.

<BR> hat die Bedeutung eines Zeilenwechsels (Line Break), i.d.R. ohne zusätzlichen Zwischenraum, mit der gleichen Einrückung wie der vorhergehende Text.
<HR> (Horizontal Rule) fügt eine waagerechte Linie in der Breite des vorhergehenden Textes ein.


Hinweis: Wenn Sie verzierte Linien in Dokumenten finden, so sind dies Inline Images, die als eigene Dateien angefordert werden müssen und sich auch nicht der eingestellten Fensterbreite des WWW-Browsers anpassen!

Anker

Drei Arten von Ankern lassen sich unterscheiden:
  1. <A HREF="URL">Anker-Text</A>
    Verweis/Link auf ein anderes Dokument, das durch einen vollständigen oder partiellen URL referiert wird wie zurück zur Übersicht.
  2. <A NAME="Label">Ziel-Text</A>
    setzt Sprungziel z.B. auf diese Zeile.
  3. <A HREF="#Label">Anker-Text</A>
    Verweis/Link auf ein Sprungziel (Target) im aktuellen Dokument, z.B. auf die Beispielzeile.
Das A-Tag kann u.U. weitere Attribute haben. Mit TITLE="Titel" kann ein Titel für ein referiertes Dokument vorgegeben werden, wenn dieses z.B. keinen mitbringt wie ein Gopher-Menue.

Listen

Nicht-nummerierte Aufzählung (Unordered List)

Einfache "Spiegelstrich"-Liste, äquivalente LaTeX-Umgebung: itemize.

<UL>
<LI>1. Listen-Element (List Item)
<LI>2. Listen-Element
<LI>...
</UL>

Typisches Layout:

Mögliches zusätzliches Attribut bei <UL>: COMPACT empfiehlt kompaktere Darstellung (evtl. weniger Freiraum vor und hinter der Liste).

Nummerierte Aufzählung (Ordered List)

Liste mit durchnummerierten Punkten, äquivalente LaTeX-Umgebung: enumerate.

<OL>
<LI>1. Listen-Element (List Item)
<LI>2. Listen-Element
<LI>...
</OL>

Typisches Layout:

  1. 1. Listen-Element (List Item)
  2. 2. Listen-Element
  3. ...
Das COMPACT-Attribut kann hier wie bei <UL> verwendet werden.

Menue-Liste

Ähnlich wie <UL>, aber für einen Verwendungszweck gedacht, bei dem die einzelnen Listen-Elemente nicht länger als eine Zeile sind.

<MENU>
<LI>1. Listen-Element (List Item)
<LI>2. Listen-Element
<LI>...
</MENU>

Typisches Layout:

  • 1. Listen-Element (List Item)
  • 2. Listen-Element
  • ...
  • Verzeichnis-Liste

    Ähnlich wie <UL>, aber für einen Verwendungszweck gedacht, bei dem die einzelnen Listen-Elemente nicht länger als 20 Zeichen sind. Die einzelnen Listen-Elemente können in mehreren Spalten angeordnet werden, wie es z.B. das ls-Kommando unter Unix macht. (Aber welcher Browser verhält sich so?)

    <DIR>
    <LI>1. Listen-Element (List Item)
    <LI>2. Listen-Element
    <LI>...
    </DIR>

    Typisches Layout:

  • 1. Listen-Element (List Item)
  • 2. Listen-Element
  • ...
  • Definitions-Liste (Glossar)

    Diese Art der Liste ist vorgesehen für die Aufzählung von Begriffen und zugehörigen Definitionen und entspricht der LaTeX-Umgebung description.

    <DL>
    <DT>Erster Begriff<DD>Erläuterung zum ersten Begriff
    <DT>Zweiter Begriff<DD>Erläuterung zum zweiten Begriff
    <DT>usw.
    </DL>

    Das erste <DT> muß gleich dem <DL> folgen; <DD> darf auch fehlen. Typisches Layout:

    Erster Begriff
    Erläuterung zum ersten Begriff
    Zweiter Begriff
    Erläuterung zum zweiten Begriff
    usw.

    Schachteln von Listen

    Alle Arten von Listen können geschachtelt werden - von der Intention her sollten MENU- und DIR-Listen nur in der innersten Stufe auftreten. In der Darstellung durch WWW-Browser wird in der Regel nicht nur die Einrückung, sondern auch das Bullet-Zeichen bei UL-Listen. Beispiel siehe in unserer Home-Page, insbesondere mit Lynx.

    Bilder, Graphiken: Inline-Images

    <IMG SRC="URL" ALT=""alternative text>

    Dient dem Einfügen eines Bildes an dieser Stelle im Dokument. Mit dem SRC-Attribut wird die Referenz auf die Bild-Datei angegeben in genau der gleichen Form wie im HREF-Attribut bei Ankern. Als Standard für die Bildformate können GIF (Graphics Interchage Format) oder XBM (X Bitmap) angesehen werden; Netscape unterstützt auch JPEG.

    IMG-Elemente können als Inhalt von Ankern auftreten, verwendet z.B. für die Realisierung von Buttons, die nach Mausklick zu einem anderen Dokument führen.

    Der Text hinter ALT= kann von Linemode-Browsern verwandt werden anstelle einer Standardkennzeichnung wie [IMAGE], um z.B. die Information eines beschrifteten Buttons als Text zu liefern. Der Text kann auch leer sein, wenn das Bild sowieso keine Information vermittelt, sondern nur der Verzierung dient.

    Weitere Attribute zu <IMG>:

    ALIGN=
    bestimmt die Ausrichtung des Bildes innerhalb einer Textzeile vor bzw. hinter dem Bild durch die Attributwerte TOP, MIDDLE, BOTTOM:
    ALIGN=TOP
    ALIGN=MIDDLE
    ALIGN=BOTTOM
    ISMAP
    Definiert ein Bild als Image Map (Clickable Image). Dazu später mehr.

    Spezielle Umgebungen

    Preformatted

    <PRE>Vorformatierter Text</PRE>

    Der Inhalt des PRE-Elementes, dessen Zeilenwechsel und Einrückungen mit mehrfachen Leerzeichen und Tabulatorzeichen erhalten bleiben sollen. Die Darstellung sollte deshalb in einem Zeichensatz mit fester Zeichenbreite erfolgen, Tabulatorzeichen werden interpretiert als Sprung zur nächsten Spaltenposition, die ein vielfaches von acht ist.

    Innerhalb des PRE-Elementes sollten keine HTML-Elemente verwendet werden, die selbst Absätze und Einrückungen bewirken, wie <P>, alle Überschriften und Listen, wohl aber Anker und Hervorhebungen

    Typische Anwendungen: Tabellen, die es in HTML Version 2 noch nicht gibt, Source-Listings.

    Blockquote

    <BLOCKQUOTE>Quoted Text, Zitat</BLOCKQUOTE>

    Der Inhalt wird typischerweise eingerückt dargestellt.

    Address

    <ADDRESS>Adresse/Signatur</ADDRESS>

    Das ADDRESS-Element wird meist am Ende eines Dokumentes benutzt, um den Autor/die Autorin des Dokumentes zu nennen - häufig in Form eines Ankers, der auf eine persönliche Seite verweist.

    Der Inhalt bildet einen eigenen Absatz, oft in Italic gesetzt.

    Hervorhebungen, Styles

    Es entspricht mehr der Philosophie von HTML als einer Sprache für eine logische Strukturierung von Dokumenten, auch logische Styles für Hervorhebungen im Text ausgehend von der intendierten Bedeutung zu verwenden und die Gestaltung dem WWW-Browser zu überlassen.

    Logische Styles

    <EM>Text</EM>
    Hervorgehobener Text
    <STRONG>Text</STRONG>
    Stark hervorgehobener Text
    <CODE>Text</CODE>
    Programm-Code-Beispiel wiea:= 3*b + 5;
    <KBD>Text</KBD>
    Tastatureingaben wie rsh sunserver1 /usr/openwin/bin/xterm -display $DISPLAY &
    <SAMP>Text</SAMP>
    Beispielausgabe oder ähnliches: Permission denied
    <VAR>Text</VAR>
    Angabe einer Variablen im Text.
    <CITE>Text</CITE>
    Hervorhebung eines (kürzeren) Zitates.

    Physische Styles

    <B>Text</B>
    Fetter Text: Bold.
    <I>Text</I>
    Kursiver Text: Italic.
    <TT>Text</TT>
    Schreibmaschinenschrift: TELETYPE.

    Entities in HTML

    Wie oben bereits erwähnt, müssen einige Zeichen, die in der Markup-Sprache eine Sonderbedeutung haben, und können andere Zeichen des Code ISO 8859-1 als Entities z.B. &amp; für & oder &uuml; für ü angegeben werden. Als zweite, numerische Form gibt es &#nnn; mit dem dezimalen Code nnn des gewünschten Zeichens. Eine vollständige Liste aller Entities finden Sie hier.

    Was in dieser Ausarbeitung noch fehlt...

    ...sind vor allem die HTML-Elemente zur Erzeugung von Eingabeformularen, die schon in der HTML-Spezifikation Version 2.0 enthalten sind. Diese folgen später.
    Bernd Cappel, 3.5.1995
    Erstellt für eine Lehrveranstaltung des URZ der HHU im Sommersemester 1995