Digitales Pausenbrot Logo
Tutorials/Apps entwickeln/Lektion 1
Lektion 1 von 7

Apps mit ChatGPT

HTML-Dateien generieren mit Canvas

Digitales Pausenbrot · 14. April 2026

HTML-Dateien generieren mit Canvas

1 So erstellst du HTML mit ChatGPT ▾

ChatGPT kann genauso HTML-Apps erstellen wie Claude. Der Unterschied: Es gibt keine Artefakte mit Live-Vorschau. Du bekommst den Code als Text.

Der Ablauf

  1. Öffne chatgpt.com.
  2. Schreibe deinen Prompt (gleiche Struktur wie bei Claude).
  3. ChatGPT gibt dir den HTML-Code aus.
  4. Kopiere den Code und speichere ihn als .html-Datei.

Tipp: Canvas nutzen

Wenn ChatGPT den Code in Canvas öffnet, kannst du ihn direkt bearbeiten. Canvas ist ein Bearbeitungsfenster neben dem Chat — ähnlich wie Claudes Artefakte, aber ohne Live-Vorschau der App.

2 HTML-Datei speichern und testen ▾

Du hast den Code von ChatGPT bekommen. Jetzt musst du ihn speichern:

Schritt 1: Code kopieren

Markiere den gesamten Code im Chat (oder in Canvas) und kopiere ihn.

Schritt 2: Datei erstellen

  1. Öffne einen Texteditor (z.B. TextEdit auf Mac, Notepad auf Windows).
  2. Wichtig auf Mac: Gehe zu Format → «In reinen Text umwandeln».
  3. Wichtig auf Windows: Beim Speichern unter Dateityp «Alle Dateien» wählen, sonst hängt Notepad automatisch .txt an und die Datei heisst meine-app.html.txt.
  4. Füge den Code ein.
  5. Speichere als meine-app.html (Dateiendung .html ist wichtig!).

Schritt 3: Testen

Doppelklicke auf die Datei. Sie öffnet sich im Browser. Prüfe, ob alles funktioniert.

Funktioniert etwas nicht? Kopiere die Fehlermeldung zurück in den Chat. ChatGPT kann den Code reparieren.
3 App veröffentlichen auf Lerndrop.ch ▾

Anders als bei Claude kannst du ChatGPT-Apps nicht direkt per Link teilen. Du brauchst einen Host — einen Ort im Internet, wo die Datei liegt.

Lerndrop.ch

Lerndrop.ch ist eine Schweizer Plattform, die genau dafür gemacht ist. So geht's:

  1. Gehe auf lerndrop.ch.
  2. Lade deine HTML-Datei hoch.
  3. Du bekommst einen Link. Diesen Link kannst du teilen.

Der Link funktioniert auf jedem Gerät. Deine Schüler:innen brauchen kein Konto.

⚠️ Wichtig: Apps auf Lerndrop.ch sind 30 Tage verfügbar. Für dauerhaftes Hosting nutze GitHub Pages (eigenes Tutorial im gleichen Block).

Lerndrop.ch ist speziell für Schweizer Schulen gedacht. Die Daten bleiben in der Schweiz – aber nur 30 Tage.
4 Praxis: Vom Prompt zur fertigen App ▾

Lass uns den kompletten Workflow durchspielen:

Schritt 1: Prompt schreiben

Erstelle ein interaktives Periodensystem als standalone HTML-Datei. Wenn man auf ein Element klickt, erscheint eine Info-Box mit: Name, Symbol, Ordnungszahl, Gruppe und einem Alltagsbeispiel. Design: clean, farbcodiert nach Elementgruppen. Für die 2. Sek.

Schritt 2: Code speichern

Kopiere den Code → Speichere als periodensystem.html → Teste im Browser.

Schritt 3: Verfeinern

Sag ChatGPT: «Füge eine Suchfunktion hinzu» oder «Mach es responsive für Tablets».

Schritt 4: Hochladen

Lade die fertige Datei auf lerndrop.ch hoch und teile den Link.