Farben in HTML - aber richtig (FAQ 15 Sep)
Hubert Partl
Farben in HTML
Wie werden Farben sichtbar?
Im allgemeinen ist es guenstiger, wenn Sie dem Leser ueberlassen, welche
Schrift- und Hintergrundfarben er auf seinem Client-Rechner
verwendet - in Abhaengigkeit von den technischen Moeglichkeiten seines
Bildschirms und Druckers, den Lichtverhaeltnissen in seinem Zimmer, der
Sehschaerfe seiner Augen, seinen Gewohnheiten, dem Zusammenspiel mit
anderen Bildschirmfenstern - kurz, so wie es fuer ihn am angenehmsten
ist.
Wenn Sie als Autor trotzdem auf Ihren Web-Pages bestimmte Farben fuer
bestimmte Zwecke einsetzen wollen, dann muessen Sie die folgenden
Punkte beachten:
* Wenn Sie die Farbe fuer den Text festlegen, muessen Sie auch eine
dazu passende Farbe fuer den Hintergrund festlegen, damit nicht
z.B. bei einem Benutzer, der weisse Schrift auf blauem Hintergrund
eingestellt hat, ploetzlich blaue Schrift auf blauem Hintergrund
entsteht.
* Wenn Sie die Farbe fuer einen bestimmten Textteil festlegen, muessen
Sie auch dazu passende Farben fuer alle anderen Textteile
festlegen.
* Sie koennen sich nicht darauf verlassen, dass alle Leser die Farben
tatsaechlich sehen werden, deshalb muessen Sie zusaetzlich immer auch
andere Mittel einsetzen, um den erwuenschten Effekt zu erreichen
(z.B. <em> oder <strong>). Der Leser koennte den Text ja
auf einem Schwarzweissdrucker ausdrucken oder ihn mit einem
Web-Browser ansehen, der keine Farben darstellt oder nur fuer
16 Grundfarben konfiguriert ist, oder er koennte farbenblind sein.
* Achten Sie bei der Wahl der Farben darauf, welche Schriftfarben
auf welchen Hintergrundfarben gut lesbar sind, welche Farben
aesthetisch zueinander passen, und welche Assoziationen sie bei den
Lesern wecken (Verkehrszeichen, Temperaturen, Gefuehle, politische
Parteien, Firmen, Sportklubs, ...).
In HTML 2 gibt es keine Befehle fuer die Spezifikation von Farben,
sondern nur allgemein fuer Hervorhebungen mit <em> und
<strong>. In HTML 3.2 und 4 ist die Moeglichkeit vorgesehen,
Farben und andere graphische Effekte entweder im jedem Einzelfall mit
Parametern in <body> und <font> oder wesentlich eleganter und
allgemeiner mit Klassen und Style-Sheets zu vereinbaren. Diese
Moeglichkeiten werden freilich nicht von allen Web-Browser
unterstuetzt. Im folgenden wird angegeben, wie Sie diese verschiedenen
Moeglichkeit so _kombinieren_ sollen, dass Sie den gewuenschten Effekt
auf moeglichst vielen Web-Browsern erreichen.
Die Farben werden in diesen Befehlen meist in der Form #rrggbb
spezifiziert, wobei rr, gg und bb hexadezimale Zahlenangaben zwischen
00 (0) und FF (255) fuer den Rot-, Gruen- und Blauanteil sind. Damit
koennen theoretisch ca. 16 Millionen verschiedene Farben spezifiziert
werden, praktisch sollten Sie sich jedoch auf die 216 Farben
beschraenken, die aus Kombinationen von 00, 33, 66, 99, CC und FF
zusammengesetzt sind, oder ueberhaupt nur auf die aus 00 und FF
zusammengesetzten Grundfarben.
Fuer die Realisierung gibt es zwei Moeglichkeiten:
* die neue, elegante Methode mit Style-Sheets, die allerdings
nur von neuen Web-Browsern voll unterstuetzt wird,
* eine fehleranfaellige, etwas aeltere Methode mit <body> und
<font>, die von einigen Web-Browsern der mittleren Generation
unterstuetzt wird.
Farben mit <em> <strong> class <style>
Die beste und eleganteste Methode ist es, die Farb-Angaben mittels
Klassen-Angaben und in Style-Sheets zu realsieren. Dabei muss
man beachten, dass bei unvollstaendigen Angaben durch das "Cascading"
von allgemeinen und speziellen Benutzer- und Autoren-Angaben
unerwuenschte Effekte wie "blau auf blau" entstehen koennen, und deshalb
immer in jedem einzelnen Fall sowohl die Vorder- als auch die
Hintergrundfarben angeben. Ausserdem muss man die Hervorhebung durch
Farben (mit class=) auch durch "normale" Hervorhebungen mit <em>
<strong> etc. kombinieren, damit der gewuenschte Effekt auch bei
aelteren Web-Browsern oder Monochrom-Geraeten (z.B. Notebooks oder
Palmtops) und beim Ausdrucken auf Schwarz-weiss-Druckern erreicht wird.
_Beispiel:_
Sie wollen erreichen, dass der Name Ihrer Firma immer in blauer Farbe
und/oder fetter oder stark hervorgehobener Schrift erscheint. Als
Kontrast dazu waehlen Sie weiss fuer den Hintergrund, schwarz fuer den
normalen Text und verschiedene Rottoene fuer Hypertext-Links.
In Ihrem HTML-File "enzian.html" geben Sie zu diesem Zweck die
folgende Kombination von Befehlen an:
<html>
<head>
<title>Enzian</title>
<link rev=made href="webm...@www.enzian.com">
<link rel=stylesheet href="enzian.css" type="text/css">
</head>
<body>
<h1 class=enzian>Enzian</h1>
<p>
Wer
<strong class=enzian>Enzian</strong>
trinkt, wird schneller
<strong class=enzian>blau</strong>.
Dies wurde von
<a href="knieriem.html">namhaften Experten</a>
getestet ...
</body>
</html>
und im Style-Sheet-File "enzian.css" die folgenden Spezifikationen:
BODY { color: black; background: white }
A:link { color: #990000; background: white }
A:visited { color: #660000; background: white }
A:active { color: #FF0000; background: white }
.enzian { color: #0000FF; background: white; font-weight: bold }
Farben mit <body> <em> <strong> <font>
Viele (aber nicht alle) Web-Browser unterstuetzen die Angabe von Farben
in <body> und <font>.
In <body> sind saemtliche Farben fuer normalen Text, Hintergrund und
Link-Texte anzugeben, und man sollte unbedingt immer _alle_ fuenf
Farben gemeinsam spezifizieren, um unerwuenschte Effekte beim
Zusammenspiel zwischen den vom Autor definierten Farben und den vom
Benutzer in seinem Client eingestellten Praeferenzen zu vermeiden.
In <font> kann man aber nur die Text-Farbe angeben, und damit koennen
unerwuenschte Effekte wie z.B. blauer Text auf blauem Hintergrund durch
ein unguestiges Zusammentreffen von Autoren-definierten Farben und
Benutzer-Praeferenzen nicht ausgeschlossen werden. Es wird deshalb
dringend empfohlen, den <font>-Befehl _nicht_ zu verwenden, sondern
entweder nur die generellen Farbwuensche im <body>-Befehl oder die
Spezifikation von Farben fuer spezielle Elemente mit Klassen-Angaben
und Style-Sheets.
Jedenfalls muss man <font>-Befehle immer mit "normalen" Hervorhebungen
mittels <em> <strong> oder dergleichen kombinieren, damit der
gewuenschte Effekt auch bei aelteren Web-Browsern oder Monochrom-Geraeten
und beim Ausdrucken auf Schwarz-weiss-Druckern erreicht wird.
--
Hubert Partl pa...@mail.boku.ac.at
ZID BOKU Wien http://homepage.boku.ac.at/partl/
THof...@ubmedia.com
In article <7067fv$1rom$1...@www.univie.ac.at>,
pa...@hp01.boku.ac.at (Hubert Partl) wrote:
>
> Farben in HTML
[..]
> werden, praktisch sollten Sie sich jedoch auf die 216 Farben
> beschraenken, die aus Kombinationen von 00, 33, 66, 99, CC und FF
> zusammengesetzt sind, oder ueberhaupt nur auf die aus 00 und FF
> zusammengesetzten Grundfarben.
[..]
Die 216 ist ja ganz gut, nur was macht man mit den Leuten,
die noch 16 Farben eingestellt haben? Sowas soll's noch geben!
Und die 16 Grundfarben sind ja nun nicht das wahre!
Gruß, Thomas
--
German <Home of SGML> | http://www.sgml.de/ | mailto:To...@iiv.de
-----------== Posted via Deja News, The Discussion Network ==----------
http://www.dejanews.com/ Search, Read, Discuss, or Start Your Own
Marcel Bollmann
> die noch 16 Farben eingestellt haben? Sowas soll's noch geben!
> Und die 16 Grundfarben sind ja nun nicht das wahre!
Ich denke hier muss man ausnahmsweise nicht mehr auf solche Leute
achten, ich persönlich habe noch keinen getroffen der 16 Farben hat.
Heutzutage sollte auch jede Hardware in der Lage sein etwas mehr
darzustellen... :))
Bye,
Marcel
--
Marcel Bollmann +++ boll...@gmx.de
----------------------------------------->
Steffen Heinicke
>achten, ich persönlich habe noch keinen getroffen der 16 Farben hat.
>Heutzutage sollte auch jede Hardware in der Lage sein etwas mehr
>darzustellen... :))
du gehst von neuer Hardware aus ! Was ist mit alter die aber immer noch im
Einsatz Ist und zweifelsohne noch ihren Dienst tut !
also bei mir stehen auch noch neben dem Pentium zwei alte Atari STE mit 16
Farben :-) Okay ins I-Net geh ich da mit nicht ! Könnte ich aber da es in
dem Sektor auch gute Browser gibt !
CU Steffen