1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SELFHTML: HTML/XHTML / Dateiweite Einstellungen / Farben für Hintergrund, Text und Verweise</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description" content="Wie Sie Vordergrundfarben für Text und Verweise sowie eine Hintergrundfarbe für die Anzeige einer HTML-Datei definieren.">
<meta name="keywords" content="SELFHTML, HTML, XHTML, Textfarbe, Verweisfarben, Hintergrundfarbe, <body>, bgcolor=, text=, link=, alink=, vlink=">
<meta name="author" content="Stefan Münz, selfhtml@teamone.de">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="DC.Publisher" content="selfhtml@teamone.de">
<meta name="DC.Date" content="2001-10-27T08:00+01:00">
<meta name="DC.Identifier" content="http://selfhtml.teamone.de/html/dateiweit/farben.htm">
<meta name="DC.Language" content="de">
<meta name="DC.Rights" content="../../editorial/copyright.htm">
<meta name="DC.Date.Create" content="2001-10-27T08:00+01:00">
<meta name="SELF.Version" content="1">
<meta name="SELF.Pagetype" content="Information">
<meta name="SELF.Path" content="SELFHTML == ../../index.htm // HTML == ../index.htm // Dateiweite Einstellungen == index.htm">
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#AA5522" vlink="#772200" alink="#000000">
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td bgcolor="#FFEEDD" class="nav"><a class="an" name="top"><img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"></a> <a href="../../index.htm"><b>SELFHTML</b></a>/<a href="../../navigation/index.htm" target="_parent">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="../index.htm"><b>HTML/XHML</b></a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="index.htm"><b>Dateiweite Einstellungen</b></a></td>
</tr></table>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td bgcolor="#EEEEEE" class="doc" width="110"><img src="../../src/logo.gif" width="106" height="109" border="0" alt="SELFHTML"></td>
<td bgcolor="#EEEEEE" class="doc" valign="bottom" width="100%"><h2>Farben für Hintergrund, Text und Verweise</h2></td>
</tr>
<tr>
<td bgcolor="#EEEEEE" class="doc" valign="top" align="center">
<img src="../../src/dokx.gif" width="30" height="20" vspace="6" border="0" alt="Informationsseite">
</td>
<td bgcolor="#FFFFFF" valign="top" nowrap>
<p>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#hintergrund"><b>Farbe für den Hintergrund</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#text_verweise"><b>Farben für Text und Verweise</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#weitere"><b>Weitere Möglichkeiten</b></a><br>
</p>
</td>
</tr>
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc"> <a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> </td></tr>
</table>
<h2 class="Sh2"><img src="../../src/html32.gif" width="30" height="30" border="0" alt="HTML 3.2"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/deprecated.gif" width="30" height="30" border="0" alt="deprecated"><img src="../../src/msie2.gif" width="30" height="30" border="0" alt="MSIE 2.0"><img src="../../src/netsc11.gif" width="30" height="30" border="0" alt="Netscape 1.1"> <a class="an" name="hintergrund">Farbe für den Hintergrund</a></h2>
<p>Sie können eine Farbe für den Hintergrund des Anzeigefensters bestimmen. Die gesamte HTML-Datei wird auf dieser Hintergrundfarbe angezeigt.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/body_bgcolor.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body bgcolor="#CCFFFF">
<h1>Text, Verweise, Grafikreferenzen usw.</h1>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Die Angabe zur Hintergrundfarbe erfolgt im einleitenden <code><body></code>-Tag der HTML-Datei. Mit dem Attribut <code>bgcolor=</code> bestimmen Sie die Farbe für den Bildschirmhintergrund (<i>bgcolor = background color = Hintergrundfarbe</i>). Die gesamte HTML-Datei wird auf der hier definierten Hintergrundfabe angezeigt. Für die Farbauswahl gelten die Regeln zum <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../allgemein/farben.htm"><b>Definieren von Farben in HTML</b></a>.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Das Attribut <code>bgcolor=</code> ist als <i>deprecated</i> eingestuft und soll künftig vermieden werden. Den gleichen Effekt erreichen Sie nämlich auch mit Hilfe von <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../../css/index.htm"><b>CSS Stylesheets</b></a>, z.B. so:<br>
<code><body style="background-color:#CCFFFF"></code></p>
<p>Wenn Sie ein Dokument aus mehreren HTML-Dateien erstellen, das einen einheitlichen Hintergrund und Textvordergrund haben soll, müssen Sie die Hintergrundfarbe in jeder HTML-Datei neu definieren. Natürlich können Sie auch für jede HTML-Datei andere Farben definieren.</p>
<p>Wenn Sie eine Hintergrundfarbe definieren, sollten Sie auch passende (kontrastierende) Textvordergrundfarben definieren (siehe hierzu folgender Abschnitt).</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a>
</td></tr></table>
<h2 class="Sh2"><img src="../../src/html32.gif" width="30" height="30" border="0" alt="HTML 3.2"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/deprecated.gif" width="30" height="30" border="0" alt="deprecated"><img src="../../src/msie2.gif" width="30" height="30" border="0" alt="MSIE 2.0"><img src="../../src/netsc11.gif" width="30" height="30" border="0" alt="Netscape 1.1"> <a class="an" name="text_verweise">Farben für Text und Verweise</a></h2>
<p>Sie können dateiweite Farben definieren:</p>
<ul>
<li>für Text (gültig für alle Elemente wie Überschriften, normalen Fließtext, Listen usw.),</li>
<li>für <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../verweise/index.htm"><b>Verweise</b></a> zu noch nicht besuchten Stellen,</li>
<li>für Verweise zu bereits besuchten Stellen,</li>
<li>für Verweise, während sie angeklickt werden.</li>
</ul>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/body_textlinks.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body bgcolor="#663333" text="#FFCC99" link="#FF9966" vlink="#FF9900" alink="#FFFFFF">
<h1>Text</h1>
<a href="http://www.yahoo.de/">Verweis zu Yahoo</a>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Die Angaben erfolgen im einleitenden <code><body></code>-Tag der HTML-Datei. Für die Farbauswahl gelten die Regeln zum <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../allgemein/farben.htm"><b>Definieren von Farben in HTML</b></a>.</p>
<p>Mit <code>text=</code> definieren Sie eine Farbe für den Text.<br>
Mit <code>link=</code> definieren Sie eine Farbe für Verweise zu noch nicht besuchten Dateien (<i>link = Verweis</i>).<br>
Mit <code>vlink=</code> definieren Sie eine Farbe für Verweise zu bereits besuchten Dateien (<i>vlink = visited link = besuchter Verweis</i>).<br>
Mit <code>alink=</code> definieren Sie eine Farbe für Verweise, die der Anwender gerade anklickt (<i>alink = activated link = aktivierter Verweis</i>).</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Alle diese Attribute sind als <i>deprecated</i> eingestuft und sollen künftig vermieden werden. Den gleichen Effekt erreichen Sie nämlich auch mit Hilfe von <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../../css/index.htm"><b>CSS Stylesheets</b></a>, z.B. im Dateikopf zwischen <code><head></code> und <code></head></code> mit dem folgenden Quelltext:<br>
<code><style type="text/css"><br>
body { background-color:#663333; color:#FFCC99; }<br>
a:link { color:#FF9966; }<br>
a:visited { color:#FF9900; }<br>
a:active { color:#FFFFFF; }<br>
</style>
</code></p>
<p>Die definierten Textvordergrundfarben sollten mit der definierten Hintergrundfarbe kontrastieren. Wenn Sie z.B. eine dunkle Hintergrundfarbe definieren, sollten Sie helle Textvordergrundfarben wählen (z.B. Weiß, Gelb, Hellgrün und Hellblau).</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a>
</td></tr></table>
<h2 class="Sh2"><a class="an" name="weitere">Weitere Möglichkeiten</a></h2>
<p>Bei Verwendung von CSS Stylesheets müssen Sie zunächst wissen, wie man <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../../css/formate/index.htm"><b>CSS-Formate definieren</b></a> kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften:<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/eigenschaften/hintergrund.htm#background_color"><b>background-color</b></a><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/eigenschaften/schrift.htm#color"><b>color</b></a><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus"><b>Pseudoformate für Verweise</b></a></p>
<p>Das <tt><body></tt>-Tag kann auch <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../attribute/index.htm"><b>Universalattribute</b></a> enthalten.</p>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc">
 <a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a>
</td></tr>
<tr><td bgcolor="#EEEEEE" class="doc" align="right"><a href="hintergrundbild.htm"><img src="../../src/next.gif" width="10" height="10" border="0" hspace="10" alt="weiter"></a></td>
<td bgcolor="#FFFFFF"><img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="hintergrundbild.htm"><b>Hintergrundbild (Wallpaper)</b></a>
</td></tr>
<tr>
<td bgcolor="#EEEEEE" class="doc" align="right"><a href="../kopfdaten/durchsuchbarkeit.htm"><img src="../../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zurück"></a></td>
<td bgcolor="#FFFFFF" width="100%"><img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../kopfdaten/durchsuchbarkeit.htm"><b>Durchsuchbarkeit mit Serverkommunikation</b></a>
</td>
</tr>
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc"> </td></tr>
</table>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td bgcolor="#FFEEDD" class="nav"><a class="an" name="bottom"><img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"></a> <a href="../../index.htm"><b>SELFHTML</b></a>/<a href="../../navigation/index.htm" target="_parent">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="../index.htm"><b>HTML/XHML</b></a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="index.htm"><b>Dateiweite Einstellungen</b></a></td>
</tr></table>
<p>© 2001 <img src="../../src/mail.gif" width="15" height="10" border="0" alt="E-Mail"> <a href="mailto:selfhtml@teamone.de">selfhtml@teamone.de</a></p>
</body>
</html>
|
