Bilder sind ein wesentlicher Bestandteil des Webdesigns. Sie machen eine Webseite für Besucher ansprechend. Bilder können einfach mit dem <img>-Tag in ein HTML-Dokument eingefügt werden.

• src: erforderliches Attribut. Der Wert ist der Pfad zum Speicherort des Bildes. Der Pfad kann absolut oder relativ sein;

• alt: erforderliches Attribut. Liefert alternativen Text, der angezeigt wird, wenn das Bild nicht dargestellt werden kann;

• width und height: geben die Bildgröße in Pixel an. Ohne diese Attribute wird das Bild in seiner Originalgröße angezeigt.

alt-Attribut

Die Bildbeschreibung sollte informativ und aussagekräftig sein. Sie hilft dabei, das Bild für Menschen zu beschreiben, die sehbehindert sind oder es nicht sehen können. Auf diese Weise liest der Browser das alt-Attribut vor, und ein Nutzer kann verstehen, warum dieses Bild auf der Website vorhanden ist.

Stellen wir uns folgendes Beispiel vor. Sie verfügen über eine Quelle zum Thema Pferderennen. Sie möchten zeigen, wie sich die Teilnehmer auf das Rennen vorbereiten.

Ein schlechter Wert für das alt-Attribut wäre:

Ein geeigneter Wert für das alt-Attribut wäre:

Der Alt-Text "Ein Mann auf einem Pferd" ist zu allgemein und bietet keinen Kontext. Er liefert eine grundlegende Beschreibung, vermittelt jedoch keine nützlichen Details über die Szene oder den Zweck des Bildes.

src-Attribut

Das src-Attribut kann sowohl absolute als auch relative Pfade verwenden, um den Speicherort der Bilddatei anzugeben.

Absoluter Pfad

Er gibt die vollständige URL der Bilddatei auf dem Webserver an. Zum Beispiel:

Das bedeutet, dass sich die Bilddatei unter dem Link https://example.com/images/image.jpg im Internet befindet. Jeder kann über diesen Link auf das Bild zugreifen.

Bitte untersuchen Sie das folgende reale Beispiel in der Code-Sandbox unten:

Hinweis

Um die Ordnerstruktur der Dateien zu betrachten, ziehen Sie den Schieberegler auf der linken Seite der Code-Sandbox-Oberfläche. In der oberen linken Ecke finden Sie eine Burger-Schaltfläche, die durch drei Streifen dargestellt wird. Durch Klicken auf diese Schaltfläche gelangen Sie zur Organisation der Dateiordner.

Relativer Pfad

Gibt den Speicherort der Bilddatei relativ zum aktuellen Dokument an. Zum Beispiel:

Das bedeutet, dass sich die Datei image.jpg im Verzeichnis images befindet.

Bitte untersuchen Sie das unten bereitgestellte reale Beispiel im Code-Sandbox. Sie finden dort den Ordner images, der die Datei sun.png enthält.

Hinweis

Zusammenfassend lässt sich sagen, dass ein absoluter Pfad den tatsächlichen Link darstellt, den jeder zum Zugriff auf ein Bild verwenden kann. Ein relativer Pfad hingegen ist ein Link im Kontext Ihres eigenen Projekts. Er verweist auf ein lokales Bild und einen Pfad, auf den jeder innerhalb des Projekts zugreifen kann.