HTML und XHTML

Hyperlinks

interne Links

In der Einleitung zum Thema Hyperlinks hab ich mal kurz erwähnt, dass es nicht nur möglich ist, zu einem Dokument inner- oder ausserhalb der eigenen Site zu linken, sondern sogar zu einer ganz bestimmten Stelle in diesem Dokument. Der Browser würde in einem solchen Fall die Seite darstellen und gleich zur gewünschten Stelle scrollen.

Allerdings muss diese Stelle vorher als mögliches Ziel bezeichnet werden, und so wirst du in der Praxis diese Technik vor allem für deine eigenen Seiten einsetzen.

Als ersten Schritt müssen wir diesen Ziel-Anker definieren, und das geschieht mit einem Anker-Element (<a>). Das einzig Neue an diesem Element ist, dass es statt eines href- nun ein name-Attribut hat. Dieser Name wird dann im Link verwendet um das Ziel anzugeben. Es empfiehlt sich einen etwas sinnvollen Namen zu wählen. Ausserdem kann ein Name auf einer Seite nur ein einziges Mal vergeben werden.

Ziel:

<a name="thon"></a>Thon

Link:

<a href="../fisch.html#thon">mein Lieblingsfisch</a>

Abbildung 9: Link zu einer Stelle innerhalb eines Dokuments

Übrigens werden die scharfen Beobachter bemerkt haben, dass das <a>-Element im gezeigten Beispiel leer ist. Das ist in Ordnung, muss aber nicht sein. Ein <a>-Element zur Bezeichnung eines internen Ziels kann ohne weiteres auch Text und sogar ein href-Attribut haben. Wesentlich ist, dass durch dieses Element eine bestimmte Stelle im Dokument einen Namen erhält.

Übung 17

Die Seite index.html im Verzeichnis produkte unserer Site enthält unter anderem eine lange, alphabetisch sortierte Liste von Produkten, die zum Verkauf angeboten werden. Diese Liste ist in die drei Abschnitte "A-F", "G-R" und "S-Z" gegliedert, was du in einem <h2>-Element ziemlich zu Beginn der Datei siehst. Zu diesen drei Abschnitten möchten wir linken, und das bedeutet, dass wir Ziel-Anker installieren müssen. Suche also die drei Abschnitte (du wirst finden, dass es <h3>-Elemente sind) und gib ihnen mit Hilfe des <a>-Elements sprechende Namen.

Zum Vergleich: Deine Anker müssten irgendwie so aussehen:

<p>Das teuflische Südafrikanische Gewürz aus Chilli</p>

<h3><a name="s-z"></a>S-Z</h3>

<p>Saffran, Iran, ganz 1g $6.95</p>

Beachte, dass das <a>-Element zwar leer aber nichtsdestotrotz geschlossen ist. Und dass es sich innerhalb des <h3>-Elements befindet und nicht drum herum, weil <a> ein inline- und <h3> ein Block-Element ist und inline-Elemente keine Block-Elemente enthalten können (umgekehrt aber schon).

Übrigens: Der Link auf Abbildung 9 ist so ein interner Link Die Abbildung 9 weiter oben zeigt nicht nur, wie der Name definiert wird, sondern auch, wie der zugehörige Link aussieht: er enthält den Pfad (relativ oder absolut) zur gewünschten Seite, und dann - nach einem #-Zeichen - den Namen der Stelle innerhalb des Dokumentes. In unserem Fall sind Ausgangs- und Zielpunkt des Links beide auf der selben Seite, sodass der Pfad weggelassen werden und die Zielangabe gleich mit dem # beginnen kann.

Übung 18

Setze nun oben auf der Seite index.html im Verzeichnis produktedie Links zu den drei Abschnitten der Liste ein.

Hier siehst du meine Lösung zum Vergleich:

<h2><a href="#a-f">A-F</a> |
<a href="#g-r">G-R</a> |
<a href="#s-z">S-Z</a></h2>

Und wie sich deine Seite verhalten sollte, siehst du hier:

Homepapa
März 2004

Vorheriger Abschnitt:
absolute Links

Nächster Abschnitt:
Anwendung