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>
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>
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.
<a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a>
Die Verweisbasis bestimmen
<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>
<!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.
<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>
<a href="news.htm#seitenanfang">Zum Seitenanfang</a>
So einfach könnt ihr also Verweise auf Anker in jeder beliebigen Datei setzen.
