Homepapa-Logo Home Einleitung Grundlagen Elemente und Attribute HTML-Dokumente strukturelles Markup Site Management Hyperlinks ein erster Link relative URLs optisch formal warum eigentlich? Verzeichnisse Autorensysteme weitere Links absolute Links interne Links Anwendung FTP und Email Bilder und Grafiken ohne Fehl und Tadel Spezialfälle Tabellen Formulare Schlussbemerkungen
Schlagwortregister
Übungs-Übersicht
Übungs-Dateien

HTML und XHTML

Hyperlinks

ein erster Link

Ach was könnte ich noch alles an Theorie erzählen!

Aber fangen wir doch besser einmal mit einem praktischen Beispiel an: Stellen wir in die erste Seite unserer Beispiel-Website einen Link, den man anklicken kann, und der einen dann auf eine weitere Seite führt.

Übung 11a

Öffne nochmals die Seite index.html, an der wir bisher gearbeitet haben. (Sie sollte sich im Verzeichnis pfefferschote befinden). Im letzten Abschnitt dieser Seite findest du einen Hinweis auf die "Menages", die Liste der Niederlassungen. Das Wort "Menages" haben wir in einer der letzten Übungen etwas hervorgehoben; das machen wir hier wieder rückgängig: statt eines <em>-Elements machen wir daraus ein <a>-Element.

Nun müsste es in deinem HTML-Code etwa so aussehen:

<h2>Unsere Läden</h2>
<p>Bleiben Sie nicht nur vor Ihrem Computer sitzen!
Wenn Sie in der Nähe sind, schauen Sie doch bei uns rein!
Überall, wo gekocht und gegessen wird, gibt's <a>Menages</a>!

Du hast damit ein Anker-Element erstellt (daher der Name <a>). Alle Hyperlinks werden mit diesem Element gemacht. Vorderhand ist zwar das Anker-Element (mit dem Inhalt "Menages") da, aber ein Hyperlink ist es noch nicht, denn es fehlt noch die Angabe, wohin denn die Reise gehen soll, wenn das Element angeklickt wird.

Übung 11b

Das Ziel des Hyperlinks wird als Attribut zum Anker-Element angegeben. Der Name des Attributs ist href (für Hyperlink-REFerenz) und sein Wert ist das Ziel des Links. In unserem Fall ist das menages.html, denn zu dieser Seite wollen wir springen.

Ergänze nun den Anker-Tag entsprechend und probier ihn aus.

Zum Vergleich: jetzt sollte es so aussehen:

<h2>Unsere Läden</h2>
<p>Bleiben Sie nicht nur vor Ihrem Computer sitzen!
Wenn Sie in der Nähe sind, schauen Sie doch bei uns rein!
Überall, wo gekocht und gegessen wird, gibt's <a href="menages.html">Menages</a>!

zum Vergleich

Zur Sicherheit: denk daran, dass es drauf ankommt, ob du Klein- oder Grossbuchstaben verwendest. Im Attribut des Links muss menages.html klein geschrieben sein, weil der Name der Datei klein geschrieben ist. Der Text selber (also der Inhalt des Anker-Elements) ist davon unabhängig und kann ohne weiteres mit einem Grossbuchstaben beginnen.

Ich will dir natürlich keinesfalls zu nahe treten, aber das war wirklich noch nicht allzu schwer. Wir werden nun aber die Ziel-Adressen etwas genauer ansehen müssen, und da ist dann doch etwas mehr Gehirnschmalz gefragt.

Homepapa
März 2004
Vorheriger Abschnitt:
Hyperlinks
Nächster Abschnitt:
relative URLs