Um die präsentierten Inhalte unserer Website aufzupeppen, sollten wir uns anzusehen, wie wir Bilder aus anderen Dateien auf unserer Website einbinden können. Dies geschieht mittels des <img> Tags, dem wir über das Attribut „src“ den Pfad zur einzubindenden Bilddatei übergeben.
Beim <img> Tag handelt es sich um ein Monotag, es muss also, wie vorher besprochen, nicht geschlossen werden.
Suchen Sie sich nun ein Beispielbild und legen Sie es in dem Verzeichnis ab, in dem sich Ihre HTML Datei befindet. Folgender Code bindet nun das Bild auf Ihrer Website ein:
<b> Mein Bild: </b> <br>
<img src=“Bild.jpg“>
„Bild.jpg“ muss natürlich durch den Dateinamen Ihres Bildes ersetzt werden. Achten Sie darauf, dass er keine Leerzeichen enthält, da es sonst mit manchen Browsern zu Problemen kommen kann.
Dadurch wird das Bild in original Größe, also so wie die Grafikdatei an sich ist, eingebunden. Diese Größe können wir mit den Attributen „height“ und „width“ anpassen. Um die Optik nicht zu zerstören, sollten Sie darauf achten, das Verhältnis von Höhe:Breite nicht zu stark zu verändern, da die Bilder sonst verzerrt dargestellt werden.
<img src=“Bild.jpg“ height=“200“ width=“200“>
Bindet ein Bild ein und zeigt dieses quadratisch an (200 Pixel hoch, 200 Pixel breit).
Sie können auch nur einen der beiden Werte festlegen (zum Beispiel um mehrere Bilder gleich hoch anzuzeigen, die verschiedene Maße besitzen). Der Browser wird dann den fehlenden Wert automatisch so anpassen, dass das Bild Verzerrungsfrei angezeigt wird, also das gleiche Höhe:Breite Verhältnis aufweist, wie das Original in der Datei.
<img src=“Bild.jpg“ height=“300“>
Bindet ein Bild ein, das 300 Pixel hoch ist und gerade so breit ist, dass es nicht verzerrt wird.
Das Einbinden funktioniert auf diese Weise mit allen Bildern, die sich im selben Verzeichnis, wie die HTML Datei, an der Sie arbeiten, befinden. Möchten Sie auf ein Unterverzeichnis zugreifen und Bilder aus diesem einbinden, müssen Sie den exakten Pfad dorthin in das „src“ Attribut schreiben. Zum Beispiel:
<img src=“Bilder/Hunde/tina.jpg“ height=“100“ width=“200“>
Bindet ein Bild ein, das sich im Unterverzeichnis „Hunde“ im Unterverzeichnis „Bilder“ vom jetzigen Verzeichnis befindet.
Befindet sich das Bild auf das Sie zugreifen möchten in einem übergeordneten Verzeichnis, benutzen Sie den Operator „ .. “ um ein Verzeichnis höher zu gelangen.
Nehmen wir an, auf Ihrem Desktop liegt ein Ordner Namens „Arbeit“. In diesem Ordner befindet sich ein weiterer Order Namens „Website“ in dem Sie Ihre HTML Datei abgespeichert haben. Der Pfad der HTML Datei ist nun vom Desktop aus gesehen:
Arbeit/Website/index.html
Die Grafikdatei, die Sie einbinden möchten, befindet sich aber nicht im Ordner „Website“, sondern im Ordner „Arbeit“ selbst, hat also den Pfad:
Arbeit/Bild.jpg
Das Bild wird nun wie folgt eingebunden:
<img src=“../Bild.jpg“ height=“200“ width=“300“>
Sie können auf mehrere Verzeichnisse „höher“ gehen, in dem Sie den Operator öfter hintereinander verwenden:
<img src=“../../../Bild.jpg“ height=“200“ width=“300“>
Ähnlich wie bei den Tabellen können wir zur besseren Abgrenzung von der Umgebung auch das Bild mit einem Rahmen versehen. Wir verwenden dazu ebenfalls, wie bei den Tabellen, das Attribut „border“.
<img src=“bild.jpg“ height=“150“ width=“150“ border=“1“>
Stellt das Bild in allen Browsern mit Rahmen dar.
<img src=“bild.jpg“ height=“150“ width=“150“ border=“0“>
Stellt das Bild in allen Browsern ohne Rahmen dar.