Grafiken und die Verwendung von Farben mit HTML
Grafik und die verschiedene Möglichkeiten der Farben
Eine Möglichkeit, Farbe in Ihre Webseiten zu bringen, besteht darin, Grafiken einzufügen; Grafiken können Farbspritzer zwischen dem Schwarz, Grau und Weiß erzeugen. Einige Erweiterungen ermöglichen es Ihnen jedoch, die Farben der Seite selbst zu bestimmen, einschließlich der Hintergrundfarbe der Seite, sowie der Farben von Text und Verknüpfungen. Außerdem können Sie auch noch "Farbtupfen" für einzelne Zeichen auf der Seite festlegen. In diesem Abschnitt werden Sie alle diese Dinge erlernen.
In diesem Teil des Kapitels lernen Sie, wie Sie mit all diesen Veränderungen in HTML 3.2 zurechtkommen können. Farbattribute werden ebenfalls, wie es bei den meisten Präsentations-Attributen, die wir bis jetzt kennen gelernt haben, der Fall ist, von HTML 4.0 zu Gunsten der Style Sheets verworfen.
Farbbezeichnungen
Bevor Sie die Farbe von irgendeinem Teil Ihrer HTML-Seite änden können, müssen Sie wissen, welche Farbe das sein soll. Es gibt in HTML zwei Arten, die Farben mit den Farberweiterungen festzulegen:
- Sie können eine hexadezimale Zahl einsetzen, die diese Farbe repräsentiert.
- Sie können einen Farb-Namen aus einer im voraus definierten Liste verwenden.
Die flexibelste und am weitesten unterstützte Methode zur Farbfestlegung besteht darin, den numerischen Wert der Farbe herauszufinden, die Sie benutzen wollen. Die meisten Bildverarbeitungs-Programme haben einen so genannten Farbauswähler – eine Möglichkeit, mit der Sie eine einzelne Farbe aus einer ganzen Reihe verfügbarer Farben auswählen können. Die meisten Farbauswähler werden Ihnen im Gegenzug den Wert dieser Farbe in RGB-Form als drei Zahlen angeben (jeweils eine für Rot, Grün oder Blau – wofür der Name RGB ja auch steht). Jede Zahl reicht normalerweise von 0 bis 255, wobei 000 Schwarz und 255 Weiß ist.
Nachdem Sie Ihre Farbe(n) in der Form von drei Zahlenwerten von 0 bis 255 haben, müssen Sie diese noch in hexadezimale Werte umwandeln. Sie können einen beliebigen wissenschaftlichen Taschenrechner benutzen, der zwischen ASCII und Hex umwandelt, um diese Zahlen zu bekommen. Es gibt auch einen Haufen Freeware- und Shareware-Farbauswähler, die hier weiterhelfen, einschließlich HTML Color Reference und ColorFinder für Windows und ColorMeister und ColorSelect für Macintosh. Sie können auch rgb.html benutzen, ein Formular, das die Konvertierung für Sie vornimmt.
Die endgültige hexadezimale Zahl, die Sie benötigen, setzt sich aus allen drei Zahlen mit dem Nummernzeichen (
#) am Anfang zusammen:
#000000
#DE04E4
#FFFF00
Browser bieten einen weitaus einfacheren Weg Farben festzulegen. Anstelle von geheimnisvollen Zahlenspielen wählen Sie einfach einen Farb-Namen aus: Black, White, Green, Maroon, Olive, Navy, Purple, Gray, Red, Yellow, Blue, Teal, Lime, Aqua, Fuchsia oder Silver (diese Farben stammen von der Windows-Farbpalette, die nur 16 Farben zulässt.)
Obwohl Farb-Namen einfacher zu behalten und herauszufinden sind als die Nummern, bieten sie weniger Flexibilität in den Farben, die Ihnen zur Verfügung stehen. Außerdem werden die Farb-Namen in den Browsern nicht so weitgehend unterstützt wie die Farbnummern (obwohl Browser die Farb-Namen unterstützen). Behalten Sie das im Hinterkopf, wenn Sie Farb-Namen einsetzen, da Sie diese Farben in anderen Browsern verlieren können.
Nachdem Sie also einen Farb-Namen oder eine Farbnummer in der Hand haben, können Sie losgehen und diese Farbe auf verschiedene Teile Ihrer HTML-Seite anwenden.
Ändern der Hintergrundfarbe
Um die Hintergrundfarbe der Seite zu ändern, entscheiden Sie sich für eine Farbe, und fügen Sie sie dann der <body>-Kennung mittels eines Attributs namens bgcolor (backgroundcolor = Hintergrundfarbe) hinzu. Die <body>-Kennung ist, falls Sie das vergessen haben, die Kennung, die den gesamten Inhalt Ihrer HTML-Seite umschließt. <head> enthält den Titel und <body> fast alles andere. bgcolor ist eine HTML-Erweiterung, die von Netscape mit der Version 1.1 des Browser eingeführt wurde und Eingang in HTML 3.2 gefunden hat.
Um für Hintergründe Farbnummern einzusetzen, setzen Sie als Wert des bgcolor-Attributs die hexadezimale Zahl, die Sie in der vorigen Sektion herausgefunden haben, innerhalb von <body> ein. Das sieht dann so aus:
<body bgcolor="#ffffff">
<body bgcolor="#934ce8">
Um Farb-Namen zu verwenden, benutzen Sie einfach den Namen der Farbe als den Wert von
bgcolor:
<body bgcolor="#white">
<body bgcolor="#green">
Einige Browser erlauben es Ihnen, Farb-Namen ohne das einleitende Nummernzeichen (#) anzugeben. Obwohl dies bequemer erscheinen mag, ist die Einfügung eines einzelnen Extra-Zeichens doch wohl keine so große Mühe, wenn man bedenkt, dass dies mit vielen anderen Browsern nicht vereinbar ist.
Ändern der Textfarben
Wenn Sie schon die Hintergrundfarben ändern, dann ist es nur logisch, dass Sie auch die Farbe des eigentlichen Textes verändern möchten. Eine größere Anzahl von HTML-Attributen ermöglichen Ihnen das Ändern der Textfarbe Ihrer Seite.
Um die Text- und Verknüpfungsfarben zu ändern, verwenden Sie die Farb-Namen oder -nummern genauso wie für das Ändern der Hintergrundfarben. Wenn Sie diese Farbe bestimmt haben, können Sie dann eines der folgenden Attribute zur <body>-Kennung hinzufügen, wobei Sie den Farb-Namen oder die Farbnummer als deren Wert einsetzen:
text- Bestimmt die Farbe des gesamten Textes im<body>-Teil der Seite, einschließlich der Überschriften, des normalen Textes, des Textes innerhalb von Tabellen etc. mit Ausnahme des Verknüpfungstexteslink- Bestimmt die Farbe der normalen, noch nicht angeklickten Verknüpfungen auf der Seite (die oft per Voreinstellung blau sind).vlink- Bestimmt die Farbe der Verknüpfungen, die bereits verfolgt wurden (die oft per Voreinstellung violett oder rot sind).alink- Bestimmt die Farbe einer Verknüpfung, die in dem Moment durch einen Mausklick aktiviert wurde, solange der Maus-Button noch nicht losgelassen wurde ("aktiver Link"). Diese sind in der Browser-Voreinstellung oft rot.
Zur Erstellung einer Seite mit orangefarbenen Hintergrund, schwarzem Text und tiefroten unfollowed Links, sollten Sie folgendes <body>-Tag verwenden:
<body bgcolor="#ff9933" text="#000000" link="#800000">
Die Verwendung der folgenden Farb-Namen und unfollowed Verknüpfungen würden den gleichen Effekt erzielen:
<body bgcolor="orange" text="black" link="#800000">
Grafiken als Hintergründe
Ein letztes Thema in diesem Kapitel ist die Möglichkeit, ein Bild und nicht nur einen einfarbigen Hintergrund als Hintergrund für Ihre Seiten einzusetzen. Wenn Sie ein Bild als Hintergrund einsetzen, ist dieses Bild "gekachelt" – das heißt, das Bild wird reihenweise wiederholt, um das Browser-Fenster aufzufüllen.
Um einen gekachelten Hintergrund zu erzeugen, brauchen Sie zuerst einmal ein Bild, das als Kachel dienen kann. Wenn Sie ein Bild für diese "Kacheln" erzeugen, sollten Sie sicherstellen, dass das Muster zwischen den einzelnen Grafikenn glatt ineinander übergeht, wenn sie nebeneinander angeordnet werden. Dazu müssen Sie normalerweise das Bild in Ihrem Bildverarbeitungs-Programm sorgfältig editieren, damit die Kanten nicht sichtbar werden. Ziel dabei ist, dass sich die Kanten so sauber treffen, dass keine "Naht" zwischen den Kacheln entsteht, nachdem sie aneinandergelegt wurden.
Wenn Sie ein Bild haben, das Sie sauber aneinanderreihen können, brauchen Sie nur noch das background-Attribut, das Bestandteil des <body>-Tag ist. Der Wert von background ist ein Datei-Name oder eine URL, die auf Ihre Bilddatei zeigt, wie im folgenden Beispiel:
<body background="tiles.gif">
<body background="backgrounds/rosemarble.gif">
Die Browser bieten einen besonderen Dreh für gekacheltes Hintergrunddesign: ein fixiertes Kachelmuster, welches Wasserzeichen genannt wird. Die Idee, die dahinter steckt, ist, dass, wenn Sie die Seite herrunterrollen, nicht mehr alles (einschließlich des Hintergrundbildes) an Ihnen vorbeirollt, sondern nur der Vordergrund (Text und Grafiken). Die Hintergrundkacheln bleiben an ihrem Platz verwurzelt. Um diesen Effekt zu erzeugen, verwenden Sie das bgproperties="fixed"-Attribut zur <body>-Kennung:
<body background="backgrounds/rosemarble.gif" bgproperties="fixed">