|
Linkfarbe
Es ist manchmal nützlich, dem Surfer mitzuteilen, ob man auf einen
Link außerhalb des eigenen Projektes hinführt, oder auch nicht.
Oftmals will man einfach nur so auf seiner Seite rote und grüne
Links haben.
Um die Links "schön" zu formatieren, empfehlen wir nachfolgenden Workshop:
Formatiern
von Links
Wir erläutern nun
das ganze einfach an 2 Linkfarben, die innerhalb einer Seite eingebaut
werden sollen: rote Links für interne Verweise und grüne Links
für externe Verweise.
Mit sogenannten Style-Klassen ist das Problem ganz einfach zu lösen. Das Funktioniert
so, dass man in den Style-Angaben je einen Link der Klasse "intern"
und extern definiert. Dazu folgender Quelltext:
<head>
<style>
<!-- Nachfolgend die Einstellungen für den internen Link -->
a.intern:link {color=#ff0000; text-decoration:none};
a.intern:hover {color=#ff0000; text-decoration:none; background=#00ff00};
a.intern:visited {color=#ff0000; text-decoration:none};
a.intern:active {color=#ff0000; text-decoration:none; background=#00ff00};
<!-- Nachfolgend
die Einstellungen für den externen Link -->
a.extern:link {color=#00ff00; text-decoration:none};
a.extern:hover {color=#00ff00; text-decoration:none; background=#ff0000};
a.extern:visited {color=#00ff00; text-decoration:none};
a.extern:active {color=#00ff00; text-decoration:none; background=#ff0000};
</style>
</head>
Was passiert hier? Zunächst mal haben wir die Linkunterstreichung
deaktiviert. Es gibt jedoch einen entscheidenden Unterschied:
Während man normalerweise eingibt a:link {...} schiebt sich hier
jeweils noch ein ".intern" bzw. ".extern" dazwischen.
Das sind die Style-Klassen. (Das ganze klappt auch mit den anderen Tags,
also h1, h2, p, td, ...).
Dann wurden für die verschiedenen Link-Stati (link, hover, visited
und active) die Farbe definiert. Beim status "hover" haben wir uns hier entschieden, noch eine Hintergrundfarbe einzubinden. Der Phantasie
sind keine Grenzen gesetzt. Man kann natürlich auch noch weitaus
mehr Link-Klassen erstellen.
Die Definition
wäre somit geschafft. jetzt müssen wir dem Quelltext nur noch
beibringen, dass wir einen internen, oder externen Link haben. Dazu erweitert
man den a-Tag um class="name". Somit "weiß"
dann der Link, wie er sich darzustellen hat. Im HTML sieht das dann wie
folgt aus:
<body>
<a class="intern"
href="domian1intern.htm">interner Link</a><br>
<a class="extern" href="domain2extern.htm">externer
Link</a>
</body>
Wenn Ihr jetzt beide Quelltextblöcke (Wir haben mit Absicht den Code
ein wenig erweitert, aber die Erweiterung auf ein Minimum reduziert.)
nacheinander in eine neue Datei reinkopiert und diese als HTML-Datei speichert,
dann können Sie das Ergebnis sofort ausprobieren und rumspielen. Grundsätzlich
lassen sich adiese Klassendefinitionen auch in einer externen CSS-Datei
unterbringen.
|