4. HINTERGRUND- UND SCHRIFTFARBEN, HINTERGRUNDBILDER

Die HTML Eigenschaften, die wir in diesem Teil des Workshops bearbeiten wollen können das Gesamtbild unserer Homepage verändern. Nicht immer ist es nötig Grafiken einzubinden, um die Seite interessanter zu gestalten. Genauso wirkungsvoll sind die Effekte, die man mit Hilfe der Hintergrund- und Schriftfarben erreichen kann.

Inhalt:

Hintergrundbilder
Hintergrundfarben
Schriftfarbe verändern
Transparente Bilder


Hintergrundbilder Ein Hintergrundbild ist ein Bild, das hinter dem Text liegt. Die Grafik wird einmal für das ganze HTML Dokument definiert und über das ganze Fenster wiederholt.

Das Hintergrundbild wird im BODY BACKGROUND Tag bestimmt.

<BODY BACKGROUND="datei.gif">

Hier einige Beispiele:

Das Bild: wird als Hintergrund im folgenden Dokument eingefügt: Beispiel 1

Dieses Bild (um einiges größer): wird im Beispiel 2 benutzt.

Bilder, die man als Hintergrundbilder benutzt, werden genauso wie jede andere Grafik erstellt. Dennoch stellt Netscape einen Background sampler zur Verfügung für diejenigen, die fertige Bilder runterladen wollen.

Mehr zum Thema Hintergrundbilder erfährt man aus den Netscape Seiten: Controlling document backgrounds.

Hintergrundfarbe ändern Anstatt Hintergrundbilder einzubinden kann man auch eine andere Möglichkeit der HTML Sprache nutzen und die Hintergrundfarbe einheitlich für das ganze Dokument bestimmen.

Um dies durchzuführen benutzt man den Tag BODY BGCOLOR:

<BODY BGCOLOR="#xxxxxx"> wo xxxxxx steht für die Hexadezimalzahl, die die Anteile der drei Grundfarben: Rot, Grün und Blau enthält.

Man kann jeder Farbe einen Wert zwischen 000000 (schwarz) und FFFFFF (weiß) zuordnen.

So wird im Beispiel 3 weiße Farbe im Hintergrund erscheinen. Der entsprechende Eintrag im HTML Dokument sieht dann so aus:

<BODY BGCOLOR="#FFFFFF">

Bei der Wahl der Hintergrundfarbe soll man beachten, daß nicht jede Farbe auf den Monitoren mit niedriger Auflösung sichtbar wird. Folgende Palette stellt alle Farben dar, die man ohne Sorgen in jedem Fall benutzen kann. Sie beinhaltet auch die hexadezimale Kodierung der "universalen" Internetfarben. Zusätzliche Informationen zur hexadezimalen Schreibweise findet man auf folgenden Seiten:

Schriftfarbe Genauso ist es möglich die Schriftfarben im HTML Dokument zu ändern. Dazu wird folgender Tag benutzt:

<BODY TEXT="#xxxxxx">

Bemerkung:

  • Die Schriftgröße kann man unabhängig von der Änderung der Hintergrundfarbe durchführen.

In dem Beispiel4 wird der gelbe Text auf schwarzem Hintergrund dargestellt. So wurde der ensprechende HTML Eintrag definiert:

<BODY BGCOLOR="#000000" TEXT="#FFFF00">

Die Linkfarben, die man nicht definiert hat, werden normalerweise im Browser folgenden Standardfarben zugeordnet: blau einem normalen und violett einem besuchten Link. Um einem Link eine andere Farbe zuzuordnen benutzt man den Tag <BODY LINK...> (für einen normalen Link), <BODY VLINK...> (für einen bereits besuchten Link) und <BODY ALINK...> (für einen aktiven Link):

<BODY LINK="#xxxxxx" VLINK="#xxxxxx" ALINK="#xxxxxx">

In dem Beispiel 5 ist der Hintergrund schwarz, der Text weiß, die Links sind gelb, werden aber blau, wenn man sie anklickt und rot, wenn sie schon besucht wurden. Der Eintrag im HTML Dokument sieht wie folgend aus:


<BODY BGCOLOR="000000" TEXT="#ffffff" LINK="#FFFF00" VLINK="#ff0000" ALINK="0000FF">

Man kann auch die Farbe von Einzelwörtern oder Textteilen bestimmen:

<FONT COLOR="#xxxxxx">...</FONT>

Beispiele:

<FONT COLOR="#FF0000">Dieser Text ist rot</font>

Sieht so aus:

Dieser Text ist rot

<FONT COLOR="#0000ff">Dieser Text ist blau</font>

würde dagegen so aussehen:

Dieser Text ist blau.

Transparente Bilder Falls man sich entschieden hat Hintergrundfarbe oder ein Hintergrundbild einzufügen, stellt man sehr oft fest, daß die einzelnen Grafiken nicht mehr zu dem Gesamtbild der Seite passen. Um die Situation zu retten kann man die Bilder durchsichtig machen. Diese Eigenschaft nennt sich Transparenz und wird durch unterschiedliche Programme unterstützt. Manche Editoren enthalten jetzt auch eine Option, die es ermöglicht, eine der Farben in der existierenden Grafik als transparent zu definieren.

In der Anfangszeit des WWW konnte man sich auf verschiedenen Internet-Rechnern transparente Bilder anhand eigener Vorlagen transformieren lassen. Eine Adresse hieß: The Transparent/Interlaced GIF Resource Page.


Workshop 5: Web Seiten Design


© Friedrich-Ebert-Stiftung, Aleksandra Sowa
Januar 1997 (Joachim Vesper, September 1999)