Verweise definieren und gestalten
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abschneiden
adresse
angebot
anwender
attribut
beispiel
datei
einstiegsseite
element
fenster
format
fram
inhalt
kapitel
obigen beispiel
target
themenseite
variant
verweis
verweisen
-
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 Seite 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 Seite 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.
nach obennach unten
HTML 2.0XHTML 1.0MS IE 1.0Netscape 1.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2 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:
Beispiel-Seite 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ü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 Seite 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 Seite Inline-Elemente notieren. Unter anderem k?nnen Sie anstelle von Text auch eine Grafik referenzieren und auf diese Weise Seite Grafiken als Verweise fungieren lassen, was in der Praxis des Web-Designs recht h?ufig vorkommt.
nach obennach unten
HTML 4.0XHTML 1.0MS IE 3.0Netscape 4.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2 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 Seite 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:
Beispiel-Seite 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ü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 Seite 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 Seite Schriftformatierung und Seite 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 Seite :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.
nach obennach unten
HTML 4.0XHTML 1.0deprecated (missbilligt)MS IE 3.0Netscape 2.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2 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 Seite 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:
Beispiel-Seite 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 Kapitel 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 Seite 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 Kapitel JavaScript notwendig. Im Anwendungsbeispiel wird erkl?rt, wie Sie hiermit Seite 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. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage