Der img-tag um Bilder einzubinden

Um eine Bildquelle (eng. Image Source) einzubinden gibt es in HTML den Tag img:

<img src="bild.png" />

Mit diesem Tag wird das Bild „bild.png“ eingebunden.

Dieses muss sich in diesem Fall im gleichen Verzeichnis wir die HTML Seite befinden.
Um ein Bild in einem anderen Verzeichnis anzusprechen braucht man einen Pfad, das heisst, den Weg in ein anderes Verzeichnis auf dem Server auf dem die Seite gespeichert ist, oder die Adresse eines anderen Servers im Netz.

Es sind hier realtive, und absolute Pfade. Relativ im Verhältnis zum Verzeichnis in dem die Seite ist oder die absolute Adresse der Bilddatei.

Ratsam ist ein realtiver Pfad, das es sonst beim Überspielen auf den Webserver Probleme geben kann.

Hier Beipiele für realtiven und absoluten Pfade. Wir gehen dabei einfach mal von der folgenden Situation aus:

• Webserver und Arbeitscomputer unter Linux
• Homeverzeichnis des Webserver „/var/www“
• Verzeichnis für Bilder „/var/www/bilder“
• Name des Bildes meinbild.png

Wenn wir dieses Bild mit einem absoluten Pfad einbinden wollen müssten wir folgenden Tag verwenden:

<img src="/var/www/bilder/meinbild.png" />

Soweit so gut, aber was ist wenn wir jetzt unsere Seite dann auf einen Server im Internet verschieben, inklusiver aller Unterordner. Dann müssten wir alle Pfade überprüfen.

Wenn wir einen relativen Pfad verwenden sieht der Tag so aus:

<img src="./bilder/meinbild.png" />

Hier bleibt das Verhältnis der Seite zum Bild erhalten und es ist völlig egal, wo wir die Seite abspeichern.

Du kannst das ja mal ausprobieren.

Es wird zwar bei dir funktionieren, wenn du die Seite auf deinem Computer noch nicht gelöscht hast. Aber bei anderen nicht, denn der Browser sucht das Bild lokal unter /var/www/bilder/meinbild.png und dort wird der Bowser in den meisten Fällen nichts finden.

Der absolute Pfad ist nur auf deinem Rechner gültig, auf einem anderen Rechner existiert wahrscheinlich unter dem absolten Pfad gar kein Bild.

Ausserdem ist auch noch eine URL als Bildadresse möglich, also eine Adresse im Internet.

Ein Beispiel dafür wäre:

<img src="http://chileconnected.com/bilder/bild.jpg" />

Alternativtext

Da man manchmal auf Grafiken etwas warten muss und auch Suchmaschinen eine Berschreibung des Bildes wünschen, weil Sie ja nicht so gut „sehen“ können. Gibt es ein Attribut, mit dem man einen alternativen Text für ein Bild angeben kann. Dieser wird angezeigt wenn das Bild nicht geladen werden kann, oder oft auch wenn man die Maus über das Bild bewegt.

Dieses Attribut ist „alt“. Das sieht dann so aus:

<img src="./bilder/meinbild.png" alt=“bild“/>

Desweiteren muss man an die Grösse und Ausrichtung denken.

Das kommt im nächsten Text.