Diesen Artikel teilen
Infos zum Artikel
Artikel-Thema: HTML Webseite mit Bilder bestücken
Beschreibung: Mit dem 🌍 img-Tag verknüpft man die Webseite mit ✅ Bildmaterial, sei es eine Fotogalerie, ein einzelnes Artikelbild oder ähnliches Bildmaterial.
Zu den beliebtesten und wichtigsten HTML-Befehlen zählt zweifelsohne der HTML-Befehl img-Tag. Mit diesem Befehl ist es möglich, Grafiken in die Webseite einzubinden, wobei damit nicht nur Bilder und Fotos gemeint sind, die man auf der Seite sehen kann, sondern oftmals auch Bilder, die für die grafische Gestaltung genutzt werden können.
Dabei hat sich aber viel geändert, denn in den Anfangsjahren der Webseiten hat man jeden erwünschten Abstand mit unsichtbaren Grafiken vollgestopft. Das war zwar dann vom Endergebnis her das, was man erreichen wollte, aber zum einen wurde die Seite mit mehr Daten gefüllt als nötig und zum anderen ist im Zeitalter der barrierefreien Programmierung diese Form der Gestaltung nicht mehr zeitgemäß.
Webhosting mit viel Software bei Alfahosting (Affiliate-Link)
Im Beispiel ist der Aufruf für die Einbindung einer Grafik zu sehen. Dateiname ist der Name der Bilddatei (GIF, JPEG, JPG, PNG etc.) inklusive des Pfades ausgehend von der Seite, in der das Bild integriert werden soll. Liegt das Bild ein Verzeichnis höher, dann wäre der Pfad "../Bildname". Aber man kann und sollte vielleicht auch absolute Adressen verwenden, damit keine Fehler bei der Adressierung passieren können, also die URL der Webseite und danach der Pfad zum Bild.
Alt ist der ALT-Text, eine Alternative zur Bilddarstellung für jene Besucherinnen und Besucher, die das Bild nicht sehen können. Der Text dient zur Beschreibung, wobei man keine Romane schreiben sollte, aber die wesentliche Information darf es schon sein wie zum Beispiel "Schäferhund beim Laufen". Für viele unbekannt ist die Tatsache, dass dieser gerne weggelassene Text bei der Suchmaschinenplatzierung hilfreich sein kann.
Optional kann man die Breite (width) und Höhe (height) eintragen, um die Größe des Bildes festzulegen. Das wird heute aber eher selten gemacht, weil man über CSS die Bildgröße beeinflussen kann. Möglich ist es natürlich, dass man ein Bild manuell begrenzt. Dieses Thema ändert sich aber immer wieder, denn in der Zwischenzeit fordern die Suchmaschinen, dass man eine Dimension bei den Bildern anfügt - auch wenn mit CSS die Dimension verändert wird.
Zuletzt gibt es noch den "/"-Abschluss, um dem XML-Standard zu entsprechen. Lässt man diesen weg, dann sieht das Bild immer noch gleich aus, aber der Validator würde einen Fehler melden.
Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)
Ob man nun ein Bild einbaut oder eine ganze Serie in Form einer Bildergalerie spielt keine Rolle. Der img-Tag wird immer gleich eingesetzt und die Spielregeln sind daher auch die gleichen. Ob allerdings bei einer Bildergalerie für jedes Bild eine eigene Beschreibung möglich ist, hängt davon ab, wie die Galerie aufgebaut ist und ob man überhaupt dafür Zeit hat.
Die Bilder kommen eigentlich mit dem img-Tag alleine aus, sind aber enorm wichtig für den Gesamteindruck, wobei das auch vom Thema abhängt. Der img-Tag lässt sich verschieden ergänzen wie mit dem wichtigen ALT-Zusatz als Textinformation zum Bild und dann gibt es auch noch die Image-Map als Navigationsvariante auf Basis eines Hintergrundbildes.
Themenseiten
Artikel-Thema: HTML Webseite mit Bilder bestücken
Beschreibung: Mit dem 🌍 img-Tag verknüpft man die Webseite mit ✅ Bildmaterial, sei es eine Fotogalerie, ein einzelnes Artikelbild oder ähnliches Bildmaterial.
Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen
Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel