Was wäre eine Webseite ohne Bilder. Sie verleihen der Webseite Leben und Informationen können visuell dargestellt werden. Das Einfügen von Bildern gestaltet sich für den HTML-Anfänger allerdings etwas kompliziert. Das ist es natürlich nicht, wenn erstmal das Verständnis dafür da ist, wie Bilder auf Webseiten eingefügt werden.
Pfad zum Bild
Wenn Sie nun mit HTML ein Bild einfügen möchten, läuft es technisch folgendermaßen ab.
- Das Bild muss natürlich erstmal vorhanden sein. Beachten Sie die Richtlinien für Namen im Internet. Das heißt, der Bildername sollte keine Umlaute wie ä, ö, ü oder ß sowie keine Leerzeichen oder sonstige Sonderzeichen haben. Ein korrekter Bildername wäre also mein-bild.jpg. Achten Sie bitte auch auf Groß- und Kleinschreibung. Denn im Internet sind für den Server Mein-Bild.jpg und mein-bild.jpg oftmals zwei unterschiedliche Dateien. Das liegt daran, dass die meisten Server unter Linux laufen. Und Linux kennt erstens keine Umlaute und Sonderzeichen, zweitens wird zwischen Groß- und Kleinschreibung unterschieden.
- Das Bild wird nun mit dem Befehl <img> in die Seite eingebunden. Dabei benötigt der Befehl zumindest noch eine Zusatzangabe. Denn, wir haben noch gar nicht angegeben, welches Bild wir einfügen wollen. Also erweitern wir unser Befehl in <img src="mein-bild.jpg">. Der Zusatz src= gibt an, welches Bild wir einfügen möchten. Der Bildername wird innerhalb " " angegeben.
- Wenn Sie nun die Webseite hochladen, müssen Sie darauf achten, dass BEIDE Dateien hochgeladen werden. Also die Webseite und das Bild. Hier passieren die meisten Fehler und das Einfügen von Bildern wird schnell frustrierend. Es ist aber technisch völlig logisch. Denn wenn Sie nur die Webseite hochladen, und jemand schaut sich die Webseite an, wie soll das Bild angezeigt werden, wenn das Bild nicht auf dem Server ist, sondern bei Ihnen Zuhause auf dem Rechner? Der Server kann mit Sicherheit nicht auf Ihrem Rechner daheim zugreifen, schon gar nicht wenn Sie den Rechner ausgeschaltet haben und evtl. schlafen. Daher ganz wichtig: Webseite UND Bild hochladen.
- Eine weitere Fehlerquelle ist der Pfad zum Bild. Also die Angabe, wo sich das Bild befindet. Im obigen Beispiel haben wir als Pfadangabe: src="mein-bild.jpg". Das bedeutet, das Bild muss im selben Ordner liegen wie die Webseite. Denn wir haben in diesem Beispiel keinerlei Ordnerangaben gemacht. Anders wäre es, wenn die Pfadangabe so aussehen würde: src="toller-ordner/mein-bild.jpg". Hier haben wir bei der Pfadangabe angegeben, dass sich unser Bild im Ordner toller-ordner befindet. Wenn Sie nun die Webseite hochladen, muss in dem Ordner wo sich die Webseite befindet, ein weiterer Ordner befinden, der toller-ordner heißt. In diesem Ordner muss das Bild vorhanden sein. Sonst bekommen Sie ein rotes X und das Bild wird nicht angezeigt.
- Achten Sie darauf, dass das Bild nicht von irgendwo eingebunden wird. Sondern das Bild muss hierarchisch gesehen, zumindest im selben Ordner liegen, wo sich auch die Webseite befindet. Wenn das Bild aus organisatorischen Gründen in Ordnern strukturiert wird, muss der Bilderordner von der Webseite erreichbar sein. Das ist eine weitere Fehlerquelle. Das kommt daher, dass Sie auf dem Server meistens einen Speicherplatz bekommen und nur auf Dateien innerhalb des freigegebenen Ordners zugreifen können. Achten Sie daher sehr genau auf die Pfadangabe.
Wenn Sie diese Grundlagen verstanden haben, können Sie nun ein Bild einfügen. Den Befehl haben Sie bereits kennengelernt. Und zwar:
<img src="mein-bild.jpg">
Mit diesem Befehl wird nun ein Bild mit dem Bildernamen mein-bild.jpg eingefügt.