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 <, > bzw.
&. 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>Titel des Dokumentes</TITLE>
- Jedes Dokument sollte genau einen Titel haben.
- Der Titel wird häufig für Fensterüberschriften verwendet.
- Da der Titel meist auch für Hotlists/Bookmark-Listen von
WWW-Browsern herangezogen wird, sollte er ausdruckskräftig sein
unabhängig vom Kontext, also z.B. nicht Einführung.
<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!
Drei Arten von Ankern lassen sich unterscheiden:
- <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.
- <A NAME="Label">Ziel-Text</A>
setzt Sprungziel z.B. auf diese Zeile.
- <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
Einfache "Spiegelstrich"-Liste, äquivalente LaTeX-Umgebung:
itemize.
<UL>
<LI>1. Listen-Element (List Item)
<LI>2. Listen-Element
<LI>...
</UL>
Typisches Layout:
- 1. Listen-Element (List Item)
- 2. Listen-Element
- ...
Mögliches zusätzliches Attribut bei <UL>:
COMPACT empfiehlt kompaktere Darstellung (evtl. weniger Freiraum
vor und hinter der Liste).
Liste mit durchnummerierten Punkten, äquivalente LaTeX-Umgebung:
enumerate.
<OL>
<LI>1. Listen-Element (List Item)
<LI>2. Listen-Element
<LI>...
</OL>
Typisches Layout:
- 1. Listen-Element (List Item)
- 2. Listen-Element
- ...
Das COMPACT-Attribut kann hier wie bei <UL> verwendet
werden.
Ä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:
Ä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
...
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.
<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
<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>Quoted Text, Zitat</BLOCKQUOTE>
Der Inhalt wird typischerweise eingerückt dargestellt.
<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 wie
a:= 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. & für & oder
ü 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