[ img ]

Bilder in HTML-Dateien einbinden

<img>

src

<img src="datei.jpg">

An der Stelle, an der Sie ein Bild wünschen, fügen Sie ein img-Tag ein (es brauch nicht abgeschlossen zu werden.).

Mit dem Attribut src geben Sie den Pfad zu der Bild-Datei an.

width, height

<img width="75" height="100">

Es empfielt sich die Breite und die Höhe des Bildes, gemessen in Pixeln, anzugeben. Die Bild-Datei muß extra geladen werden und mit diesen Angaben kann der Browser beim Seitenaufbau einen Platzhalter einfügen und warten bis das Bild geladen wurde, ohne dass sich das ganze Seiten-Lay-Out verschiebt.

alt

<img alt="text">

Beim alt-Attribut geben Sie als Wert einen erklärenden Text zum Bild ein; das hat folgende Vorteile:
Browser bei denen die Bild anzeige unterdrückt ist, zeigen dann den Text an, der beschreibt, was man seheh würde.
Solange das Bild geladen wird erscheint der Text im Platzhalter.
Bei manchen Browsern wird der Text in einem Fähnchen eingeblendet, wenn sich der Mauszeiger über dem Bild befindet; so können zusätzliche Informationen transportiert werden.

align

<img align="left">

Zum Ausrichten des Bildes im umgebenden Text steht Ihnen das align-Attribut zu Verfügung.

Beispiel

lowsrc

<img lowsrc="klDatei.gif">

Besonders bei großen Bild-Dateien ist es sinnvoll ein Bild mit gleichen Maßen, aber deutlich kleinerer Dateigröße, mit dem lowsrc-Attribut einzubinden. Das kleine Bild wird schneller geladen und später von der eigentlichen Bild-Datei abgelöst.

hspace vspace

<img hspace="8" vspache="16">

Mit den Attributen hspace und vspace können Sie dem Bild etwas Luft auf der Seite verschaffen. Diese biden Attribute regeln den Abstand des Textes zum Bild in horizontaler und vertikaler Richtung, jeweils gemessen in Pixeln.

Beispiel

border

<img border="0">

Mit dem border-Attribut wird die Breite eines Rahmens um das Bild angegeben, gemessen in Pixeln. Es empfielt sich die Begrenzung mit border="0" zu unterdrücken.

usemap

Mit dem Attribut usemap ist es möglich verschiedene Bereiche auf dem Bild zu definieren und unterschiedlich zu verlinken. Sie können rechteckige, runde und vieleckige Bereiche festlegen.

Da diese Methode ein kleines Zusatzprogramm oder einiges an mathematischem Geschick erfordert, wird dieses Thema auf den späteren Dreamweaver-Unterricht vertagt.

[ schulungen ]
[ ] [ html ]
[ ] [ ] [ html-Datei ]
[ ] [ ] [ head & body ]
[ ] [ ] [ text ]
[ ] [ ] [ ] [ absatz ]
[ ] [ ] [ ] [ listen ]
[ ] [ ] [ link ]
[ ] [ ] [ tabellen ]
[ ] [ ] [ ] [ tabelle ]
[ ] [ ] [ ] [ zelle ]
[ ] [ ] [ bild ]
[ ] [ ] [ frameset ]

[ webdesign ]