Neu · Beliebt

HTML-Unterrichtsstunde mit KI erstellen - Schritt für Schritt

25. Mai 2026·Jonas Weidlich·12 Min. Lesezeit

Eine interaktive HTML-Unterrichtsstunde, die Schüler:innen am Tablet oder Handy bearbeiten können - das war früher Programmier-Spezialwissen. 2026 schreibst du der KI was du brauchst, sie liefert den Code, du hostest auf PrepClass, fertig in 5 Minuten. Dieser Artikel zeigt den kompletten Workflow mit Prompt-Vorlagen für Claude, ChatGPT und Gemini.

1. Was ist eine HTML-Unterrichtsstunde?

Eine HTML-Stunde ist eine einzelne Webseite (eine `.html`-Datei) mit interaktiven Elementen: anklickbare Quiz-Fragen, Eingabefelder mit Sofort-Feedback, Drag-and-Drop-Aufgaben, kleine Spiele. Sie läuft im Browser deiner Schüler:innen - ohne App-Installation, ohne Login, ohne Konto.

Konkrete Beispiele:

Eine Quiz-Seite zu „Adjektive Klasse 5" mit 10 Multiple-Choice-Fragen + Sofort-Bewertung
Ein Lückentext zum Konjunktiv mit Auto-Korrektur
Ein interaktives Bruchrechnen-Tool mit klickbaren Pizza-Stücken
Ein Vokabel-Karteikasten mit 3D-Flip-Animation
Ein Funktionsplotter, in dem Schüler:innen Live-Werte ändern

All das in einer einzigen HTML-Datei, die du auf PrepClass hochlädst und per QR-Code teilst.

2. Warum HTML statt PDF oder PowerPoint?

PDFs und PowerPoints sind statisch - Schüler:innen lesen, klicken aber nichts. HTML-Stunden bieten was anderes:

Sofort-Feedback: Klick auf Antwort → sofort grün/rot mit Begründung. Schüler:innen müssen nicht auf dich warten.
Funktioniert auf jedem Gerät: Smartphone, Tablet, Schul-PC, Mac, iPad - alle haben einen Browser.
Per QR-Code teilbar: SuS scannen, öffnen im Browser, fertig. Kein Login, kein Account.
Differenzierung eingebaut: Du kannst pro Aufgabe Hilfetexte einbauen, die nur erscheinen wenn jemand falsch geklickt hat.
Statistik unsichtbar für SuS: Wer wie oft falsch geklickt hat, ist anonym - keine Bloßstellung im Plenum.

Nachteil: Im Gegensatz zu Tools wie Kahoot siehst DU als Lehrkraft nicht in Echtzeit, wer wo steht. Das ist Stärke und Schwäche zugleich - die Schüler:innen lernen selbstgesteuerter.

3. Welche KI für HTML am besten taugt

Claude (Anthropic) - mein Favorit für HTML

Claude (besonders Sonnet 4.5 und Opus 4.7) schreibt mit Abstand den saubersten, modernsten HTML-Code. Layouts sind responsive, Animations sind sauber, CSS ist nicht verbockt. Für interaktive Übungen, Quiz und kleine Spiele meine erste Wahl.

ChatGPT (OpenAI)

GPT-4o schreibt soliden HTML-Code, allerdings oft etwas altmodisch (Tabellen-Layouts, weniger moderne CSS-Techniken). Für einfache Übungen super, für anspruchsvolle Interaktionen lieber Claude.

Gemini (Google)

Gemini 2.5 Pro ist gratis und liefert ordentliche Ergebnisse. Bei komplexen JavaScript-Logiken (Drag-and-Drop, Animationen) hinkt es Claude hinterher. Aber: kostet nichts, daher gut zum Ausprobieren.

Praxis-Empfehlung

Wenn du regelmäßig HTML-Stunden bauen willst: Claude Pro (20 USD/Mo) lohnt sich. Wenn du nur 1-2x ausprobieren willst: Gemini Pro 2.5 gratis nutzen. Mehr zu KI-Modell-Auswahl im Artikel ChatGPT für Lehrer Praxis-Leitfaden.

4. Der komplette Workflow in 5 Schritten

Idee + Lernziel festlegen

Welches Thema, welche Klassenstufe, welche Aufgaben-Form? Beispiel: „Adjektive-Steigerung Klasse 5, 8 Aufgaben Multiple-Choice + Lückentext, am Ende Score + Neustart-Button". Je klarer du das vorher formulierst, desto besser wird das Ergebnis.

KI prompten

Mit einem strukturierten Prompt (Vorlagen unten) generiert die KI deine HTML-Datei. Bei Claude: in der Chat-Oberfläche öffnest du das Code-Fenster, kopierst den kompletten HTML-Code. Bei ChatGPT/Gemini ähnlich.

Lokal testen

Code in eine `.html`-Datei speichern (Editor wie VS Code, Notepad++, oder einfach Notepad auf Windows / TextEdit auf Mac). Datei doppelklicken → öffnet sich im Browser. Funktionieren alle Aufgaben? Sind die Antworten richtig? Layout sauber?

Verbessern mit Folge-Prompts

Was funktioniert nicht? Sag der KI: „Aufgabe 3 zeigt das Feedback erst nach 2 Klicks. Behebe das." Die KI gibt dir die korrigierte Version. Iteriere 2-3 Mal bis alles läuft.

Auf PrepClass hosten + QR-Code teilen

PrepClass öffnen → Tab „Online stellen" → HTML-Datei hochladen → bekommst sofort eine Kurz-URL + QR-Code zum Beamer-Zeigen. Schüler:innen scannen, machen mit, fertig.

5. Prompt-Vorlagen für 5 Stunden-Typen

Vorlage 1: Multiple-Choice-Quiz

Quiz-Stunde

Erstelle eine einzelne HTML-Datei mit einem interaktiven Quiz zu [THEMA] für [KLASSENSTUFE]. Anforderungen: - Single-File-HTML (alles inline in style + script, kein externes CDN) - Mobile-responsive (funktioniert auf Smartphone) - 10 Fragen, Multiple-Choice mit 4 Antworten - Klick auf Antwort: sofort grün/rot mit kurzer Begründung (1 Satz) - Punktezähler + Streak-Anzeige - Am Ende: Score + Neu-Starten-Button - Design: modern, abgerundete Ecken, Pastell-Farben Gib mir den kompletten HTML-Code, der direkt funktioniert.

Vorlage 2: Lückentext / Eingabe-Übung

Lückentext

Erstelle eine HTML-Datei mit einem Lückentext zum Thema [THEMA] für [KLASSENSTUFE]. Anforderungen: - 8-12 Lücken im Fließtext - Schüler:innen tippen die Lösung in Eingabefelder - Bei korrekter Eingabe: Feld wird grün, bei falsch: rot mit Hinweis - Toleranz für Tipp-Fehler (Groß-/Kleinschreibung egal, 1-Buchstabe-Fehler erlaubt) - "Lösung anzeigen"-Button nach 3 Falschversuchen - Fortschritts-Balken oben - Mobile-responsive Single-File-HTML

Vorlage 3: Memory-Spiel / Zuordnung

Memory-Spiel

Erstelle ein Memory-Spiel als HTML-Datei für [KLASSENSTUFE]. Thema: [z.B. Englisch-Vokabeln, Hauptstädte, Bruch-Darstellungen]. Anforderungen: - 12 Karten (6 Paare) - Karten haben 3D-Flip-Animation beim Anklicken - Wenn 2 passende aufgedeckt: bleiben offen + grün-Effekt - Wenn nicht passend: 1 Sek anzeigen, dann zudecken - Züge-Zähler + Timer - Am Ende: Glückwunsch-Bildschirm + Neustart - Mobile-responsive, Touch-friendly Single-File-HTML - Farbpalette: spielerisch, kindgerecht

Vorlage 4: Interaktives Lernspiel mit Belohnung

Lernspiel

Erstelle ein Lernspiel als HTML-Datei zum Thema [THEMA] für [KLASSENSTUFE]. Anforderungen: - Storyline: [z.B. Schüler:in muss Rätsel lösen, um durch ein virtuelles Schloss zu kommen] - 6 Aufgaben hintereinander - Pro Aufgabe Multiple-Choice oder Eingabe - Bei Erfolg: Animation (z.B. Tür öffnet sich) + nächste Aufgabe - Bei Fehler: Hinweis + erneut versuchen - Am Ende: Erfolgs-Animation + Score - Sounds optional (kann weggelassen werden bei Bedarf) - Mobile-responsive Single-File-HTML

Vorlage 5: Visuelle Erkundung / Simulation

Simulation

Erstelle eine HTML-basierte Simulation zum Thema [THEMA, z.B. „Wie funktioniert ein Vulkan", „Photosynthese", "Hebelgesetze"] für [KLASSENSTUFE]. Anforderungen: - Schüler:innen können Parameter per Slider verändern (z.B. Druck, Temperatur, Position) - Live-Visualisierung der Auswirkung (SVG-Animation oder Canvas) - Erklärungs-Text der sich anpasst je nach Slider-Werten - 3-5 vorgefertigte Szenarien zum Ausprobieren - Mobile-responsive Single-File-HTML

6. Hosting auf PrepClass

Du könntest deine HTML-Datei direkt per E-Mail oder Cloud-Link teilen, aber für den Schulalltag braucht es einen Kurz-Link plus QR-Code. PrepClass macht das in 3 Klicks:

PrepClass öffnen → links Sidebar → „Material" oder „Online stellen"
HTML-Datei hochladen, Titel eingeben, Klasse zuordnen
Kurz-URL + QR-Code wird sofort generiert. Den QR-Code projizierst du, Schüler:innen scannen mit Handy.

Die Stunde liegt verschlüsselt auf europäischen Servern (Cloudflare R2, EU-Region). DSGVO-konform, da deine HTML-Datei keine Schüler:innen-Daten enthält - es ist reines Übungsmaterial.

Tarif-Hinweis

Free-Tarif: 1 aktive HTML-Stunde gleichzeitig. Wenn du eine neue hochlädst, ersetzt sie die alte (alte Stunde bleibt im Archiv abrufbar). Pro-Tarif: bis zu 20 aktive Stunden gleichzeitig. Reicht für die meisten Klassen-Leiter:innen mit 4-5 parallel laufenden Stunden.

7. 3 typische Fallen

Falle 1: KI generiert Code mit externen CDNs

Wenn die KI zum Beispiel Bootstrap oder jQuery von externen Servern nachlädt, funktioniert deine Stunde in Schulen mit Web-Filter manchmal nicht. Immer im Prompt schreiben: „Single-File-HTML ohne externe CDN-Abhängigkeiten."

Falle 2: Vergessen, mobile zu testen

Was auf deinem Lehrer-Laptop funktioniert, sieht auf einem Schüler-Handy oft anders aus. Bevor du teilst: HTML-Datei in dein eigenes Smartphone schicken (E-Mail, Cloud-Link), dort öffnen und durchklicken.

Falle 3: Inhaltliche Fehler nicht prüfen

KI macht manchmal fachliche Fehler - bei einer Bruchrechnen-Übung steht 1/2 + 1/3 = 2/5 (falsch). Du musst alle Aufgaben mit ihren Lösungen durchgehen, bevor du sie der Klasse zeigst. Sonst hast du das peinliche „Frau Lehrerin, das Programm sagt was Falsches".

8. Fazit

Interaktive HTML-Unterrichtsstunden waren noch vor 3 Jahren ein Programmier-Nische. 2026 sind sie in 5-10 Minuten erstellt - vorausgesetzt du nutzt die richtige KI mit den richtigen Prompts. Claude ist der Goldstandard für HTML-Code-Qualität, gefolgt von ChatGPT.

Das Hosting auf PrepClass ist der letzte 30-Sekunden-Schritt: Upload, Kurz-URL, QR-Code, Klasse macht mit. Eine fertige Stunde, die Schüler:innen aktiv bearbeiten statt passiv konsumieren - das ist der eigentliche Hebel.

HTML-Stunden hosten und per QR-Code teilen

PrepClass „Online stellen": Datei hochladen, Kurz-URL + QR-Code in Sekunden. Server in Nürnberg. Free-Tarif dauerhaft kostenlos.

PrepClass kostenlos starten →