Home › Link-Setzen in Webtexten für Anfänger

Link-Setzen in Webtexten für Anfänger

Wer anfängt Web-Texte zu schreiben oder ein Weblog zu betreiben hat häufig Schwierigkeiten mit dem richtigen Linken. Dieser Artikel soll Einsteigern verschiedene Arten des Link-Setzens erläutern.

Grundaufbau

Damit aus einem Textabschnitt ein anklickbarer Hyperlink wird, muss in der Beschreibungssprache HTML folgende Schreibweise verwendet werden:


<a href="http://url_der_zieladresse.de/">LinkBeschreibung</a>

Beispiel:


<a href="http://www.adc11.de/">Adc11 Website</a>

Im Browser sieht das folgendermaßen aus: Adc11 Website. Bemerke, dass die Zieladresse des verwiesenen Dokuments für den Benutzer nicht im Dokument sichtbar ist (nur in der Statusleiste des Browsers, welche eventuell auch ausgeschaltet sein kann). Die Linkbeschreibung ist bei diesem Beispiel der einzige Anhaltspunkt der verrät, wohin der Link führt.

Kenntlich machen der URL im Link

URL steht für „Uniform Resource Locator“ und bedeutet WWW-Adresse eines Dokuments. In manchen Fällen kann es sinnvoll sein, dem Anwender die URL mitzuteilen.


<a href="http://www.adc11.de/">http://www.adc11.de/</a>

oder


<a href="http://www.adc11.de/">adc11.de</a>

In der Regel ist das jedoch kein guter Stil, da der Anwender dabei keine Information zum Linkziel erhält. Verwende diese Art des Linkens, wenn du explizit auf eine WWW-Adresse aufmerksam machen möchtest, die selbstbeschreibend ist.

Links mit Beschreibung und Zusatzinfos

Ein Hyperlink kann auch zusätzliche Infos beinhalten, wenn man das title-Attribut verwendet:


<a href="http://www.adc11.de/" title="Weblog eines Webworkers">Adc11 Website</a>

Im Browser: Adc11 Website. Wenn man mit dem Mauszeiger über den Link fährt, erscheint der Text des Title-Attributs.

Link mit Extern/Intern-Unterscheidung

Ausgehend von der Domain des Web-Dokuments kann es Links geben, die zu einem anderen Dokument innerhalb der Domain (interne Links) und Links, die zu Dokumenten auf anderen Domains führen können (externe Links). Externe Links können als solche gekennzeichnet werden, um dem Anwender mitzuteilen, dass er hiermit die Domain verlässt.

Dafür wird häufig ein kleines Grafik-Symbol wie dieses externer Link verwendet. Man kann es per folgendem HTML-Code dem Hyperlink voranstellen:

<img src="http://domain.tld/bilderverzeichnis/extlink.gif" width="14" height="11" alt="externer Link" />
<a href="http://www.adc11.de/" title="Weblog eines Webworkers">Adc11 Website</a>

… oder CSS dafür bemühen:

<a href="http://www.adc11.de/" title="Weblog eines Webworkers" style="padding-left: 14px; background-image: url(extlink.gif); background-position: left; background-repeat: no-repeat;">Adc11 Website</a>

Um sich die viele Tipparbeit zu ersparen, sollte man eine externe CSS-Datei haben, die in jedes HTML-Dokument eingebunden wird (wie das geht, wird in Selfhtml beschrieben). In diese externe CSS-Datei schreibt man eine Anweisung wie

a.ext {
padding-left:		14px;
background-image:	url(extlink.gif);
background-position:	left;
background-repeat:	no-repeat;
}

… so dass man einen externen Link nun einfacher mit

<a href="http://www.adc11.de/" title="Weblog eines Webworkers" class="ext">Adc11 Website</a>

kennzeichnen kann.

Zwar wird die externe Linkkenzeichnung per CSS von allen modernen Browsern interpretiert, der neueste Internet Explorer 6 SP1 hat jedoch Darstellungsprobleme, wenn ein so formatierter Link in eine neue Zeile umgebrochen wird.

Links zu nicht-HTML-Dokumenten

Man kann auch Links zu nicht-HTML-Dokumenten setzen wie zum Beispiel Word- oder PDF-Dateien. Man muss aber immer bedenken, dass der Anwender hinter einem Hyperlink eine HTML-Dokument vermutet. Viele Anwender ärgern sich darüber, wenn der Link anstatt auf ein HTML-Dokument (welches der Webbrowser darstellen kann) auf eine PDF-Datei verweist. Denn dabei wird – sofern auf dem Rechner des Anwenders installiert – der PDF-Viewer von Adobe (TM) geöffnet und meist eine längere Ladezeit in Kauf genommen. Deshalb ist es fairer, dem Anwender vorher mitzuteilen, was ihn/sie da erwartet. Dafür kann man, wie oben beschrieben, das title-Attribut verwenden:


<a href="http://www.adc11.de/irgendein_pdf_dokument.pdf" title="PDF-Dokument: Beschreibung">Adc11 Website</a>

… oder – noch besser – ein kleines PDF-Symbol externer Link hinter den Link stellen.

Mittels CSS3-Selektoren kann das auch einfacher geregelt werden, in dem man folgende Anweisung in die zentrale CSS-Datei schreibt:

body a[href$=".pdf"]{
padding-right:		14px;
background-image:	url(pdf.gif);
background-position:	right;
background-repeat:	no-repeat;
}

Laut dieser Anweisung wird jeder Link, der am Ende die Zeichenfolge „.pdf“ beinhaltet automatisch mit einem PDF-Icon gekennzeichnet. Leider werden diese CSS3-Selektoren noch nicht von jedem Browser unterstützt (Stand: Jahr 2003). Der Marktführer Microsoft Internet Explorer ignoriert z.B. diese Anweisung und stellt kein PDF-Icon dar. Wenn eine flächendeckende Darstellung des PDF-Icons gewünscht ist, muss wieder der IMAGE-Tag bemüht werden:

<a href="http://domain.tld/dokument.pdf" title="LinkTitel">LinkBeschreibung</a>
<img src="http://domain.tld/bilderverzeichnis/pdficon.gif" width="14" height="11" alt="PDF-Dokument" />

Für Word-Dokumente, die ein ähnliches Verhalten wie PDF-Dokumente hervorrufen und ein externes Programm zu Darstellung aufrufen, kann genau so verfahren werden. Ersetze dafür in der die obigen CSS-Anweisung die erste Zeile body a[href$=".pdf"]{ durch body a[href$=".doc"]{ und den Pfad zum PDF-Icon in der dritten Zeile durch den Pfad zum Word-Icon bzw. verwende im IMAGE-Tag den Pfad zum Word-Icon.

Perspektive übernehmen

Links sind die elementarsten Funktionen von WWW-Dokumenten. Auf deren Umsetzung sollte man deshalb am sensibelsten Acht geben. Ob es nun um die technische Umsetzung geht (wie in diesem Artikel beschrieben) oder um die Bedeutung aus einem fließenden Text heraus: Übernimm immer die Perspektive deiner Besucher

  • Verlinke die richtigen (aussagekräftigen) Textpassagen
  • Teile deinem Besucher nach Möglichkeit mit, was ihn dort erwartet (Dateityp, inhaltliche Angaben)
  • Wähle die kürzesten Wege (deep links)
  • Vermeide es, Links in einem neuen Fenster zu öffnen (ist aus der Mode gekommen). Dafür verwendet man besser die Externer-Link-Symbole und überlässt es dem Anwender, in welchem Browserfenster sie geöffnet werden sollen.
  • Vermeide nach Möglichkeit nichst-sagende Linkbeschreibungen und Wiederholungen, wie „hier“, „dort“ usw.

Siehe zu diesem Thema auch den Artikel von Michael Charlier: Basics: Sprechende Links.