Heldenshop.de Anime Illustion Affiliate werden Affiliate werden
Affiliate werden Affiliate werden Affiliate werden Affiliate werden

Tutorials – Webdesign

Text- & Schriftformatierung  |  

5. Farben

Auf Monitoren werden Farben im so genannten "RGB-Modus" dargestellt. RGB steht für "Rot – Grün – Blau".
Um Farben auf Webseiten zu definieren, stehen euch die Farbnamen aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white und yellow zur Verfügung, die bereits im letzten Kapitel erklärt wurden. Diese Art der Farbangabe wird jedoch nicht unbedingt empfohlen.

Besser geeignet zur Farbdefinition sind die Hexadezimalfarben, bei denen ihr aus 16,7 Millionen Farben wählen könnt.
Vor einem Hexadezimal-Farbcode steht immer ein #-Zeichen ("Raute"). Ein solcher Farbcode besteht aus einer sechsstelligen Kombination aus den Ziffern 0-9 und den Buchstaben A-F.

Die Ziffern zeigen, wie viele Teile rot, grün und blau in einer Farbe anhalten sind – 0 steht dabei für "gar nicht" und F für "vollständig".

So sieht z.B. der Farbcode von weiß so aus:

HTML-Code:

#ffffff


der Farbcode von schwarz lautet:

HTML-Code:

#000000


und z.B. grün

HTML-Code:

#009933


Mit den Hexadezimalcodes können dann Schrift-, Hintergrund-, Rahmen- usw. -farben definiert werden.
Um die Standardfarben einer HTML-Seite festzulegen, stehen im BODY-Tag diverse Attribute zur Verfügung, denen Farbwerte zugewiesen werden können:

HTML-Code:

<body bgcolor="#e0e0e0" text="#333333" link="#800080" vlink="#4f154f" alink="#800080">

bgcolor (hier hellgrau) bestimmt die Hintergrundfarbe
text (hier fast schwarz) bestimmt die Textfarbe
link (hier violett) bestimmt die Farbe von Links
vlink (hier dunkles violett) bestimmt die Farbe von besuchten Links
alink (hier violett) bestimmt die Farbe vom Link, der gerade angeklickt wird

Innerhalb eines Textes kann die Farbe, die als Standardtextfarbe festgelegt ist, einfach mittels font-Tag überschrieben werden:

HTML-Code:

<font color="#4f154f"> ...Text... </font>

Ich habe hier einmal als Beispiel das Wort "Ausbildung" hervorgehoben.

Wie kommt man nun zum gewünschten Farbcode? Sicherlich könnte man mittels "ausprobieren" die gewünschte Farbe erraten. Dafür braucht man aber viel Zeit und es erfordert ein gewisses Maß an Erfahrung, die Farbanteile im Kopf zu errechnen.
Einfacher geht der Weg über ein Bildbearbeitungsprogramm wie z.B. Photoshop:


Mit einem Doppelklick öffnet sich der Farbwähler, wo die gewünschte Farbe eingestellt und der entsprechende Code rauskopiert werden kann.

Eine übersicht mit verschiedensten Hexadezimalcodes ist hier zu finden:
http://www.html-php-mysql.de/generatoren/colors.php


Idealerweise werden alle Farbeinstellungen zentral in einer CSS-Datei festgelegt – dazu werdet ihr hier später mehr erfahren.


nach oben

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
© 2002-2014 by Otaku-Welt.de