Mit Hyperlinks werden die Informationen auf Webseiten verbunden. Zudem wird der Nutzer in den Webseiten geführt. Daher sollte genau überlegt werden, was der Nutzer jeweils betrachten kann. Es gibt zwei verschiedene Grundtypen der Verlinkung.
Parallele Verlinkung
Die parallele Verlinkung hat den Vorteil, dass die nachfolgenden Ebene von Webseiten direkt ausgewählt werden können.
Webseite parallel verlinkt
Der Hyperlink führt von der aktuellen Webseite zu weiteren Seiten. Es gibt die Möglichkeit den Hyperlink nur in eine Richtung zuzulassen oder auch einen Rücksprung zu erlauben. Der Rücksprung wird durch einen Hyperlink in der Zielseite realisiert.
Serielle Verlinkung
Bei der seriellen Verlinkung kann der Nutzer nur in eine Richtung wechseln oder auch zurück. Wenn der Webseitenwechsel nur in eine Richtung möglich ist, dann spricht man von einem Tunnel. Der Nutzer muss bis zum Ende gehen, damit weitere Webseiten angesehen werden können.
Webseite seriell verlinkt
In der Praxis werden beide beschriebenen Typen verwendet.
Es gibt zwei verschiedene Möglichkeiten den eine Datei im Dateisystem der Festplatte zu finden.
Die absolute Angabe des Pfads
Dies geschieht zum Beispiel bei Microsoft Windows Dateisystemen ausgehend von dem Wurzelverzeichnis c:\.
Beispiel Dateisystem
Wird von der Datei „kontakt.html“ die Grafikdatei „foto2.jpg“ aufgerufen, dann wird folgender Pfad angegeben: „C:\Webseiten\images\foto2.jpg“. Wird nun die Datei foto2 geladen, funktioniert dies auf dem lokalen Computer ohne Fehler.
Die relative Angabe des Pfads
Sobald aber die Dateien aus dem Ordner „Webseiten“ und die darin enthaltenen Verzeichnisse auf einen Webserver im Internet geladen werden, liegen die Daten an einem anderen Platz. Dadurch funktionieren Hyperlinks nicht mehr und Grafikdateien werden nicht angezeigt! Daher muss in Webseiten ein relativer Pfad angegeben werden.
Hier wird von dem Verzeichnis ausgegangen, in dem sich die Webseite „kontakt.html“ befindet. Nun sehen wir in der Grafik mit dem Beispiel des Dateisystems, dass sich die Bilddatei „foto2.jpg“ in dem Subverzeichnis „images“ befindet. Somit wird der Pfad „images/foto2.jpg“ angegeben.
Damit Hyperlinks auf dem Webserver funktionieren, muss bei Bildern, Links und Dateien der relative Pfad angegeben werden.
Zum Verlinken wird der Tag <a href=“ziel.htm“>Text</a> verwendet. Wir verwenden unsere Vorlage und verlinken die Menüpunkte.
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Design Vorlage</title>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0">
<table border="0" cellspacing="0" cellpadding="4" width="100%">
<tr>
<td colspan="3" style="background-image:url(images/hawaii_titel.jpg)"
><div align="center"><h1>Hawaii</h1></div>
<br />
</td><!-- 3 Zellen verbinden -->
</tr>
<tr>
<td width="200" style="background-image:url(images/strand.jpg)" valign="top">
<a href="index.html">Startseite</a>
<br />
<a href="sonnenuntergang.html">Sonnenuntergang</a>
<br />
<a href="straende.html">Strände</a>
<br />
<a href="vulkan.html">Vulkan</a>
<br />
<a href="kontakt.html">Kontakt</a>
<br />
</td>
<td width="*" valign="top">Text</td>
<td width="3%"> </td>
</tr>
</table>
</body>
</html>
Mit wenigen Zeilen Quellcode ist die Vorlage inklusive der Hyperlinks fertiggestellt.
Hyperlinks innerhalb einer Webseite
Zusätzlich gibt es die Möglichkeit mit Hilfe von Ankern innerhalb einer Webseite zu springen. Dazu muss im ersten Schritt ein Anker <a name=“Name des Ankers“></a> gesetzt werden.
Im zweiten Schritt wird der Hyperlink <a href=“#Name des Ankers“>Text</a> eingebunden.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Langer Text mit Anker</title>
</head>
<body>
<h1>
<a name="Textbeginn">Hyperlinks mit Anker</a><!-- Anker -->
</h1>
<div align="center">
<a href="#Textende">Textende</a><!-- Hyperlink zum Anker -->
-
<a href="#Textbeginn">Textbeginn</a><!-- Hyperlink zum Anker -->
</div>
<!-- Hyperlink zum Anker -->
<br /><br />
Lorem ipsum dolor sit amet consectetuer Curabitur commodo est wisi volutpat.
Convallis quis Quisque lacus tincidunt tincidunt nec elit laoreet aliquam
metus. Dignissim Nullam Nulla pellentesque Nam wisi pretium quis tempus
…
. Eget sed Sed Sed leo vel Aliquam.
<a name="Textende"></a>
<br /><br />
<div align="center">
<a href="#Textende">Textende</a><!-- Hyperlink zum Anker -->
-
<a href="#Textbeginn">Textbeginn</a><!-- Hyperlink zum Anker -->
</div>
</body>
</html>
Hyperlink zu externen Webseiten
Manchmal sollen externe Webseiten verlinkt werden. Dazu wird der Tag <a href=“http://www.html-lernen.de“>Text</a> verwendet. Meist ist es sinnvoll das verlinkte Ziel in einem weiteren Fenster zu öffnen. Dies wird durch das Attribut <a href=“http://www.html-lernen.de“ target=“_blank“>Text</a> ermöglicht.
Hyperlinks zu Email
Praktisch ist der Aufruf eines Email Fensters. Dort ist die Email Adresse eingetragen. Dazu verwenden wir den Tag
<a href=“mailto:email@adresse.de“>Text</a>
Mit subject kann ein Betreff angegeben werden
<a href=“mailto:email@adresse.de?subject=Ein%20Betreff“>Text</a>
Hyperlinks zu Dateien
Mit einem Link können beliebige Dateien gestartet werden. Der dazu notwendige Tag sieht so aus:
<a href=“pfad/dateiname.exe“>Text</a>
zur Übersicht
