Einführung in die Hypertext Markup Language HTML


1 Wozu HTML ?

Die HTML (Hypertext Markup Language) ist eine Abart der SGML (Structured Generalized Markup Language). Sie dient der Darstellung von

Die HTML ist die Grundlage des World Wide Webs (W3), das vielfältige Informationen rund um den Globus miteinander verknüpft.

2 Strukturierter Text

Wie SGML, soll auch HTML zur Strukturierung von Text verwendet werden. Dadurch ergibt sich der typische Aufbau eines HTML Textes:

<HTML>
<HEAD>
<TITLE>
Titel des Textes
</TITLE>
</HEAD>
<BODY>
HTML-Text...
</BODY>
</HTML>

Einzelne Elemente eines Textes werden durch sogenannte Tags gekennzeichnet. Dabei gibt es öffnende Tags (<TAG>) und schließende Tags (</TAG>). Nicht alle Tags treten paarweise auf, für einige wird kein schließender Tag benötigt. Solche Konstrukte können auch verschachtelt werden, sie dürfen sich allerdings nicht überlappen. Im folgenden werden wir uns mit diesen Tags beschäftigen.

Eines sollten Sie immer bedenken: HTML ist nicht zum Formatieren von Texten gedacht!

Die Darstellung eines Tags ist immer Sache des verwendeten Browsers. Während ein Browser eine Überschrift in Fettdruck hervorhebt, verwendet ein anderer Großbuchstaben zur Auszeichnung. Versuchen Sie also nicht, ein bestimmtes Aussehen zu erzielen, da es u.U. nur für den von Ihnen verwendeten Browser gültig ist.

2.1 HEAD

Jedes HTML Dokument gliedert sich in zwei Teile. Im HEAD Element finden sich allgemeine Angaben über das Dokument. Es enthält keinen Text aus dem Dokument selbst. Im HEAD Element sind nur bestimmte Tags erlaubt.

2.1.1 Titel

Der TITLE Tag bestimmt den Titel eines Dokumentes.

Beispiel:

<TITLE>Kurse im Rechenzentrum</TITLE>

Jedes HTML-Dokument sollte einen Titel haben. Er ist nicht Bestandteil des Dokumententextes, wird aber vom Browser erkannt und separat dargestellt, z.B. von Lynx als Kopfzeile. Zu einem öffnenden <TITLE> gehört ein schließender </TITLE>. Jedes Dokument darf nur einen Titel haben.

2.1.2 ISINDEX

Mit ISINDEX wird ein Dokument "suchbar" gemacht. Die meisten Browser haben eine eingebaute Suchfunktion, die diesen Tag überflüssig machen.

Beispiel:

<ISINDEX>

<ISINDEX> ist ein einfacher Tag.

2.1.3 LINK

Durch einen LINK wird eine Beziehung zu einem anderen Objekt definiert. Es wird meistens zur Deklaration der Urheberschaft verwendet.

Beispiel:

<LINK REV=made HREF=mailto:hmueller@rz.uni-leipzig.de>

Einige Browser, z.B. Lynx, erlauben es dem Anwender, direkt E-Mail an den Autor eines HTML Dokuments zu schicken, wenn dieser einen entsprechenden LINK eingebaut hat. <LINK> ist ein einfacher Tag.

2.2 BODY

Im BODY finden sich alle Informationen, die zum Dokument selbst gehören. Das sind der eigentliche Text, aber auch Strukturangaben wie Überschriften, Hypertext-Links, Grafiken, Hervorhebungen etc.

2.2.1 Überschriften

HTML kennt sechs Überschriftenebenen. Diese werden durch die Tags <H1> bis <H6> repräsentiert. Zu einem öffnenden Tag gehört ein schließender.

Beispiel:

<H1>Vom Liebesleben der Waldameise</H1>

2.2.2 Absätze

In HTML sind Leerzeichen und Zeilenumbrüche ohne Bedeutung, darum ist es notwendig, Absatzenden mit <P> zu kennzeichnen. In der Regel fügen die Browser nach einem Absatz eine Leerzeile ein. Wollen Sie dies vermeiden verwenden Sie statt eines Absatzendes ein erzwungenes Zeilenende <BR>.

2.2.3 Aufzählungen

HTML kennt mehrere Arten der Aufzählung: numerierte und nicht numerierte Listen, Glossare, Menülisten und Verzeichnislisten. Die Darstellung der einzelnen Listen ist abhängig vom Browser. Numerierte und nicht numerierte Listen dienen der Auflistung mehrzeiliger Absätze. Menülisten sind kompakter und enthalten normalerweise nur ein Item je Zeile. Verzeichnislisten sind für sehr kurze Einträge, typischerweise weniger als zwanzig Zeichen. Browser sind gehalten, die Einträge spaltenweise anzuzeigen.

Bitte beachten Sie, daß <LI> (Listenelement) ein einfacher Tag ist und Absatzendemarkierungen nicht notwendig sind.

Alle Listen können verschachtelt werden, d.h. eine Liste kann Element einer Liste sein.

2.2.3.1 Numerierte Listen

Eine numerierte Liste wird durch die Tags <OL> (Anfang der Liste), <LI> (Listenelement) und </OL> (Ende der Liste) erzeugt.

Beispiel:

<OL>
<LI>Besteigen Sie am Bahnhof einen Bus der Linie 9(a oder b). Diese Linie fährt an die Universität
<LI>Betreten Sie die Universität an der Bushaltestelle durch den Haupteingang und folgen Sie den Markierungen zum Gebäudeteil B
<LI>Auf Ebene 4 finden Sie den Eingang zur Bibliothek, folgen Sie dort den Markierungen in Richtung G3
</OL>

2.2.3.2 Nicht numerierte Listen

Eine nicht numerierte Liste wird durch die Tags <UL> (Anfang der Liste), <LI> (Listenelement) und </UL> (Ende der Liste) erzeugt.

Beispiel:

Mosaic hat die folgenden Funktionalitäten:<P>

<UL>
<LI>Grafische Anzeige von Plain Text, formatiertem Text und Hypertext sowie Grafiken.
<LI>Intelligente grafische Benutzerschnittstelle mit weitgehenden Anpassungsmöglichkeiten an Benutzerbedürfnisse
<LI>Dokumentinterne und netzweite Suchmöglichkeiten einschließlich der Nutzung von WAIS Ressourcen
</UL>

2.2.3.3 Menülisten

Eine Menüliste wird durch die Tags <MENU> (Anfang der Liste), <LI> (Listenelement) und </MENU> (Ende der Liste) erzeugt.

Beispiel:

<MENU>
<LI>Spaghetti in kochendes Salzwasser geben
<LI>8 Minuten kochen lassen
<LI>Mit einer Sauce al gusto servieren
</MENU>

2.2.3.4 Verzeichnislisten

Eine Verzeichnisliste wird durch die Tags <DIR> (Anfang der Liste), <LI> (Listenelement) und </DIR> (Ende der Liste) erzeugt.

Beispiel:

<DIR>
<LI>A-H<LI>I-M
<LI>N-R<LI>S-Z
</DIR>

2.2.3.5 Glossare

Ein Glossar wird durch die Tags <DL> (Anfang der Liste), <DT> (definition term), <DD> (definition description) und </DL> (Ende der Liste) erzeugt. <DT> und <DD> können nur paarweise auftreten, d.h. zu jedem definition term muß es eine definition description geben.

Beispiel:

<DL>
<DT>gautschen
<DD>Papier zum Pressen ins Gautschbrett legen; auch: Lehrlinge nach altem Buchdruckerbrauch unter die Gehilfen aufnehmen
<DT>Murkel
<DD>Wickelkind
<DT>Terpen
<DD>Bestandteil ätherischer Öle
</DL>

2.2.4 Vor-formatierter Text (Tabellen)

Sollten Sie bereits formatierten Text haben, bei dem es auf die Gestaltung ankommt (z.B. Tabellen), können Sie mit <PRE> und </PRE> die Darstellung durch einen äquidistanten Font veranlassen. Dabei werden auch Leerstellen und Zeilenumbrüche übernommen.

Beispiel:

<PRE>

         1. Quartal   2. Quartal   3.Quartal   4. Quartal

Socken 1893 1606 1742 1549

Hemden 795 801 690 963

Hosen 649 530 791 661

</PRE>

Ähnlich wirkt <listing>...</listing>, jedoch werden HTML-Tags im Text nicht erkannt

2.2.5 Adressen

Mit <ADDRESS> und </ADDRESS> bekommen Sie eine besondere Darstellung für Adressen, Signaturen, Autorenkennungen, etc.

Beispiel:

<ADDRESS>Mike Meier, Parkstr. 7, 04109 Leipzig</ADDRESS>

2.2.6 Schriftauszeichnungen

HTML kennt eine Reihe sogenannter logischer und physicher Schriftauszeichnungen (Styles)

Logische Schriftauszeichnungen sind etwa:

<strong>...</strong>          - stark hervorgehoben, meist halbfett
<em>...</em>                  - betont (weniger stark als strong)
<code>...</code>              - ein Code (z.B. Programmcode), nichtproportional
<samp>...</samp>              - vom Benutzer einzugebender Text
<var>...</var>                - ein Variablenname
<dfn>...</dfn>                - ein zu definierender Begriff
<cite>...</cite>              - ein Zitat
<blockquote>...</blockquote>  - ein (längeres) Zitat

Zu den physischen Schriftauszeichnungen gehören

<tt>...</tt>         - nichtproportional
<b>...</b>           - halbfett
<i>...</i>           - kursiv
<u>...</u>           - unterstrichen
Alle Tags müssen als Anfangs- und Endetags verwendet werden.

Beispiel:

Es gibt in HTML die Möglichkeit, hervorzuhebende Textstücke durch <b>Fettschrift</b> oder <i>kursive Schrift</i> aus dem Text herauszuheben.

2.2.7 Inline Images

WWW zeichnet sich u.a. durch die Integration von Text und Bild in einem Dokument aus. Graphiken innerhalb eines Dokuments werden Inline Images genannt (im Gegensatz zu "gelinkten" Bildern, mit denen wir uns im nächsten Kapitel beschäftigen werden). Geeigenete Grafikformate sind: GIF und XBM.

Beispiel:

<IMG SRC="dateiname" ALIGN="textausrichtung" ALT="alternativtext">

dateiname bezeichnet den Namen der einzubindenden Grafikdatei. textausrichtung kann die Wert TOP, MIDDLE oder BOTTOM annehmen und gibt an, auf welcher Höhe Text wenn möglich neben einer Grafik angeordnet werden soll. Die Voreinstellung ist BOTTOM. Die Angabe eines alternativtextes ist besonders für nicht-grafische Browser von Bedeutung. Diese zeigen dann statt eines Platzhalters für die Grafik den Alternativtext an.

2.2.8 Horizontale Linie

Mit dem Tag <hr> erzeugen Sie eine über die gesamte Breite des Anzeigefenster gehende horizontale Linie. Damit lassen sich Abschnitte innerhalb eines Dokuments deutlicher voneinander absetzen:


3 Hypertext

Mit dem bisher Gelernten sollten Sie in der Lage sein, bereits recht brauchbare HTML-Dokumente (in der Fachsprache Pages genannt) zu erstellen. Was uns jetzt noch fehlt, ist eine Möglichkeit, die HTML-Pages zueinander in Beziehung zu setzen und miteinander zu verknüpfen. Gerade diese Hypertext-Fähigkeit ist aber einer der Kernpunkte des World Wide Webs. Damit ist es möglich, von einem beliebigen Punkt in einem Dokument einen Zeiger (Link) auf eine beliebige Stelle in einem anderen Dokument zu setzen. Der Ausgangspunkt des Links wird Anchor genannt.

Bevor wir uns damit genauer auseinandersetzen müssen wir zuerst einen kleinen Exkurs unternehmen und uns mit URLs beschäftigen.

3.1 URL

Ein URL (Uniform Resource Locator) kann als Dateiname verstanden werden, der um seine genaue Lage- und Zugriffsbeschreibung im Netz erweitert wurde. Durch einen URL kann also jedes Objekt im Internet eindeutig und vollständig beschrieben werden. Das klingt komplizierter als es ist, sehen wir uns daher einige Beispiele an. Die Syntax eines URLs ist folgendermaßen:

zugriffsmethode://rechner-adresse/dateiname.

3.1.1 Datei URL

Auf unserem FTP-Server ftp.uni-leipzig.de findet sich im Verzeichnis /pub/kommunikation/infosysteme/pc die Datei wmos20a6.zip. Da man, um auf diese Datei zugreifen zu können, FTP verwendet, lautet der URL:

ftp://ftp.uni-leipzig.de/pub/kommunikation/infosysteme/pc/wmos20a6.zip

3.1.2 Gopher URL

Gopher URLs sind ähnlich einfach. Unseren Leipziger Gopher finden Sie unter dem URL:

gopher://gopher.uni-leipzig.de/

Da hier kein Dateiname erscheint, wird das Stammverzeichnis des Gophers angezeigt.

3.1.3 HTTP URL

Mit einem HTTP URL verweisen Sie auf einen Eintrag auf einem anderen WWW-Server.

http://www.ai.mit.edu/stocks/graphs.html

3.1.4 Unvollständige URL

Wenn Sie von einem HTML-Dokument auf ein anderes verweisen wollen, das auf dem gleichen Server liegt, genügt die Angabe des Dateinamens als URL. Damit wird es kinderleicht, Ihre HTML-Dokumente miteinander zu verknüpfen.

3.2 Links und Anchor

Damit verfügen wir über die wichtigsten Zutaten für unser Hypertextsystem, die Syntax für eine Verknüpfung ist denkbar einfach: <A HREF="URL">Anker</A>, wobei "Anker" der Text ist, der im Dokument als Link (als Absprungstelle) zum anderen Dokument dargestellt wird.

Bei der Auswahl von "Anker" (z.B. durch Anklicken mit der Maus) wird URL aufgerufen. Handelt es sich bei URL um ein HTML-Dokument, haben Sie außerdem noch die Möglichkeit, an eine beliebige Stelle in diesem Dokument zu springen. Die Zielstelle wird named anchor genannt. Einen named anchor erstellen Sie mit <A NAME="named anchor">text</A>. Ein Beispiel soll dies verdeutlichen.

In einem Text A.html über Waldameisen findet sich folgendes:

Ein nicht zu vernachlässigender Teil des gesellschaftlichen Lebens der Waldameise ist der <A NAME="Wald-a-Liebe">Liebe</A> gewidmet.

Von einem Text B.html aus können Sie auf diese Stelle verweisen:

Die Nacht ist nicht allein zum Schlafen da! Das wissen sowohl die großen als auch die <A HREF="A.html#Wald-a-Liebe">kleinen Tiere</A> des Waldes.


4 Zeichenverschlüsselung

4.1 Umlaute und Sonderzeichen

&auml;  -  ä               &amp; -  &
&ouml;  -  ö               &lt;  -  <
&uuml;  -  ü               &gt;  -  >
&szlig; -  ß

4.2 "ISO LATIN 1" - Zeichendarstellung

Nach: "ISO 8879:1986//ENTITIES Added Latin 1//EN".

&Aelig;      capital AE diphthong (ligature)
&Aacute;     capital A, acute accent
&Acirc;      capital A, circumflex accent
&Agrave;     capital A, grave accent
&Aring;      capital A, ring
&Atilde;     capital A, tilde
&Auml;       capital A, dieresis or umlaut mark
&Ccedil;     capital C, cedilla
&ETH;        capital Eth, Icelandic
&Eacute;     capital E, acute accent
&Ecirc;      capital E, circumflex accent
&Egrave;     capital E, grave accent
&Euml;       capital E, dieresis or umlaut mark
&Iacute;     capital I, acute accent
&Icirc;      capital I, circumflex accent
&Igrave;     capital I, grave accent
&Iuml;       capital I, dieresis or umlaut mark
&Ntilde;     capital N, tilde
&Oacute;     capital O, acute accent
&Ocirc;      capital O, circumflex accent
&Ograve;     capital O, grave accent
&Oslash;     capital O, slash
&Otilde;     capital O, tilde
&Ouml;       capital O, dieresis or umlaut mark
&THORN;      capital THORN, Icelandic
&Uacute;     capital U, acute accent
&Ucirc;      capital U, circumflex accent
&Ugrave;     capital U, grave accent
&Uuml;       capital U, dieresis or umlaut mark
&Yacute;     capital Y, acute accent
&aacute;     small a, acute accent
&acirc;      small a, circumflex accent
&aelig;      small ae diphthong (ligature)
&agrave;     small a, grave accent
&aring;      small a, ring
&atilde;     small a, tilde
&auml;       small a, dieresis or umlaut mark
&ccedil;     small c, cedilla
&eacute;     small e, acute accent
&ecirc;      small e, circumflex accent
&egrave;     small e, grave accent
&eth;        small eth, Icelandic
&euml;       small e, dieresis or umlaut mark
&iacute;     small i, acute accent
&icirc;      small i, circumflex accent
&igrave;     small i, grave accent
&iuml;       small i, dieresis or umlaut mark
&ntilde;     small n, tilde
&oacute;     small o, acute accent
&ocirc;      small o, circumflex accent
&ograve;     small o, grave accent
&oslash;     small o, slash
&otilde;     small o, tilde
&ouml;       small o, dieresis or umlaut mark
&szlig;      small sharp s, German (sz ligature)
&thorn;      small thorn, Icelandic
&uacute;     small u, acute accent
&ucirc;      small u, circumflex accent
&ugrave;     small u, grave accent
&uuml;       small u, dieresis or umlaut mark
&yacute;     small y, acute accent
&yuml;       small y, dieresis or umlaut mark

Wolfram Herwig