HTML Basics Tutorial

1.8. Farben

Wir sind dem Ende meines Basic-Tutorials schon nahe. Doch jetzt widmen wir uns noch etwas wichtigem: den Farben! Es wäre doch schön, wenn wir unseren Text etwas bunter gestalten könnten, oder?

Tja, und abermals biete ich zwei Varianten an. Der Grund ist jedoch der, dass beide leicht anders funktionieren. Doch schauen wir uns dazu erst einmal die beiden in Ruhe an...

Die Funktionsweise ist sehr einfach. Das span funktioniert genauso wie die inzwischen bekannte Absatzformatierung div. Im Gegensatz zu div enthält span jedoch keinen automatischen Zeilenumbruch am Ende. Dies hat in der Praxis den entscheidenden Vorteil, dass man mit Hilfe von span auch einzelne Buchstaben und Elemente färben kann, während div nur für Absätze einsetzbar ist.

Innerhalb der beiden Formatierungsbereiche span und div befindet sich jeweils das Attribut style. Dabei handelt es sich um ein sehr flexibles Attribut, welches für zahlreiche Formatierungen eingesetzt werden kann. Welche Formatierungen genau vorgenommen werden steht in den Gänsefüßchen des style-Attributes.

In unserem Fall ist dies color: red;. Color ist (mal wieder) ein Wort aus dem Englischen und bedetet übersetzt Farbe. Red ist ebenfalls englisch und übersetzt die Farbe Rot. Nun dürfte klar sein, was hier geschehen ist. Mit Hilfe von color: läßt sich eine Farbe zuweisen! Beachte beim Abtippen, dass hinter color ein Doppelpunkt(:) steht und hinter red ein Semikolon (;)!

Soweit sogut, doch bei den Farben gibt es noch eine wichtige Sache. So kann man die Farbe entweder mit einem englischen Farbwort wie z.B. red, green, yellow, black, blue, orange, pink, grey, white angeben oder mit einem RGB-Farbcode. Da über die englischen Farbwörter nur ein winziger Teil aller Farbmöglichkeiten abgedeckt werden kann, wird man es früher oder später mit dem RGB-Farbcode zu tun bekommen.

Der RGB-Farbcode ist jedoch nichts extrem schweres oder kompliziertes. Das RGB steht als Abkürzung für Rot Grün und Blau. Aus diesen Grundfarben werden ja bekanntlich alle anderen Farben gemischt. Wenn man also statt einem englischen Farbwort wie red die Farbe Rot mit einem RGB-Code darstellen will, muss man nur das korrekte Mischverhältnis angeben. Dies ist natürlich viel Rot und kein Grün und Blau. In der Praxis sieht das so aus: #ff0000.

Nanu - das sieht aber komisch aus? Stimmt. Doch nach einer kleinen Erklärung wird alles klar - du wirst schon sehen! Wie bereits erwähnt steht RGB für Rot Grün und Blau. Wenn man sich nun den Code ansieht, merkt man, daß hinter der Raute (#) 6 Zeichen stehen. Jeweils zwei davon bestimmen wie stark jede der drei Farben vorhanden ist. In unserem Beispiel ist Rot mit "ff" vorhanden und Grün und Blau mit jeweils "00". Wenn man nun auch weiß, dass 0 die kleinste Zahl und f die höchste Zahl in einem Hexadezimalsystem ist, ist schon alles klar.

Bei einem Hexadezimalsystem gibt es, wie beim Dezimalsystem, Zahlen von 0 bis 9. Nach der 9 kommt jedoch keine 10, sondern ein a. Nach dem a folgt dann ein b, c, d, e und schließlich ein f. Somit gibt es also 16 verschiedene Möglichkeiten mit jeder Ziffer. Daher leitet sich übrigens auch der Name Hexadezimalsystem ab, während Dezimalsystem für ein 10er-Rechensystem steht.

Du brauchst dir jedoch keine Sorgen machen, dass du selbst Farben berechnen mußt. Dies kannst du zwar machen, doch die praktische Farbentabelle von PlanetHTML nimmt dir hier viel Arbeit ab, da dort eine Vielzahl an Farben präsentiert werden und du nur noch den jeweiligen Code abschreiben brauchst ;)

Neben dem Färben von Texten kann auch der Hintergrund von Webseiten gefärbt werden. Wie das funktioniert, erfährst du im nächsten Abschnitt!

Weiterlesen...