Aufgabe:

  1. Füge mindestens ein Bild in eine Box ein.

  2. Ergänze alternativen Text (alt), der den Inhalt beschreibt oder ein kleines Easter-Egg enthält.

  3. Experimentiere mit der Größe des Bildes über CSS.

Erklärung:

Bilder machen Webseiten lebendiger und helfen, Inhalte visuell zu vermitteln.

  • Das img-Element fügt Bilder ein.

  • src = Quelle des Bildes (Dateiname oder Pfad)

  • alt = Alternativtext für Barrierefreiheit und Suchmaschinenoptimierung.

  • CSS kann verwendet werden, um Größe, Rahmen oder Schatten anzupassen.

Technische Umsetzung:

1 Bild in einen Unterordner legen

Erstelle in dem Ordner mit deiner HTML und deiner CSS Datei einen Ordner Bilder. Lege dort dein Bild ab:

Ordnerstruktur

2. Bild einfügen

<img src="bilder/monster.jpg" alt="Monsterportrait" class="my-image">

  • src → Pfad zum Bild (relativ zum HTML-Dokument)

  • alt → beschreibt das Bild, wichtig für Nutzer mit Screenreader oder wenn Bild nicht geladen wird

  • class → für CSS-Styling

Bild in Webseite

2. CSS anpassen: 

.my-image {
  width: 300px;          /* Breite auf 300 Pixel festlegen */
  height: auto;          /* Höhe proportional anpassen */
  border-radius: 10px;   /* abgerundete Ecken */
  box-shadow: 2px 2px 10px rgba(0,0,0,0.3); /* leichter Schatten */
}

  • width = Breite des Bildes

  • height: auto = Höhe passt sich proportional an

  • border-radius = rundet Ecken ab

  • box-shadow = Schatteneffekt für Tiefe

Optional: CSS direkt in HTML-Datei

Du kannst das CSS auch direkt in der HTML über ein HTML-Attribut einfügen.

Dies kann so aussehen:

<img src="bilder/monster.jpg" style="width:200px;" alt="Monsterportrait" class="my-image">

3. Bilder in eine Box einfügen

<section class="box">
  <h2>Iron man</h2>
  <img src="bilder/ironman.png" alt="Iron Man" class="my-image">
  <p>I'm Ironman</p>
</section>

 

"

4. Tipps für Anfänger

  • Alle Bilder in einen eigenen Ordner wie bilder/ legen

  • alt-Text immer angeben, auch für dekorative Bilder

  • Bei mehreren Bildern konsistente Klassen nutzen, um gleiches Styling anzuwenden

  • Achtung, typischer Fehler: Windows blendet standardmäßig die Dateiendungen aus! Achte darauf, ob die Datei auf jpg JPG oder jpeg endet.

Grundlegende Fachkonzepte (zum Merken)

<img>-Element

  • Fügt Bilder ein

  • Benötigt mindestens src und alt

src (source)

  • Pfad zur Bilddatei, relativ oder absolut

alt (alternativer Text)

  • Beschreibt das Bild für Barrierefreiheit

  • Wichtig, wenn Bilder nicht geladen werden

CSS-Klassen für Bilder

  • Einheitliches Styling

  • Beispiel: Größe, Rahmen, Schatten

Responsive Bilder

  • Höhe automatisch an Breite anpassen: height: auto;

  • Flexibles Layout für unterschiedliche Bildschirmgrößen

Zuletzt geändert: Dienstag, 16. Dezember 2025, 09:18