Verweise/Hyperlinks

Links werden benutzt um mehrere HTML Seiten miteinander zu verknüpfen und von einer auf eine andere Seite zu verweisen. Es gibt mehrere Arten von Links:

Die Arten von Links

Absolute Pfadangabe

Beispiel:

<a href="http://www.example.org/example/folder/file.htm">Example.org</a>

href="http://www.example.org/example/folder/file.htm" gibt dem Link seinen Pfad. Dieser ist hier absolut angegeben. Das heißt, dass der Link von jeder möglichen Position - egal ob von einer lokalen HTML-Datei oder im Internet - erreichbar ist (sofern er im Internet zu finden ist).

Relative Pfadangabe

Beispiel:

<a href="index.htm">Homeseite</a>

href="index.htm" verlinkt auf die Datei index.htm, die sich im gleichen Verzeichnis befindet, wie die gerade angeschaute Datei. Der Browser sucht also im Verzeichnis der Datei, die den Link enthält, ob es eine Datei index.htm gibt. Wenn ja wird sie aufgerufen, wenn nicht gibt der Webserver einen Fehler an den Browser weiter.

Möglich ist auch folgendes:

<a href="../index.htm">Homeseite</a>

Das ../ bewirkt, dass der Browser nicht im Verzeichnis der jetzigen Datei nach index.htm sucht, sondern im darüber liegenden Ordner. Verzeichnisse werden in HTML mit dem Slash getrennt: Verzeichnis/datei.html. Im Web ist die Notation von Unix (Linux/Mac)-Systemen üblich und nicht die in Windows übliche Schreibweise mit dem Backslash ('\').

<a href="bilder/beispiel/bilder.htm">Bilder</a>

Der Browser ruft nun die Datei bilder.htm im Verzeichnis bilder/beispiel relativ zum Pfad der den Link beinhaltenden Datei auf.

Seiteninterne Links

Diese Art Links werden Anker genannt (daher heißt das Tag a). Sie helfen sich auf der HTML-Seite zu recht zu finden.

Beispiel:

<a href="#top">Nach Oben</a>

Anzeigebeispiel: Nach Oben

Man bemerke das # am Beginn. Es sagt dem Browser, dass die Pfadangabe vorbei ist, und er nun zu einer bestimmten Stelle innerhalb der HTML Datei springen soll. #top lässt den Browser dabei nach oben springen. Ein solcher Link ergibt vor allem am Seitenende Sinn.

Will man zum Beispiel ein Inhaltsverzeichnis am Anfang der Seite haben, kann man natürlich auch selbst Anker definieren und dann zu diesen verlinken:

<h1><a name="ankername">Überschrift</a></h1>

Nun legt man einen Link an, der zu ankername springen soll:

<a href="#ankername">Zur Überschrift</a>

Diese Anker können auch in für Links zu anderen Dateien oder anderen Projekten verwendet werden:

<a href="example/datei.htm#ankername">Zur Überschrift</a>

Zielfenster/Zieltab für Links festlegen

Will man, dass ein Link nicht im aktuellen Fenster bzw. im aktuellen Tab geöffnet wird, so kann man mithilfe von target ein Ziel angeben:

<a href="example.htm" target="_blank">Example in neuem Tab</a>

Anzeigebeispiel: Example in neuem Tab

Die meisten modernen Browser öffnen den Link in einem neuen Tab. Es gibt folgende targets, die eine besondere Bedeutung haben:

target Wirkung
_blank Link in neuem Fenster öffnen, heute meist nur in neuem Tab
_self Link in diesem Fenster/Tab öffnen
_parent Bei verschachtelten Framesets das nächst-obere sprengen
_top Bei verschachtelten Framesets alle Frames sprengen

target kann ebenfalls dazu benutzt werden um eine HTML-Datei in einem bestimmten Frame anzeigen zu lassen. Dazu muss der Name des Frames als Wert von target angegeben werden.

Das nächste Kapitel befasst sich mit der Einbindung von Bilder.