Verstehen und Erstellen der ersten HTML-Datei
Starte mit einem kleinen, gültigen Grundgerüst und erweitere es schrittweise: erst Struktur, dann Inhalte, dann (optional) Styling. Lege dir einen Ordner an (z. B. projekt/) und speichere deine Datei als index.html. Bilder kommen in einen Unterordner img/, CSS in styles.css. So bleiben Pfade überschaubar.
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Meine erste Webseite</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header><h1>Hallo Welt</h1></header> <main> <p>Willkommen im Informatik-Unterricht!</p> <img src="bild.jpg" alt="Beispielmotiv"> <p>Mehr unter <a href="https://example.org">example.org</a>.</p> </main> </body> </html>
Aufgabe 1: Markiere dir bekannte Elemente im Code, benenne und beschreibe sie (z. B. <!DOCTYPE html> – Dokumenttyp).
Aufgabe 2: Trenne Head/Body-Elemente: Welche Tags gehören wohin? Woran erkennt man das?
Aufgabe 3: Ergänze semantische Tags (z. B. <nav>, <section>, <footer>) und beschreibe kurz ihren Zweck.
Aufgabe 4: Füge ein Bild mit sinnvollem alt-Text ein. Erkläre, warum der alt-Text wichtig ist.
Aufgabe 5: Öffne deinen Editor (z. B. Notepad/Notepad++/VS Code), speichere als .html, und beobachte Syntax-Highlighting und Einrückung.
Aufgabe 6: Recherchiere drei neue HTML-Elemente auf w3schools.com und baue sie ein. Beschreibe Wirkung/Kontext kurz.
Aufgabe 7: Validiere deine Datei (z. B. schließende Tags, verschachtelte Struktur) und notiere den finalen Code ordentlich eingerückt.
Hinweis: Öffne die Datei im Browser, um die Darstellung schnell zu prüfen. Häufige Fehler am Anfang: fehlender Schlusstag, Tippfehler im Dateinamen (.html!), falscher Bildpfad, Umlaute ohne UTF-8.
Aufgabe: Öffne ein KI-Sprachmodell … und tippe:
„Erstelle 10 ‘Wahr oder Falsch’-Aussagen zur Erstellung einer ersten HTML-Datei: Doctype,
<html lang>, <meta charset>, <meta viewport>, <title>, semantische Tags, <img alt>, Links, saubere Einrückung/Validierung. Stelle sie mir nacheinander; erkläre mir falsche Antworten kurz. Nutze bei Bedarf MDN als Quelle (HTML-Grundlagen).“