HTML Schnellstart / HTML Schnellstart Modul 2
0%
In Bearbeitung

Bilder

Nun haben wir mit Texten gearbeitet. Wird Zeit, dass wir mal auf andere Inhaltsarten umsteigen. Ein Bild hast Du bereits im letzten Modul verwendet. Jetzt möchte ich dir ein paar Details dazu zeigen.

Mit dem img-Element und dem src-Attribut kannst du ein Bild auf deiner Webseite darstellen:

<img src="/assets/img/milkyway.jpg">
Code ausprobieren ×

 

milkyway.jpg

Besonderheiten des img-Element

Du erinnerst dich an das <br> und <hr>-Element? Auch das img-Element benötigt kein Endelement.

Attribute für die Bildhöhe und -breite

Das img-Element hat aber noch weitere Attribute. Die beiden Wichtigsten sind width und height.

  • Mit width bestimmst du die Breite des Bildes.
  • Mit height bestimmst du die Höhe des Bildes.

Der Wert ist ein Zahlenwert, der in die Größe in Pixeln angibt (z.B. width="150").

Code-Beispiel - Img-Element mit Höhe und Breite:

<img src="/assets/img/milkyway.jpg" width="300" height="200">
Code ausprobieren ×
milkyway.jpg - Größe angepasst auf 300x200 Pixel (Breite x Höhe)

Wenn du die genauen Pixel nicht kennst, kannst du aber auch einen Zahlenwert in Prozent verwenden (z.B. wert="50%"), dann wird die Größe relativ zum Elternelement bestimmt.