6. Grafiken und Bilder

Zum Einfügen von Bildern in ein HTML-Dokument verwendet man den img-Tag.

Das folgende Bild ist durch diesen Tag eingefügt: <img src="/site/jopiwerkstatt/grafiken-und-bilder/11-images1.jpg" alt="Ein Screenshot" >

Dabei steht hinter src (Source) der Pfad und der Dateiname. Das Attribut alt beinhaltet einen Text, der angezeigrt wird, wenn das Bild mal nicht dargestellt werden kann bzw. wenn man mit der Maus darüber fährt.

Normalerweise genügt die Angabe des Dateinamens des Bildes: <img src="bild1.jpg">, das wäre dann die Minimalvariante. Dann muss das Bild aber im gleichen Ordner wie das aufrufende HTML-Dokument liegen. Vermeidet das Einbinden von Bildern aus irgendwelchen Pfaden. Ansonsten kann es passieren, dass die Bilder nicht erscheinen, wenn das Projekt in einen anderen Pfad verlegt wird.

Unterordner im Projektordner sind, gerade wenn es viele Bilder sind, hilfreich. Die Schreibweise wäre dann wie folgt: <img src="/bilder/bild1.jpg">, dabei ist "bilder" der Unterordner im Pfad des HTML-Dokumentes.

Um Grafiken zu formatieren können natürlich auch CSS benutzt werden. Hier ein Beispiel aus dem HTML-Seminar: Bilder und CSS

Beim Einfügen von Grafiken sind ein paar wichtige Hinweise zu beachten:

    • Pfad-Angaben beachten, das heißt also die Bilddateien direkt in den Projektordner ablegen bzw. sinnvolle Unterordner nutzen.

    • Bilder vom Typ *.jpg, *.png, *.bmp und *.gif können vom Browser direkt angezeigt werden

    • Grafiken können sowohl innerhalb eines HTML-Dokumentes angezeigt werden als auch als einzelne Datei im Browserfenster, z. B. indem man sie verlinkt. Beim Beispiel ist das Bild eingefügt und gleichzeitig ein Link auf die Bilddatei direkt.

    • Über die weiteren Eigenschaften im img-Tag wie z.B. alt könnt ihr euch in selfhtml informieren: https://wiki.selfhtml.org/wiki/HTML#Multimedia_und_Grafiken

    • Achtung: Grafiken so vor-verarbeiten, dass sie nur die tatsächlich anzuzeigende Bildgröße besitzen. Dadurch vermeidet man unnötige Ladezeiten und spart Speicherplatz auf dem Server.

weitere interessante Links

Lightbox für Bildbetrachtung: https://stellatest.de/anleitungen/css/lightboxmitcss/index.html#