Links im WWW: Grundlagen Hyperlinks

Jeder kennt sie, jeder bindet sie in seine Homepage ein: die Hyperlinks. Einsteiger erleben mit Links ihre ersten Erfolgserlebnisse, Profis bauen die Querverweise zu optischen Highlights aus. Diese Web-Factory widmet sich allen Aspekten der Hyperlink-Technik und zeigt, wie Sie den Verweisen mehr Pep verpassen.

(erschienen 1998 in PC-Online)

Wer sich mit Links auseinandersetzen will, benötigt ein paar Grundkenntnisse. Verantwortlich für die Verweise ist das Anchor-Tag <a> </a>. Die Hauptarbeit spielt sich innerhalb des aufrufenden Tags ab. Hier kommt zum <a> die Zieladresse: <a href=”http://www.foo.bar”>. href=”http…” macht dem Browser klar, daß er hier eine andere WWW-Seite laden soll. Anstelle des http: darf an dieser Stelle auch ftp: für FTP-Server oder ein mailto: samt einer E-Mail-Adresse stehen. Dann ruft das Hyperlink den Mail-Client auf und bereitet eine Nachricht an die angegebene Adresse vor.

Um den Link auszulösen benötigt jeder Surfer einen Textabschnitt, den er anklicken kann. Der Text steht zwischen <a …> und </a>: <a href=”http://www.foo.bar”>Weitere Informationen</a>. Dieser Text erscheint optisch hervorgehoben.

Hübsch machen sich Bilder als Hyperlinks. Dazu binden Sie einfach ein <img>-Tag ein:

<a href=”http://www.foo.bar”><img src=”foobild.gif” alt=”Weitere Informationen” border=0></a>

Besonders wichtig ist der alt-Parameter. Der hier enthaltene Text erscheint, wenn der Mauszeiger über der Grafik steht – das gibt zusätzliche Informationen. Die Angabe border=0 erspart den häßlichen blauen Rand um das Bild.

Aussehen

Links haben ein einheitliches Erscheinungsbild im World Wide Web: Es handelt sich immer um andersfarbige und unterstrichene Textelemente – fast immer. Wer eine optisch aufwendigere Homepage gestaltet, versucht, diese Link-Konventionen zu durchbrechen. In Standard-HTML geht das, indem man die Farben und gegebenenfalls die Schriftart ändert. Die erste Aufgabe erfüllt das Body-Tag:

<body link=”blue” alink=”red” vlink=”green”>

link bezeichnet die Grundfarbe der Links. Sie sollte sich in jedem Fall von der normalen Textfarbe unterscheiden. alink steht für Active Link, also das aktuell aktive Link. Diese Farbe taucht zum Beispiel auf, wenn Sie im Internet Explorer mit der rechten Maustaste auf ein Link klicken. vlink schließlich bezeichnet ein bereits besuchtes Link. Das hilft dem Leser einer Website bei der Orientierung.

Welche Farben die Links von Haus aus haben, bestimmt übrigens der Browser. Im Internet Explorer finden Sie die Vorgaben unter Ansicht – Einstellungen und Farben. Beim Netscape Navigator hilft Bearbeiten – Einstellungen und ein Klick auf Farben.

Wenn Sie die Farben umgestalten, denken Sie an den Kontrast zum Hintergrund und den umgebenden Text. Gelb auf Weiß etwa kommt nicht in Frage, Weiß auf Schwarz hingegen sieht gut aus.

Wenn Sie die Schrift eines Links ändern wollen, bemühen Sie das font-Tag:

<font face=”arial” size=”5″ ><a href=”xxx5.html”>Testlink 3</a></font>

Damit haben sich die Standard-Formatierungen der Links auch schon erschöpft.

Links mit CSS formatieren

Erst mit Hilfe einer Stilvorlage bringen Sie Links mehr Formatierung bei. Interessant ist hier die Möglichkeit, das Link ohne Unterstreichung zu zeigen. Dazu definieren Sie ein Stylesheet wie dieses:

<html>

<head>

<style type=”text/css”>

<!–

A:link, A:visited, A:active { text-decoration: none}

–>

</style>

</head>

<body>

<a href=”wohin.html”>Ein Testlink</a>

</body>

</html>

A:link entspricht dem Paramater link im <body>-Tag. A:visited gilt für vlink und A:active für alink. CSS erspart Ihnen die Arbeit, jeder Stilvorlage einzeln den Wert zuzuweisen – stattdessen schreiben Sie die Angaben mit Kommata getrennt hintereinander und weisen allen auf einen Rutsch den Wert text-decoration: none zu. Weitere zulässige Angaben für text-decoration sind underline für unterstrichene Darstellung, overline für eine Linie über dem Text oder line-through für durchgestrichenen Text. Wenn Sie overline auf ein Link anwenden, bekommt dieses je einen Strich oberhalb und unterhalb des Texts. Von blink sollten Sie absehen – das stört nur.

Die Stilvorlagendefinition mit A:link gilt für alle Links. Das ist nicht immer zweckmäßig. Flexibler sind Sie, wenn Sie eine Klasse definieren und diese bei Bedarf zuweisen. In diesem Beispiel ändern wir auch gleich noch die Hintergrundfarbe des Links. Das hat einen Vorteil: Der Link bleibt als solcher erkennbar – besonders dann, wenn wie in diesem Beispiel die Schriftfarbe dieselbe ist wie im umgebenden Text:

<html>

<head>

<style type=”text/css”>

<!–

.linkcol { text-decoration: none;

color: black;

background: yellow}

–>

</style>

</head>

<body>

<p>Durch diesen schönen Text führt

<a href=”wohin.html” class=linkcol>ein Testlink</a>

zu irgendeiner Stelle im Netz.</p>

</body>

</html>

Eine Klasse definieren Sie mit einem vorangestellten Punkt: .linkcol. Darauf können Sie sich dann mit class=linkcol von jedem beliebigen Tag aus beziehen.

Dynamische Links erzeugen

Nun fehlt nur noch, daß sich die Links etwas auffälliger verhalten, wenn ein Leser mit der Maus darüberfährt. Ein Weg wäre, das Link zu invertieren, also Gelb auf Schwarz darzustellen. Wer jetzt an ein mittelgroßes Javascript denkt, liegt falsch. Zumindest der Internet Explorer kennt den CSS-Parameter hover. Er legt Eigenschaften fest, die gelten, sobald sich der Mauszeiger über einem Objekt befindet:

<html>

<head>

<title>CSS dynamisch</title>

<style type=”text/css”>

<!–

A { text-decoration: none;

color: black;

background: yellow}

a:hover {color: blue}

a:hover.sonder {color: red;

background: black;

letter-spacing: 0.5pt;}

–>

</style>

</head>

<body>

<h1>Willkommen auf der Hover-Page</h1>

<p>Durch diesen schönen Text führt

<a ID=link1 href=”wohin.htm” class=sonder>ein Testlink</a>

zu irgendeiner Stelle im Netz.</p>

<a href=”bla.htm”>Hover me!</a>

</body>

</html>

Zunächst definiert A alle Links mit schwarzer Schrift auf gelben Hintergrund und ohne Unterstreichung. Die folgende Zeile legt fest, wie sich ein Link verhält, sobald die Maus darüber steht. In diesem Fall färbt sich die Schrift blau, der gelbe Hintergrund bleibt. a:hover.big schließlich definiert den Sonderfall. Sobald ein Link mit class=big definiert ist, färbt sich die Schrift rot und der Hintergrund wird schwarz. Raffiniert: Mit letter-spacing: 0.5pt stellt das Stylesheet den Buchstabenabstand etwas größer als normal. Ein netter Effekt – allerings kann er bei größeren Texten gehörig das Layout durcheinanderbringen. Wer noch mehr Aufsehen erregen will, fügt der Definition für .sonder noch text-transform: uppercase; zu. Dann erscheint der Text zum Link bei Mausberührung in Großbuchstaben.

Links in Frames und Fenstern

In Frames verhaspelt man sich gerne mit Links. Denn hier muß nicht nur klargestellt werden, wohin das Link führt, sondern auch, wo die Daten auftauchen sollen. Von Haus aus erscheint ein Dokument in dem Fenster, aus dem es aufgerufen wurde. Was aber, wenn Sie ein Inhaltsverzeichnis zusammenstellen, das die Dokumente in einem gesonderten Fenster zeigt?

Hier hilft die target-Angabe. Sie leitet ein Hyperlink in einen Frame um. Dazu müssen Sie dem Frame in der Definition einen Namen verpassen:

<FRAMESET COLS=”30%,70%”>

<FRAME SRC=”inhalt.htm” noresize>

<FRAME SRC=”sto2.htm” name=”story” noresize>

</FRAMESET>

Auf den Namen story beziehen sich dann die Links im Steuerframe. Ein Aufruf wäre <a href=”sto2.htm#hotline” target=”story”>NEU: Die Hotline</a><p>. Zuständig für das zielsichere Linken ist target=”story”. Frei übersetzt: Lade den Link in das Ziel mit dem Namen story.

Doch in üppigeren Inhaltslisten nervt es, wenn man bei jedem Verweis das Sprungziel angeben muß. Außerdem wird eine nachträgliche Umorientierung mühsam. Ändert sich das Ziel, müßte es in jedem Link neu eingegeben werden. Zum Glück gibt es <base>. Vielen kennen dieses Tag als Grundlage für alle Hyperlinks in einem HTML-Dokument. Schreibt man an den Anfang einer Seite <base href=”http://www.foo.bar/”>, beziehen sich alle relativen Links in einem Dokument auf diese Basis. Trifft der Browser dann auf <a href=”welcome.htm”>, macht er daraus http://www.foo.bar/welcome.htm. Doch in diesem Fall dient base als Zieldefinition. Dazu bekommt es den Paramter target mit und weist diesen den Standard-Frame zu. Im folgenden Beispiel landen alle Querverweise im Rahmen story.

<base target=”story”>

<a href=”sto2.htm#hotline”>NEU: Die Hotline</a><p>

<a href=”sto2.htm#geschichte”>Die Geschichte der Textbausteine</a><p>

<a href=”sto2.htm#volksmusik”>Die Wahrheit über Volksmusik</a><p>

<a href=”sto2.htm#kater” target=”_new”>Der Kater <tt>(mit autobiographischen Elementen)</tt></a><p>

Einzige Ausnahme ist der letzte Punkt. Er zielt auf ein neues Fenster. Der Browser öffnet daraufhin eine neue Instanz und stellt das Dokument dort dar. Dieses Verfahren sollten Sie allerdings nicht anwenden — es verärgert User. Dieses Beispiel zeigt auch, daß target-Angaben im Tag Vorrang haben. Sie können also ein Standardziel in <base> definieren, dieses aber bei Bedarf außer Kraft setzen.

Neben _new gibt es noch drei weitere vordefinierte Sprungziele: _parent lädt das Dokument in das Fenster, in dem das Frameset vorher definiert wurde, also eine Ebene höher. _top verzweigt in die höchste Ebene — Sie landen dann wieder im framelosen Browser. Wann immer Sie in einer Site mit Frames Links auf externe Sites plazieren, sollten Sie _top als Ziel angeben. Schließlich gibt es noch _self. Damit wird das Link in den Frame geladen, aus dem das Link ausgerufen wurde. _blank schließlich ist analog zu _new und öffnet ein neues Browser-Fenster.

Im Beispiel finden Sie noch eine Spielart der Sprungziele. Mit einem Doppelkreuz eingeleitete Bezeichner definieren innerhalb eines Textes Stellen, die direkt angesprungen werden können: <a name=”ziel”>. Ein Klick auf das Link <a href=”http://www.foo.bar/text.html#ziel”> bringt Sie genau an diese Stelle. Innerhalb eines Dokumentes geht das auch ohne URL: <a href=”#ziel”>.

Bezeichnungen

Links sollten aussagekräftige Bezeichnungen tragen. Eine Aussage wie Klicken Sie hier… ist nicht informativ. Sie sollten möglichst genau sagen, was sich hinter einem Link verbirgt. Geht es um die Erklärung eines Stichworts, reicht es, dieses in den Link aufzunehmen – dann ist klar, daß ein Klick darauf zu weiteren Informationen führt. In den anderen Fällen sollten drei bis vier Wörter zeigen, wohin das Link führt, etwa “Informationen zum Service.”

Bei Auflistungen von Links sollten Sie die URL im Klartext anzeigen. Hinter dem Link ist dann noch genug Platz für Erläuterungen. So weiß der Leser auf einen Blick, wohin der Link führt:

<a href=”http://www.foo.bar/”>http://www.foo.bar/</a> Weitere Informationen zu seltsamen Akronymen<br>

Link-Fehlern vorbeugen

Auf Syntax achten

Ein klassischer Fehler im Link sieht so aus: <a href=”http://www.foo.bar/>Informationen</a> — das zweite Anführungszeichen fehlt. Statt eines Links erscheint dann der Quelltext in der Browser-Ansicht. Dieser Fehler ist noch recht offensichtlich und schnell behoben. Die andere typische Panne tritt auf, wenn man eine spitze Klammer vergißt: <a href=”http://www.foo.bar/” Informationen</a><br>…mehr Text. Dann erscheint statt des Hyperlink-Textes der gesamte nachfolgende Text als Hyperlink. In diesem Fall wäre also …mehr Text blau und unterstrichen.

Links überprüfen lassen

Wer viele Links auf seiner Homepage hat, wird früher oder später Mails bekommen, daß diese oder jene Verbindung nicht mehr stimme. Solchen peinlichen Mails können Sie einfach vorbeugen, indem Sie regelmäßig Ihre Links checken lassen.

Ein Dienst, der diese Arbeit erledigt ist die Website Garage unter http://www.websitegarage.com/ (Link funktioniert 2006 nicht mehr). Hier geben Sie Ihre Homepage-Adresse an und der Server macht sich an die Arbeit. Bei dieser Gelegenheit checkt die Garage auch noch Syntax und Popularität ihrer Homepage. Auf der resultierenden Seite finden Sie den Punkt Dead Link. Ein Klick darauf zeigt Ihnen faule Links. Der Nachteil: Die Webgarage untersucht nur 25 Links.

Relativ absolut

Jeder Web-Designer hat schon von relativen und absoluten Links gehört. Was so hochtrabend und knifflig klingt, hat einen einfachen Hintergrund. Absolute Links haben immer eine komplette URL inklusive Serverangabe und einen kompletten Verzeichnispfad, also http://www.foo.bar/info/daten/text.html. Relative Links dagegen verzichten auf die URL: /info/daten/text.html.

Absolute Links sind sinnvoll bei Verbindungen nach außen, beim eigenen Server sollte man auf relative Adressen zurückgreifen. Der Grund: mit den relativen Pfadangaben läßt sich die Website auf dem heimischen System austesten und dann problemlos auf den Server packen. Die relative Adressierung überläßt dem Browser die Arbeit, eine URL zu komplettieren. Auf dem heimischen Rechner ergänzt der Web-Client dann dann die Pfade um die Laufwerksangabe. Auf dem Internet-Server fügt er die Serveradresse hinzu.

Relative Links kann man noch relativer gestalten. Wer darauf verzichtet, sich im Link auf eine Datei direkt auf das Wurzelverzeichnis zu beziehen, ist flexibler und kann bei Bedarf auch schneller Verzeichnisstrukturen umstellen. Ein Beispiel: Sie wechseln mit <a href=”daten/einkommen/januar/text.htm”> in ein Unterverzeichnis. Wenn Sie in text.htm einen Link auf die Willkommensseite Ihres Servers einbauen wollen, haben Sie zwei Alternativen: <a href=”/welcome.html”> oder <a href=”../../../welcome.html”>. Der erste Weg führt direkt ins Hauptverzeichnis, erkennbar am / an erster Stelle.

Das zweite Verfahren wechselt dreimal nacheinander eine Ebene nach oben. Das ist zwar komplizierter bei der Programmierung — doch es hilft wenn Sie irgendeine neue Verzeichnisebene /firma einziehen und dorthinein das Directory daten verschieben. Der erste Link wechselt dann aus firma/daten/einkommen/januar/text.htm zu /welcome.html im Wurzelverzeichnis und liegt damit falsch. Der zweite Link hüpft drei Ebenen nach oben und landet richtig in /firma/welcome.html.

Lesen Sie hier weiter: Pagerank verbessern: Natürliche Links zählen mehr