Wenn Sie eine Grafik, ein Foto oder ein Bild in ein HTML-Dokument einbinden wollen, geschieht das auf folgende Weise, egal um welches Format es sich handelt, GIF, JPEG oder PNG:
<img src="verzeichnis/datei.gif">
Mit dem Tag <img> wird eine Grafik eingefügt an der Stelle im Text, wo der Steuerbefehl steht.
src bezeichnet die Quelle der Grafik-Datei, d.h. die Stelle auf der Festplatte oder im Internet, wo die Datei steht. datei.gif ist eine Grafik-Datei im GIF-Format, datei.jpg oder datei.jpeg eine Grafik im JPEG-Format und datei.png im PNG-Format. Befindet sich die Grafik im selben Verzeichnis wie das HTML-Dokument, genügt folgende Angabe:
<img src="datei.gif">
Befindet sich die Datei in einem untergeordneten Verzeichnis, müssen Sie das Unterverzeichnis in die Pfadeingabe miteinbeziehen, z.B.:<img src="verzeichnis/datei.gif">
<img src="verzeichnis/unterverzeichnis/datei.gif">
Beachten Sie, dass Verzeichnisse bei HTML durch den Schrägstrich / und nicht \ wie bei Windows getrennt werden.
Befindet sich die Grafik in einem übergeordneten Verzeichnis, müssen Sie folgende Schreibweise verwenden:
<img src="../oberverzeichnis/datei.gif">
Eine Grafik im Internet wird mir einer absoluten Adresse referenziert. Für weitere Details, beachten sie den Text über Referenzieren.
<img src="http://www.ltma.lu/verzeichnis/datei.gif">
Das Tag <img> besitzt eine ganze Reihe von Attributen, von denen nur die wichtigsten angegeben werden. Die anderen Attribute werden nicht mehr direkt verwendet, sondern von Stylesheets gesteuert.
| Grafik: Eigenschaften |
< img src="datei.gif" width="Breite" height="Höhe" border="Rahmenbreite" alt="Alternativtext"> |
| Für Breite und Höhe gibt man einen Pixelwert an. Normalerweise ist dieser Wert schon vom Bildverarbeitungsprogramm vorgegeben. Sie können diesen Wert selbst verändern, um die Grafik zu verkleinern oder zu verzerren( das sollte besser in einem Bildverarbeitungsprogramm geschehen). Die Rahmenbreite wird in Pixeln angegeben und bezeichnet die Breite des Rahmens um die Grafik. Keine Angabe oder der Wert 0 zeichnet die Grafik ohne Rahmen. Mit Alternativtext gibt man einen Text ein, der angezeigt wird, wenn keine Grafik geladen wird, z.B. wenn der Anwender Grafiken generell ausgeschaltet hat |