Übersicht: Hintergrund, Bilder & bunte Schrift

Schluss mit dem grauen Einerlei

Logo, ein Bild muss her

Jetzt wirds (mir zu) bunt!

Aufgabe


Schluss mit dem grauen Einerlei

Der Hintergrund deines Dokumentes muss nicht weiß bleiben, oh Nein!


ACHTUNG: Die Grafik-Datei sollte immer im gleichen Verzeichnis sein wie deine HTML-Datei!
<<<

Logo, ein Bild muss her

Mit Bildern und Logos, Cliparts und animated Gifs fängt die wunderbare bunte Welt an, in der grundsätzlich nicht mehr gelesen wird (warum auch???). Wie also bindet man ein Bild ein? Ganz einfach, ein neues Tag muss her, das img-Tag, als Parameter wird über src (src=Source=Quelle) der Name des Bildes übergeben, im Beispiel wird die Datei "computer.gif" eingebunden:

             <img src="computer.gif" align="Middle">

Der zweite Parameter, align bestimmt die Ausrichtung des Bildes, eine kleine Auswahl gefällig?

align="Top" Ausrichtung des Bildes am Kopf der Zeile
align="Middle" Ausrichtung des Bildes in der Zeilen-Mitte des Absatzes
align="Bottom" Ausrichtung des Bildes am unteren Ende der Zeile
align="Right" Ausrichtung des Bildes rechtsbündig
align="Left" Ausrichtung des Bildes linksbündig

Im Beispiel oben sorgt align dafür, dass das Bild möglichst in der Mitte der Zeilenhöhe gesetzt wird, mal sehen, ob der Ein Computer! das kann?

Na toll, klappt doch prima! Animated Gifs sind übrigens kleine Animationen, gespeichert im GIF-Format, also nichts anderes als bewegte Bilder, Beispiel: Pluto, Sitz!

Das Ganze in HTML:
 <img src="hund.gif" height="35" width="220"
 align="bottom" alt="Pluto, Sitz!">
Hinzugekommen ist die Angabe der Höhe (=height) und der Breite (=width) des Bildes. Diese Angaben entnimmt man beispielsweise einem Grafikprogramm. Damit kann man die Größe der Graphik verändern. Die alt-Angabe dient für Menschen, die auf Graphik verzichten wollen: Du kannst hier Informationen über die Grafik machen, die in einem kleinem Rahmen angezeigt werden, wenn man mit der Maus über die Grafik wandert. Damit der Hund in der Mitte läuft, muss das Bild zentriert werden, dafür benutzt du das <div>-Tag, aber bitte nicht das schließende div-Tag vergessen, sonst wird der ganze folgende Text zentriert formatiert! (Klar?) Bevor ichs vergesse: du übergibst dem div-Tag als Argument noch die Ausrichtung, also hier:
<div align="center">

Und jetzt läuft unser Hund brav in der Mitte: Der Hund!


In der Mitte, habe ich gesagt!
Sitz!
<<<

Jetzt wirds (mir zu) bunt!

Wie bekommst du farbigen Text? Auch dafür gibt es ein Tag, das <font>-Tag, das noch viel mehr kann. Im Parameter color übergibst du die Farbe, hexadezimal versteht sich. Alternativ kannst du wie oben den Farbnamen angeben:
<font color="navy">
navy ist übrigens ein dunkler Blauton.

WICHTIG: Vergisst du das schließende FONT-Tag, dann wird der ganze Text bunt gesetzt, und zwar immer in der gleichen Farbe. Es sei denn, du änderst die Farbe. Schluß jetzt!
Und das ganze in HTML (leicht geschwindelt!):
Vergisst du das schließende <font color="#ff11dd">FONT-Tag,
dann wird der ganze Text bunt gesetzt, und zwar immer in der
gleichen Farbe. <font color="#0000dd">Es sei denn,
du änderst die Farbe.</font>
Schluß jetzt!</font>

<<<
<<<
    W. Spiegel, E-Mail: walter [dot] spiegel [at] web [dot] de