HTML Basics Tutorial

1.9. Hintergründe

Momentan hat unsere Webseite zwar einen schönen Text und coole Bilder, doch ein Hintergrundbild wäre eine feine Sache. Dieses kahle Standard-Weiß ist nämlich schon nervig. Also lernen wir kurzerhand einfach den Befehl für Hintergrundfarben!

Bisher hatten wir den body-Befehl, den wir seit Anfang des Tutorials kennen nicht verändert. Wie du am obigen Beispiel aber sehen kannst, kann er durchaus verändert werden. Dabei verwenden wir, wie beim Färben von Text, erneut das Attribut style. Der Inhalt von style ist diesmal jedoch etwas anders. So findest du hier diesmal diesen Code: background-color: #0000ff;.

Es ist sicher keine Überraschung zu sagen, dass "background" ein englisches Wort ist und für "Hintergrund" steht. In Kombination mit color, was "Farbe" bedeutet ergibt background-color also nahezu wortwörtlich die Hintergrundfarbe. Der RGB-Code #0000ff steht schließlich für die Farbe Blau. Natürlich hätte man hier statt #0000ff auch einfach das englische Farbwort blue schreiben können. Beide Varianten sind möglich und genauso korrekt.

Doch wie geht man vor, wenn man einen Hintergrund haben möchte, der eine individuell erstellte Grafik verwendet? Auch dies ist machbar und wird in diesem kleinen Beispiel gezeigt:

Der Code ist dem letzten immer noch ähnlich, bietet aber auch einiges neues. So steht hier diesmal statt background-color ein background-image. Wenn du dich an den Befehl für Bilder erinnerst (img) wirst du noch wissen, daß image für Bild steht. Hier wird also ein Hintergrundbild bestimmt!

Dieser Code muss nahezu genau so immer verwendet werden. Ändern tut sich hier eigentlich nur die Adresse des Bildes, die in der Klammer steht. In unserem Beispiel ist dies http://www.PlanetHTML.de/bilder/bild.jpg. Es ist natürlich auch erlaubt eine kurze URI-Adresse zu verwenden wie z.B. bild.jpg, wenn die Datei auch so erreichbar ist (im gleichen Ordner).

Ende des Basics Tutorial!

Herzlichen Glückwunsch, hiermit hast du das Basics-Tutorial von PlanetHTML.de absolviert! Du solltest nun in der Lage sein eine kleine Homepage mit einigen netten Sachen wie Bildern, farbigen Text, Links und verschiedenen Textformatierungen zu erstellen. Das ist schon sehr gut und wird dir bestimmt viel Freude machen!

Dies war jedoch noch lange nicht alles, was man mit HTML machen kann. Schaue dir bei Lust und Laune unbedingt noch die weiteren Tutorials an oder lese die themenspezifischen Tutorials zu z.B. Tabellen, Frames, Bildbereichen und vielen anderen. Du wirst noch staunen, was mit HTML noch möglich ist!

Zur HTML Tutorial-Übersicht...