Dies ist eine alte Version des Dokuments!
LU01b - Verweise und Anker
Einleitung
Einen Link können Sie in HTML mit dem <a>-Element (a = anchor, deutsch: Anker) erstellen. Der Linktext (oder Verweistext) zwischen den <a>-Tags wird aktiviert, wenn das href-Attribut einen validen Wert hat.
Beispiel
Ein Linktext wird gewöhnlich vom Webbrowser (meistens in Blau) unterstrichen. Dies können Sie aber (wie immer) mit CSS jederzeit ändern.
<a href="http://www.bzz.ch">Bildungszentrum Zürichsee</a>
Links zu anderen HTML-Dokumenten der eigenen Webseite einfügen
Die Verweise verbinden die losen Sammlungen von HTML-Dokumenten zu einer zusammenhängenden Webseite. Daraus lässt sich die sog. Navigation der Webseite erstellen. Bei einem Link zu einer anderen Seite derselben Webseite genügt es, die relative (statt der absoluten) URL anzugeben. Dazu später mehr.
Beispiel
Folgende in der Abbildung abgedruckte Verzeichnisstruktur sei als Beispiel gegeben.
Die Verlinkung für die Startseite, hier index.html, zu den anderen Seiten links.html, about.html und impressum.html sieht demnach in der Praxis wie folgt aus:
<!doctype html> <html lang="de"> <head> <title>Startseite - Blog</title> <meta charset="UTF-8"> </head> <body> <nav> Blog | <a href="seiten/links.html">Links</a> | <a href="seiten/about.html">Über mich</a> | <a href="seiten/impressum.html">Impressum</a> </nav> <h1>Mein Blog</h1> <p>Neueste Berichte zu HTML</p> </body> </html>
—
Natürlich müssen Sie auch die Links zu den anderen Seiten, also links.html, about.html und impressum.html anpassen. Dabei sollen die relativen URL angegeben werden. Bezogen auf die Seite links.html, würden die Angaben für das Attribut href wie folgt aussehen:
<!doctype html> <html lang="de"> <head> <title>Linksammlung</title> <meta charset="UTF-8"> </head> <body> <nav> <a href="../index.html">Blog</a> | Links | <a href="about.html">Über mich</a> | <a href="impressum.html">Impressum</a> </nav> <h1>Linksammlung</h1> <p>Interessante Linksammlung zu HTML-Themen</p> </body> </html>