HTML Images

Zuletzt aktualisiert am
Freitag 27. Mai 2022

HTML-Bilder

Bilder können das Design und das Erscheinungsbild einer Webseite verbessern. Wenn wir Bilder in unseren HTML-Dateien verwenden möchten, können wir dies einfach mit dem Tag <img> tun.

Das src-Attribut

Das erforderliche Attribut src gibt den Pfad (URL) zum Bild an.

  • Das erste Attribut für das <img> Tag wird als src– oder source-Attribut bezeichnet.
  • Wenn Sie sowohl das Tag als auch das <img> anchor <a> vergleichen, verhält sich das src-Attribut wie das href Attribut, das wir in den Links verwendet haben.
  • Das src Attribut ist der Ort, an dem wir die Bilddatei angeben.
  • In diesem Abschnitt befinden sich die Dateien im Ordner images.
  • Die Bilddatei kann mit relativen und absoluten Pfaden geladen werden, genau wie die Anker-Tags

Bild in HTML einfügen

	<img src="./two.png" />
	

Dies ist ein relativer Pfad, da wir dem Browser sagen, dass er das Bild mit dem Namen ./two.png finden soll. ./ bedeutet, dass wir den Browser anweisen, im selben oder im aktuellen Verzeichnis/Ordner zu suchen.

Das alt-Attribut

  • Das erforderliche alt-Attribut liefert einen alternativen Text für ein Bild
  • Ein weiteres wichtiges Attribut für die Bilder heißt alt, was für alternativen Text steht.
  • Dieser Text wird verwendet, um zu beschreiben, worum es in dem von uns verwendeten Bild geht.
  • Wenn der Browser das Bild nicht laden kann, wird der alternative Text im Browser angezeigt.
	<img
  src="./img/2.png"
  width="300"
  height="300"
  alt="Some Alternative Text"
  title="Some Wonderful Title for Image"
/>
	

Das Bild title attribut

Sie können Bildern auch title attribute hinzufügen, um bei Bedarf weitere unterstützende Informationen bereitzustellen.

	<img src="./img/2.png" width="300" height="300" alt="Some Alternative Text" />
	

Bildgröße – width und height

Sie können das style-Attribut verwenden, um die width und height eines Bildes anzugeben.

	<img
  src="./img/2.png"
  alt="Some Alternative Text"
  style="width:300px;height:300px;"
/>
/>
	

HTML-Bild einfügen

Sie können die Attribute width und height verwenden.

	<img src="./img/2.png" width="300" height="300" alt="Some Alternative Text" />
	

Anmerkung: Es definiert immer die Breite und Höhe des Bildes in Pixeln.

Verwenden Sie ein Bild als Link

Um ein Bild als Link zu verwenden, fügen Sie einfach das Tag <img> in das <a> Tag ein.

	<a href="url">
  <img src="/2.png" alt="CJ" />
</a>
	

Einige häufig verwendete Bildformate

Abkürzung Dateiformat Dateiendung
APNG Animated Portable Network Graphics .apng
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg

Warnung: Die meisten Bilder sind urheberrechtlich geschützt. Zeigen Sie kein Bild auf Ihrer Webseite an, es sei denn,

  • Sie besitzen das Bild.
  • Sie haben die Erlaubnis des Bildeigentümers.
html image
html pictures
image to html code
html insert image
add image html
embed image html
embedded image html