Sie sind hier: Startseite -> HTML-Grundlagen -> Bilder -> Img-Tag

HTML-Grundlagen: img-Tag für Bilder

Img-Tag: Einbinden einer Grafik

Zu den beliebtesten und wichtigsten HTML-Befehlen zählt zweifelsohne der 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 genützt 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äß.

Im Beispiel ist der Aufrunf für die Einbindung einer Grafik zu sehen. Dateiname ist der Name der Bilddatei (GIF, JPEG, JPG, PNG) 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".

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.

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.

Ebenfalls interessant:

[aktuelle Seite]

Img-Tag

Informationen über den Img-Tag, mit dem man Grafiken in eine Webseite einbinden kann.

Image-Map

Informationen über die Image-Map, womit mehrere Links mit einem Bild verknüpft werden können.

Banner

Informationen über den Banner bzw. Werbebanner, der für die Online-Werbung wichtig ist und im Webdesign berücksichtigt werden muss.

Soziale Medien

Wenn der Artikel gefallen und/oder geholfen hat, bitte teilen:

Zurück zum Hauptthema

Übersicht Bilder

Startseite HTML-Grundlagen