SELFHTML: HTML/XHTML / Verweise (Links) / Verweise definieren und gestalten

SELFHTML/Navigationshilfen HTML/XHTML Verweise (Links)
	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

SELFHTML/Navigationshilfen HTML/XHTML Verweise (Links)