Früher haben Entwickler für alles <div> benutzt. Das ist wie ein Buch, in dem jedes Kapitel einfach nur "Teil 1", "Teil 2" heißt. Semantisches HTML gibt dem Inhalt eine Bedeutung.
🚀 Aufgabe 1: Analysiere deine bisherigen Projekte. Wo könntest du <div> durch <section>, <header> oder <footer> ersetzen? Notiere dir 3 Stellen.
2. Responsive Design CSS3
Eine Webseite muss auf einem 27-Zoll-Monitor und auf einem kleinen Smartphone gleich gut funktionieren. Wir nutzen dafür Flexible Layouts (Flexbox) und Media Queries.
Das Geheimnis: Anstatt feste Pixel (z.B. width: 800px) nutzen wir Prozent oder Flexbox.
Beispiel Media Query: @media (max-width: 600px) {
body { background-color: lightblue; }
.container { flex-direction: column; }
} Bedeutung: "Wenn der Bildschirm schmaler als 600px ist, ändere das Design!"
🚀 Aufgabe 2: Öffne deine Webseite im Browser. Verkleinere das Fenster langsam. Ab welchem Punkt sieht das Design "komisch" aus? Notiere die Breite in Pixeln: __________________ px.
3. Barrierefreiheit (Accessibility / A11y) Ethics
Nicht jeder sieht eine Webseite gleich. Blinde Menschen nutzen Screenreader, die den Code laut vorlesen. Wenn wir Bilder ohne Beschreibung einfügen, sagt der Computer nur: "Bild".
❌ Barrierefrei-Fehler:
<img src="hund.jpg">
✅ Barrierefrei:
<img src="hund.jpg" alt="Ein kleiner brauner Hund spielt im Park">
Kontraste: Ist der Text gut lesbar? (Kein hellgrau auf weiß!)
Alt-Texte: Haben ALLE Bilder ein alt="..." Attribut?
Logik: Folgen die Überschriften einer Ordnung? (h1 $\rightarrow$ h2 $\rightarrow$ h3)
🚀 Aufgabe 3: Prüfe dein "Digitalprofil". Füge allen Bildern präzise Alt-Texte hinzu, die einem Blinden genau erklären, was auf dem Bild zu sehen ist.