LU01b - Verweise und Anker

Dies ist eine alte Version des Dokuments!

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.

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>

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.

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>

Über den Unterordner seiten navigieren Sie mit ../ (hier ../index.html) zum übergeordneten Ordner, wo sich index.html befindet. Die anderen beiden Dateien about.html, impressum.html befinden sich im selben Ordner wie links.html, daher reicht es aus, nur den Dateinamen anzugeben. Ähnlich müssen Sie auch die Dateien about.html und impressum.html verlinken.

Links zu anderen Webseiten werden genauso notiert wie die Links zu den Seiten derselben Webseite. Der Unterschied liegt in der absolute URL (also die Angabe der kompletten Adresse) im Attribut href.

<nav>
  <ul>
    <li><a href="http://www.w3.org/html/wg/drafts/html/master/">HTML 5.1 Nightly</a></li>
    <li><a href="http://www.w3.org/">W3C</a></li>
    <li><a href="http://www.whatwg.org/">WHATWG</a></li>
  </ul>
</nav>

Mit dem HTML-Attribut target=„_blank“ wird der Verweis in einem neuen Fenster oder Tab geöffnet wird. Ziel der Verwendung von target=„_blank“ ist den Besucher der Seite nicht zu verlieren, sondern die Seite offen zu lassen, damit er dort zurückkehrt, wenn er die Seite im neu geöffneten Fenster oder Tab gelesen hat.

<p>Wie bereits berichtet, hat das    
    <a target="_blank" href="http://www.w3.org/">W3C</a> einen neuen Entwurf für HTML vorgelegt ...
</p>

Würden Sie in diesem Beispiel den Linktext W3C aktivieren, würde die Zieladresse (hier: http://www.w3.org) hier tatsächlich in einem neuen Fenster oder Tab geöffnet und geladen werden. Ziel der Verwendung von target=„_blank“ ist natürlich vorrangig, den

E-Mail-Verweise beginnen bei href=„mailto:EMAIL-ADRESSE“. Damit wird die E‐Mail-Anwendung mit einer bestimmten E-Mail-Adresse geöffnet.