Bilder · Code mit Martin

Füge Fotos und Bilder zu deiner Website hinzu – und lerne, sie ordentlich in einem Ordner zu sortieren.

Zeig mir das: das Bild-Tag

Ein Bild fügst du mit dem <img>-Tag ein:

<img src="images/school.jpg" alt="Our school building">

Zwei Dinge sind wichtig:

src (source) sagt, wo das Bild ist. Hier: im Ordner images, die Datei school.jpg.
alt (alternative) ist eine Textbeschreibung des Bildes. Sie erscheint, wenn das Bild nicht lädt, und wird von Screenreadern vorgelesen. Fülle es immer aus – das ist höflich und Standard bei Profis.

Noch etwas: <img> hat kein schließendes Tag. Es „wickelt” nichts ein, es fügt sich einfach ein – manche Tags funktionieren so.

💡

Woher bekommst du Bilder? Eigene Fotos (bitte einen Elternteil, sie auf den Computer zu schicken), eigene Zeichnungen gescannt oder fotografiert – oder kostenlose Bilder von einer Seite wie pixabay.com. Nimm nicht einfach Bilder von Google – die gehören meist jemandem und dürfen ohne Erlaubnis nicht genutzt werden.

Ordnung halten: ein Ordner für Bilder

In VS Code erstelle in deinem my-website-Ordner einen neuen Ordner und nenne ihn images (Ordner-mit-Plus-Symbol oben links).
Kopiere 2–3 Bilder hinein. Du kannst sie sogar direkt in VS Code hineinziehen.
Benenne sie einfach um: Kleinbuchstaben, keine Umlaute, keine Leerzeichen. So etwas wie school.jpg, field.jpg, trip-mountains.jpg. Das erspart dir viel Ärger.

Jetzt du 💪

Füge mindestens zwei Bilder zu deiner Seite hinzu, die zum Inhalt passen (vielleicht eins direkt unter der Hauptüberschrift und eins in einem Kapitel).

🏫 Schulwebsite – Lösung

<h1>Riverside Elementary School</h1>
<img src="images/school.jpg" alt="Our school building">
<p>Welcome to our school's website.</p>

<h2>Clubs</h2>
<img src="images/gym.jpg" alt="Our gym during a floorball game">
<ul>
  <li>floorball</li>
  <li>ceramics</li>
</ul>

🙋 Persönliche Website – Lösung

<h1>Hi, I'm Jake</h1>
<img src="images/me.jpg" alt="Me with a soccer ball">

<h2>What I Like</h2>
<img src="images/minecraft-build.jpg" alt="My castle built in Minecraft">
<p>More than anything, soccer and Minecraft.</p>

🌍 Reisetagebuch – Lösung

<h1>Where We've Been 🌍</h1>

<h2>Last Trip: The Mountains</h2>
<img src="images/mountains.jpg" alt="View from the summit over the forest">
<p>Over the summer we hiked through the mountains.</p>

<h2>Greece 2025</h2>
<img src="images/sea.jpg" alt="A bay with crystal-clear water">

⚽ Vereinswebsite – Lösung

<h1>Riverside Eagles FC</h1>
<img src="images/team.jpg" alt="Our team photo after the match">

<h2>Recent Results</h2>
<img src="images/match.jpg" alt="Owen scoring a goal against the Wildcats">

⚠️

Bild wird nicht angezeigt? Prüfe: 1) Der Name in deinem Code stimmt genau mit dem Dateinamen überein (auch Groß-/Kleinschreibung!), 2) das Bild liegt wirklich im images-Ordner, 3) du hast nicht vergessen zu speichern und die Seite zu aktualisieren. Mehr Hilfe im Kapitel Wenn etwas nicht funktioniert.

✅

Kontrolliere dich selbst: Du siehst deine Bilder auf der Seite. Sie sind vielleicht viel zu groß oder verzerrt – kein Problem, die Größe fixen wir mit CSS.

Das nimmst du aus dieser Lektion mit

Das Tag <img src="..." alt="..."> fügt ein Bild ein – es hat kein schließendes Tag.
alt beschreibt das Bild in Worten. Fülle es immer aus.
Bilder in den Ordner images, einfach benannt: Kleinbuchstaben, keine Leerzeichen oder Umlaute.