Hyperlinks gezielt hervorheben und individuell anpassen

Schon gewusst? Es gibt Alternativen zur Standard-Unterstreichung!

Ersten Kommentar schreiben
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:

Als Mitglied können Sie diesen Beitrag weiterlesen!

Werden Sie Mitglied und testen Sie akademie.de 14 Tage lang kostenlos!

In den ersten 14 Tagen haben Sie Zugriff auf alle Inhalte auf akademie.de, außer Downloads. Sie können in dieser Zeit ohne Angabe von Gründen stornieren. Eine E-Mail an service@akademie.de genügt. Nur wenn Sie Mitglied bleiben, wird der Mitgliedsbeitrag nach Ende der 14tägigen Stornofrist abgebucht.

Ich bin bereits Mitglied
Jetzt Mitglied werden und akademie.de 14 Tage kostenlos testen
Ich entscheide mich für folgende Zahlungsweise:
14 Tage Stornorecht:
Ich kann meine Mitgliedschaft in den ersten 14 Tagen jederzeit formlos stornieren, z.B. per E-Mail an service@akademie.de.

Downloads zu diesem Beitrag

Newsletter abonnieren