Ein weiteres Einsteiger-Tutorial: hier geht um die wichtigste Eigenschaft des Internets, nämlich die Hyperlinks. Verlinkungen dürfen auf keiner Webseite fehlen – entweder, um auf andere Seiten zu verweisen oder um innerhalb der eigenen Seite zu navigieren.

Wenn ihr eine Seite verlinken möchtet, braucht ihr das a-Tag. Dem fügt ihr verschiedene Attribute hinzu, um etwa die Linkadresse, das Linkziel oder den Linktitel festzulegen:

<a href="http://neontrauma.de" title="neontrauma.de bietet Tutorials zum Thema Webdesign" target="_blank">hier klicken</a>

Zwischen den öffnenden und das schließende a-Tag schreibst du den Linknamen, so wie er später angezeigt werden soll (“hier klicken”). Das href steht für Hypertext Reference und gibt die URL der zu öffnenden Webseite an. Nun habt ihr schon das Grundgerüst einer jeden Verlinkung!

title

Die beiden weiteren Attribute sind nicht zwangsläufig erforderlich. Das title-Tag solltet ihr allerdings verwenden, damit eure User schon vor dem Öffnen des Links eine kurze Beschreibung erhalten, was sie denn erwartet. Aus dem Linktext allein geht das ja oft nicht hervor. Der Inhalt des title-Tags erscheint als sogenanntes Tooltip in einer kleinen Box, wenn ihr mit dem Mauszeiger über den Link fahrt.

target

Das target-Attribut gilt mittlerweile eigentlich als veraltet, aber manchmal ist es doch ganz nützlich. Hiermit könnt ihr vor allem angeben, ob sich ein Link im gleichen Fenster/Tab öffnen soll oder in einem neuen. Lasst ihr dieses Attribut weg, so öffnen sich die Links im gleichen Fenster, andernfalls müsst ihr target=”_blank” notieren.
Wieso man target eigentlich nicht mehr verwenden sollte, könnt ihr hier nachlesen.

Links via CSS stylen

So. Im nächsten Schritt wenden wir uns der Formatierung der Links zu.
Standardmäßig werden noch nicht aufgerufene Links blau dargestellt und die bereits besuchten lila, und beide unterstrichen. Das ist zwar praktisch, weil diese Kennzeichnung mittlerweile so ziemlich jedem Internetuser in Fleisch und Blut übergegangen sein dürfte und er so einen Link gleich als solchen erkennt und auch weiß, welche Verweise er bereits aufgerufen hat – aber stylish ist das nun nicht gerade. ;-)

Im Stylesheet könnt ihr nun festlegen, wie eure Links aussehen sollen. Dazu notiert ihr einfach:

a {
color: #000;       // schwarze Schrift
text-decoration: none;       // nicht unterstrichen
font-variant: small-caps;        // Kapitälchen
}

Wie eure Links ausschauen, wenn man gerade mit dem Mauszeiger darüber fährt oder gerade draufklickt, legt ihr so fest:

a:hover, a:active, a:focus {
color: #ccc;       // graue Schrift
border-bottom: 1px dotted #ccc;       // gepunktete graue Linie unten
}

Bereits besuchte Links werden durch diese Pseudoklasse angesprochen:

a:visited {
color: #000;       // schwarze Schrift
text-decoration: line-through;       // durchgestrichen
}