Die Definition von Verweisen erfolgt in HTML über das a-Element. Bevor ich euch dessen Verwendung zeige, noch einige allgemeine Hinweise zu den Hyperlinks. Überlegt euch unbedingt gute Verweistexte. Mit einem schnöden zurück ist normalerweise niemandem geholfen. (Wenn ein Besucher nämlich von einer externen Seite kommt, weiß er in aller Regel nicht, was mit zurück gemeint ist). Versucht, beschreibende Verweistexte zu wählen.
Hyperlinks folgen in HTML immer demselben Prinzip.
<a href="videos.html">Aktuelle Videos</a>
Dem a-Element wird das Attribut href zugewiesen. Dieses href wiederum erwartet als Wert das Verweisziel. Im vorherigen Beispiel wurde auf die Datei videos.html verwiesen. Diese befindet sich im selben Verzeichnis wie die HTML-Datei, in welcher der Hyperlink definiert wurde.
Bei der Definition der Hyperlinks gelten ansonsten die Regeln, die auch im Zusammenhang mit dem Einbinden von Grafiken vorgestellt wurden.
Ihr könnt übrigens nicht nur projektinterne Verweise definieren. Ebenso lassen sich Hyperlinks auch auf externe Dateien und Domains setzen.
<a href="http://www.psd-tutorials.de">PSD-Tutorials.de</a>
Der Text, der zwischen öffnendem <a> und schließendem </a> steht, ist letztendlich der Verweistext. Standardmäßig wird dieser Text von den Browsern unterstrichen dargestellt.
Zielfenster angeben
Klickt man einen Hyperlink an, wird das Verweisziel im aktuellen Browserfenster geöffnet. Das ist so normalerweise völlig in Ordnung. Es kann aber durchaus sein, dass man beispielsweise einen Verweis auf eine externe Domain gesetzt hat. Klickt ein Besucher diesen Link an, soll das Verweisziel in einem neuen Browserfenster bzw. Tab geöffnet werden. Vorteil dieser Variante: Eure Webseite bleibt im Hintergrund geöffnet.
Ihr solltet allerdings nicht jeden Hyperlink eurer Seite in einem externen Fenster öffnen, da Besucher davon schnell genervt sind.
Über das target-Attribut des a-Elements lässt sich das Zielfenster bestimmen, in dem das jeweilige Verweisziel geöffnet werden soll. Dabei bietet HTML zunächst einmal drei Standardwerte für target an.
• _blank – Das Verweisziel wird in einem neuen Browserfenster angezeigt.
• _self – Öffnet das Verweisziel im aktuellen Browserfenster.
• _parent – Hier kann man aus dem Frame ausbrechen. (Beachtet bitte, dass Frames in HTML5 nicht unterstützt werden. Ohnehin sollte man diese Technik nicht mehr einsetzen, da es dafür heute bessere Alternativen gibt. Wer sich näher mit den Frames befassen will, wird beispielsweise auf der Seite http://de.wikipedia.org/wiki/Frame_(HTML) fündig).
• _top – Auch das wird im Zusammenhang mit Frames verwendet. Ihr könnt damit das Verweisziel außerhalb des Framesets öffnen.
Hier ein Beispiel dafür, wie man das target-Attribut einsetzt:
<a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a>
In diesem Fall würde das Verweisziel http://www.psd-tutorials.de also in einem neuen Fenster/Tab geöffnet werden. Denselben Effekt würde man übrigens auch erzielen, wenn man anstelle des reservierten Namens _blank einen Fantasienamen wie halligalli verwendet. Wenn ihr aber target einsetzt, würde ich tatsächlich zu einem der reservierten Namen raten.
Die Verweisbasis bestimmen
Ihr könnt im head-Bereich der HTML-Datei eine sogenannte Verweisbasis definieren. Eine solche Verweisbasis sorgt dafür, dass alle Verweisziele in einem bestimmten Browserfenster angezeigt werden. Auch das ist natürlich wieder in erster Linie in Verbindung mit Frames interessant.
Praktisch ist das Ganze allerdings auch, wenn ihr beispielsweise sämtliche Links mittels _blank in einem neuen Browserfenster anzeigen lassen wollt. Stellt euch dazu eine Linkliste vor. Sollen deren Verweisziele immer ein neues Fenster öffnen, sähe das so aus:
<a href="http://www.facebook.com/psdtutorials" target="_blank">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt" target="_blank">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk" target="_blank">http://www.facebook.com/HowToNetzwerk</a>
Ihr müsstet also jeder a-Definition ein target-Attribut zuweisen.
Das ist nicht sonderlich effizient, wie ihr seht. Noch weniger effizient wird es dann übrigens, wenn ihr in ein paar Monaten entscheidet, die Verweisziele doch nicht in einem neuen Fenster öffnen zu lassen. Dann müsstet ihr die target-Attribute aller Links anpassen. Verhindern lässt sich das über besagte Zielfensterbasis. Definiert wird diese über das base-Element innerhalb von head. Dem base-Element weist man das target-Attribut mit dem gewünschten Wert zu. Hier ein Beispiel dazu, wie das aussehen könnte:
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> <base target="_blank"> </head> <body> <a href="http://www.facebook.com/psdtutorials">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk">http://www.facebook.com/HowToNetzwerk</a> </body> </html>
Das spart euch eine Menge Tipparbeit.
Anker definieren
Wie ihr Hyperlinks auf andere Dateien setzen könnt, habt ihr bereits gesehen. Ebenso lassen sich aber innerhalb einer HTML-Datei auch sogenannte Anker definieren. Anschließend könnt ihr Verweise auf eben diese Anker setzen. Praktisch ist das beispielsweise bei umfangreichen Seiten. So kann man zu Beginn des Dokuments ein Inhaltsverzeichnis definieren, über das die Besucher zu den für sie relevanten Stellen springen können, ohne durch das Browserfenster scrollen zu müssen.
Anker werden über das a-Element erzeugt. Allerdings bekommen Anker-Definitionen kein href-, sondern ein name-Attribut zugewiesen.
<a name="seitenanfang">Inhalt</a> <a name="kapitel1">Inhalt Kapitel 1</a> <p>Hier folgt ganz viel Text.</p> <a name="kapitel2">Inhalt Kapitel 2</a> <p>Hier folgt ganz viel Text.</p>
Die Ankernamen könnt ihr frei vergeben. Ich empfehle euch allerdings, diese möglichst kurz zu wählen, nur Kleinschreibung zu verwenden und auf Sonderzeichen zu verzichten.
Um auf einen Anker zu verweisen, definiert man einen normalen Hyperlink, so wie das eingangs dieses Tutorials gezeigt wurde.
<a href="#seitenanfang">Zum Seitenanfang</a>
Dem href-Attribut wird als Wert der Ankername zugewiesen. Entscheidend ist hierbei allerdings, dass dem Ankernamen ein Rautezeichen vorangestellt wird.
Ihr könnt Verweise auf Anker übrigens auch dateiübergreifend setzen. Ich gehe im folgenden Beispiel davon aus, dass es eine Datei news.htm gibt, die im selben Verzeichnis wie die eigentliche HTML-Datei liegt. Innerhalb der news.htm wurde der Anker seitenanfang definiert. Um auf diesen zu verweisen, wird hinter dem Namen der Zieldatei (news.htm) ein Rautezeichen notiert. Daran schließt sich wiederum der Ankername an.
<a href="news.htm#seitenanfang">Zum Seitenanfang</a>
So einfach könnt ihr also Verweise auf Anker in jeder beliebigen Datei setzen.
