---
title: "html erstellen mit GPT-4"
description: "Ein kleiner Test was möglich ist ist in Bezug auf Code und html mit dem neuen Modell GPT-4"
url: https://chatgpt-prompts.de/html-erstellen-mit-gpt-4
type: "post"
language: "de"
site: "KI News, ChatGPT Prompts und AI Tools"
published: 2023-03-16T04:29:27+01:00
modified: 2023-04-17T13:17:36+02:00
author: "AIExplorer"
categories: "Tolle ChatGPT Prompts"
tags: "chatgpt, erstellen, gpt-4, html, prompts, tolle"
image: https://chatgpt-prompts.de/wp-content/uploads/2023/02/cropped-chatgpt-prompts-logo-4.png
---

# html erstellen mit GPT-4

Ein kleiner Test was möglich ist ist in Bezug auf Code und html mit dem neuen Modell GPT-4

## Prompt

```
Erstelle mir eine Webseite mit 10 lustigen Fragen und Antworten. Die Antwort sieht man erst nach einen Klick.
```

## Code

```
<html lang="de">
<head>
 <meta charset="UTF-8">
 <title>10 lustige Fragen und Antworten</title>
 <style>
 .frage {
 font-size: 18px;
 font-weight: bold;
 margin-bottom: 5px;
 }

 .antwort {
 font-size: 16px;
 display: none;
 margin-bottom: 20px;
 }

 .antwort-button {
 font-size: 16px;
 cursor: pointer;
 }

 .frage-container {
 display: flex;
 flex-wrap: wrap;
 }

 .frage-box {
 flex: 1;
 min-width: 50%;
 padding: 10px;
 }
</style>
<script>
 function zeigeAntwort(index) {
 var antwort = document.getElementById("antwort" + index);
 antwort.style.display = antwort.style.display === "none" ? "block" : "none";
 }
</script>
</head>
<body data-burst_id="1012" data-burst_type="post">
<h1>10 lustige Fragen und Antworten</h1>
<div class="frage-container">
 <div class="frage-box">
 <div class="frage">1. Warum können Fische nicht schielen?</div>
 <button class="antwort-button" onclick="zeigeAntwort(1)">Antwort anzeigen</button>
 <div class="antwort" id="antwort1">Weil sie Wasser im Auge haben.</div>
 </div>
 <div class="frage-box">
 <div class="frage">2. Was ist schwerer als 1 Tonne, aber leichter als eine Feder?</div>
 <button class="antwort-button" onclick="zeigeAntwort(2)">Antwort anzeigen</button>
 <div class="antwort" id="antwort2">Eine Tonne Federn.</div>
 </div>
 <div class="frage-box">
 <div class="frage">3. Welcher Vogel ist immer traurig?</div>
 <button class="antwort-button" onclick="zeigeAntwort(3)">Antwort anzeigen</button>
 <div class="antwort" id="antwort3">Der Kuckuck, weil er nur in Kuckucksuhren wohnt.</div>
 </div>
 <div class="frage-box">
 <div class="frage">4. Was ist am Anfang der Nacht und am Ende des Morgens, aber in der Tagesmitte nicht zu finden?</div>
 <button class="antwort-button" onclick="zeigeAntwort(4)">Antwort anzeigen</button>
 <div class="antwort" id="antwort4">Der Buchstabe "N".</div>
 </div>
 <div class="frage-box">
 <div class="frage">5. Was hat Ohren, aber kann nicht hören?</div>
 <button class="antwort-button" onclick="zeigeAntwort(5)">Antwort anzeigen</button>
 <div class="antwort" id="antwort5">Ein Maiskolben.</div>
 </div>
 <div class="frage-box">
 <div class="frage">6. Was ist am Anfang der Nacht und am Ende des Morgens, aber in der Tagesmitte nicht zu finden?</div>
 <button class="antwort-button" onclick="zeigeAntwort(6)">Antwort anzeigen</button>
 <div class="antwort" id="antwort6">Der Buchstabe "N".</div>
 </div>
 <div class="frage-box">
 <div class="frage">7. Welches Tier kann höher springen als ein Haus?</div>
<button class="antwort-button" onclick="zeigeAntwort(7)">Antwort anzeigen</button>
<div class="antwort" id="antwort7">Alle Tiere, weil Häuser nicht springen können.</div>
</div>
<div class="frage-box">
<div class="frage">8. Warum sind Geister schlecht im Lügen?</div>
<button class="antwort-button" onclick="zeigeAntwort(8)">Antwort anzeigen</button>
<div class="antwort" id="antwort8">Weil sie durchsichtig sind.</div>
</div>
<div class="frage-box">
<div class="frage">9. Was ist grün und wird auf Knopfdruck rot?</div>
<button class="antwort-button" onclick="zeigeAntwort(9)">Antwort anzeigen</button>
<div class="antwort" id="antwort9">Eine Tomate im Mixer.</div>
</div>
<div class="frage-box">
<div class="frage">10. Was hat vier Beine und einen Arm?</div>
<button class="antwort-button" onclick="zeigeAntwort(10)">Antwort anzeigen</button>
<div class="antwort" id="antwort10">Ein glücklicher Pitbull.</div>
</div>

</div>
</body>
</html>
```

## html eingebunden

10 lustige Fragen und Antworten

# 10 lustige Fragen und Antworten

1. Warum können Fische nicht schielen?

Weil sie Wasser im Auge haben.

2. Was ist schwerer als 1 Tonne, aber leichter als eine Feder?

Eine Tonne Federn.

3. Welcher Vogel ist immer traurig?

Der Kuckuck, weil er nur in Kuckucksuhren wohnt.

4. Was ist am Anfang der Nacht und am Ende des Morgens, aber in der Tagesmitte nicht zu finden?

Der Buchstabe “N”.

5. Was hat Ohren, aber kann nicht hören?

Ein Maiskolben.

6. Was ist am Anfang der Nacht und am Ende des Morgens, aber in der Tagesmitte nicht zu finden?

Der Buchstabe “N”.

7. Welches Tier kann höher springen als ein Haus?

Alle Tiere, weil Häuser nicht springen können.

8. Warum sind Geister schlecht im Lügen?

Weil sie durchsichtig sind.

9. Was ist grün und wird auf Knopfdruck rot?

Eine Tomate im Mixer.

10. Was hat vier Beine und einen Arm?

Ein glücklicher Pitbull.

Schon erstaunlich das nach einer doch recht einfachen Eingabe direkt korrekter Code ausgegeben wird plus das die Fragen – Antworten gleich enthalten sind. **Eine Frage – Antwort ist doppelt, was einfach zu korrigieren wäre indem man [ChatGPT](https://openai.com) anweist den Fehler zu beheben.** Aber da es darum ging zu sehen was mit der einfachen Eingabe passiert, wurde auch der Fehler im Original belassen. Auffällig ist noch das GPT-4 langsamer ist als GPT 3.5. **Und nahezu jede Ausgabe, die etwas länger ist, einmal gestoppt wird und was man dann mit dem Befehl weiter ohne Probleme beheben kann.** Der Fortsatz ist auch korrekt, im Gegensatz zu GPT 3.5 wo ich bisweilen eine nicht genau passende Fortsetzung erhalten habe.
