🤖 KI und Webentwicklung

Webdesign, Prompting und ein HTML-Text-Adventure

Einstieg: Worum geht es in diesem Kapitel?

Du hast bereits gesehen: Mit KI lassen sich in kurzer Zeit beeindruckende Webseiten erzeugen. Wenn man Zielgruppe, Stil, Inhalte, Farben und Layoutwünsche genau beschreibt, entstehen oft moderne, responsive und optisch ansprechende Ergebnisse.

Das bedeutet aber nicht, dass HTML, CSS und Webdesign unwichtig werden. Im Gegenteil: Wer die Grundlagen versteht, kann KI-Ergebnisse besser beurteilen, verbessern und gezielt einsetzen.

Leitfrage

Ersetzt KI Webdesign – oder verändert KI vor allem, welche Kompetenzen beim Webdesign wichtig werden?

In diesem Kapitel geht es darum, KI als Werkzeug zu verstehen. Anschließend plant und erstellt ihr in 4er-Teams ein HTML-Text-Adventure. Zuerst entsteht ein funktionierender Grundstock in einfachem HTML. Danach dürft ihr KI gezielt einsetzen, um Texte, Gestaltung, Layout und einfache Interaktionen zu verbessern.

1. KI als Werkzeug verstehen

Was KI bei Webseiten gut kann

KI kann sehr schnell erste Entwürfe für Webseiten erzeugen. Das betrifft zum Beispiel:

• Grundstruktur einer HTML-Seite
• Vorschläge für CSS-Layout
• Farbschemata
• responsive Gestaltung
• Beispieltexte
• Navigationsideen
• Buttons, Karten und Inhaltsbereiche
• einfache JavaScript-Ideen
• Designvorschläge passend zu einem Thema

Besonders hilfreich ist KI, wenn der Auftrag genau formuliert ist. Ein ungenauer Prompt führt oft zu beliebigen Ergebnissen. Ein präziser Prompt kann dagegen brauchbare Entwürfe liefern.

Merksatz

KI wird besser, wenn du genauer beschreibst, was du brauchst.

KI kann häufig moderne Designs vorschlagen, die auf den ersten Blick professionell wirken: klare Layouts, angenehme Abstände, Farbverläufe, Hover-Effekte, responsive Bereiche oder gut erkennbare Buttons.

Wenn im Prompt präzise Farben angegeben werden, kann KI diese gezielt verwenden.

Primary Color: #0066cc
Secondary Color: #f4f4f4
Accent Color: #ffcc00

Hinweis

Ein schöner Entwurf ist noch keine gute Website. Gestaltung muss zum Inhalt, zur Zielgruppe und zur Aufgabe passen.

Was KI nicht automatisch löst

KI kann Code und Design vorschlagen, aber sie kennt eure Projektentscheidungen nicht automatisch.

Sie weiß nicht von selbst:

• welche Geschichte ihr erzählen wollt
• welche Atmosphäre euer Adventure haben soll
• welche Seiten wirklich gebraucht werden
• welche Links funktionieren müssen
• welche Bilder ihr rechtlich verwenden dürft
• welche Inhalte für eure Zielgruppe passend sind
• welche Dateien in eurem Projektordner liegen
• welche Teile ihr selbst verstehen und erklären müsst

KI macht außerdem Fehler. Typische Probleme sind:

• Links zeigen auf nicht vorhandene Dateien.
• Dateinamen passen nicht zur Ordnerstruktur.
• CSS wird unnötig kompliziert.
• JavaScript ist schwer verständlich.
• Bilder werden über erfundene Pfade eingebunden.
• Inhalte wirken allgemein oder austauschbar.
• Urheberrecht und Datenschutz werden ignoriert.
• Das Design sieht gut aus, passt aber nicht zur eigentlichen Idee.

Wichtig

KI-Ergebnisse müssen geprüft, verstanden und angepasst werden. Die Verantwortung für Inhalt, Struktur, Rechtmäßigkeit und Funktion bleibt bei euch.

Welche Kompetenzen trotzdem wichtig bleiben

Auch wenn KI Code erzeugen kann, brauchst du weiterhin grundlegendes Verständnis.

Du solltest erklären können:

• Was steht im head?
• Was steht im body?
• Wie funktionieren Links?
• Wie werden Bilder eingebunden?
• Wie funktionieren relative Pfade?
• Was macht CSS?
• Wie bindet man eine CSS-Datei ein?
• Warum funktioniert eine Seite lokal, aber vielleicht online nicht?
• Was verändert ein JavaScript-Code, wenn ihr ihn verwendet?

Merksatz

Ohne Verständnis kannst du KI-Code nur kopieren. Mit Verständnis kannst du ihn prüfen, verbessern und sinnvoll einsetzen.

Einfache JavaScript-Ideen

Euer Adventure soll grundsätzlich mit HTML-Dateien und Links funktionieren. JavaScript kann aber einzelne Stationen spannender machen, zum Beispiel durch ein Codewort oder ein kleines Rätsel.

Ein einfaches Beispiel:

<label for="codewort">Codewort:</label>
<input id="codewort" type="text">
<button onclick="pruefen()">Prüfen</button>

<p id="meldung"></p>

<script>
function pruefen() {
  let eingabe = document.getElementById("codewort").value;

  if (eingabe == "matrix") {
    document.getElementById("meldung").innerHTML = "Die Tür öffnet sich.";
  } else {
    document.getElementById("meldung").innerHTML = "Der Code ist falsch.";
  }
}
</script>

Hier passiert vereinfacht:

• Das Eingabefeld hat die ID codewort.
• Der Button ruft die Funktion pruefen() auf.
• JavaScript liest den eingegebenen Text aus.
• Eine if-Abfrage prüft, ob der Code stimmt.
• Eine Meldung wird im Element mit der ID meldung ausgegeben.

Wichtig

JavaScript darf verwendet werden, wenn ihr erklären könnt, was der Code macht. Unverstandener Code ist kein Qualitätsmerkmal.

2. Projekt: HTML-Text-Adventure mit KI-Unterstützung

Grundidee

Ihr entwickelt in 4er-Teams ein kleines HTML-Text-Adventure.

Ein Text-Adventure ist ein Spiel, bei dem Spieler:innen durch Texte, Entscheidungen und Links durch eine Geschichte geführt werden. Eine Seite beschreibt eine Situation. Am Ende gibt es mehrere Auswahlmöglichkeiten. Jede Auswahl führt zu einer anderen HTML-Datei.

Du stehst vor zwei Türen.

[Link] Tür links öffnen
[Link] Tür rechts öffnen

Technisch passt HTML sehr gut dazu, weil HTML mit Hyperlinks arbeitet. Jede Entscheidung kann ein Link zu einer anderen Datei sein.

Merksatz

Ein HTML-Text-Adventure ist ein Netz aus miteinander verlinkten HTML-Dateien.

Projektziel

Das Projekt verbindet:

• HTML-Grundstruktur
• Links zwischen Dateien
• Storytelling
• einfache Projektplanung
• manuelle Bildauswahl und Bildeinbindung
• CSS-Gestaltung
• KI-gestützte Optimierung
• einfache JavaScript-Interaktionen, falls sinnvoll
• kritische Prüfung von KI-Ergebnissen

Die KI darf euch unterstützen, aber sie soll euer Projekt nicht vollständig übernehmen. Eure Idee, Struktur, Geschichte und Entscheidungen müssen erkennbar bleiben.

Themenwahl

Das Thema dürft ihr selbst wählen. Geeignet sind Situationen, in denen Entscheidungen getroffen, Rätsel gelöst oder Wege gefunden werden müssen.

Mögliche Ideen:

• Escape Room in der Schule
• verlorenes Handy am Wandertag
• Rätsel im alten Schulgebäude
• Zeitreise durch Wien
• Cybersecurity-Mission
• Detektivgeschichte
• Survival-Abenteuer
• Fantasy-Schloss
• Zukunftsstadt
• KI außer Kontrolle
• geheimes Labor
• Museum bei Nacht
• verschlüsselter Klassenchat
• verschwundene Website
• digitaler Tresor

Hinweis

Ihr dürft euch von KI inspirieren lassen. Die endgültige Idee muss aber von euch ausgewählt, angepasst und verantwortet werden.

Umfang und Bedingungen

Ihr arbeitet in 4er-Teams.

Jede Person erstellt mindestens eine eigene Station oder zwei kleinere Stationen.

Eine Station ist eine eigene HTML-Datei mit:

• sinnvoller Überschrift
• kurzem erzählenden Text
• mindestens zwei Links zu anderen Stationen
• passendem Dateinamen
• mindestens einem bewusst gewählten Gestaltungselement
• optional einem Bild
• optional einer kleinen Interaktion

Das gesamte Adventure soll enthalten:

• eine Startseite index.html
• mehrere verlinkte HTML-Dateien
• mindestens sechs Stationen
• mindestens zwei Enden
• mindestens einen falschen Weg oder eine Sackgasse
• eine nachvollziehbare Struktur
• möglichst eine gemeinsame style.css
• manuell eingebundene Bilder, falls Bilder verwendet werden

Phase 1: Planung ohne KI

Zuerst plant ihr selbst die Struktur eures Adventures. In dieser Phase steht noch nicht das Design im Vordergrund, sondern der Aufbau.

Klärt im Team:

• Welches Thema hat euer Adventure?
• Wer ist die Hauptfigur oder Perspektive?
• Was ist das Ziel des Spiels?
• Welche Stationen gibt es?
• Welche Entscheidungen gibt es?
• Welche falschen Wege oder Sackgassen gibt es?
• Welche Enden sind möglich?
• Gibt es ein Rätsel oder Codewort?
• Welche Dateien braucht ihr?
• Wer erstellt welche Station?

Erstellt anschließend einen einfachen Graphen eures Adventures.

index.html
→ flur.html
→ labor.html
→ ende-erfolg.html

flur.html
→ keller.html
→ falscher-weg.html

Hinweis

Der Graph muss nicht schön sein. Er muss verständlich zeigen, welche HTML-Datei zu welcher anderen HTML-Datei führt.

Phase 2: Plain HTML erstellen

Erstellt zuerst eine funktionierende Version in einfachem HTML. Das Design ist in dieser Phase noch nicht entscheidend.

Jede Station soll zunächst enthalten:

• <!DOCTYPE html>
• <html>
• <head>
• <title>
• <body>
• eine sinnvolle Hauptüberschrift
• erzählenden Text
• mindestens zwei Links
• sinnvolle Dateinamen
• funktionierende relative Links

Einfache Vorlage:

<!DOCTYPE html>
<html>
  <head>
    <title>Stationstitel</title>
  </head>
  <body>
    <h1>Stationstitel</h1>

    <p>
      Hier steht die Situation, in der sich die Spieler:innen befinden.
    </p>

    <p>
      Was möchtest du tun?
    </p>

    <ul>
      <li><a href="datei-1.html">Erste Entscheidung</a></li>
      <li><a href="datei-2.html">Zweite Entscheidung</a></li>
    </ul>
  </body>
</html>

Wichtig

In dieser Phase geht es darum, dass das Adventure funktioniert. Erst danach wird es mit CSS, KI und eventuell JavaScript verbessert.

Phase 3: Zusammenführen und Testen

Alle Dateien werden in einem gemeinsamen Ordner gesammelt und getestet.

Mögliche Ordnerstruktur:

text-adventure/
├─ index.html
├─ flur.html
├─ labor.html
├─ keller.html
├─ ende-erfolg.html
├─ falscher-weg.html
├─ style.css
└─ images/
   └─ bild.png

Testet gemeinsam:

• Startet das Spiel bei index.html?
• Funktionieren alle Links?
• Gibt es Links zu Dateien, die nicht existieren?
• Stimmen Groß- und Kleinschreibung?
• Sind alle Stationen erreichbar?
• Gibt es Sackgassen ohne Rückweg oder Ende?
• Ist der richtige Weg logisch?
• Sind die Texte verständlich?
• Sind Dateinamen einheitlich?

Testregel

Jemand aus dem Team soll das Spiel einmal spielen, ohne vorher die Struktur genau zu kennen.

Phase 4: KI gezielt einsetzen

Erst wenn euer Adventure in Plain HTML funktioniert, setzt ihr KI ein, um Texte, Atmosphäre, Layout und einfache Interaktionen zu verbessern.

KI kann euch helfen bei:

• spannenderen Texten
• einheitlicher Atmosphäre
• CSS für ein gemeinsames Layout
• schöneren Links oder Buttons
• Farbschema passend zum Thema
• besserer Lesbarkeit
• Barrierefreiheit
• Fehlersuche bei Links oder Pfaden
• einfachem JavaScript für Rätsel oder Eingabefelder

Wichtig

Gebt der KI nicht einfach den Auftrag, alles neu zu machen. Sonst verliert ihr leicht eure Struktur und eure eigene Handschrift.

Phase 5: Layout vereinheitlichen

Nach der KI-Unterstützung soll euer Adventure wie ein gemeinsames Projekt wirken.

Achtet auf:

• einheitliche Schrift
• einheitliche Farben
• einheitliche Linkgestaltung
• passende Abstände
• gute Lesbarkeit
• sinnvolle Bildgrößen
• responsive Darstellung
• einheitliche Atmosphäre
• verständliche Interaktionen

Verwendet nach Möglichkeit eine gemeinsame CSS-Datei:

style.css

Alle HTML-Dateien sollen diese Datei im head einbinden:

<link rel="stylesheet" href="style.css">

Hinweis

Eine gemeinsame CSS-Datei sorgt dafür, dass alle Stationen ähnlich gestaltet sind.

Bilder und Urheberrecht

Bilder müssen manuell eingebunden werden.

Das bedeutet:

• Bild bewusst auswählen
• Bild speichern
• Bild in den Projektordner legen
• Bild über einen relativen Pfad einbinden
• alt-Text ergänzen
• Bildrechte beachten

Wichtig

Verwendet keine beliebigen Bilder aus dem Internet. Achtet auf Nutzungsrechte, freie Bilddatenbanken oder selbst erstellte Bilder.

Optionale Erweiterung: Rätsel mit Eingabefeld

Falls es zu eurem Adventure passt, könnt ihr eine kleine Rätselstation einbauen.

Diese Station kann enthalten:

• kurze Rätselbeschreibung
• Eingabefeld
• Button
• Meldung bei richtiger Eingabe
• Meldung bei falscher Eingabe

Ihr dürft euch JavaScript von KI vorschlagen lassen. Ihr müsst es aber erklären können.

Erklärungspflicht:

• Welche HTML-Elemente gehören zum Formular?
• Welche id wird verwendet?
• Welche Funktion wird durch den Button aufgerufen?
• Was prüft JavaScript?
• Was passiert bei richtiger Eingabe?
• Was passiert bei falscher Eingabe?

Hinweis

Diese Erweiterung ist optional. Ein gut geplantes Link-Adventure ohne JavaScript ist ebenfalls möglich.

3. Prompting, Präsentation und Bewertung

Prompting: Gute Aufträge an KI formulieren

Ein guter Prompt enthält Kontext, Ziel, Stil, technische Vorgaben und Grenzen.

Ein ungenauer Prompt wäre:

Mach meine Website schöner.

Ein besserer Prompt beschreibt genauer:

• Was ist das Projekt?
• Für wen ist es?
• Welche Dateien gibt es?
• Welche Stimmung soll entstehen?
• Welche Farben sollen verwendet werden?
• Was darf verändert werden?
• Was darf nicht verändert werden?
• Soll CSS inline, im <style>-Bereich oder in style.css entstehen?
• Darf einfaches JavaScript verwendet werden?
• Soll der Code einfach bleiben?
• Soll die KI erklären, was sie verändert hat?

Merksatz

Je genauer der Prompt, desto besser kannst du das Ergebnis prüfen.

Prompt-Bausteine

Dieses Formular soll euch helfen, vor dem KI-Einsatz präzise zu planen.

Name des Adventures:

Thema:

Ziel des Spiels:

Zielgruppe:

Stimmung:

Farben / CI:
Primary:
Secondary:
Accent:

Welche HTML-Dateien gibt es?

Welche Datei ist die Startseite?

Welche Links dürfen nicht verändert werden?

Welche CSS-Datei soll verwendet werden?

Soll JavaScript verwendet werden? Wenn ja: wofür?

Was soll die KI verbessern?

Was soll die KI nicht verändern?

Welche Teile wollen wir selbst entscheiden?

Was müssen wir nachher erklären können?

Hinweis

Füllt dieses Formular zuerst selbst aus. Erst danach wird daraus ein Prompt formuliert.

Beispiel für einen Prompt

Das folgende Beispiel zeigt, wie aus Planung ein präziser KI-Auftrag werden kann. Übernehmt ihn nicht unverändert, sondern passt ihn an euer eigenes Projekt an.

Wir erstellen ein HTML-Text-Adventure für Schüler:innen im Alter von 16 bis 18 Jahren.

Thema: Escape Room in einer Schule.
Stimmung: spannend, rätselhaft, aber nicht brutal.
Design: modern, übersichtlich, responsive.
Farben:
Primary: #1e3a8a
Secondary: #f8fafc
Accent: #f59e0b

Technik:
Bitte verwende einfaches HTML und CSS.
Bitte nutze eine externe style.css.
Einfaches JavaScript ist erlaubt, aber nur für ein verständliches Codewort-Rätsel.
Bitte verändere die Dateinamen und Links nicht.
Bitte verwende keine externen Bibliotheken und keine automatisch eingebundenen Bilder.

Aufgabe:
Verbessere das Layout, gestalte Links als Buttons und mache die Seiten einheitlicher.
Erkläre neue JavaScript-Teile kurz.

Abschlusspräsentation

Am Ende stellt ihr euer Projekt kurz vor.

Zeigt:

• Thema eures Adventures
• Graph oder Struktur
• eine Beispielstation
• eine interessante Entscheidung im Spiel
• eine Designentscheidung
• einen KI-Prompt oder Prompt-Ausschnitt
• eine Stelle, an der ihr KI bewusst verändert oder korrigiert habt
• falls vorhanden: eine JavaScript-Interaktion und ihre Erklärung
• eine Schwierigkeit und eure Lösung

Hinweis

Ihr sollt nicht nur das fertige Produkt zeigen, sondern auch erklären, wie ihr gearbeitet und entschieden habt.

Qualitätskriterien

Technische Kriterien

Euer Projekt soll:

• mit index.html starten
• mehrere verlinkte HTML-Dateien enthalten
• funktionierende relative Links verwenden
• eine sinnvolle Ordnerstruktur haben
• Bilder manuell und korrekt einbinden
• möglichst eine gemeinsame style.css verwenden
• im Browser ohne kaputte Links spielbar sein
• optional einfaches JavaScript sinnvoll und erklärbar einsetzen

Inhaltliche Kriterien

Euer Adventure soll:

• eine erkennbare Geschichte haben
• Entscheidungen ermöglichen
• mindestens einen richtigen oder erfolgreichen Weg enthalten
• falsche Wege oder alternative Enden enthalten
• verständliche Texte verwenden
• zur gewählten Stimmung passen
• eure eigene Handschrift erkennen lassen

KI-Kriterien

Beim KI-Einsatz soll erkennbar sein:

• KI wurde gezielt eingesetzt.
• Prompts waren präzise.
• KI-Ergebnisse wurden geprüft.
• Links und Struktur wurden nicht unkontrolliert zerstört.
• Inhalte wurden nicht einfach blind übernommen.
• Das Team kann erklären, was KI beigetragen hat.
• KI-generierter Code wurde verstanden oder vereinfacht.

Reflexion

Einzelreflexion

Beantworte am Ende kurz:

• Was war mein Beitrag zum Projekt?
• Welche HTML- oder CSS-Kompetenz habe ich angewendet?
• Wo habe ich KI genutzt?
• Was habe ich an einem KI-Ergebnis verändert?
• Habe ich JavaScript genutzt? Wenn ja: Was macht es?
• Was habe ich selbst besser verstanden?
• Was würde ich beim nächsten Projekt anders machen?

Teamreflexion

Besprecht im Team:

• Was hat gut funktioniert?
• Wo gab es Abstimmungsprobleme?
• Haben Dateinamen und Links gut funktioniert?
• War der KI-Einsatz hilfreich?
• Wo war KI eher störend?
• Was hat unser Projekt trotzdem zu unserem eigenen Projekt gemacht?
• Konnten alle ihren Teil erklären?

Wissensspeicher

Wichtige Begriffe

KI-gestützte Webentwicklung Einsatz von KI zur Unterstützung bei Planung, Text, Code, Design oder Fehlersuche.

Prompt Auftrag oder Eingabe an eine KI.

Megaprompt Ausführlicher Prompt mit Kontext, Ziel, Stil, technischen Vorgaben und Grenzen.

Responsive Design Gestaltung, die sich an verschiedene Bildschirmgrößen anpasst.

CI / Corporate Identity Einheitliches Erscheinungsbild, zum Beispiel mit bestimmten Farben, Schriften oder Gestaltungsregeln.

Hex-Code Farbangabe wie #0066cc.

Text-Adventure Spiel, bei dem Entscheidungen über Texte und Links getroffen werden.

Prototyp Frühe, einfache Version eines Projekts zum Testen der Grundidee.

JavaScript Programmiersprache, mit der Webseiten interaktiv werden können.

Formularfeld Eingabebereich auf einer Webseite, zum Beispiel für ein Codewort oder eine Antwort.

id Eindeutiger Name für ein HTML-Element, der zum Beispiel von CSS oder JavaScript verwendet werden kann.

Prompting-Kompetenz Fähigkeit, KI-Aufträge präzise, kritisch und zielgerichtet zu formulieren.

KI-Kontrolle Prüfung, ob KI-Ergebnisse korrekt, passend, verständlich und verantwortbar sind.

Abschlussgedanke

KI verändert Webentwicklung deutlich. Sie kann Entwürfe beschleunigen, Designideen liefern, Code vorschlagen und einfache Interaktionen erzeugen. Sie ersetzt aber nicht Verständnis, Planung, Verantwortung und kritische Prüfung. Wer HTML, CSS, Projektstruktur, einfache JavaScript-Ideen und Prompting versteht, kann KI sinnvoll nutzen, ohne die Kontrolle über das eigene Projekt zu verlieren.