7. Navigation

Hyperlinks (Referenzen, Verweise) leiten den Benutzer innerhalb eines Hypertextdokumentes weiter. Damit kann man eine Navigation in seine Dokumente einbauen.

Ein Links stellt sich als ein anklickbares Objekt, also ein Textelement oder ein grafisches Objekt, dar. Es wird mit der Adresse des anzusteuernden Dokumentes verknüpft.

Schreibweisen für Links

Link auf ein HTML-Dokument im gleichen Ordner:

<a href="zieldokument.html">Zum Dokument</a>

Link auf eine andere Webadresse (URL):

<a href="http://www.gymnossen.de">Gymnasium Nossen</a>

Link auf ein Bild oder eine beliebige andere Datei im gleichen Ordner:

<a href=“bildname.jpg">Hier ist ein Bild</a>

Link auf einen Anker (Marke):

<a href="#anfang">Seitenanfang</a>

Weitere Informationen zu Links in SELFHTML unter https://wiki.selfhtml.org/wiki/HTML/Tutorials/Links

Ziele von Links können sein:

    • andere HTML-Dokumente

    • andere Webadressen (URL)‏

    • Bilder (z. B. jpeg, gif, wmf)‏

    • Dateien zum Download oder zum Anzeigen über Plugins

    • Anker (Lesezeichen, Marken) im gleichen oder einem anderen Dokument

Links können sowohl auf interne Ziele eines Projektes verweisen (relative Links) als auch auf externe Ziele, also z.B. Websites.

Beispiel für einen einfachen Navigationsblock

Oft ist es günstig, in einem Projekt eine einheitliche Navigation zu schaffen. Eine einfache Möglichkeit ist der Einsatz von Tabellen.
Innerhalb der Tabelle (table) wird eine Zeile (tr) mit zwei Elementen (td) angelegt. Jedes Element enthält einen Link. Das sieht aber noch ziemlich einfach und unattraktiv aus.

Gut geeignet sind auch Gestaltungen mit Listen und div-Elementen: https://wiki.selfhtml.org/wiki/HTML/Tutorials/Navigation.

Diesen Navigationsblock kann man nun in jedes Dokument einfügen - dabei aber die Einbindung der externen CSS-Datei nicht vergessen.

Beispiel für einen animierten Navigationsblock

Eine Möglichkeit zur optischen Gestaltung bilden Stylesheets. Im folgenden Beispiel gibt es eine externe CSS-Datei, die selbst definierte CSS-Formate (tab1, tab2) enthält.

Über das id-Attribut im td-Tag wird dem td-Element die Formatierung des CSS-Formats zugewiesen. Darüber hinaus wird über die beiden Event-Handler onmouseover und onmouseout ein Wechsel des Formats bewirkt, wenn man mit der Maus darüber fährt (onmouseover) oder das Element verlässt (onmouseout).

Das Schlüsselwort this steht in diesem Fall für das aktuelle HTML-Element, also in Zeile 22 und 23 für den jeweils betroffenen <td>-Tag.