Zurück: Tabellen
Weiter: Auszeichnung im Text

Verweise

Der große Unterschied zwischen XHTML und den meisten anderen Textauszeichnungssprachen liegt in den so genannten Hyperlinks, die die Interaktivität des Mediums World Wide Web möglich machen.

Anker: Das Element a

Ein Link auf die Startseite dieser Einführung kann wie folgt aussehen:

<a href="http://jendryschik.de/wsdev/einfuehrung/">Zur Startseite</a>

Dateien zum Download anbieten

Wenn Sie einen Link auf eine Datei setzen, wird diese Datei je nach Serverkonfiguration, Browsereinstellungen und installierten Plug-Ins entweder im Browserfenster oder einem anderen Programm dargestellt oder heruntergeladen. Bei dem Download der Offline-Version dieser Einführung als ZIP-Datei zum Beispiel handelt es sich um nichts anderes als um einen derartigen Link:

<a href="/downloads/einfuehrung.zip">Download der Einführung</a>

In die Mitte von Webseiten verlinken

Wenn Sie ein sehr umfangreiches Dokument geschrieben haben, kann es manchmal sinnvoll sein, Querverweise innerhalb des Dokumentes zu setzen. Oder wenn Sie von einem Inhaltsverzeichnis aus zu den einzelnen Abschnitten in die Mitte eines anderen Dokumentes verweisen wollen, wie ich das auch in dieser Einführung gemacht habe.

Um dies zu bewerkstelligen, setzen Sie einen Bestimmungsanker in Form einer eindeutigen ID. Als Beispiel: Sie möchten von einem Ursprungsanker aus auf das zweite Kapitel eines Dokumentes »buch.html« verweisen. Dazu vergeben Sie dem Überschriftelement des Kapitels eine ID:

<h2 id="kapitel2">Kapitel 2</h2>

Der Verweis darauf ist ein ganz normaler Link zu der Seite »buch.html«, jedoch hängen Sie den Namen des Ankers per # (Raute) an:

<a href="buch.html#kapitel2">zweites Kapitel</a>

Ältere Browser, zum Beispiel auch noch die 4er-Generation des Netscape Navigators, kommen mit Links auf IDs nicht klar. Wollen Sie also Anker erstellen, die auch in diesen Browsern noch funktionieren, müssen Sie mit dem Attribut name arbeiten. Sie notieren einen Anker dann zum Beispiel wie folgt:

<h3><a name="anker">Überschrift</a></h3>

Oder:

<h3><a name="anker"></a>Überschrift</h3>

Der Verweis auf diesen Anker entspricht dem Verweis auf IDs.

Das name-Attribut steht beim W3C zwar auf der Abschussliste, im Sinne der Kompatibilität gegenüber älteren Browsern jedoch wird für XHTML 1.0 empfohlen, sowohl name als auch id aufzuführen:

<h3><a name="anker" id="anker"></a>Überschrift</h3>

Link-Titel

Sie können auch für Links ein title-Attribut setzen. Abhängig vom User-Agent wird der Inhalt des title als Tooltipp dargestellt, vorgelesen oder dergleichen. Benutzen Sie Link-Titel als Ergänzung zum Kontext der Seite, aber beachten Sie, dass auch ohne eine Titel klar sein muss, wohin der Link führt.

<head>
<link rel="Contents" href="sitemap.html" title="Sitemap" />
  <!-- ... andere Linkelemente und Angaben im Dateikopf ... -->
</head>

Im Prinzip können Sie beliebige Linkelemente einbinden. Sie würden dann in einem Extrapunkt aufgeführt werden und können zum Beispiel auf Übersetzungen, urheberrechtliche Hinweise oder ähnlichem verweisen. Folgende Beziehungen sind jedoch für XHTML spezifiziert:

rel="Alternate"
Bezeichnet andere Versionen des Dokumentes. Diese Beziehung wird oft in Verbindung mit den Attributen lang oder media verwendet und bezeichnet dann eine Übersetzung oder eine Umsetzung für ein anderes Medium.
rel="Stylesheet"
Bindet ein externes Stylesheet in das Dokument ein. Mehr darüber werden Sie in dem Kapitel über CSS lesen.
rel="Start"
Referenziert zu dem ersten Dokument einer Folge von Dokumenten.
rel="Next"
Referenziert zu dem folgenden Dokument einer Folge von Dokumenten.
rel="Prev"
Referenziert zu dem vorhergehenden Dokument einer Folge von Dokumenten.
rel="Contents"
Verweist zu einer Inhaltsübersicht oder einer Sitemap.
rel="Index"
Verweist zu einem Dokument, das einen Index oder eine Übersicht zu dem aktuellen Dokument enthält.
rel="Glossary"
Verweist zu einer Seite mit Begriffserläuterungen für das aktuelle Dokument.
rel="Copyright"
Referenziert einen Copyrightvermerk für die aktuelle Seite.
rel="Chapter"
Verweist zum Anfang des Kapitels.
rel="Section"
Verweist zum Anfang der Sektion.
rel="Subsection"
Verweist zum Anfang der Untersektion.
rel="Appendix"
Referenziert den Anhang.
rel="Help"
Verweist zu einer Hilfeseite für das Dokument oder die gesamte Website.
rel="Bookmark"
Steht für den Bezug zu einem allgemeinen Orientierungspunkt oder Schlüsselpunkt.

Wenn Sie sich den Quelltext dieser Seite anschauen, werden Sie feststellen, dass ich eine große Anzahl dieser (und weiterer) link-Elemente in dieser Einführung verwende.

Relative und absolute Verweise

<a href="datei.zip">Download</a>

<a href="./datei.zip">Download</a>

<a href="downloads/datei.zip">Download</a>

<a href="../datei.zip">Download</a>

Das ersten beiden Beispiele verweisen auf eine Ressource »datei.zip«, die sich in dem gleichen Verzeichnis befindet wie die Ursprungsdatei. Die Zeichenkette ./ verweist also auf das aktuelle Verzeichnis und kann in diesem Fall weggelassen werden. Im zweiten Beispiel befindet sich die Datei in dem Unterverzeichnis »downloads«. Die Zeichenkette ../ im dritten Beispiel verweist eine Verzeichnisebene höher auf die dort befindliche »datei.zip«. Ein weiteres Beispiel zur Verdeutlichung:

<a href="downloads/files/datei.zip">Download</a>

Hier wird zunächst zwei Verzeichnisebenen nach oben verwiesen, dann in das Unterverzeichnis »downloads«, dort in ein weiteres Unterverzeichnis »files«, in dem sich dann die »datei.zip« befindet.

Sie können auch auf Verzeichnisse anstatt auf Dokumente verweisen. Es wird Ihnen dann entweder ein so genanntes »Verzeichnislisting« präsentiert, das Ihnen den Inhalt des Verzeichnisses anzeigt, oder es befindet sich eine Datei im Verzeichnis, die dann standardmäßig vom Browser angezeigt wird. Welche Dateien das sein können, ist abhängig von der Serverkonfiguration, generell sind das aber zumindest die Dateien »index.html« und/oder »index.htm«. Bei den beiden folgenden Verweisen würde also jeweils die gleiche Seite angezeigt werden:

<a href="wsdev/einfuehrung/index.html">Eine Einführung in XHTML, CSS und Webdesign</a>

<a href="wsdev/einfuehrung/">Eine Einführung in XHTML, CSS und Webdesign</a>

Eine weitere Möglichkeit für relative Verweise ist der Verweis relativ zum Dokument Root, also zum Hauptverzeichnis Ihrer Website. Ein solcher Verweis hat immer einen / am Anfang des Verweisziels. Dazu zwei Beispiele:

<a href="/downloads/datei.zip">Download</a>

<a href="/">Download</a>

Das erste Beispiel verweist ausgehend vom Document Root auf eine »datei.zip« in dem Unterverzeichnis »downloads«. Das zweite Beispiel verweist direkt zum Document Root. Es würde also entweder ein Verzeichnislisting oder die »index.html« angezeigt werden.

Verweise auf Verzeichnisse und Verweise relativ zum Document Root funktionieren nur in einer Webserver-Umgebung (oder direkt im Stammverzeichnis eines Laufwerkes) und eignen sich für Anfänger daher nur bedingt. Das Installieren und Einrichten zum Beispiel eines Apache-Webservers ist keineswegs schwierig, aber immerhin eine weitere Hürde für einen Anfänger.

Ein Link zu der Startseite dieser Einführung sieht wie folgt aus:

<a href="http://jendryschik.de/wsdev/einfuehrung/">Eine Einführung in XHTML, CSS und Webdesign</a>

Wollen Sie auf externe Dateien verweisen, also Dateien, die nicht Bestandteil Ihrer Webseite sind, müssen sie absolute Pfadangaben benutzen. Wenn Sie innerhalb Ihrer Webseite verlinken, sollten Sie relative Pfadangaben benutzen. Sie werden vor allem dann feststellen, dass dies sinnvoll ist, wenn Sie ihre komplette Webseite auf eine andere Domain verschieben; haben Sie vorher mit absoluten Angaben operiert, müssen Sie dann alle Links korrigieren. Man sagt auch, relative Pfadangaben würden schneller ausgewertet als absolute. Das kann ich allerdings weder bestätigen noch widerlegen.

Zurück: Tabellen
Weiter: Auszeichnung im Text
Zum Seitenanfang