HTML-Kurzanleitung

Übersicht

Was ist eigentlich HTML?
Wie sieht HTML aus?
Der prinzipielle Aufbau eines Dokuments
Was im Header steht
Was im Body steht
Überschriften
Abschnitte und Umbrüche
Listen
Hervorhebungen und Stile
Vorformatierter Text
Adressen
Hyperlinks
Bilder
Wie mache ich Kommentare in HTML?

Was ist eigentlich HTML?

HTML heißt HyperText Markup Language, ist also eine Sprache, um Hypertexte mit Markierungen zu versehen. (Genaugenommen ist HTML ein SGML-DocumentType.) HyperText ist einfach normaler Text (für Informatiker: Knoten), der Verbindungen (für Informatiker: Kanten) zu anderen Dokumenten hat. So entsteht ein richtiges Netz (für Informatiker: Graph) von Dokumenten, das sich World Wide Web nennt. Diesen Verbindungen kann man durch einfaches Auswählen nachgehen.

Wie sieht HTML aus?

HTML sieht zuerst einmal wie ganz normaler Text aus. Und das ist es eigentlich auch. Nur daß dazwischen spezielle Zeichenketten auftauchen, die die HTML-Befehle darstellen.

HTML-Befehle werden auch als Tags bezeichnet. Ein Tag fäängt immer mit einem Kleinerzeichen (<) an, dann kommt der Name des Tags und zum Abschluß ein Größerzeichen (>), also etwa so: <NAME>.
Es gibt Tags, die mitten im Text auftauchen (sie werden als leere Tags bezeichnet) und andere, die einen Teil des Textes umschließen. Dazu gibt es neben dem schon beschriebenen Opening Tag noch einen Closing Tag, der sich von ersterem nur durch einen Slash ( /) vor dem Namen unterscheidet: </NAME>.
Außerdem gibt es noch Tags, die Attribute haben, mit denen man das Verhalten der Tags beeinflußen kann. Solche Attribute stehen zwischen dem Namen und dem Größerzeichen und werden durch Leerzeichen voneinander getrennt. Manche Attribute haben zusätzlich noch einen Wert, dieser wird dann mit einem Gleichheitszeichen an das Attribut angehängt. Enthält der Wert selbst Leerzeichen, sollte man ihn in Anführungszeichen einschließen: <NAME ATTR="Wert">.
Ein ganz komplizierter Tag würde also so aussehen:

<NAME ATTR1 ATTR2="Wert">
Irgendwelcher Text
</NAME>

HTML benutzt als Standardzeichensatz ISO 8859-1 (ISO Latin 1), wie er auch von X11 und Windows verwendet wird. Da das Übertragungsprotokoll HTTP 8-bit-clean ist, dürfen Zeichen über 127 (beispielsweise Umlaute) direkt verwendet werden; HTML bietet aber auch Möglichkeiten, Text mit Umlauten als reinen 7-bit ASCII-Text zu schreiben. Hierzu dienen die sogenannten Entities, die eine Umschreibung für Sonderzeichen sind.

Entities fangen mit einem Ampersand (&) an, dann folgt der Name des Entitys, abgeschlossen mit einem Semikolon (;). Der Ampersand selber hat dann natürlich auch ein eigenes Entity; ebenso braucht man für das Größer- und das Kleinerzeichen auch eigene Entities, um sie nicht mit den Tag-Begrenzern zu verwechseln.

ä: ä ö: ö ü: ü ß: ß
Ä: Ä Ö: Ö Ü: Ü
&: & <: < >: >

Auf den RZ-Workstations steht das Kommando htmlconv zur Verfügung, mit dem man in einem Dokument die ISO-Umlaute in Entities umwandeln kann; analog dazu wandelt htmlreconv Sonderzeichenentities wieder in ISO-Zeichen um.

Der prinzipielle Aufbau eines Dokuments

Bei HTML geht alles ganz hierarchisch zu. Das fängt damit an, daß man sich auf die entsprechende Document Type Definition bezieht (HTML ist ja ein SGML-Typ), indem die erste Zeile eines Dokuments lautet:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

Um ein HTML-Dokument jetzt als solches zu kennzeichnen, wird es zuallererst in einen <HTML>-Tag eingeschlossen. Das eigentliche Dokument gliedert sich dann in einen Header und einen Body. Der Header wird durch <HEAD>-Tags umschlossen; hier stehen allgemeine Informationen über das Dokument, aber nichts, was zu irgendeiner Ausgabe führt. Der Body ist der eigentliche Informationsträger, er wird durch <BODY>-Tags begrenzt und enthält all das, was später zur Anzeige kommen soll.

Ein typisches Dokument sollte also so aussehen:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<HTML>
<HEAD>
Header-Elemente
</HEAD>
<BODY>
Body-Elemente
</BODY>
</HTML>

Auf den RZ-Workstations steht das Kommando newhtml zur Verfügung, mit dem ein leeres Dokument anlegen werden kann, das diesen Konventionen entspricht.

Was im Header steht

Im Header stehen Informationen über das Dokument, aber noch kein Inhalt, also nichts, was zu irgendeiner Ausgabe führt. Es handelt sich vielmehr um Meta-Informationen, die dem Browser etwas über das Dokument erzählen; wie es heißt, wer es gemacht hat und vieles mehr.

Das wichtigste Element im Header ist der Titel des Dokuments, er wird mit <TITLE> gekennzeichnet. Der Titel sollte ein Dokument auch außerhalb seines Kontextes kennzeichnen, er wird z. B. für die Anzeige in der History, der Hotlist oder als Ausgabe automatischer Suchen auf dem Netz benutzt. Er sollte, alleinstehend, eine Aussage über das Dokument geben, anhand der man das Dokument identifizieren. Insbesondere sollte man Titel wie "Einführung" oder "Überblick" oder "Meine Homepage" vermeiden - das sind Überschriften!

Ein weiteres wichtiges Element is das <LINK>-Element, das für Verbindungen zwischen Dokumenten genutzt werden kann; Hauptaufgabe ist gegenwärtig die Kennzeichnung des Urhebers eines Dokuments. Dazu erhält der <LINK>-Tag ein Reverse-Relationship-Attribut (REV) mit dem Wert "made", es kennzeichnet also, wer das Dokument "gemacht" hat. Der Autor wird dann im HREF-Attribut aufgeführt, er wird durch eine mailto:-URL gekennzeichnet, die eine E-mail-Adresse enthält. Einige Browser sind aufgrund dieser Kennzeichnung bereits in der Lage, Kommentare direkt an den Autor zu schicken.

Der Header ist mit <HEAD>-Tags geklammert. Ein typischer Header könnte also so aussehen:

<HEAD>
<TITLE>Dokument-Titel</TITLE>
<LINK REV="made" HREF="mailto:user@rz.uni-karlsruhe.de">
</HEAD>

Was im Body steht

Im Body steht der Inhalt des Dokuments, also all das, was angezeigt werden soll. Dies kann zunächst einmal ganz normaler ASCII-Text sein. Dabei muß auf Zeilenumbrüche und ähnliches nicht geachtet werden, dafür sorgt nämlich der Browser oder WWW-Client. Und da jeder Browser anders funktioniert, andere Zeichensätze oder Fenstergrößen hat, sollte man auch tunlichst vermeiden, irgendwelche Annahmen darüber zu treffen.

Einfacher Fließtext kann aber nur begrenzt eine Aussage vermitteln. Deshalb gibt es in HTML zusätzliche Tags, mit denen man etwas über die Struktur und den Inhalt eines Dokuments aussagen kann. Diese Struktur wird dann vom Browser in ein Layout übertragen, das aber von Browser zu Browser unterschiedlich sein kann. Man sollte beim Schreiben eines HTML-Dokuments also immer darauf achten, daß es von unterschiedlichen Programmen ganz unterschiedlich dargestellt werden kann. Insbesondere Sätze wie "Klicken Sie mit der Maus auf die blauen unterstrichenen Wörter" sind für Leser, die nur ein ASCII-Terminal haben und mit den Cursortasten fett geschriebene Wörter auswählen müssen, äußerst verwirrend.

HTML-Tags dienen also nur einer semantischen Gliederung des Dokuments und geben dem Browser Hinweise über den Inhalt, die dieser dann in eine seinem Benutzer angenehme Darstellung übersetzt.

Überschriften

HTML stellt sechs verschiedene Level von Überschriften zur Verfügung, die mit den Tags <H1> bis <H6> markiert werden. Ein mit einer Überschrift versehener Text sähe also so aus:

<H1>Überschrift</H1>
Ganz ganz viel Text.

Abschnitte und Umbrüche

Ein einziger riesiger Text ist auch nicht sehr lesbar, deswegen läßt er sich in einzelne Abschnitte unterteilen. Dazu dient der <P>-Tag, der zwischen zwei Abschnitte gestellt wird und zwei Abschnitte voneinander trennt.

Ganz viel Text.<P>
Noch mehr Text.

Anmerkung: Mit den neuen Versionen von HTML ändert sich die Benutzung des <P>-Tags dahingehend, daß er nun einen Abschnitt umschließt, statt zwei Abschnitte zu trennen. Leider beherrschen die gängigen Browser diese Verwendung noch nicht korrekt, so daß man sich noch an die alte Definition halten sollte.

Abschnitte werden i. A. durch einen Abstand voneinander getrennt. Ab und an kann es notwendig werden, eine neue Zeile anzufangen, ohne einen Abstand zu erzeugen; für diesen Zeilenumbruch dient der <BR>-Tag. Er wird genau wie <P> verwendet.

Eine deutlichere Trennung mehrerer unabhängiger Teile eines Dokuments kann man durch das Einsetzen einer horizontalen Linie erreichen. Sie wird mit dem <HR>-Tag erzeugt und genau wie der <P>-Tag zwischen die zu trennenden Abschnitte gesetzt.

Eine besondere Art des Abschnitts ist ein Zitat oder ein Beispiel. Hierzu dienen die <BLOCKQUOTE>-Tags, die im Gegensatz zu den anderen nicht leer sind. Zitate und Beispiele werden oft eingerückt dargestellt. Ein Beispiel für ein Zitat:

Einfacher Text
<BLOCKQUOTE>
Zitierter Text
</BLOCKQUOTE>
Weiterer Text

Die Tags <P>, <BR> und <HR> sollten nur dann verwendet werden, wenn ansonsten der Text zu einem Abschnitt zusammenfließen würde. Insbesondere sollten nicht mehrere aufeinander folgen, auch wenn manche Browser dies tolerieren; andere erzeugen damit fast leere Seiten. Ebenso brauchen vor oder nach anderen Tags, die ebenfalls eine Trennung des Textes bewirken (z. B. Überschriften), keine Abschnittstrenner zu stehen.

Listen

Manche Informationen lassen sich besser als eine Auflistung denn als fließender Text präsentieren. HTML bietet hierzu drei grundlegende Listentypen an. Der einfachste Typ ist die ungeordnete Liste, was jetzt aber nicht heißt, daß die Listenelemente wild durcheinander angezeigt werden; dies soll lediglich ausdrücken, daß die Liste keine definierte Abfolge darstellt. Eine solche Liste wird durch <UL>-Tags begrenzt, die einzelnen Listenelemente werden durch <LI> eingeleitet:

<UL>
<LI>Ein Eintrag
<LI>Noch ein Eintrag
</UL>

Für eine definierte Abfolge, wie sie z. B. in einer Gebrauchsanweisung auftaucht, steht die geordnete Liste zu Verfügung, wobei der Browser dafür sorgt, daß dies auch zum Ausdruck kommt (z. B. durch fortlaufende Nummern vor den Einträgen). Eine geordnete Liste funktioniert genau wie eine ungeordnete, nur ist jetzt <OL> statt <UL> zu verwenden.

Der dritte Typ unterscheidet sich von den vorherigen dadurch, daß ein Eintrag aus zwei Teilen besteht: einem Eintrag und einer zugehörigen Beschreibung. Eine solche Liste läßt sich als Glossar u. ä. verwenden. Das Schlüsselwort wird dabei durch <DT> eingeleitet, die zugehörige Erklärung durch <DD>:

<DL>
<DT>Ein Eintrag
<DD>und der zugehörige Text
<DT>Ein anderer Eintrag
<DD>und der dazugehörige Text
</DL>

Hervorhebungen und Stile

Natürlich sind in HTML Texthervorhebungen möglich, sie sollten sich aber möglichst nur auf die Struktur beziehen. Dazu dienen die strukturellen Markierungen <EM> (Hervorhebung) und <STRONG> (Betonung). Zur Darstellung computerbezogener Daten eignet sich <CODE>. Der Browser entscheidet selber, wie er welche Markierung anzeigt, üblich ist aber kursiv zur Hervorhebung und fett zur Betonung, so verfügbar. <CODE>-Tags werden oft als nichtproportionaler Zeichensatz dargestellt.

<EM>Hervorgehobener</EM> und <STRONG>betonter</STRONG> Text

Neben den strukturellen Markierungen gibt es auch noch explizite Anweisungen für kursiven Text (<I>), fetten Text (<B>), unterstrichenen Text (<U>) oder Schreibmaschinentext (<TT>). Dies ist aber keine Garantie dafür, daß der Text dann auch wirklich so erscheint, da manche Browser ihn nicht wie gewünscht darstellen können! Man sollte daher nach Möglichkeit auf diese Markierungen verzichten und auf die strukturellen zurückgreifen.

Vorformatierter Text

Beim Übertragen fertiger ASCII-Dokumente nach HTML kommt es oft vor, daß man einen schön gesetzten Text wie z. B. eine Tabelle hat, die durch den automatischen Umbruch oder durch die proportionalen Zeichensätze zerstört werden würde. Für solche Fälle stehen die <PRE>-Tags zur Verfügung, die einen Text in einem nichtproportionalen Zeichensatz darstellen und vorgegebene Zeilenumbrüche beachten:

<PRE>Die erste Zeile
Die letzte Zeile</PRE>

Adressen

Für die Angabe von Adressen gibt es die <ADDRESS>-Tags:

<ADDRESS>
Rechenzentrum der Universität Karlsruhe
Zirkel 2
Postfach 6980
D-76128 Karlsruhe
</ADDRESS>

Hyperlinks

Das interessanteste an Hypertext sind die Hyperlinks, also die Verbindungen zu anderen Dokumenten. Dazu muß man aber erst einmal eine Möglichkeit haben, andere Dokumente zu spezifizieren; dies tun die URLs (Uniform Resource Locator). Viele Browser zeigen die URL des aktuellen Dokuments an; sie setzt sich zusammen aus dem Protokoll, gefolgt von einem Doppelpunkt, zwei Slashs //, die den Host einleiten, und dem Pfad zu dem Dokument auf dem Host. Der Pfad hat dabei nur bedingt mit den UNIX-Dateipfaden zu tun, die Interpretation ist dem durch Protokoll und Host spezifizierten Server überlassen. HTTP-Server übertragen aber im allgemeinen die UNIX-Dateipfade auf die URLs, allerdings ist der Startpunkt nicht das Root-Verzeichnis, sondern (aus Sicherheitsgründen) ein spezifisches Dokumentenverzeichnis. So wird aus der URL

http://www.uni-karlsruhe.de/Betrieb/HTML/Kurzanleitung.html

der Dateipfad

/usr/local/etc/httpd/htdocs/Betrieb/HTML/Kurzanleitung.html

URLs, die mit einer Tilde (~) anfangen, spezifizieren Benutzerverzeichnisse; für RZ-Benutzer liegt der Startpunkt dann in $HOME/.public_html. Jetzt wird die URL

http://www.uni-karlsruhe.de/~user/Homepage.html

abgebildet auf den Dateipfad

/home/ws/user/.public_html/Homepage.html

Trotzdem kann man mit URLs ähnlich umgehen wie mit Dateipfaden: Man muß beispielsweise in einem Verweis eines Dokument nicht immer die ganze URL angeben, wenn sich das andere Dokument auf demselben Server befindet, sondern kann lediglich den Pfad angeben; der Browser setzt dann selbständig Protokoll und Host des aktuellen Dokuments ein. Man sollte von dieser Möglichkeit Gebrauch machen, um so große Schwierigkeiten zu vermeiden, wenn sich einmal der Name des Rechners ändert, auf dem sich die Dokumente befinden. Gehören zwei Dokumente zu einer Hierarchie von Dokumenten, sollte man sogar eine noch lokalere Art von URLs anwenden, indem man den relativen Pfad angibt, genau wie bei Dateipfaden. So würde die URL

../Proxy/

abgebildet auf den Dateipfad

/usr/local/etc/httpd/htdocs/Betrieb/Proxy/

wobei noch hinzukommt, daß der Server, wenn nur ein Verzeichnis in der URL angegeben ist, automatisch nach einer Datei index.html sucht. Mit diesen relativen URLs vermeidet man Probleme, wenn die Dokumenthierarchie einmal an eine andere Stelle im Dokumentenbaum verschoben werden soll.

Um jetzt konkret einen Hyperlink anzugeben, benutzt man die <A>-Tags (A steht für Anchor, zu deutsch Anker), dem öffnenden Tag wird dabei die URL im HREF-Attribut übergeben. Der Textabschnitt, der als Anker dienen soll, wird von den <A>-Tags eingeschlossen.

Den <A HREF="../Proxy/">Proxy</A> sollte jeder verwenden.

Bilder

Bilder sind externe Bestandteile und werden deshalb, ähnlich wie Hyperlinks, unter Angabe ihrer URL eingebunden. Über die URLs gilt dabei das oben gesagte, insbesondere genügt es, bei Bildern, die sich im gleichen Verzeichnis wie das Dokument befinden, den Dateinamen des Bildes ohne weitere Pfadangaben zu spezifizieren.

Zum Einbinden von Bildern dient der (leere) <IMG>-Tag, die URL des Bildes wird im im SRC-Attribut übergeben. Zusätzlich kann mit dem Attribut ALIGN, das die Werte BOTTOM, MIDDLE und TOP annehmen darf, die Plazierung des Bildes im laufenden Text angegeben werden.

Nicht jeder Browser hat die Möglichkeit, Bilder anzuzeigen; darauf sollte man Rücksicht nehmen. Insbesondere sollte man solche Bilder vermeiden, die lediglich der Dekoration dienen sollen; meist dienen sie nur der Erhöhung der Netzlast oder zerstören das Bild, weil ein frustrierter Benutzer am anderen Ende der langsamen Leitung die Darstellung der Bilder abgeschaltet hat. Andererseits gibt es Bilder, die wichtige Informationen enthalten, die dann aber Benutzern nicht graphikfähiger Browser entgehen. Diesen sollte man wenigstens einen Hinweis auf den Inhalt des Bildes geben, indem man einen alternativen Text im ALT-Attribut angibt, oder (in begründeten Dekorationsfällen) auch einen leeren Text, der so zumindest vermeidet, daß ein Textbrowser nur [IMAGE] anzeigt.

<IMG SRC="/Icons/Logos/Unilogo.gif" ALT="">

Kommentare

Kommentare in HTML werden zwischen  eingeschlossen:

Achtung: Marken lassen sich nicht durch Kommentare ausblenden! Zumindest die gängigen Browser lassen nach dem ersten > alle Kommentare Kommentare gewesen sein.

Wem das noch nicht genug ist, der kann sich alles über HTML vom WWW Konsortium ansehen. Dort gibt es u.a. einen Abschnitt darüber, welche Tags nun wie geschachtelt werden dürfen. Wer Tags wie <BLINK> & Co. vermißt, sollte sich mal "Why Not Code for Netscape?" anschauen.

Dieser Artikel erschien in den RZ-News Oktober 95.

Webmaster, 17. Juni 1996