RL RanceLee Tutorials
← Zurück zu Tutorials

Erstelle eine kostenlose HTML-Seite in fünf Minuten mit KI

Warum dieses Kapitel existiert: Die 50 Yuan, die mir fast einen Herzinfarkt beschert hätten

Der Grund für dieses Kapitel ist einfach: Ein Freund hat 50 Yuan bezahlt, um sich eine einfache Losrad-Webseite bauen zu lassen.

Als ich das hörte, hätte ich fast einen Herzinfarkt bekommen.

Nicht, weil 50 Yuan teuer wären, sondern weil man so etwas in 5 Minuten mit kostenloser KI erstellen kann!

Im Ernst: Wenn du dieses Bedürfnis hast, ist es sogar besser, mir direkt 50 Yuan zu geben und mich Schritt für Schritt zu unterrichten, als diese Dienste zu bezahlen. Meine Tutorials sind kostenlos, und ich erkläre jeden Schritt genau.

Dieses Kapitel ist also ein Sonderbeitrag, der dir genau zeigt: Wie du mit kostenloser KI eine einfache, aber praktische HTML-Seite erstellst.

Wichtiger Hinweis: Mach dich zuerst mit der kostenlosen Webversion vertraut

Bevor wir loslegen, möchte ich eines betonen:

Die aktuellen KI-Webversionen sind bereits sehr leistungsfähig. Keine Programmierkenntnisse nötig, keine Softwareinstallation – einfach einen Browser öffnen und loslegen.

Was kann die KI-Webversion?

  • Mit dir chatten und Fragen beantworten
  • Bilder erkennen und Inhalte analysieren
  • Code schreiben und Webseiten erstellen
  • Präsentationen und Berichte erstellen
  • Dokumente übersetzen und zusammenfassen
  • Und vieles mehr …

Mein Tipp: Anfänger sollten sich zuerst mit der kostenlosen webbasierten KI vertraut machen, bevor sie fortgeschrittene Tools wie APIs in Betracht ziehen.

Warum? Weil die Webversion:

  1. Völlig kostenlos ist (oder großzügige kostenlose Kontingente bietet)
  2. Einfach zu bedienen ist, ohne Lernkurve
  3. Bereits sehr leistungsfähig ist
  4. Du die KI direkt fragen kannst, wenn du auf Probleme stößt

Jetzt starten wir mit dem Hauptthema: Mit KI eine Losrad-Webseite erstellen.

Mit AI Studio eine HTML-Webseite erstellen

Schritt 1: Google AI Studio öffnen

Wir verwenden Google AI Studio, Googles offizielle kostenlose KI-Plattform.

Warum gerade diese?

  • Völlig kostenlos
  • Gemini 3 Pro ist leistungsstark
  • Geeignet für komplexe Aufgaben wie das Erstellen von Webseiten

Schritte:

  1. Öffne https://aistudio.google.com
  2. Melde dich mit deinem Google-Konto an (VPN/Proxy erforderlich)
  3. Du gelangst zur Hauptoberfläche

Schritt 2: Playground und Modell auswählen

Nach dem Einloggen siehst du die Hauptoberfläche von AI Studio.

Schritte:

  1. Klicke im linken Menü auf „Playground“
  2. Wähle oben rechts im Modellauswahlmenü Gemini 3 Pro
    • Wähle nicht Flash; Pro ist leistungsfähiger
    • Besonders für komplexe Aufgaben wie das Schreiben von Code
  3. Bestätige, dass links die Chat-Oberfläche mit einem Eingabefeld unten ist Jetzt kannst du mit der KI chatten.

Schritt 3: Eingabe einer Aufforderung, damit die KI die Webseite generiert

Dieser Schritt ist entscheidend: Du musst der KI genau sagen, was du willst.

Je detaillierter, desto besser! Sag nicht einfach „Hilf mir, eine Losrad-Webseite zu erstellen“, sondern sei konkret:

  • Wie sie aussehen soll
  • Welche Funktionen sie haben soll
  • Wie sie bedient werden soll
  • Welcher Stil

Vollständiges Beispiel einer Aufforderung

Kopiere den folgenden Text und füge ihn in das Eingabefeld von AI Studio ein:

Please help me generate a lottery wheel webpage.

If no prizes are specified, use default prizes: Grand Prize, First Prize, Second Prize, Third Prize, Lucky Prize, Try Again.

Functional requirements:
- Beautiful wheel design, supporting 6-8 sectors
- A "Start Lottery" button in the center
- Click the button to spin the wheel
- The spin should have acceleration and deceleration effects for realism
- After stopping, a popup shows the result
- Click the popup to close and spin again

Design requirements:
- Festive and grand style (mainly red and gold)
- The wheel border should have texture
- Each sector should have alternating colors
- A pointer indicating the current position
- Responsive for mobile and desktop

After completion, please explain:
1. How to open and use it
2. How to modify the prize names
3. How to adjust the winning probability

Use example prizes: iPhone 16, AirPods, 100 yuan red envelope, 50 yuan red envelope, Try Again

Schritte:

  1. Kopiere die obige Aufforderung und füge sie in das Eingabefeld ein
  2. Klicke auf die Schaltfläche „Ausführen“ oder drücke die Eingabetaste
  3. Warte, bis die KI generiert (normalerweise 10–30 Sekunden)

Schritt 4: Die KI gibt vollständigen HTML-Code zurück

Nachdem die KI fertig generiert hat, siehst du einen großen Codeblock.

Die Antwort der KI enthält normalerweise:

  1. HTML-Code: eine vollständige Webseitendatei
  2. Bedienungsanleitung: wie man sie öffnet und ändert
  3. Anpassungsanleitung: wie man Preise ändert und Wahrscheinlichkeiten anpasst

Der Code sieht so aus:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lottery Wheel</title>
    <style>
        /* Style code here */
    </style>
</head>
<body>
    <!-- Webpage content here -->
    <script>
        // Function code here
    </script>
</body>
</html>

Keine Angst! Die Webseite kann jetzt direkt ausgeführt werden! Folge einfach den Screenshots und klicke.

Schritt 5: Webseiteninhalt ändern (Preise ändern, Wahrscheinlichkeiten anpassen)

Die von der KI generierte Webseite ist normalerweise recht vollständig, aber du möchtest vielleicht:

  • Preisnamen ändern
  • Gewinnwahrscheinlichkeiten anpassen
  • Farben ändern

Keine Sorge, du musst keinen Code verstehen. Frag einfach weiter die KI!

Setze das Gespräch fort, lass die KI die Änderungen für dich vornehmen

Schritte:

  1. Schließe das AI Studio-Chatfenster nicht
    • Die KI erinnert sich an dein vorheriges Gespräch
    • Du kannst unten weiter Fragen stellen
  2. Gib deinen Änderungswunsch ein

Beispiel 1: Preisnamen ändern

Gib im Eingabefeld ein:

Add a settings interface to this webpage to set the probabilities and specific prizes for different awards.

Iteriere, bis du zufrieden bist

Das ist der Kernprozess beim Erstellen mit KI:

  1. Sag genau, was du willst
  2. KI generiert die erste Version
  3. Teste sie, finde Probleme
  4. Sag der KI das Problem, lass es beheben
  5. Wiederhole Schritte 3–4, bis es perfekt ist

Wichtige Punkte:

  • Hab keine Angst vor Aufwand, probiere es mehrmals
  • Ändere immer nur eine Sache auf einmal, um die Kontrolle zu behalten
  • Wenn die KI etwas falsch ändert, sag „Nein, mach die vorherige Version rückgängig“

Schritt 6: Die endgültige Webseite herunterladen

Jetzt hast du eine perfekte Losrad-Webseite. Wie lädst du sie herunter?

Klicke einfach auf die Download-Schaltfläche, sie wird auf deinen lokalen Rechner heruntergeladen, und du kannst sie öffnen und verwenden!

Was kann man mit HTML-Webseiten machen? 10 praktische Mini-Tool-Empfehlungen

Jetzt denkst du vielleicht: Außer Losrad, welche anderen Webseiten kann ich mit KI erstellen?

Die Antwort: Fast jedes einfache Mini-Tool!

Hier sind 10 praktische Beispiele, die du direkt von der KI erstellen lassen kannst:

1. Online-Übersetzungstool

Aufforderung:

Make an online translation webpage that supports Chinese-English translation with a clean interface.

2. Bildtext-Erkennung (OCR)

Aufforderung:

Make a webpage that can upload an image, recognize text in the image, and allow copying.

3. To-Do-Liste

Aufforderung:

Make a to-do list webpage that can add, delete, and mark tasks as complete, with data saved in the browser.

4. Countdown/Timer

Aufforderung:

Make a multi-functional timer webpage: countdown, Pomodoro timer, stopwatch.

5. Zufälliger Passwort-Generator

Aufforderung:

Make a password generator that can set length and complexity, with one-click copy.

6. BMI-Rechner

Aufforderung:

Make a BMI health calculator that inputs height and weight and displays health advice.

7. QR-Code-Generator

Aufforderung:

Make a QR code generation webpage that inputs text or URL, generates a QR code, and allows download.

8. Farbwähler

Aufforderung:

Make a color tool that can select colors, display RGB/HEX values, and provide color scheme suggestions.

9. Markdown-Editor

Aufforderung:

Make a simple Markdown editor with input on the left and real-time preview on the right.

10. Ausgaben-Tracker

Aufforderung:

Make a simple expense tracking webpage that can record income and expenses and display statistical charts.

Gemeinsame Merkmale dieser Tools:

  • Alle sind einzelne HTML-Dateien
  • Kein Server erforderlich
  • Einfach im Browser öffnen
  • Völlig kostenlos

Häufig gestellte Fragen

F1: Ich verstehe überhaupt keinen Code, kann ich das wirklich?

A: Ja, das kannst du! Alles, was du wissen musst, ist:

  1. Kopieren und Einfügen
  2. Eine Datei speichern
  3. Eine Datei mit einem Browser öffnen

Nur diese drei Schritte, das kann sogar ein Kind.

F2: Was ist, wenn der von der KI generierte Code nicht perfekt ist?

A: Das ist normal! Setze das Gespräch mit der KI fort:

  • „Hier ist ein Fehler, der Button tut nichts“
  • „Diese Farbe ist hässlich, ändere sie in etwas Schönes“
  • „Kannst du einen Soundeffekt hinzufügen?“

Die KI wird basierend auf deinem Feedback immer besser.

F3: Kann ich mit KI erstellte Webseiten kommerziell nutzen?

A: Technisch ja, aber beachte:

  • Von KI generierter Code hat normalerweise keine Urheberrechtsbeschränkungen
  • Aber wenn es für ein Kundenprojekt ist, teste gründlich
  • Für komplexe kommerzielle Projekte ist es immer noch empfehlenswert, einen professionellen Entwickler zu beauftragen

F4: Warum öffnet sich meine HTML-Datei nicht?

A: Häufige Gründe:

  1. Falsche Dateierweiterung: Stelle sicher, dass es .html ist, nicht .html.txt
  2. Unvollständiger Code: Stelle sicher, dass du den gesamten Code kopiert hast
  3. Browser-Problem: Versuche einen anderen Browser

F5: Kann ich es auf dem Handy verwenden?

A: Ja! Zwei Methoden:

  1. Übertrage die HTML-Datei auf dein Handy und öffne sie mit einem mobilen Browser
  2. Lade sie auf Plattformen wie Netlify hoch und greife über eine URL zu (empfohlen)

F6: Ich möchte den Code ändern, weiß aber nicht wie?

A: Ändere ihn nicht selbst! Frage die KI:

  • „Ich möchte die Hintergrundfarbe auf Blau ändern“
  • „Ich möchte die Schriftgröße des Titels vergrößern“
  • „Ich möchte Hintergrundmusik hinzufügen“

Lass die KI die Änderungen für dich vornehmen und kopiere dann den neuen Code.

Zusammenfassung

Heute hast du gelernt:

  1. Wie man Google AI Studio verwendet, um eine HTML-Webseite zu generieren
  2. Wie man klare Aufforderungen schreibt, um der KI deine Bedürfnisse mitzuteilen
  3. Wie man die HTML-Datei speichert und in einem Browser öffnet
  4. Wie man die Webseite durch Gespräche kontinuierlich verbessert
  5. Wie man seine Webseite teilt oder bereitstellt

Kernidee:

  • Keine Programmierkenntnisse nötig
  • Kein Geld nötig
  • Nur wissen, wie man mit KI kommuniziert
  • In 5 Minuten ein praktisches Tool erstellen

Wenn dich das nächste Mal jemand bittet, eine einfache Webseite zu erstellen, kannst du:

  1. Mit KI in 5 Minuten erledigen
  2. Die 50 Yuan verlangen (nur Spaß)
  3. Oder ihnen beibringen, es selbst zu machen

Im Ernst, hör auf, Geld zu verschwenden!