So fügen Sie Bilder zu einer HTML-Website hinzu

Das Hinzufügen von Bildern zu den Seiten Ihrer Website kann diese oft angenehmer für das Auge machen und Informationen besser vermitteln als die Verwendung von Text allein. Dieser Prozess wird mit HTML-Code und einer Bilddatei durchgeführt. Die Datei kann von einer anderen Webseite stammen oder auf einem Webserver gespeichert sein.

Verwenden des -Tags

Im HTML-Code für eine Webseite können Sie mit dem -Tag ein Bild hinzufügen. Im Tag müssen Sie vier Attribute angeben:

• Src – Das Quellattribut gibt den Speicherort des Bildes an. Sie können einen relativen Pfad verwenden, wenn sich das Bild auf demselben Server wie Ihre Site befindet, aber Bilder von einer anderen Site erfordern absolute Pfade.

• Alt – Das alternative Textattribut ist eine schriftliche Beschreibung des Bildes.

• Breite – Die Breite des Bildes.

• Höhe – Die Höhe des Bildes.

Ein optionales Attribut ist Border, mit dem Sie einen Rahmen um das Bild angeben können. Das Rahmenattribut wird in Pixelgröße definiert. Wenn Sie beispielsweise border=1 im -Tag verwenden, bedeutet dies, dass der Rahmen um das Bild 1 Pixel breit wäre.

Beispiele

Die folgenden Beispiele zeigen den tatsächlichen HTML-Code, der verwendet wird, um das Bild oben auf dieser Seite hinzuzufügen. Sie können überall im Hauptteil Ihrer Seite eingefügt werden. Die erste hat eine kürzere URL, da sich das Bild und die HTML-Datei auf demselben Server befinden. Die zweite ist, wie Sie von einem anderen Server aus auf unser Bild verlinken würden.

Beispiel eins

<img src="/jargon/h/html.png" alt="HTML" width="350" height="250">

Beispiel zwei

<img src="https://www.computerhope.com/jargon/h/html.png" alt="3D HTML" width="350" height="350">

Welche Bildformate kann ich auf einer Webseite verwenden?

Die gängigsten Bildformate für Bilder, Fotos, Logos und andere Bilder sind JPEG, GIF und PNG. Andere Bildformate, die nicht allgemein unterstützt werden, wie z. B. BMP, funktionieren möglicherweise nicht in allen Browsern.

Benötige ich Anführungszeichen um Attribute im img-Tag?

Jawohl. Obwohl die heutigen Browser normalerweise alle Fehler mit fehlenden Anführungszeichen um einen Attributwert beheben können, empfehlen wir, einen Attributwert in Anführungszeichen zu setzen, um Fehler zu vermeiden.