HTML-Einführung von Hubert Partl, August 1996

Spezialeffekte

Schrift

Schriftarten

In Spezialfällen kann man die Schriftart mit folgenden Befehlen festlegen:
<b> ..... </b> für fette Schrift (boldface),
<i> ..... </i> für kursive Schrift (italic),
<u> ..... </u> für Unterstreichungen (underline),
<tt> ... </tt> für nicht proportionale Schrift (teletype),
<code> ... </code> für Computer-Schrift.

Diese Befehle sollten Sie nur dann verwenden, wenn eine bestimmte Schriftart per Konvention vorgeschrieben ist (z.B. Fettdruck für Vektoren und Kursivdruck für skalare Variable in der Mathematik, Computer-Schrift für Programmbeispiele, Kursivdruck für lateinische Pflanzen- und Tiernamen und dergleichen).

Wenn es jedoch darum geht, Wörter oder Textteile mit einer bestimmten Bedeutung vom normalen Text abzuheben, sollten Sie nicht diese Befehle verwenden sondern die Markierung mit <em> oder <strong>.

Unterstreichungen sollten Sie überhaupt vermeiden, weil sie Verwechslungen mit Hypertext-Links bewirken würden.

Manche Schriftarten können von manchen Clients nicht dargestellt werden, sie werden dann durch eine andere geeignete Schriftart ersetzt.

Schriftgrößen

Die Schriftgröße wird vom Benutzer auf seinem Client so eingestellt, wie es für seine Bildschirm-Auflösung und seine Augen am besten ist.

In HTML 3 sind mehrere Möglichkeiten vorgesehen, die Schriftgröße von bestimmten Wörtern oder Textteilen zu beeinflussen:
<big> ....... </big> für größere Schrift,
<small> ... </small> für kleinere Schrift,
<font size="+n"> ... </font> für eine um n Stufen größere Schrift,
<font size="-n"> ... </font> für eine um n Stufen kleinere Schrift,
<font size=n> ...... </font> für Schrift in einer bestimmten Größe,
sowie mit Style-Sheets. Ob und wie diese Größenangaben wirken, hängt vom Web-Browser und vom Client-Bildschirm ab.

Viele, aber nicht alle Web-Browser stellen Überschriften der Ebenen 1 bis 3 durch fette und große Schrift dar, manche stellen Überschriften der Ebenen 5 und 6 durch kleinere Schrift dar. Die entsprechenden Befehle <hx> sollten aber wirklich nur für Überschriften der jeweiligen Ebene verwendet werden und nicht für andere Zwecke, denn das hätte unerwünschte Nebeneffekte auf eine eventuelle Einrückung der nachfolgenden Texte sowie auf Suchhilfen und automatisch erstellte Inhaltsverzeichnisse.

Farben <em> <strong> <body> <font> class <style>

Im allgemeinen ist es günstiger, wenn Sie dem Leser überlassen, welche Schrift- und Hintergrundfarben er auf seinem Client-Rechner verwendet - in Abhängigkeit von den technischen Möglichkeiten seines Bildschirms und Druckers, den Lichtverhältnissen in seinem Zimmer, der Sehschärfe seiner Augen, seinen Gewohnheiten, dem Zusammenspiel mit anderen Bildschirmfenstern - kurz, so wie es für ihn am angenehmsten ist.

Wenn Sie als Autor trotzdem auf Ihren Web-Pages bestimmte Farben für bestimmte Zwecke einsetzen wollen, dann müssen Sie die folgenden Punkte beachten:

In HTML 2 gibt es keine Befehle für die Spezifikation von Farben, sondern nur allgemein für Hervorhebungen mit <em> und <strong>. In HTML 3 ist die Möglichkeit vorgesehen, Farben und andere graphische Effekte entweder im jedem Einzelfall mit Parametern in <body> und <font> oder wesentlich eleganter und allgemeiner mit Klassen und Style-Sheets zu vereinbaren. Diese Möglichkeiten werden freilich nicht von allen Web-Browser unterstützt. Im folgenden wird angegeben, wie Sie diese verschiedenen Möglichkeit so kombinieren sollen, daß Sie den gewünschten Effekt auf möglichst vielen Web-Browsern erreichen.

Die Farben werden in diesen Befehlen meist in der Form #rrggbb spezifiziert, wobei rr, gg und bb hexadezimale Zahlenangaben zwischen 00 (0) und FF (255) für den Rot-, Grün- und Blauanteil sind. Damit können theoretisch ca. 16 Millionen verschiedene Farben spezifiziert werden, praktisch sollten Sie sich jedoch auf die 216 Farben beschränken, die aus Kombinationen von 00, 33, 66, 99, CC und FF zusammengesetzt sind, oder überhaupt nur auf die aus 00 und FF zusammengesetzten Grundfarben. Beispiele (wobei die Sternchen je nach dem verwendeten Browser in den jeweiligen Farben erscheinen oder nicht):

#FFFFFF = weiß *****
#000000 = schwarz *****
#FF0000 = rot *****
#00FF00 = grün *****
#0000FF = blau *****
#FFFF00 = gelb *****
#FF00FF = magenta (lila) *****
#00FFFF = cyan (blaugrün) *****
#999999 = grau *****
#000066 = dunkelblau *****
#9999FF = hellblau *****
#660000 = dunkelrot *****
#FF9999 = rosa *****

In manchen Fällen können Farben auch durch bestimmte englische Wörter spezifiziert werden, z.B. white, black, red, blue, green.

Beispiel: Sie wollen erreichen, daß der Name Ihrer Firma immer in blauer Farbe und/oder fetter oder stark hervorgehobener Schrift erscheint. Als Kontrast dazu wählen Sie weiß für den Hintergrund, schwarz für den normalen Text und verschiedene Rottöne für Hypertext-Links.

In Ihrem HTML-File "enzian.html" geben Sie zu diesem Zweck die folgende Kombination von Befehlen an: 

<html>
<head>
<title>Enzian</title>
<link rev=made href="webmaster@www.enzian.com">
<link rel=stylesheet href="enzian.css" type="text/css">
</head>
<body text="#000000" bgcolor="#FFFFFF" 
      link="#990000" vlink="#660000" alink="#FF0000" >
<h1 class=enzian><font color="#0000FF">Enzian</font></h1>
<p>
Wer 
<strong class=enzian><font color="#0000FF">Enzian</font></strong> 
trinkt, wird schneller 
<strong class=enzian><font color="#0000FF">blau</font></strong>. 
Dies wurde von 
<a href="knieriem.html">namhaften Experten</a> 
getestet ...
</body>
</html>
und im Style-Sheet-File "enzian.css" die folgenden Spezifikationen: 
 BODY { color: black; background: white }
 A:link    { color: #990000; background: white }
 A:visited { color: #660000; background: white }
 A:active  { color: #FF0000; background: white }
 .enzian { color: #0000FF; background: white; font-weight: bold }
Anmerkung: Theoretisch könnten Sie diese Style-Angaben direkt im HTML-File angeben, zwischen <style type="text/css"> und </style> innerhalb von <head>, anstelle des Style-Sheet-Link, aber manche nicht normgerechte Browser würden die Style-Angaben dann als Text am Bildschirm anzeigen statt sie zu interpretieren oder zu ignorieren.

Hier noch ein Beispiel dafür, wie Sie es nicht machen sollten:

- - - Die Eingabe von 

<font color="#999999">Grau</font> 
ist in Goethes "Faust" die Theorie, doch
<font color="#00FF00">gr&uuml;n</font> 
des Lebens 
<font color="#FF9900">goldner</font> 
Baum, und was man 
<font color="#000000">schwarz</font> 
auf 
<font color="#FFFFFF">wei&szlig;</font> 
besitzt, kann man getrost nach Hause tragen.
- - - bewirkt die Ausgabe von

Grau ist in Goethes "Faust" die Theorie, doch grün des Lebens goldner Baum, und was man schwarz auf weiß besitzt, kann man getrost nach Hause tragen.

und je nachdem, welchen Web-Browser Sie verwenden, sehen Sie hier entweder überhaupt keine Hervorhebung der Farbennamen, oder ein Teil dieser Wörter hebt sich nicht gut genug von der Hintergrundfarbe ab.

- - -

Anordnung (align)

Linksbündig, rechtsbündig, zentriert

Die Anordnung und Ausrichtung von Texten und Bildern in Absätzen, Überschriften und Tabellen kann mit Align-Hinweisen in den HTML-Befehlen <p>, <h1>, <td> usw. beeinflußt werden.

Die Align-Hinweise werden von manchen Web-Browsern befolgt und von anderen ignoriert.

Beispiele:

- - - Die Eingabe von 

<p align=left>
Linksb&uuml;ndig ist die normale Ausrichtung von Abs&auml;tzen.
<p align=right>
Hoffentlich geht das
<br>
mit rechten Dingen zu.
<p align=center>
Im Reich der<br>Mitte
<p>
- - - bewirkt eine Darstellung wie

Linksbündig ist die normale Ausrichtung von Absätzen.

Hoffentlich geht das
mit rechten Dingen zu.

Im Reich der
Mitte

- - -

Ein Bereich von mehreren Absätzen kann man mit dem Befehl <div> zusammengefaßt werden. So kann man z.B. mit einer Befehlsfolge wie 

<div align=center>
<p>
erster zentrierter Absatz
<p>
zweiter zentrierter Absatz
</div>
eine Folge von mehreren zentrierten Absätze erreichen.

Vorsicht!

Zentrierte und linksbündige Layouts sollen niemals vermischt werden:

In linksbündigen Layouts sucht das Auge des Lesers entlang des linken Randes nach allen wichtigen Elementen (Überschriften, Aufzählungen, Numerierungen u.dgl.).

In zentrierten Layouts sucht der Leser in der Mitte des Bildschirms nach den wichtigen Elementen.

Wenn zentrierte und linksbündige Überschriften oder Listen abwechseln, funktioniert das rasche Auffinden der wichtigen Elemente nicht mehr, der Überblick geht verloren, und das Layout wird als unübersichtlich empfunden.

Beispiel:

Chaos

ist schlecht lesbar.

Harmonie

ist gut lesbar.

- - -

Deshalb: entweder alle Überschriften zentriert, oder (besser) alle Überschriften linksbündig.

Umgekehrt ist es aber üblich und empfehlenswert, bestimmte "fremde Elemente" wie Titelseiten, Bilder, Tabellen oder mathematische Formeln durch Zentrierung deutlich vom laufenden Text abzuheben und damit die Übersichtlichkeit und Lesbarkeit des laufenden Textes zu vergrößern.

Beispiel:

- - - Die Eingabe von 

<p align=center>
<img src="austria.gif" alt="Oesterreich">
- - - bewirkt eine Darstellung wie

Oesterreich

- - -

Nicht <center> sondern <p align=center> oder <div align=center>

Manche, aber nicht alle Web-Browser erlauben als Alternative zum Befehlspaar
<p align=center> ... <p> bzw.
<div align=center> ... </div>
auch das Befehlspaar
<center> ... </center>
Dieses Befehlspaar sollen Sie aber nicht verwenden, weil dabei die logische Struktur des Textes völlig unklar wird: Die Web-Browser, die diesen Befehl verstehen, beginnen nämlich bei <center> und </center> einen neuen Absatz, die anderen Web-Browser aber nicht, weil sie den unbekannten Befehl einfach ignorieren!

Beispiel (frei nach Otto Schenk in der "Fledermaus"):

- - - Die Eingabe von 

Ich sagte: 
<center>nichts</center>w&uuml;rdiger Herr Direktor!
- - - bewirkt auf vielen Browsern eine Darstellung wie

Ich sagte:

nichts

würdiger Herr Direktor!

- - - aber auf den anderen Browsern eine Darstellung wie

Ich sagte: nichtswürdiger Herr Direktor!

- - -

Unten, oben, neben Bildern

Bei Inline-Bildern kann mit Align-Hinweisen im Befehl <img> bzw. <object> bestimmt werden, wie der Text neben dem Bild positioniert werden soll:
align=top für oben,
align=bottom für unten,
align=middle für auf der halben Höhe.

Die Align-Hinweise werden von manchen Web-Browsern befolgt und von anderen ignoriert.

Beispiele:

- - - Die Eingabe von 

Luft . . . 
<img src="small.jpg" alt="[ Bild ]" align=top> 
 . . . Köpfe
- - - bewirkt eine Darstellung wie

Luft . . . [ Bild ] . . . Köpfe

- - - Die Eingabe von 

Wasser . . . 
<img src="small.jpg" alt="[ Bild ]" align=middle> 
 . . . Arme
- - - bewirkt eine Darstellung wie

Wasser . . . [ Bild ] . . . Arme

- - - Die Eingabe von 

Erde . . . 
<img src="small.jpg" alt="[ Bild ]" align=bottom> 
 . . . Beine
- - - bewirkt eine Darstellung wie

Erde . . . [ Bild ] . . . Beine

- - -

In HTML 3 ist auch die Möglichkeit vorgesehen, ein Bild nicht als Teil einer Textzeile darzustellen sondern so, daß der mehrzeilige Text neben dem Bild bzw. um das Bild herum läft. Zu diesem Zweck wird im <img> bzw. <object> Befehl der Parameter
align=left bzw.
align=right angegeben
und nach dem Text, der um das Bild herumlaufen soll, der Befehl
<br clear=all>
damit der nachfolgende Text mit der normalen Textbreite unter dem Bild erscheint.

Beispiel:

- - - Die Eingabe von 

<p>
<img src="wwwlogo.gif" alt="" align=left> 
World
<br>
Wide
<br>
Web
<br clear=all>
- - - bewirkt eine Darstellung wie

World
Wide
Web

- - -

Auf diese Weise kann man kann auch zwei Bilder mit einem dazwischen zentrierten Text kombinieren.

Beispiel:

- - - Die Eingabe von 

<p>
<img src="austria.gif" alt="" align=left> 
<img src="austria.gif" alt="" align=right> 
<p align=center>Urlaub in &Ouml;sterreich</p>
<br clear=all>
- - - bewirkt eine Darstellung wie

Urlaub in Österreich


- - -

Zu bedenken ist, daß nicht alle Web-Browser diese Möglichkeit unterstützen und der Text daher unter Umständen etwas anders positioniert oder erst nach den beiden Bildern erscheint.

Abstände

Horizontale Abstände

Wenn man bestimmte Abstände zwischen Wörtern oder eine bestimmte Ausrichtung von Wörtern untereinander erreichen will, empfiehlt sich die Verwendung von <pre> oder von <table>. In HTML 3 gibt es auch einen Tabulator-Befehl <tab>, der wird jedoch nicht von allen Web-Browsern unterstützt.

Bei manchen Browsern kann man größere Wortabstände auch mit der Entity &nbsp; oder mit unsichtbaren ("transparenten") Inline-Bildern erreichen, dies führt aber bei anderen Browsern zu völlig unbrauchbaren Ergebnissen und sollte deshalb nicht verwendet werden.

In manchen Fällen kann man anstelle von größeren Wortabständen auch einfache andere Mittel einsetzen wie . . . Punkte oder - - - Gedankenstriche.

Einrückungen

Viele Web-Browser stellen Definition-Listen und Blockquotes und Notes durch eingerückte Absätze dar, andere aber nicht.

Trotzdem sollte man immer, wenn ein untergeordneter Text zu einem übergeordneten Text "dazugehört", eine Definition-Liste verwenden, egal ob der Browser dafür Einrückungen oder eine andere, für den Client besser geeignete Darstellung verwendet.

Ebenso sollte man für Absätze, die sich vom normalen Text abheben sollen, immer Blockquotes oder Notes verwenden, egal ob der Browser dafür Einrückungen oder eine andere, für den Client besser geeignete Darstellung verwendet.

In anderen Fällen kann man Einrückungen mit <pre> erreichen. In HTML 3 gibt es auch einen Tabulator-Befehl <tab>, der wird jedoch nicht von allen Web-Browsern unterstützt.

Vertikale Abstände

Manche Browser erzeugen bei mehrfachen <p>- oder <br>-Befehlen zusätzliche Leerzeilen, bei anderen Browsern werden aber leere Zeilen und leere Absätze ignoriert und alle Absätze und Zeilen mit einheitlichen Abständen dargestellt.

Da auf Bildschirmen meist wesentlich weniger Zeilen sichtbar sind als auf einer Papierseite, würden größere vertikale Abstände die Übersichtlichkeit nicht (wie auf dem Papier) erhöhen sondern verringern. Für die Trennung von Text-Abschnitten sollten deshalb nicht zusätzliche Leerzeilen sondern Trennlinien oder andere Elemente wie z.B. 

<p align=center> * * * <p>
verwendet werden.

Trennlinien (horizontal rule) <hr>

Mit <hr> kann man eine waagrechte Trennlinie in den Text einfügen. Vor und nach der Linie erfolgt ein Zeilenwechsel oder neuer Absatz.

Numerierungen in Listen <ol>

Standardmäßig werden die Listenelemente in numerierten Listen mit den natürlichen Zahlen 1, 2, 3 ... numeriert. In HTML 3 kann man die Numerierung durch die folgenden Parameter in den Befehlen <ol> und <ol> beeinflussen:

<ol type=A> Numerierung mit Großbuchstaben A, B, C ...
<ol type=a> Numerierung mit Kleinbuchstaben a, b, c ...
<ol type=1> Numerierung mit Zahlen 1, 2, 3 ...
<ol type=I> Numerierung mit römischen Zahlen I, II, III, IV, V ...
<ol type=i> Numerierung mit kleinen römischen Zahlen i, ii, iii, iv, v ...

<ol start=n> Anfangswert der Numerierung

<li type=x value=n> spezieller Wert bei einem Listenelement

Diese Parameter werden von manchen Web-Browsern unterstützt und von den anderen ignoriert.

Beispiel:

- - - Die Eingabe von 

<p>
Das Jahr beginnt mit den Monaten
<ol type=1>
<li>J&auml;nner
<li>Februar
</ol>
und endet mit den Monaten
<ol type=1 start=11>
<li>November
<li>Dezember
</ol>
- - - bewirkt eine Darstellung wie

Das Jahr beginnt mit den Monaten

  1. Jänner
  2. Februar
und endet mit den Monaten
  1. November
  2. Dezember
- - -

Da diese Parameter nicht von allen Web-Browsern unterstützt werden, kann man sich nicht darauf verlassen, daß die Bezeichnungen so erscheinen, wie man sich gewünscht hat. Deshalb sind Formulierungen wie "siehe Punkt C" zu vermeiden (der Punkt könnte ja mit 3 numeriert erscheinen); für solche Verweise sollte man ohnehin besser Hypertext-Verweise und Sprungmarken verwenden. Wenn die Bezeichnung wichtig ist und sichergestellt werden soll, daß sie auf allen Web-Brwosern richtig erscheint, muß man deshalb Definitions-Listen mit expliziter Angabe der Bezeichnungen verwenden.

Beispiel:

- - - Statt 

<p>
Toto-Tips:
<ol type=1>
<li>erste Mannschaft gewinnt
<li>zweite Mannschaft gewinnt
<li type=A value=X>Spiel endet unentschieden
</ol>
- - - verwendet man besser 
<p>
Toto-Tips:
<dl compact>
<dt>1
<dd>erste Mannschaft gewinnt
<dt>2
<dd>zweite Mannschaft gewinnt
<dt>X
<dd>Spiel endet unentschieden
</dl>
- - - und erhält dann eine Darstellung wie

Toto-Tips:

1
erste Mannschaft gewinnt
2
zweite Mannschaft gewinnt
X
Spiel endet unentschieden

- - -

Frames <frameset> <frame> <noframes>

Manche, aber nicht alle Web-Browser unterstützen nicht nur einfache Web-Seiten mit dem normalen Aufbau von Head und Body, die wie gewohnt im Bildschirmfenster dargestellt werden, sondern auch die Spezifikation von komplizierteren, mehrteiligen Bildschirmstrukturen, die als "Frames" (Rahmen) bezeichnet werden.

In diesem Fall hat das HTML-File nicht den normalen Aufbau mit Head und Body sondern einen davon abweichenden Aufbau in der folgenden Form: 

<html>
<head>
     <title>Titel des Files</title>
     ...
</head>
<frameset ... >
     <frame src="xxx.html" name="xxx" >
     <frame src="yyy.html" name="yyy" >
     ...
     <noframes>
          <body>
          ... Information im normalen HTML-Format ...
          </body>
     </noframes>
</frameset>
</html>
Im <frameset>-Befehl wird mit Parametern wie z.B. rows="20%,80%" oder cols="33%,33%,33%" angegeben, wieviel Platz die darin enthaltenen Frames übereinander bzw. nebeneinander bekommen sollen. Innerhalb von <frameset> wird mittels <frame>-Befehlen und eventuellen weiteren <frameset>-Befehlen angegeben, welche Teil-Informationen wo innerhalb des aktuellen Bildschirmfensters oder in einem anderen Fenster dargestellt werden sollen.

Bei Hypertext-Sprüngen von einem Frame zu einer neuen Information in einem anderen Frame muß im <a href>-Befehl mit target= der Name des Ziel-Frame angegeben werden; bei target="_top" wird die neue Information im vollen Bildschirmfenster dargestellt.

Die Frameset- und Frame-Angaben werden von manchen Web-Browsern befolgt und von den anderen ignoriert.

Innerhalb von <noframes> muß die gleiche Information nochmals in normaler HTML-Schreibweise von <body> bis </body> angegeben werden - entweder die Summe der in den Frames enthaltenen Teilinformationen, oder zumindest eine Start-Seite oder ein Inhaltsverzeichnis mit Hypertext-Verweisen auf die restlichen Teilinformationen - für die Benutzer von Web-Browsern, die keine Frames darstellen. Hier nur eine lakonische Feststellung wie "Ihr Browser versteht keine Frame-Befehle" einzufügen, wäre nicht zielführend.

Eine typische Anwendung von Frames ist z.B. eine Zweiteilung des Bildschirmes in ein kleines Fenster mit einer Knopf-Leiste oder einem Menü für die Auswahl der Informationen und ein großes Fenster für das Lesen der ausgewählten Informationen. Für solche Effekte empfiehlt sich allerdings eher die Verwendung von Navigationshilfen mit <link>.

Generell ist von der Verwendung von Frames eher abzuraten.

Warum Sie Frames vermeiden sollten

Das World-Wide Web vedankt seinen Siegeszug vor allem seiner auch für ungeübte Benutzer leichten und einfachen Bedienbarkeit. Die meisten Benutzer kommen mit nur 4 Funktionen aus, die bei manchen Programmen - einer alten Konvention folgend - einfach den 4 Pfeiltasten zugeordnet sind:
  1. Vorblättern in der Information
    (Tiefpfeil oder Page-Down oder Mausklick im Scrollbar),
  2. Zurückblättern in der Information
    (Hochpfeil oder Page-Up oder Mausklick im Scrollbar),
  3. Sprung zu einer neuen Information
    (Rechtspfeil oder Return-Taste oder Mausklick auf ein Link),
  4. Rückkehr zur alten Information
    (Linkspfeil oder Escape-Taste oder Mausklick auf Back).
Bei der Verwendung von Frames gilt dieses einfache und für die meisten Benutzer gewohnte Bedienungsprinzip nicht mehr, sondern die Navigation wird mehrdimesional und viel komplizierter. Statt des einfachen, eindimensionalen "Vor und Zurück" zwischen alter und neuer Information braucht der Benutzer bei Frames eine verwirrende Fülle von Möglichkeiten, in den verschiedenen Teilbereichen verschieden weit vor oder zurück zu gehen. Manche Web-Browser bieten dafür verschiedene Back-Buttons oder zusätzliche Pull-Down-Menüs an, die von den Benutzern freilich erst gefunden werden müssen.

Noch ärger wird die Verwirrung, wenn innerhalb eines Frame auf eine Information gesprungen wird, die wiederum aus mehreren Frames besteht, oder wenn die Information auf mehrere Fenster verteilt ist, die teilweise gar nicht mehr sichtbar (weil durch andere Fenster verdeckt) sind.

Außerdem verbraucht jedes neue Fenster zusätzliche Ressourcen am Client-Rechner, der dadurch unbrauchbar langsam werden oder sogar "abstürzen" kann. Andererseits ist innerhalb eines Bildschirmfensters meist nicht genügend Platz, um alle Teilinformationen nebeneinander lesen zu können. Das gleiche gilt für das Ausdrucken der Informationen auf Papier.

Auf Grund dieser Schwierigkeiten ist für das Konzept und die Gestaltung von Frames durch den Autor ein erfahrener Fachmann für benutzerfreundliche Mensch-Maschinen-Interfaces notwendig, und für die Verwendung der Frames durch die Benutzer eine entsprechende Anwenderschulung, was meist nur bei einem beschränkten Benutzerkreis oder bei bestimmten firmeninternen Anwendungen in einem "Intranet" erreicht werden kann.

Navigationshilfen <link>

Der Link-Befehl dient allgemein dazu, die Zusammengehörigkeit oder Verbindung (englisch link) einer Web-Page mit anderen Web-Pages oder Personen oder Informationen anzugeben. Diese Informationen werden vom Web-Browser dann in einer geeigneten Form verwendet, z.B. innerhalb von Befehlen wie "sende eine E-Mail an den Autor", oder in eigenen Buttons oder Menüs außerhalb des normalen Textfeldes (Body) angezeigt - so ähnlich wie bei Frames. Die Link-Befehle müssen deshalb stets im Head des HTML-Files stehen.

Innerhalb des Linkbefehls ist entweder mit rel= anzugeben, zu welcher anderen Information man von der aktuellen Web-Seite springen kann, oder es mit rev= anzugeben, von welcher anderen Information oder von welcher Person die aktuelle Web-Seite stammt. Mit href= ist der URL dieser anderen Information anzugeben.

Die wichtigsten Link-Befehle sind:

<link rev=made href="mailto:user@host.domain">
für die Mail-Adresse des Autors

<link rel=stylesheet href="URL" type="...">
für ein Stylesheet-File

<link rel=... href="URL">
für verschiedene Navigataionshilfen

Mit rel= ist hier ein Schlüsselwort anzugeben, das die Art der Information angibt, auf die verwiesen wird. Die wichtigsten Möglichkeiten sind:
toc für das Inhaltsverzeichnis (table of contents)
index für einen Index (Stichwortverzeichnis)
glossary für Begriffserkärungen
help für Hilfsinformationen
author für Informationen über den Autor (Impressum oder Home-Page oder Mailto-URL)
copyright für Copyright-Hinweise
up oder top für die Haupt-Seite (Start-Seite, Titelseite) dieser Information
begin oder first für die Start-Seite oder das erste Kapitel
previous für die vorherige Web-Seite oder das vorherige Kapitel in der vom Autor vorgeschlagenen Lesereihenfolge
next für die nächste Web-Seite oder das nächste Kapitel in der vom Autor vorgeschlagenen Lesereihemfolge
end oder last für die letzte Web-Seite oder das letzte Kapitel

<link rel=print href="URL" type="...">
für ein druckfertiges File dieser Information, mit Angabe des Filetyps (z.B. PostScript), damit das entsprechende Druck- oder Viewer-Programm vom Web-Browser gestartet werden kann (Helper-Application, Plugin-Programm).

Andere Navigationshilfen wie die Rückkehr zur Start-Seite des Benutzers ("home") oder zu der vom Benutzer zuletzt gelesenen Web-Seite ("back") hängen nicht vom Autor einer Web-Seite sondern nur vom Leser ab und werden daher nur programmintern im Web-Browser gespeichert und von diesem entsprechend angezeigt. Es gibt keinen HTML-Befehl, der den Back- oder Home-Button des Browsers simuliert, und selbst wenn man eine programmtechnische Lösung dafür findet, würde man damit den History-Mechanismus des Web-Browsers und die für den Benutzer gewohnte Bedeutung der Back- und Forward- und Home-Buttons in seinem Web-Browser durcheinanderbringen und den Benutzer damit verwirren statt ihm zu helfen.

Beispiel:

Das 3. Kapitel (File hein3.html) der HTML-Einführung enthält die folgenden Link-Befehle: 

<link rev=made      href="mailto:partl@mail.boku.ac.at">
<link rel=toc       href="hein.html#inhalt">
<link rel=index     href="hein.html#index">
<link rel=glossary  href="heinwas.html">
<link rel=copyright href="hein.html#copy">
<link rel=help      href="hein.html#vorwort">
<link rel=up        href="hein.html">
<link rel=previous  href="hein2.html">
<link rel=next      href="hein4.html">
<link rel=print     href="htmleinf.ps" type="application/postscript">
- - -

Die Link-Befehle werden von einem Teil der Web-Browser berücksichtigt und von den anderen ignoriert. Manche Browser zeigen diese Links als zusätzliche Buttons oder Menü-Punkte neben den normalen Browser-Befehlen an, andere Browser zeigen sie in eigenen kleinen Fenstern oder Button-Leisten oder Pull-Down-Menüs über oder neben dem Text-Fenster an.

Gegenüber Frames oder sonstigen Hypertext-Links, die vom Autor einer jeden Web-Seite separat und daher meist verschieden definiert werden, haben die mit diesen genormten Link-Befehlen definierten Verbindungen und Navigationshilfen den großen Vorteil, daß sie vom jeweiligen Web-Browser für alle vom Benutzer gelesenen Web-Seiten immer im gleichen, für den Benutzer gewohnten Format dargestellt werden und die Navigation im World-Wide Web für den Benutzer dadurch wesentlich übersichtlicher und einfacher wird.

Vorwort . Wegweiser . Inhaltsverzeichnis . Wörterbuch . Referenzen . Copyright
© Hubert Partl, BOKU Wien