Farben in einer HTML definieren
So, jetzt wird es ein wenig kompliziert. Die Farben werden in drei zweistelligen Hexadezimalzahlen angegeben. Die
ersten beiden Zahlen geben den Rotanteil an, die zweiten den Grünanteil, und die letzten beiden geben den
Blauanteil an.
Die kleine Zahl ist 00, dann geht es weiter mit 01,02, ... 09, dann kommt 0A,0B,0C,0D,0E,0F, und danach 10,11,12 bis 1F
und danach 20,21 usw. Die größte Zahl ist FF.
Vor der sechsstelligen Zahl wird ein Gatter # notiert. Ein paar Farben habe ich hier ein einer Tabelle dargestellt.
Farbtabelle
| rot |
#400000 |
#800000 |
#C00000 |
#FF0000 |
#FF4040 |
#FF8080 |
#FFC0C0 |
| grün |
#004000 |
#008000 |
#00C000 |
#00FF00 |
#40FF40 |
#80FF80 |
#C0FFC0 |
| blau |
#000040 |
#000080 |
#0000C0 |
#0000FF |
#4040FF |
#8080FF |
#C0C0FF |
| gelb |
#404000 |
#808000 |
#C0C000 |
#FFFF00 |
#FFFF40 |
#FFFF80 |
#FFFFC0 |
| türkis |
#004040 |
#008080 |
#00C0C0 |
#00FFFF |
#40FFFF |
#80FFFF |
#C0FFFF |
| rosa |
#400040 |
#800080 |
#C000C0 |
#FF00FF |
#FF40FF |
#FF80FF |
#FFC0FF |
| grau |
#202020 |
#404040 |
#606060 |
#808080 |
#AAAAAA |
#C0C0C0 |
#CACACA |
Ach ja, schwarz = #000000 und weiss = #FFFFFF
Eine ausführliche Farbtabelle mit über
200 Farben finden Sie im Anhang.
Farbnamen
Farben können auch mit Namen definiert werden:
| aqua |
beige |
blue |
black |
darkblue |
darkcyan |
darkgray |
darkgreen |
| darkmagenta |
darkred |
deepskyblue |
fuchsia |
gainsboro |
gold |
gray |
green |
| ivory |
lightcoral |
lightcyan |
lightgreen |
lightgrey |
lightyellow |
lime |
maroon |
| mediumblue |
navy |
olive |
orange |
pink |
plum |
purple |
red |
| rosybrown |
silver |
slategray |
teal |
violet |
white |
whitesmoke |
yellow |
Eine ausführliche Farbtabelle mit über
200 Farben finden Sie im Anhang.
Beachten Sie, das nur die 16 Grundfarben in der HTML-Variante strict erlaubt sind.
Textfarbe
Die Schriftfarbe können Sie mit den CSS-Stylesheet color: #00FF00 festlegen.
Hintergrundfarbe
Mit dem CSS-Stylesheet background-color: #00FF00 legen Sie die Farbe für den
Hintergrund fest.
Farben für Anker
Die Farben für Anker (Verweise, Sprundmarken) werden mit folgenden Stylesheet definiert:
a:link { color:#0000FF; }
a:visited { color:#FF0000; }
a:hover { color:#FFFF00; background-color: #0000FF; }
a:active { color: #000000; }
a:link | Farbe für Anker |
a:visited | Farbe für Anker, die schon besucht wurden |
a:hover | Farbe für Anker, die gerade von der Maus berühert wird |
a:active | Farbe für ein Anker, der gerade aktiviert ist |
Beispiel
Hier mal ein kompletter Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Meine erste Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color:#F4A460;
font-family:Arial, Helvetica;
}
h1 {
font-size:24pt;
background-color:#0000FF;
color:#FFFF00;
border:6px double navy;
height:34px;
}
p { font-size:16pt; }
div.urot {
background-color: #ff0000;
color: #ffff00;
}
a:link { color:#0000FF; }
a:visited { color:#FF0000; }
a:hover { color:#FFFF00; background-color: #0000FF; }
a:active { color: #000000; }
</style>
</head>
<body>
<h1>Meine erste Homepage</h1>
<p>So könnte meine erste Homepage aussehen.</p>
<div class="urot">
<p>Der Untergrund dieses Bereiches ist rot,
und die Schrift ist gelb</p>
</div>
<a href="../farben.html#beispiel">Zurück zum Kurs</a>
</body>
</html>
Das ganze sieht so aus
