HTML und XHTML

Hyperlinks

Anwendung

Machen wir gleich noch eine weitere Anwendung von internen Links. Bis jetzt waren Ausgangs- und Zielpunkt auf der selben Seite, diesmal sollen sie auf verschiedenen Seiten stehen. Der Unterschied für uns ist nicht besonders gross: diesmal wird der Wert des href-Attributs einen relativen Pfad, das #-Zeichen und den Namen des Ziel-Ankers enthalten. Den relativen Pfad kennen wir bereits, haben ihn aber im Zusammenhang mit internen Links noch nie verwendet.

Übung 19

Erstelle im Dokument index.html des Verzeichnisses produkte zwei weitere Zielanker für die Produkte Cardamom und Thai Masaman Curry Paste.

Das war nicht viel Neues, und wenn du's geschafft hast, sieht es ungefähr so aus:

<p><a name="kardamom"></a>Kardamom, ganze Kapseln 30g $4.95</p>
und
<p><a name="masaman"></a>Masaman Curry Paste, Mack's 250g $5.95</p>

Damit haben wir wieder zwei Anker erstellt, die wir mit Hilfe ihrer Namen direkt aufsuchen können.

Übung 20

Es soll nun zwei Links geben von der Seite mit dem Krabben-Rezept zu diesen beiden Ankern.

Öffne also das Rezept (du findest es in rezepte/krabben.html), finde dort drin die Stellen, an denen Kardamom und Masaman Curry Paste erwähnt werden (bei den Zutaten), und erstelle die beiden Links.

Das ist gleichzeitig auch eine Repetition des Themas relative Links.

Hat's geklappt? Die wesentlichen Dinge, auf die du achten musstest, waren

den relativen Pfad richtig hinzukriegen
das #-Zeichen zu verwenden
nach dem #-Zeichen genau den selben Namen zu verwenden, den du auf der Dielseite definiert hast.

Und so sollte es nun im Resultat aussehen:


<p>24 mittelkleine grüne Königskrabben</p>
<p>8 <a href="../produkte/index.html#kardamom">Kardamomkapseln</a>, leicht zerdrückt</p>
<p>1 TL Salz</p>
<p>8 dl Kokosmilch</p>
<p>4 dl Wasser</p>
<p>200 g <a href="../produkte/index.html#masaman">Thai Masaman Curry Paste</a></p>
<p>10 kleine neue Kartoffeln, geschält</p>

Wenn wir nun also das Rezept ansehen, sollte es zwei Links enthalten, die uns an die jeweilige Stelle in der Produkteliste führen.

Homepapa
März 2004

Vorheriger Abschnitt:
interne Links

Nächster Abschnitt:
FTP und Email