Links und Bilder (Verknüpfungen schaffen)

💡 Die Kernidee im Alltag:

"Bilder machen Webseiten lebendig und Links verknüpfen die ganze Welt zu einem gigantischen Netz (World Wide Web)."

Wie es wirklich funktioniert (Erklärt für 12-Jährige)

Bilder haben kein End-Tag, weil sie keinen Text umschließen. Man nennt sie selbstschließend:

<!-- Ein Bild einbinden -->
<img src="https://example.com/katze.jpg" alt="Eine flauschige orange Katze" width="300" />

<!-- Ein anklickbarer Link -->
<a href="https://wikipedia.org" target="_blank">Zu Wikipedia springen</a>

KI-Power-Tipp für Entwickler

Empfohlener Assistent: Cursor / v0.dev

Golden Prompt für deinen Editor:

Schreibe mir ein HTML-Snippet mit einer Bildkarte (Card), die ein zentriertes Bild, eine Bildunterschrift und einen 'Mehr erfahren'-Button als Link enthält.

Qualitäts-Prüfung: Prüfe, ob das img-Tag ein alt-Attribut besitzt und der Link ein klares Ziel definiert.

Vorherige Lektion: Überschriften und Absätze (Die Text-Bausteine)

Nächste Lektion: Formulare und Buttons (Nutzer-Eingaben empfangen)

Interaktive Übung & lokaler Testlauf

Erstelle ein <img> Tag mit `src="logo.png"` und `alt="Firmenlogo"`.