Bilder

Bilder werden mit dem Befehl <img> eingebunden. Dieser Tag wird - wie schon der <br>-Tag - nicht geschloßen.

Als Attribut gibt man die Quelle (engl. source) des Bildes an (relativ oder absolut, vgl. Links) - also den Pfad des Bildes und den Dateinamen: src="".

Die Breite width und Höhe height des Bildes müssen nicht angegeben werden, allerdings ist dies zu empfehlen. Ohne Angabe würde der Browser mit der Darstellung so lange warten, bis das (im Vergleich zum Text) sehr speicherintensive Bild geladen ist. Durch die Größenangabe kann der Browser einen Bereich reservieren, in dem das Bild geladen wird und schon den Text darstellen während das Bild noch geladen wird.

HTML-Guide
Handout

HTML-Guide Download Bilder

HTML-Guide Download Aufgabenblatt 2

Falls das Bild noch nicht geladen ist, wird der Alternativtext angezeigt, der durch das Attribut alt dem Bild zugewiesen wird. In neueren Browsern wird dieser Text auch angezeigt, wenn man mit die Maus über das Bild bewegt. Weiterhin ist der Text für Textbrowser wichtig, oder für Blinde und Sehbehinderte, die sich so besser auf der Seite orientieren können, oder den Text vom Programm vorgelesen bekommen.

Die Rahmenstärke kann man mit dem Attribut border festlegen. Der Wert gibt die Rahmenbreite in Bildpunkten (Pixeln) an. Einen Rahmen verhindere ich mit border="0".

Ein Beispiel:
<img src="bildname.jpg" alt="Alternativtext" title="Alternativtext" width="123" height="234" border="0">

Ausrichtung von und Textfluß um Bilder

Die Ausrichtung von Bildern legt man mit dem Attribut align fest. Diese können rechts- oder linksbündig sein. Der Textfluß ist dann automatisch links bzw. rechts des Bildes.
Es wird immer zuerst das Bild angegeben, der angegeben Textfluß bezieht sich auch den nachfolgenden Text.

Mit dem Befehl <br clear="all"> kann man den Textfluß neben dem Bild beenden und erzwingen, das der Text unterhalb des Bildes fortgesetzt wird.

Hintergrundbilder

Für Hintergrundbilder steht das Attribut background im <body>-Tag zur Verfügung. Als Wert wird die Quelle (relativer oder absoluter Pfad und Dateiname) festgelegt, z.B. <body background="hintergrundbild.jpg">