Hyperlinks gezielt hervorheben und individuell anpassen

Schon gewusst? Es gibt Alternativen zur Standard-Unterstreichung!

Stand: 30. November 2011

Eines der wesentlichen Kennzeichen einer Internet-Seite sind Links, also Verknüpfungen zu anderen Dateien. Oftmals wird dort lieblos die Standard-Unterstreichung benutzt. Lorenz Hölscher zeigt, wie Sie mit wenig Aufwand solche Links viel besser darstellen können.

Normale Links

Nehmen Sie sich mal beispielhaft eine kleine HTML-Datei mit ein paar Links darin:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Testseite für bessere Links</title>
</head>
<body>

<h1>Dies ist nur eine Überschrift</h1>
<p>
In diesem Text gibt es einen externen <a href="http://www.akademie.de">Link auf akademie.de</a> und auf eine interne <a href="intern.html">Seite</a>.
</p><p>
Außerdem können Sie <a href="test.zip">hier ein ZIP</a> und <a href="test.pdf">dort ein PDF</a> downloaden.
</p>

</body>
</html>

Je nach gewähltem Browser (hier ist es Opera), sehen Sie eine Ausgabe wie die folgende:

Bild vergrößernLinks in üblicher Darstellung

Die im Code mit dem <a>-Element gekennzeichneten Links werden, wie meistens üblich, unterstrichen und violett (bereits besucht) beziehungsweise blau (noch nicht besucht) dargestellt.

StyleSheet einsetzen

Wenn Sie das Aussehen der Links an Ihr Design anpassen möchten, setzen Sie selbstverständlich StyleSheets ein, also Dateien, die sich unabhängig vom Inhalt ausschließlich mit der Formatierung beschäftigen.

Wie funktionieren StyleSheets?

Ausführliche Informationen über den Einsatz von StyleSheets finden Sie im "CSS-Praxiskurs".

Die ebenfalls minimale Version für eine StyleSheet-Datei sähe wie folgt aus, um das <a>-Element zu formatieren:

Mitglied werden

Als zahlendes Mitglied von akademie.de haben Sie vollen Zugriff auf alle Inhalte und können alle PDF-Dateien, Checklisten, Mustervorlagen und Anwendungen herunterladen.

Sind Sie sich noch unsicher? Dann wählen Sie die Option “akademie.de kostenlos testen”. So können Sie sich 14 Tage in Ruhe umschauen. Downloads stehen Ihnen in dieser Zeit nicht zur Verfügung. Gefällt Ihnen akademie.de nicht, reicht ein formloser Widerruf per E-Mail innerhalb der ersten 14 Tage. Es entstehen für Sie keine Kosten. Widerrufen Sie nicht, erhalten Sie nach Ablauf von 14 Tagen vollen Zugriff und der Mitgliedsbeitrag wird abgebucht.

Ich bin bereits Mitglied
Mitglied werden!
Ich entscheide mich für folgende Zahlungsweise:

Downloads zu diesem Beitrag

Newsletter abonnieren