 Imgage-Anweisung + Attribute
Ein Image lediglich mit den Angaben zur Quelle einzutragen ist nicht in Ordnung, wird aber immer wieder beobachtet.
Falsch:
<img src="bild.jpg">
Besser:
<img src="bild.jpg" width="120" height="90" border="0" alt="">
Breite und Höhe ist ein muss, Angaben mit dem alt-Attribut sollten ebenfalls eingetragen werden. Es stehen noch weitere Attribute zur Verfügung.
Die Refrenz für ein Image
Das HTML-Tag für ein Image sieht üblicherweise so aus:
<img src="bild.jpg" width="120" height="90" border="0" alt="">
Das Image wird links ausgerichtet angezeigt.
Rand bestimmen
<img src="bild.jpg" width="120" height="90" border="1" alt="">
das Image wird (hier) mit einem Rand von einem Pixel angezeigt.
 Dient ein Image als Link, beachten Sie die Informationen für die Randfarbe von Images in der Rubrik Verweise oder Fehlersuche. Falls sie die Randfarbe nicht mit CSS festgelegt haben, bestimmt die definierte Linkfarbe im Body-Tag die Bildrandfarbe. Bis auf einige Ausnahmen!
|
|
Image (ohne weitere Attributangaben) + Text
nach der Notation für das Image, wurde gleich ein Text eingetragen:
<img src="bild.jpg" width="120" height="90" border="0" alt="">Lorem ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
horizontalen Abstand + Ausrichtung bestimmen
Zuerst das Image-Tag, kein <br>, dann den Text
<img src="bild.jpg" hspace="10" align="left" ...
Lorem ipsum dolor sit amet, consectetuer ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
horizontaler Abstand zu benachbarten Elementen ist 10 Pixel
horizontalen Abstand + Ausrichtung rechts bestimmen
Zuerst das Image-Tag, kein <br>, dann den Text
<img src="bild.jpg" hspace="10" align="right" ...
Lorem ipsum dolor sit amet, consectetuer
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
horizontaler Abstand zu benachbarten Elementen ist 10 Pixel, Ausrichtung: rechts
vertikalen Abstand bestimmen
Zuerst das Image-Tag, kein <br>, dann den Text
<img src="bild.jpg" vspace="15" align="left" hspace="10" ... >
Lorem ipsum dolor sit amet, consectetuer ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Und noch ein wenig Text, mehr Text damit hier mehr Text steht, noch ein bisschen Text.
zu benachbarten Elementen Abstand vertikal 15 Pixel, horizontal 10 Pixel
alternativer Text
<img src="bild.jpg" alt="das ist der alternative Text" ... >
Der alternative Text erscheint bei MouseOver + Fehler
| 
| Ergebnis:
bei MouseOver ergänzerder Text |
|
| Ergebnis:
bei "Nichtanzeige" ergänzerder Text
Ursache 1 : Browsereinstellung
Ursache 2 : Bild nicht gefunden |
Titel
<img src="bild.jpg" title="das ist der Titel-Text" ... >
Der Titeltext erscheint bei MouseOver in den meißten Browsern vorrangig zum Alt-Text (FireFox, ...)
|
| Ergebnis:
bei MouseOver ergänzerder Text |
horizontaler Abstand + Text-Ausrichtung: top
<img src="bild.jpg" hspace="10" align="top"
Eine Textzeile
horizontaler Abstand + Text-Ausrichtung: middle
<img src="bild.jpg" hspace="10" align="middle"
Eine Textzeile
horizontaler Abstand + Text-Ausrichtung: bottom
<img src="bild.jpg" hspace="10" align="bottom"
Eine Textzeile
horizontaler Abstand + Text-Ausrichtung: mit CSS style="vertical-align:top;"
<img src="bild.jpg" hspace="10" style="vertical-align:top;"
Eine Textzeile
|
Home
ZURÜCK 
Rand