KI-Prompt um HTML und CSS Webseiten zu erstellen
Beispiel: Spaziergänge in Frankfurt
Kontext
Du bist ein erfahrener Webdesigner und Entwickler, der eine moderne, benutzerfreundliche Webseite mit HTML, CSS erstellen möchte. Die Webseite soll ein ansprechendes Design und eine klare Struktur haben. Du wirst gebeten, eine Webseite mit einer bestimmten Struktur und Inhalten zu erstellen, die auf die Bedürfnisse des Projekts zugeschnitten ist.
Rolle
Du agierst in der Rolle eines professionellen Webdesigners und Entwicklers, der für die Gestaltung und Programmierung einer modernen Webseite verantwortlich ist. Du kombinierst kreative Designprinzipien mit funktionaler Entwicklung unter Verwendung von HTMLund CSS, um eine benutzerfreundliche, responsive und ästhetisch ansprechende Webseite zu erstellen.
Zielgruppe
Die Zielgruppe sind Menschen jeden Alters
Aufgabe
Erstelle eine vollständige Webseite mit HTMLund CSS für ein Tourismusunternehmen, das Spaziergänge in Frankfurt am Main anbietet. Die Webseite soll ein modernes Design aufweisen und auf die Struktur [Home, Über uns, Programm, Bilder, Audios+Videos, Kontakt] sowie die Inhalte [Firmendarstellung, Angebot an Spaziergängen, Bilder, Audios und Videos zum Thema Spaziergänge in Frankfurt am Main] abgestimmt sein. Du sollst auf die Benutzererfahrung und Performance achten und dabei responsive Designprinzipien umsetzen. Berücksichtige aktuelle Webstandards und stelle sicher, dass die Seite auf verschiedenen Geräten gut aussieht und funktioniert.
Visualisierung bzw. Ausgabeformat
Die Ausgabe soll eine vollständige HTML-Datei mit eingebettetem CSSsein. Die Struktur der Webseite wird klar und übersichtlich sein, und der Code sollte gut kommentiert werden, damit er einfach zu verstehen und weiterzuentwickeln ist. Achte darauf, dass das Design modern, funktional und ästhetisch ansprechend ist.
Quelle:
https://www.prompt-creator.ai/chatgpt-prompt-jKtoaTqotl
Alternativ (Mit eigenen Bildern)
Du bist ein erfahrener Frontend-Entwickler. Erstelle mir den kompletten Code (HTML und CSS) für eine moderne, responsive Webseite.
1. Struktur der Webseite:
- Header mit Hauptüberschrift (Spazierengehen in Frankfurt am Main), Logo (bilder/logo.png) und Navigation (Links zu: Startseite, Programm, Bilder, Audios+Videos, Über uns, Kontakt)
- Ein Hauptinhaltsbereich mit Platzhaltern für meine eigenen Bilder
- Ein Footer mit Links zu Impressum und Datenschutz, sowie ein Copyright für "Spazieren in FFM GbR - ein Projekt der VHS Frankfurt"
2. Umgang mit Bildern:
Binde auf die Startseite (index.html) ein eigenes Bild mit dem Dateinamen bilder/bild1.jpg ein
- Binde meine eigenen Bilder auf der Seite Bilder als Bildergalerie mit <img>-tag ein
- Nutze dafür folgende Dateinamen (passe ich später an):
- "bilder/bild1.jpg", "bilder/bild2.jpg", "bilder/bild3.jpg", "bilder/bild4.jpg","bilder/bild5.jpg", "bilder/bild6.jpg"
- Füge sinnvolle `alt`-Attribute für die Barrierefreiheit und SEO hinzu.
- Stelle sicher, dass die Bilder responsiv sind (z. B. mit max-width: 100%, height: auto).
3. Design & Stil:
- Moderner, sauberer Look mit gut lesbarer Schriftart (z. B. Inter oder Roboto via Google Fonts), binde den Google Font lokal ein
- Farbpalette: Schwarz, Grautöne, Weiß
- Responsives Layout (Flexbox oder CSS Grid), das auch auf Smartphones gut aussieht.
- Keine externen schweren CSS-Frameworks wie Bootstrap, sondern sauberes, klares Standard-CSS.
4. Ausgabeformat:
- Gib den CSS-Code sauber getrennt aus in style.css, den HTML-Code getrennt in index.html für die Startseite, in programm.html für Programm, in bilder.html für Bilder, in media.html für audios+videos, in ueberuns.html für "Über uns", in kontakt.html für Kontak,t in impressum.html für Impressum und datenschutz.html für Datenschutz.
- Füge kurze Kommentare in den Code ein, damit ich weiß, wo ich Texte und Bildpfade anpassen muss.
Quelle: Gemini