HTML & CSS Javascript Perl PHP Index | Download | Suche 
HTML I Schnellkurs | Einführung | Grundgerüst | Text | Bilder | Links | Farben | Tabellen
HTML IITrennlinien , Listen | Hintergrundbilder | Frames | Formulare | Meta - Tags
CSS Einführung | Style Sheets definieren | einzelne Angaben
PLUS Hilfreiches / Tabellen | Software / Tools | Upload der Homepage | Hyperlinks
  FAQ / Goodies | Java | CGI / Perl | SSI
HTML I : Farben   ||   EinführungRGB-Codehexadezimaler CodeFarben für Hintergrund , Text , Links

Einführung

Innerhalb von HTML wird man öfters mal Farben für ein bestimmtes Element definieren wollen - seien es Text , Hintergrundfarbe , Links oder Tabellenelemente . Dabei stellt sich die Frage , wie ein bestimmter ( visueller ) Farbwert in einen reinen , allgemein definierten Zahlenwert übertragen werden soll .

In Bezug auf HTML definieren wir jede Farbe als einen Mischwert aus Rot - , Grün - und Blauanteilen.
In 'Wirklichkeit' sind somit unendlich viele Farbkombinationen möglich , da die Skalierung der Farbanteile unendlich klein sein kann und somit unendlich viele Kombinationen möglich sind ( Ein Beispiel : Skala von 0 bis 100% für jede Farbe . Farbe X hat 45,4768478467 % Rot , 77,25625736 % Grün , 0,000000000000076% Blau - Es sind unendlich viele Farben möglich ) .

Auf dem Computer wird die Skala von 0 % bis 100 % eines Farbanteils in 256 Schritte unterteilt .
Wieso gerade 256 ? - 1 Bit , die elementarste Speichereinheit , kann 2 Zustände haben ( 0 und 1 ) . 1 Byte ( = 8 Bit ) kann folglich 28 = 256 Zustände haben . Eine gewisse Anzahl von Einzelschritten sollte schon vorhanden sein , um fotorealistische Darstellungen zu ermöglichen . Mit 256 Einzelschritten werden Speicher- und Rechnerkapazitäten optimal ausgenützt .

Wie viele Farben sind nun gesamthaft möglich ? Auch dies ist wieder eine eigentlich einfache Rechnung . Da jede Grundfarbe ( Rot , Grün , Blau ) 256 mögliche Farbwerte haben kann , gilt :

2563 = 16,7 Millionen Farben

Die Zahl kommt euch wahrscheinlich ziemlich bekannt vor . 16,7 Mio sind allgemein als 'high color' definiert und werden mindestens gebraucht , um eben z.B. ein Photo farbengetreu am Bildschirm wiederzugeben ( Die nächstkleinere Einstellung , 256 Farben , reicht dafür nicht aus ) . Die Anzahl der Farben kann bei allen Grafikkarten eingestellt werden , gaaanz alte können nur 256 Farben wiedergeben , oder 16 , 4 , 2 ... ( 256 z.B. in einem 33er Mhz , 2 z.B. auf 'nem 8088 touchscreen - monochrome ( schwarz / grün ) ... ähm ;)

Auf Systemen mit eingeschränkter Darstellung ( 256 , 16 , ... Farben ) werden bestimmte Farben auf allen Plattformen und Browsern absolut farbengetreu dargestellt . Man spricht von den 16 Grundfarben bzw. den 216 Standardfarben . 216 sind es deshalb , weil die einzelnen 256er - Farbtabellen der verschiedenen [relevanten] Plattformen sich jeweils in den letzten 40 Farben unterscheiden .
Eine Darstellung dieser Farben gibt es unter verschiedene Tabellen :Farbtabellen .
Die restlichen Farbwerte werden angeglichen .

RGB-Code

Zurück zur grundlegenden Definition einer Farbe . Zurück zu den 256 Schritten . Um eine Farbe eindeutig definieren zu können , brauchen wir als nächstes ein System , um die einzelnen Farbanteile ( in unserem Fall eine ganze Zahl von 0 bis 255 !! ( = 256 Werte möglich , die 256 kommt NICHT vor ) notieren zu können .

Folgende Darstellungsweise ist am naheliegendsten :

x , y , z   , wobei

x : Rotanteil
y : Grünanteil
z : Blauanteil

, wobei x, y und z jeweils eine ganze Zahl von 0 bis 255 ist .

In der Praxis sieht das dann für Schwarz so aus : 0 , 0 , 0 . für Weiss : 255 , 255 , 255 . für Rot : 255 , 0 , 0 . für ein dunkleres Rot z.B. 160 , 0 , 0 .

Diese Darstellungsweise ist auch weit verbreitet - allerdings nicht in HTML ! - und nennt sich RGB - Code .

hexadezimaler Code

RGB-Code ist recht umständlich in der Schreibweise . Es ist daher naheliegend , nach einer Darstellungsweise zu suchen , die weniger Zeichen benötigt , bei der ein Zeichen folglich mehr als nur 10 Zustände annehmen kann . ( Ausserdem werden die Kommas weggelassen ) .
Die Verfahrensweise ist auch hier wieder sehr einfach : Statt maximal drei Zeichen pro Farbanteil wollen wir , sagen wir mal , maximal zwei . Dazu wird einfach die Wurzel von 256 gezogen . Diese ist 16 . Schon haben wir - fast - den standardmässigen Farbcode in HTML , den hexadezimalen . ( ist griechisch und bedeutet 16 ... kann allerdings kein griechisch ;) .

Beispiel : color="#FF005B"

Erläuterung :

Um 16 Zustände pro Zeichen zu erreichen , werden neben den Ziffern 0-9 auch noch die Buchstaben A-F eingesetzt . Im gesamten erhalten wir so 16 verschiedene Zustände :

0 , 1 , 2 , ... , 8 , 9 , A , B , ... , E , F

Auf diese Art und Weise kann jeder Farbwert wiederum 256 Zustände annehmen - da 162 ja 256 sind .
( Zum Vergleich : Mit den Ziffern allein hätten wir unser 'normales' dezimales System - mit zwei Zweichen wären nur 102 = 100 Zustände möglich , also die Zahlen von 0 bis 99 . )

Dem so erhaltenen sechstelligen Code wird noch ein # - zeichen ( ' Gatterzeichen ' ) vorangestellt .


Müsst ihr mal von RGB-Code zu hexadezimalem umrechnen , könnt ihr den Umrechner benutzen oder die ganze Sache im Kopf umrechnen - Wie das geht , erspare ich euch jetzt an dieser Stelle ...

Farben für Hintergrund , Text , Links

In HTML können dateiweite Farbwerte vergeben werden für die obgenannten Elemente . Die Angaben dazu kommen ins <body> - Tag .

<body bgcolor="#000000" text="#FFFFFF" link="#009966" alink="#FF0000" vlink="#0000FF">

bgcolor : Hintergrundfarbe
text : Textfarbe
link : Farbe der Links
alink : Farbe des aktuellen Links
vlink : Farben der besuchten Links

Natürlich ist es auch möglich , eins oder mehrere dieser Attribute wegzulassen .

<body bgcolor="#000000" text="#FFFFFF" link="#009966">

Mit Hilfe von Cascading Style Sheets ist es können diese Einstellungen ausserdem projektweit festgelegt werden . Es können auch verschiedene Klassen von Links definiert werden , z.B. nicht unterstrichene Links fürs Navigationsmenü und 'normale' für den Rest . Mit Hilfe von CSS kann ebenfalls der hover - Effekt erzeugt werden ( Link verändert sich beim Drüberfahren ) . Dieser wird ab Internet Explorer 4.0 und Netscape 6.0 interpretiert .

Text kann - mit reinem HTML - auch individuell farblich verändert werden .
( Source : <font color="#FF0000"> individuell</font> )

CSS ist allerdings auch hier vorzuziehen , da eine flexiblere sowie erweiterte Gestaltung möglich ist und der Quellcode allgemein entlastet wird . Ausserdem sollte das <font> - Tag laut dem w3-Konsortium ( dem Verein , der die Empfehlungen und Spezifikationen bez. HTML u.ä. festlegt ) nicht mehr eingesetzt werden .



 |  Weiter zum nächsten Kapitel : Tabellen  | 
:::  © 2000/01 Martin Fux  :::  URL dieses Dokuments: http://www.flexdax.org/htmlkurs/farben.html