Schau dir das folgende Video zum Thema „GenAI Dreieck“ an.
Erstelle mit einer KI deiner Wahl (du kannst gerne auch paddy.app nutzen) eine Website zum Thema des Videos. Überlege, ob du alles auf einer Seite haben möchtest oder mehre Unterseiten entstehen sollen. Dokumentiere deine Entscheidung in Word und überlege wie du der KI sagst, was du haben willst.
Dokumentiere alles in einem Word-Dokument (doku.docx) und es sollten die folgenden Fragen beantwortet werden:
Welche KI habe ich wozu benutz?
Wie habe ich meine Prompts formuliert? (Prompt kopieren und kenntlich machen)
Denk dran! Unterhalte dich mit der KI bis du mit dem Ergebnis zufrieden bist.
Wie gut gibt die Seite den Inhalt des Videos wieder?
Schick mir deine Website und deine doku.docx in einem zip-Archiv (KIUebung_nachname_vorname.zip) komprimiert per Mail. Wenn du nicht weißt, wie das geht, frag die KI!
Erstelle eine Website mit 4 Seiten (+Quellenseite). Die Seiten sollen durch ein gemeinsames Menü (Navigation) verbunden werden. Jeder Seite sollte min. 1 Überschrift (besser mehr), 300 Wörter Text in min. 3 Absätzen und 1 dazu passendes Bild enthalten.
Das Thema bleibt euch überlassen. Es kann über deinen letztes Urlaubsland sein, dein Hobby oder irgendetwas Anderes sein, für das ihr euch gerade interessiert.
Beachte bei den Bildern das Urheberrecht. D.h. Informiere dich welche Bilder du wie im Internet nutzen kannst.
Ihr könnt gerne eine KI zum erzeugen des Textes nutzen (Erstelle eine weitere Seite mit deinen Verwendeten Quellen). Auf das Projekt gibt es zwei Noten. Eine Note für Recherche und Inhalt und eine Note für HTML & CSS Nutzung.
Ihr habt maximal 3 Doppelstunden Zeit.
Tipps zum Ablauf:
Erstelle zunächst die Grundgerüste für die Seiten. Deine Startseite muss index.html heißen (diese wird vom Webserver automatisch zuerst aufgerufen) Alle anderen Seiten können bliebig benannt werden (verwende websichere Dateinamen, kein Leerzeichen, keine deutschen Umlaute). Alle Dateien benötigen die Endung .html
Verbind die Seiten mit Links die in einer unsortierten Liste angeordnet sein. (Auf der Seite zu Bildern findest du ein Video zu relativen und absoluten Pfaden)
HTML(HyperText Markup Language) ist keine Programmiersprache, sondern eine Auszeichnungssprache und wurde von Tim Bernes-Lee 1990 entwickelt. Eine Auszeichnungssprache hat die Aufgabe, logische Bestandteile eines textorientierten Dokuments zu beschreiben. Das ursprüngliche HTML enthielt nur 18 Elemente. Einige davon, wie h1-h6, p, a, ol, ul und li benutzen wir noch heute.
Jetzt solltet ihr in der Lage sein, eine erste Website zu erstellen. Meldet euch mit eurer Schulemail bei CodePen.io an und erstellt dort eure erste Website 8Ihr müsst euch anmelden, um die Seite auch speichern zu können. Die Seite ist ein ziemlich cooler Online-Editor. Ihr könnt entweder einfach loslegen oder euch noch kurz das untenstehende Einführungsvideo anschauen.
Probiert min. die Tags für Überschriften, Absätze und Links aus. Erstellt also min. 3 Überschriften, 10 Absätze und 5 Links auf eure Lieblings-Websites. Um nicht so viel tippen zu müssen, könnt ihr Textabsätze einfach mit Blindtextgenerator erstellen. Wenn ihr noch mehr wissen wollt, könnt ihr die Tags und Attribute auch auf selfhtml.org nachschlagen.
