SELFHTML: HTML/XHTML / Verweise (Links) / Verweise definieren und gestalten
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Wie Sie in HTML Verweise definieren und optisch gestalten können, und was Sie generell dabei beachten sollten.
Keywords: SELFHTML, HTML, XHTML, Verweise, Links, Hyperlinks, Verweistext, Verweisziel, nicht unterstrichene Links, a, href, target
Date: 2005-10-31T12:25:34+01:00

| # Verweise definieren und gestalten
| Allgemeines zu Verweisen Beispiele für Verweise Verweise optisch gestalten mit CSS Zielfenster für Verweise bestimmen

## Allgemeines zu Verweisen

Verweise sind ein entscheidender Bestandteil jedes Hypertext-Projekts und der "intelligente Mehrwert" des World Wide Web.

Mit Hilfe von Verweisen strukturieren Sie Ihr Projekt. Wenn Sie beispielsweise eine HTML-Datei mit einer Projekt-Einstiegsseite und verschiedene HTML-Dateien für Themenseiten planen, brauchen Sie in der Einstiegsseite Verweise zu allen Themenseiten und in jeder Themenseite einen Rücksprungverweis zur Einstiegsseite. Erst dadurch wird aus der losen Dateisammlung ein zusammenhängendes Web-Projekt, eine Homepage. In komplexeren Projekten wie dem vorliegenden Dokument finden Sie auch Verweise mit bestimmter Bedeutung - Verweise zu übergeordneten oder untergeordneten Ebenen, Verweise zum Blättern, Verweise zum Wechseln zwischen Beschreibungen und Anzeigebeispielen, Querverweise, Verweise zu anderen Web-Adressen usw.

Alle Verweise in HTML haben den gleichen Aufbau. Das vereinfacht die Syntax, hat aber auch Nachteile: es gibt nämlich keine Verweise für bestimmte Aufgaben. Mittlerweile gibt es zwar auch Attribute für solche Zwecke, aber in der Praxis ist es Ihnen überlassen, wie Sie zum Beispiel Verweise so gestalten, dass dem Anwender klar wird, ob es sich um einen Rückverweis zur Einstiegsseite, um einen Querverweis zu einem assoziativ verwandten Thema, oder etwa um einen Verweis zu einer ganz anderen Web-Adresse handelt.

Wichtig ist in allen Fällen ein aussagekräftiger Verweistext.
Schlecht ist: zurück (wohin eigentlich?)
Besser ist: zurück zur Einstiegsseite (ah ja!)

Verweise lenken die Aufmerksamkeit des Anwenders sofort auf sich. Wenn Sie Verweise mitten im Text notieren, sollten Sie als Verweistext inhaltlich beschreibende Wörter anbieten, keine Wörter ohne Inhalt
Schlecht ist: Für weitere Information klicken Sie hier (worum geht es "hier" eigentlich?)
Gut ist: Weitere Information können Sie ebenfalls aufrufen (ah ja!)

Bei komplexeren Projekten sollten Sie sich überlegen, wie Sie dem Anwender die Vielzahl der Verweise mit unterschiedlicher Bedeutung intuitiv zugänglich machen. Ein sinnvoller Weg ist, den Verweisen kleine Symbolgrafiken voranzustellen, so wie es im vorliegenden Dokument auch der Fall ist (siehe auch Grafiken einbinden). Durch aussagekräftige Symbole können Sie dem Anwender sofort signalisieren, um welche Art von Verweis es sich handelt. Die Symbolgrafiken sollten jedoch in der Höhe nicht größer sein als normaler Fließtext - normalerweise etwa 10-12 Pixel. Auch Grafiken als Verweise tragen häufig zu einer besseren Verweiskennzeichnung bei.

Zu wenige Verweise erschweren das Navigieren in einem Projekt und zeugen von wenig Kreativität beim Anbieter des Projekts. Zu viele Verweise verwirren den Anwender und können ein "Lost-in-Hyperspace-Gefühl" erzeugen - auch das wirft kein gutes Licht auf den Projektanbieter. Setzen Sie deshalb alle Verweise, die zum bequemen Navigieren nötig sind, und denken Sie auch an Querverweise sowie an sinnvolle Verweise zu anderen WWW-Adressen. Übertreiben Sie die Querverweistechnik aber nicht.

## Beispiele für Verweise

Alle Verweise in HTML haben einen einheitlichen Aufbau, egal ob sie zu einem Verweisziel in der gleichen Datei, zu einer anderen Datei im eigenen Projekt, zu einer beliebigen WWW-Adresse oder zu einer beliebigen Datei eines anderen Dateityps im Internet oder lokal auf dem eigenen Rechner führen.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Beispiele für Verweise</title>
    </head>
    <body>

    <h1>Eine kleine Verweissammlung</h1>

    <p>
      <a href="http://www.tagesschau.de/">ARD Tagesschau</a> Nachrichten<br>
      <a href="http://www.heise.de/newsticker/">Heise Newsticker</a> Computer-Nachrichten<br>
      <a href="http://de.news.yahoo.com/">Yahoo Nachrichtenticker</a> Nachrichten<br>
      <a href="http://www.oneworld.net/section/current">OneWorld News</a> Nachrichten (en)
    </p>

    <p>
      <a href="/">Wohin der wohl f&uuml;hren mag?</a><br>
      <a href="./">Und der hier?</a>
    </p>

    </body>
    </html>

### Erläuterung:

Für Verweise in HTML gibt es das `a`-Element (a = anchor = Anker). Damit jedoch ein Verweis aus diesem Element wird, ist das Attribut `href` erforderlich (href = hyper reference = Hyper(text)-Referenz). Als Wert an das `href`-Attribut weisen Sie das gewünschte Verweisziel zu. Als Inhalt des `a`-Elements, also zwischen `<a>` und `</a>`, notieren Sie den Text, der dem Anwender als Verweis angeboten wird (bei den meisten Web-Browsern andersfarbig, meist unterstrichen).

Im obigen Beispiel führen die ersten vier Verweise zu anderen Web-Angeboten. Die letzten beiden Verweise führen zu "lokalen" Zielen. Um die Syntax möglicher Verweisziele zu verstehen, müssen Sie sich mit dem Referenzieren in HTML vertraut machen.

### Beachten Sie:

Als Inhalt des `a`-Elements, also bei Verweisen der Verweistext, ist nicht nur reiner Text erlaubt. Sie können im Verweistext auch andere Inline-Elemente notieren. Unter anderem können Sie anstelle von Text auch eine Grafik referenzieren und auf diese Weise Grafiken als Verweise fungieren lassen, was in der Praxis des Web-Designs recht häufig vorkommt.

## Verweise optisch gestalten mit CSS

Wenn Sie nichts anderes angeben, erhalten Verweise bei der Darstellung die im Browser voreingestellten Farben, z.B. blau für Verweise zu noch nicht besuchten Seiten und violett für Verweise zu bereits besuchten Seiten. Um dateiweit eigene Verweisfarben zu bestimmen, können Sie die Attribute verwenden, die im Abschnitt Farben für Text und Verweise beschrieben werden. Darüber hinaus gibt es aber die Möglichkeit, Verweise mit Hilfe von CSS individueller zu gestalten. Unter anderem ist es auch möglich, die meist voreingestellte Unterstreichung des Verweistextes zu unterdrücken.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Verweise gestalten mit CSS</title>
    <style type="text/css">
    a:link { text-decoration:none; font-weight:bold; color:#e00000; }
    a:visited { text-decoration:none; font-weight:bold; color:#800000; }
    a:hover { text-decoration:none; font-weight:bold; background-color:#ff0; }
    a:active { text-decoration:none; font-weight:bold; background-color:#cff; }
    a:focus { text-decoration:none; font-weight:bold; background-color:#080; }
    </style>
    </head>
    <body>

    <h1>Eine kleine Verweissammlung</h1>

    <p>
      <a href="http://www.tagesschau.de/">ARD Tagesschau</a> Nachrichten<br>
      <a href="http://www.heise.de/newsticker/">Heise Newsticker</a> Computer-Nachrichten<br>
      <a href="http://de.news.yahoo.com/">Yahoo Nachrichtenticker</a> Nachrichten<br>
      <a href="http://www.oneworld.net/section/current">OneWorld News</a> Nachrichten (en)
    </p>

    <p>
      <a href="/" style="color:green">Wohin der wohl f&uuml;hren mag?</a><br>
      <a href="./" style="color:green">Und der hier?</a>
    </p>

    </body>
    </html>

### Erläuterung:

Das Beispiel arbeitet konsequent mit Stylesheets. Dazu ist im Dateikopf der HTML-Datei ein eigener zentraler Bereich zum Definieren von CSS-Formaten notiert (`<style>...</style>`). Näheres dazu im CSS-Kapitel im Abschnitt Zentrale Formate definieren. Der vielfache Wunsch von Web-Designern, die Unterstreichung des Verweistextes zu unterdrücken, wird durch die CSS-Angabe `text-decoration:none` erzielt (`text-decoration:underline` würde übrigens die Voreinstellung, also unterstrichenen Verweistext bewirken). Weitere im Beispiel verwendete Formatdefinitionen sind `font-weight:bold` (fette Schrift) sowie Angaben zur Farbe (`color:`) und zur Hintergrundfarbe (`background-color:`). Die entsprechenden CSS-Eigenschaften werden in den Abschnitten über Schriftformatierung und Hintergrundfarben und -bilder beschrieben.

Was im obigen Beispiel auffällt, ist, dass für insgesamt fünf "Verweistypen" CSS-Formate definiert werden. Mit `a:link` sind Verweise zu noch nicht besuchten Seiten gemeint, mit `a:visited` Verweise zu bereits besuchten Seiten, mit `a:hover` Verweise, während der Anwender mit der Maus über den Verweistext fährt, mit `a:active` Verweise, während sie angeklickt werden und mit `a:focus` Verweise, wenn diese mit der Tastatur angesprungen werden. Weitere Einzelheiten dazu werden im Abschnitt :link, :visited, :focus, :hover, :active (Pseudoklassen für Verweise) beschrieben.

Die beiden letzten Verweise im obigen Beispiel werden individuell formatiert. Sie übernehmen die zentral definierten CSS-Formate, erhalten aber zusätzlich eine eigene Verweistextfarbe zugewiesen. Dazu wird im einleitenden `<a>`-Tag das Attribut `style` notiert.

## Zielfenster für Verweise bestimmen

Per Voreinstellung werden alle Verweise im aktuellen Fenster geöffnet. Es sei denn, Sie haben in den Kopfdaten der HTML-Datei eine Zielfensterbasis angegeben und dort etwas anderes bestimmt. Bei einzelnen Verweisen können Sie jedenfalls unabhängig davon entscheiden, ob ein Verweisziel im aktuellen Browser-Fenster ausgegeben werden soll, oder ob ein neues Fenster dafür geöffnet werden soll. Bei Verweisen zu fremden Web-Angeboten kann es beispielsweise sinnvoll sein, das Verweisziel in einem neuen Fenster zu öffnen. So braucht der Anwender das eigene Web-Angebot nicht zu verlassen, sondern bekommt das andere Angebot einfach in einem neuen Fenster angezeigt. Die Seite Ihres Angebots mit dem Verweis bleibt in einem Fenster im Hintergrund erhalten.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
           "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Zielfenster für Verweise bestimmen</title>
    </head>
    <body>

    <h1>SELFHTML aktuell</h1>

    <p>immer wieder neu:
      <a href="http://aktuell.de.selfhtml.org/" target="_blank">SELFHTML aktuell</a>
    </p>

    </body>
    </html>

### Erläuterung:

Mit dem Attribut `target` im einleitenden `<a>`-Tag können Sie ein Zielfenster für den Verweis festlegen. Der im Wert zugewiesene Name muss mit einem Buchstaben (A-Z, a-z) beginnen, außer in den folgenden Ausnahmen, die durch einen führenden Unterstrich gekennzeichnet sind:

`_blank`, um den Verweis in einem neuen Fenster zu öffnen,
`_self`, um den Verweis im aktuellen Fenster zu öffnen,
`_parent`, um bei verschachtelten Framesets das aktuelle Frameset zu sprengen,
`_top`, um bei verschachtelten Framesets alle Framesets zu sprengen.

Bei Frames geben Sie hier einen Fensternamen an, der im Frameset definiert ist. Einzelheiten zur Definition von Zielfenstern bei Verwendung von Frames finden Sie im Abschnitt Verweise zu anderen Frames und zum Sprengen von Framesets.

### Beachten Sie:

Sie können mit dieser Methode lediglich auf eine Datei verweisen. Sollen mit einem Klick auf einen Link gleich mehrere Dateien geladen werden, dann ist dafür JavaScript notwendig. Im Anwendungsbeispiel wird erklärt, wie Sie hiermit zwei Frames gleichzeitig ändern können; um eine Navigation auch ohne JavaScript zu ermöglichen, sollte stattdessen auf ein neues, angepasstes Frameset mit `target="_top"` verwiesen werden.

Das `target`-Attribut ist zwar nicht als deprecated gekennzeichnet, doch um es einzusetzen, müssen Sie die HTML-Variante Transitional verwenden. Der Grund ist, dass dieses Attribut vorwiegend für Verweise bei Verwendung von Frames gedacht ist und Frames eine eigene HTML-Variante haben, die von der Einstufung her der Variante Transitional entspricht.

Viele Anwender verwenden statt `target="_blank"` irgendeinen nicht existenten Framenamen oder sogar unzulässig `target="_new"`, um einen Verweis in einem neuen Fenster zu öffnen. Das erzielt nicht den gewünschten Effekt, da das neue Fenster nicht fokussiert wird und der Anwender es unter Umständen nicht sieht (bei `target="_blank"` wird das Fenster sehr wohl fokussiert). Außerdem werden andere Verweise, die diesen eigentlich nicht verwendeten Framenamen verwenden, ebenfalls in diesem neuen Fenster geöffnet.

| Projekt-interne Verweise
| Tabellen und nicht-visuelle Medien

© 2007 Impressum