Bilder die in Htmlseiten eingebaut sind, sind nicht Bestandteil der Seite. Html ist eine Textbeschreibungssprache. Bilder lassen sich damit nicht beschreiben. Die Bilder müssen als separate Dateien abgespeichert werden. Sie werden dann von der Htmlseite aufgerufen und dargestellt. Dazu muss in der Htmlseite die Information enthalten sein, wo die Bilddatei gespeichert ist, und wie das Bild dargestellt werden soll.
img steht für "image". An vielen Stellen wird erklärt, dass das Englisch ist und "Bild" heißt. Das stimmt auch, aber image heißt auch "abbilden". Ich finde, diese Übersetzung passt besser. src steht für source. Das heißt "Quelle" oder "Ursprung". Es wird also die Datei http://deine.url.de/Bilder/lego.gif abgebildet. Das klappt natürlich nur, wenn sie existiert und tatsächlich ein Bild enthält und das Bild in einem Format ist mit dem der Browser auch umgehen kann. Du musst also nur <img src="***"> an der Stelle deiner Seite in den Quelltext deiner Seite eingeben, und das entsprechende Bild erscheint dort. *** musst du natürlich durch die Adresse des Bildes ersetzen.
Im zweiten Beispiel siehst einen sehr häufigen Fehler der im Internet oft gemacht wird. Wie du am oberen der beiden Screenshots erkennen kannst, sieht die Seite genau so aus, wie die aus dem ersten Beispiel. Wenn du das Beispiel nachbaust, wirst du aber zu dem Ergebnis im unteren Bild kommen. Dieses Kästchen mit dem roten Kreuz erscheint beim Internet Explorer immer dann, wenn das Bild nicht dargestellt werden kann. In anderen Browsern erscheinen andere Ersatzzeichen. In diesem Fall erscheint dieses Zeichen, weil das Bild nicht da ist. Wenn ich eine Seite veröffentliche oder weitergebe ist es sehr unwahrscheinlich, dass unter dieser Adresse (E:\mich\Bilder\lego.gif) auf dem PC des Betrachters das Bild gefunden wird. Auf meinem Rechner wird die Seite natürlich wie im oberen Bild gezeigt, weil bei mir das entsprechende Bild unter der Adresse auf der Festplatte E: gefunden wird.
Es gibt 2 grundsätzlich verschiedene Möglichkeiten die Adresse des Bildes (die
Quelle) zu beschreiben. Zum einen kann man die Adresse absolut angeben. Beispiele dafür sind
<img
src=
|
|
| |||
|
|
|
| |||
|
|
|
| ||
|
|
|
| |||
|
|
|
| |||
|
|
|
| |||
Eine relative Pfadangabe (Adresse) des Bildes beschreibt die Adresse des Bildes nach einer Art Wegbeschreibung. Ausgangspunkt dieser Beschreibung ist immer das Dokument selbst. Im Beispiel oben ist eine solche relative Pfadangabe verwendet worden. Die Syntax ist recht simpel, aber nicht selbsterklärend. Der gezeigte Quelltext soll der, der Seite beispiel.htm sein. Es soll das Bild lego.gif gezeigt werden. Ausgangspunkt ist also der Ort, an dem sich die beispiel.htm befindet. Also der Ordner Ordner_2. ../ bedeutet "einen Ordner nach oben". Wir sind dann also im Ordner Ordner_1;. Noch mal ../ und wir sind im Ordner mich. Bilder/ bedeutet, dass es im Ordner Bilder, der sich hier (also im Ordner mich) befindet, weitergeht. In diesem Ordner muß sich also das Bild lego.gif befinden.
|
|
| |
|
|
|
|
|
|
|
↑ In diesem Beispiel befinden sich Bild und Html-Dokument im selben Verzeichnis.
|
|
| |||||
|
|
|
| ||||
|
|
|
| ||||
|
|
|
| ||||
|
|
|
| ||||
|
|
|
| ||||
|
|
|
| ||||
↑ In diesem Beispiel befindet das Bild 4 Ebenen in der Ordnerhierarchie über dem Html- Dokument.
|
|
| |||||
|
|
|
| ||||
|
|
|
| ||||
|
|
|
| ||||
|
|
|
| ||||
|
|
|
| ||||
|
|
|
| ||||
↑ In diesem Beispiel befindet das Bild 4 Ebenen in der Ordnerhierarchie unter dem Html- Dokument. Nämlich im Ordner_5, der sich im Ordner_4 befindet. Dieser wiederum befindet sich im Ordner_3, der sich im Ordner_2 befindet. Ordner_2 befindet sich im selben Ordner wie das Html- Dokument.
Die relative Pfadangabe hat gegenüber der absoluten den Nachteil, dass das Bild nicht mehr gefunden wird wenn das Html- Dokument oder das Bild verschoben wird. Wenn z.B. im letzten Beispiel oben der "Ordner_3" in "Verzeichnis_3" umbenannt wird, wird das Bild nicht mehr gefunden. Ein großer Vorteil der relativen Pfadangabe ist die Tatsache, dass man die Website (nicht die Seite, sondern das ganze Verzeichnis mit allen Dateien) an beliebige Orte verschieben kann. Im letzten Beispiel ist es also unwichtig, ob sich der Ordner_1 im Internet, auf einer CD oder auf der Festplatte befindet. Da man normalerweise seine Website offline baut und dann komplett auf den Webspace speichert, kann man bei relativen Pfaden die gesamte Webspace offline ausprobieren, warten, erweitern oder auf CD archivieren. Man muß dann immer nur die geänderten und ergänzten Dateien im Internet aktualisieren.
Weiter geht's mit dem Kapitel Größe des Bildes.
Um einen Link zu setzen, der direkt auf diese Seite führt,
verwende folgende Url: