Handout
Bilder
Aufgabenblatt 2
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 |
|---|
|
Bilder
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">
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.
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">