🖼️ Bilder in HTML
💡 Was du heute lernst:
Wie du Bilder in deine Webseite einfügst und anpasst.
Wie du Bilder in deine Webseite einfügst und anpasst.
📸 Das Bild-Tag - <img>
Bilder werden mit dem <img>-Tag eingefügt. Achtung: Dieser Tag hat kein schließendes Tag!
<img src="bild.jpg" alt="Beschreibung des Bildes">
📌 Wichtige Attribute:
src = Source - Wo liegt das Bild?alt = Alternativ-Text - Was steht da? (wichtig für Barrierefreiheit!)
🌐 Bilder aus dem Internet
<img src="https://picsum.photos/300/200" alt="Zufälliges Bild">
💾 Bilder vom eigenen Computer
Bild im gleichen Ordner:
<img src="mein_bild.jpg" alt="Mein Bild">
Bild in einem Unterordner:
<img src="bilder/foto.jpg" alt="Urlaubsfoto">
Bild aus dem übergeordneten Ordner:
<img src="../logo.png" alt="Logo">
📏 Bildgröße anpassen
<img src="https://picsum.photos/300/200" alt="Bild" width="200" height="150">
Original (300x200)
Verkleinert (200x150)
Vergrößert (400x300)
💡 Tipp: Wenn du nur
width angibst, passt sich die height automatisch an (proportionale Skalierung).
🖱️ Bilder als Link
<a href="https://www.google.de">
<img src="https://picsum.photos/200/150" alt="Klick mich">
</a>
<img src="https://picsum.photos/200/150" alt="Klick mich">
</a>
🔗 Klick auf das Bild → führt zu Google
🎯 Übungsaufgabe
✏️ Aufgabe 1 - Deine Bilder:
Erstelle eine Seite mit deiner Bildergalerie:
- Lade 3 Bilder von deinem Computer herunter (oder suche 3 im Internet)
- Füge sie in eine Seite ein
- Gib jedem Bild eine Beschreibung (alt-Text)
- Passe die Größe auf 300x200 an
- Erstelle einen Ordner "bilder" und lege ein Bild hinein
- Zeige das Bild aus dem Ordner
✏️ Aufgabe 2 - Bild als Link:
Erstelle ein Bild, das zu deiner Lieblingswebseite führt.
📋 Zusammenfassung
| Code | Beschreibung |
|---|---|
<img src="bild.jpg" alt="Beschreibung"> |
Bild einfügen |
src |
Quelle (wo das Bild liegt) |
alt |
Alternativtext (für Barrierefreiheit) |
width |
Breite in Pixeln |
height |
Höhe in Pixeln |
<a href="..."><img ...></a> |
Bild als Link |