 Image-Tag + Attribute
In HTML-Dokumenten können sie mit der <img>-Anweisung Grafiken einbinden. Dieses <img>-Tag hat mehrere Attribute, die sie unbedingt nutzen sollten!
(engl. 'image' [immitsch] bedeutet Bild oder Abbild)
|
|
Grafiken in HTML-Dokumenten richtig referenzieren
Eine Grafik lediglich mit den Angaben zur Quelle (SRC), ohne Breiten- und Höhenangaben 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="">
Angaben für Breite und Höhe sind ein muss, Angaben für das alt-Attribut sollten ebenfalls eingetragen werden.
Grafiken und Fotos sollten keine übergroße Dimension haben. Es wäre auch nicht fair, eine riesige Grafik mit 'getürkten' Angaben für Breite und Höhe lediglich kleiner darzustellen, statt die Grafik in passender Größe einzubinden. Falls Sie kein geeignetes Grafikprogramm zur Hand haben: Online geht das recht schnell und kostenlos. Skalieren, zu- und ausschneiden auf  http://www.resizeyourimage.com 
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=""> Text Text
Die Grafik wird ohne weitere Angaben links zum (übergeordneten) Objekt ausgerichtet oder im Fließtext angezeigt. Hört sich kompliziert an, bedeutet aber nichts anderes als dass es genau wie Text erst einmal links ausgerichtet ist und in der Reihenfolge auf Ihrer Seite erscheint, wie sie die Tags notiert haben.
Bild im Fließtext:
Lorem ipsum dolor sit amet  consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet <img src="brief-02.gif" ... > consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat.
HTML-Attribute und CSS-Formatierungen für Grafiken
Die möglichen Attribute für das <img>-Tag bieten bereits einige Möglichkeiten, sogar für Abstände und Ausrichtung zum umgebenden Text. Bitte beachten Sie, das CSS-Angaben weit zeitgemäßere und zusätzliche Möglichkeiten bieten!
1 Rand bestimmen mit HTML-Attribut
<img src="bild.jpg" width="120" height="90" border="1" alt="">
Die Grafik wird (hier) mit einem Rand von einem Pixel angezeigt. Die Randfarbe ist schwarz und entspricht in der Regel der Textfarbe die im Body-tag für Text eingetragen wurde. Dient eine Grafik als Verweisfläche, wird der Rand normalerweise in der Farbe angezeigt, die für Links notiert wurde.
 Dient eine Grafik 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!
|
|
<body vlink="#000000" alink="#FFFFFF" link="#000000" ... >
2 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.
3 horizontalen Abstand + Ausrichtung bestimmen mit HTML-Attributen
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
4 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
5 vertikalen Abstand bestimmen mit HTML-Attribut
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
6 alternativer Text durch HTML-Attribut
<img src="bild.jpg" alt="das ist der alternative Text" ... >
Der alternative Text erscheint bei MouseOver + Fehler
| 
| Ergebnis:
bei MouseOver ergänzerder Text (in den meisten Browsern) |
|
| Ergebnis:
bei "Nichtanzeige" ergänzerder Text
Ursache 1 : Browsereinstellung
Ursache 2 : Bild nicht gefunden |
7 Titeltext durch HTML-Attribut
<img src="bild.jpg" title="das ist der Titel-Text" ... >
Der Titeltext erscheint bei MouseOver in den meisten Browsern vorrangig zum Alt-Text (FireFox, ...)
|
| Ergebnis:
bei MouseOver ergänzerder Text |
8 horizontaler Abstand + Text-Ausrichtung: top
<img src="bild.jpg" hspace="10" align="top"
Eine Textzeile
9 horizontaler Abstand + Text-Ausrichtung: middle
<img src="bild.jpg" hspace="10" align="middle"
Eine Textzeile
10 horizontaler Abstand + Text-Ausrichtung: bottom
<img src="bild.jpg" hspace="10" align="bottom"
Eine Textzeile
11 horizontaler Abstand + Text-Ausrichtung (CSS): vertical-align:top;
<img src="bild.jpg" hspace="10" style="vertical-align:top;"
Eine Textzeile
12 Randbreite, -typ und -farbe (CSS): border;
<img src="bild.jpg" hspace="10" style="border: 8px solid #7F7F7F;"
Weitere CSS-Formatierungen in der Sektion CSS.
|
Home • Bilder • Grafiken einfügen