HTMLWiki.de: HTML mit ChatGPT
< HTMLWiki.de >
HTML lernen • Beispiele • Tutorials • KI
Menü

[ START ] [ TUTORIAL ] [ HTML ] [ CSS ] [ KI ] [ SPIELWIESE ] [ SITEMAP ]

HTML mit ChatGPT erstellen

vom von

ChatGPT ist für viele der erste Kontakt mit KI-gestütztem Webbauen: beschreiben, Code bekommen, ausprobieren. Hier ist der Ablauf der sich bewährt hat, mit echten Beispiel-Prompts zum Anpassn.

Schritt 1: Der einfache Prompt (und warum er nicht reicht)

Prompt, erste Fassung

Erstelle mir eine Webseite für meinen Gartenverein.

Das funktioniert, liefert aber Durchschnitt: irgendein Layout, irgendwelche Platzhaltertexte, Annahmen die du nicht getroffen hast. KI-Assistenten füllen alles Unbestimmte mit Standardware auf. Die Lösung ist kein Geheimwissen, sondern Präzision.

Schritt 2: Der bessere Prompt

Prompt, zweite Fassung

Erstelle eine einzelne HTML-Datei für den Gartenverein "Grüne Ecke".
Anforderungen:
- HTML5, semantische Elemente (header, nav, main, footer)
- Abschnitte: Willkommen, Termine (als Tabelle), Kontakt
- CSS im style-Block, Grün als Akzentfarbe, Systemschriften
- responsive, mobil einspaltig
- deutsche Sprache, lang="de"
- alle Bilder nur als Platzhalter-Kommentare, ich füge eigene ein

Je konkreter die Vorgaben, desto weniger rät der Assistent. Die Anforderungsliste liest sich wie ein Mini-Pflichtenheft, und genau das ist der Trick, mehr dazu unter Gute Prompts.

Schritt 3: Iterieren statt neu würfeln

Das erste Ergebnis ist ein Entwurf, kein Endprodukt. Bleib im selben Gespräch und schärfe nach, der Assistent kennt den bisherigen Code ja noch:

Die Terminliste soll eine echte table mit thead und th scope="col" sein.
Mach die Navigation zu einer ul im nav-Element.
Ergänze eine meta description.

Fachbegriffe im Prompt zahlen sich aus: Wer "th mit scope" verlangen kann, bekommt es auch. Woher man diese Begriffe kennt? Aus der Elementreferenz nebennan.

Schritt 4: Testen und prüfen, immer

Code in eine Datei speichern (wie das geht), im Browser öffnen, Fenster schmal ziehen, durch den Validator jagen. ChatGPT liefert oft nahezu valides HTML, aber eben nur oft: erfundene Attribute, vergessene alt-Texte und Div-Türme kommen vor, die Musterliste steht unter Typische KI-Fehler und die volle Prüfroutine unter KI-Code prüfen.

Was ChatGPT gut kann und wo es hakt

  • Stark: Grundgerüste, Standard-Bausteine (Formulare, Tabellen, Galerien), Erklärungen zum eigenen Code, Varianten durchspielen.
  • Mit Vorsicht: Aussagen über Browser-Unterstützung und "neueste" Techniken, das Wissen hat einen Stand und der ist nicht heute. Im Zweifel nachschlagen stat glauben.
  • Nicht delegierbar: die Verantwortung. Was du veröffentlichst, ist dein Code, egal wer ihn getippt hatt.

Verwandt: HTML mit Claude · Gute Prompts · KI-Code prüfen