Wichtig für die Strukturierung eines Texts ist es auch, wie er in Verbindung zu anderen Texten steht. Auf Websites wird das mit Links erreicht. Auf den meisten Webseiten findet man Links zu anderen Seiten. Dort können dann ergänzende Informationen zu finden sein oder ein anderes Thema, zu dem man verwiesen wird. Links können auch auf eine andere Stelle im selben Dokument verweisen.

In HTML gibt es für Links den <a>-Tag. Um einen Link zu definieren, braucht man einen Text, der dem Benutzer als Link angezeigt wird, und einen Verweis für den Browser, welche Seite er beim Klick auf den Link aufrufen soll. Der Linktext wird einfach zwischen Start- und Endtag des <a>-Elements geschrieben. Die Adresse der aufzurufenden Seite wird im href-Attribut im Starttag angegeben.

Links zu anderen HTML-Seiten

Ein Beispiel für einen Link innerhalb eines Texts sieht dann so aus:

Besuche doch mal die Seite <a href="http://www.example.com">example.com</a>.

Die Adresse im href-Attribut muss keine Internetadresse sein. Hier kann man auch eine Adresse auf dem lokalen Computer angeben. Folgender Link verweist auf die Datei "ziel.html", die aber im selben Verzeichnis liegen muss, wie das HTML-Dokument, in dem der Link gesetzt wird.

<a href="ziel.html">Das Ziel</a>

Wenn auf eine Datei in einem anderen Verzeichnis verwiesen werden soll, so muss vor dem Dateinamen noch der Pfad zu dem Verzeichnis angegeben werden. Das kann z.B. so aussehen, wenn die Datei "ziel.html" im Unterverzeichnis "projektarbeit" zu finden ist:

<a href="projektarbeit/ziel.html">Das Ziel</a>
Manchmal muss man in der Ordnerhierarchie zunächst eine Ebene nach oben, bevor man das Ziel des Links ansteuern kann. Dafür gibt es die Pfadangabe "../". Angenommen wir haben einen Ordner "projekt", der die Ordner "projektarbeit" und "praesentation" enthält. Nun wollen wir von einer Datei aus, die im Ordner "praesentation" liegt, wieder die Datei "ziel.html" im Ordner "projektarbeit" verlinken. Dann funktioniert das so:
<a href="../projektarbeit/ziel.html">Das Ziel</a>

Mit "../" wird von dem Ordner "praesentation" (hier befindet sich ja die Datei mit dem Link) in den Ordner "projekt" navigiert. "projektarbeit/" bringt uns dann in den Ordner "projektarbeit", wo nun nach der Datei "ziel.html" gesucht werden kann.

Links zu Stellen innerhalb des selben Dokuments

Es gibt Anwendungsfälle, in denen man gar nicht die Seite wechseln möchte, sondern nur innerhalb einer Seite auf eine bestimmte Stelle verweisen (z.B. findet man das immer in der Wikipedia, wenn man oben im Inhaltsverzeichnis eines Artikels das gewünschte Thema anklickt). Möchte man auf ein Element im selben Dokument verweisen, so muss für dieses Element das id-Attribut gesetzt werden. Gibt man mehreren HTML-Elementen ein id-Attribut, ist darauf zu achten, dass sie sich alle unterscheiden, denn es dürfen keine zwei Elemente dieselbe ID haben (sonst wäre sie ja nicht mehr eindeutig).

In folgendem Beispiel "springt" der Webbrowser zum untersten Absatz, wenn auf den Link oben geklickt wird.

<body>
<h1>Meine Lieblings-HausTiere</h1>
<p>Geh direkt nach unten zum Absatz über die
<a href="#nacktmull-futter">Ernährung des Nacktmulls</a>.</p>
	<h2>Amphibien</h2>
	<p>Das ist jetzt ein Unterabschnitt. Dabei bleibt es aber nicht,
	denn wir führen für jedes Tier einen Unterunterabschnitt ein:</p>
		<h3>Frosch</h3>
		<p>Nicht schön, aber quakt laut und frisst Mücken...</p>
		<h3>Axolotl</h3>
		<p>Verblüffend! Die Regenerationsfähigkeit des Axolotl...</p>
	<h2>Säugetiere</h2>
	<p>Jetzt befinden wir uns wieder auf Ebene 2 und behandeln
	eine andere Klasse von Tieren.</p>
		<h3>Nacktmull</h3>
		<p>Der kennt keinen Schmerz...</p>
		<p id="nacktmull-futter">Was der Nacktmull am liebsten frisst, sind...</p>
</body>

Im href-Attribut muss dann nach dem # genau der Wert des id-Attributs des Zielelements stehen.

Wahl der Linktexte

Beim Setzen von Links sollte darauf geachtet werden, dass die Linktexte etwas über das Dokument, welches aufgerufen werden soll, aussagen. Schlecht geeignet sind daher Links wie der folgende:

Weitere Infos gibt es <a href="http://www.example.com">hier</a>.

Denn "hier" sagt weder den menschlichen Besuchern der Website noch den Suchmaschinen, worauf sie sich beim Folgen des Links gefasst machen dürfen.

Aufgabe

Erstelle ein HTML-Dokument mit ein paar lokalen Links zu den vorhin erstellten HTML-Dokumenten und ein paar Internetlinks. Kopiere außerdem das obige Beispiel zu seiteninternen Links in ein HTML-Dokument und lasse es dir vom Webbrowser anzeigen.