Projekt: Ein HTML-Text-Adventure
Zielsetzung
Ihr habt bereits erste Erfahrungen mit HTML, vielleicht sogar mit CSS, gemacht. Nun folgt ein kleines Projekt! Ihr werdet ein aufregendes Text-Adventure-Game entwickeln. Dabei geht es darum, eine spannende Geschichte zu entwerfen und sie in Form von HTML-Dateien zum Leben zu erwecken. Jede Gruppe wird verschiedene Aufgaben übernehmen, um das Spiel zu gestalten. Lasst eurer Kreativität freien Lauf und entdeckt die aufregende Welt des textbasierten Abenteuers!
Los geht's!
Schritt 1: Einführung
(a) 💬 Tauscht euch aus: Habt ihr schon Erfahrungen mit Text-Adventures? Was ist überhaupt ein Text-Adventure? Warum eignen sich HTML-Dateien (also Hypertexte) besonders gut für ein interaktives Adventure-Game?
(b) Klicke auf den folgenden Link, um dir einen Überblick über den Start des Adventures zu verschaffen: Auf zum Abenteuer
Schritt 2: Vorbereitung
Jetzt ist es an der Zeit, dass ihr das Text-Adventure vorbereitet. Bevor ihr HTML-Dateien erstellen könnt, braucht es aber ein paar Absprachen.
(a) 💬 Entscheidet gemeinsam, ob ihr bei dem Thema bleiben oder ein anderes Thema auswählen wollt. Für unser HTML-Text-Adventure eignen sich alle Situationen, bei denen ein richtiger Weg gefunden werden muss oder kleine Rätsel zu lösen sind. Schwieriger ist es, die Suche nach Gegenständen einzubauen: Dann bräuchte man jede HTML-Datei mehrfach (einmal ohne Gegenstände, einmal mit Gegenstand A, einmal mit Gegenstand B, ...).
(b) ✏️️ Sobald ihr euch für ein Thema entschieden habt, müsst ihr euch eine Struktur für euer Abenteuer ausdenken. Welche HTML-Dateien (z.B. Räume des Schlosses) gibt es? Wie ist der richtige Weg durch die HTML-Dateien? Welche falschen Wege gibt es? Zeichnet am besten einen Graphen mit dem Netz der nötigen HTML-Dateien.
(c) 💬 Gleich sollen mehrere Teams die einzelnen HTML-Dateien erstellen. Welche Absprachen müsst ihr vorher treffen? Teilt Gruppen ein. Vielleicht ist es geschickt, noch bestimmte Rollen (z.B. einen Zeitwächter) zu verteilen.
(d) Optional: Falls ihr euch mit CSS auseinandergesetzt habt, könnt ihr den einzelnen Seiten auch einen einheitlichen oder verschiedene Layouts geben. Entscheidet, ob ihr nur eine oder mehrere CSS-Dateien braucht, und welche Gruppe diese erstellt.
Schritt 3: HTML-Dateien erstellen
Jetzt geht es ans Eingemachte! Jede Gruppe ist dafür verantwortlich, ihre eigenen HTML-Dateien für das Text-Adventure zu erstellen. Nutzt dazu die Vorlage, die wir euch bereitgestellt haben, und lasst eurer Fantasie freien Lauf. Denkt dabei an die Geschichte und den Verlauf eures Abenteuers. Achtet darauf, dass eure HTML-Dateien alle notwendigen Elemente enthalten und eure Geschichte gut wiedergeben. Berücksichtigt dabei alle Absprachen, die ihr in Schritt 2 getroffen habt.
In eurer Gruppe könnt ihr eure Fähigkeiten und Stärken gut kombinieren, um das beste Text-Adventure-Game zu entwickeln. Entscheidet selbst, wer welche Rolle übernimmt – zum Beispiel Storywriter, HTML-Entwickler, CSS-Designer und ein Bildrechercheur. Verteilt die Aufgaben innerhalb eurer Gruppe und arbeitet zusammen, um euer Projekt zum Erfolg zu führen.
Nun folgen alle Informationen, die ihr benötigt, um in eurer Gruppe die nötigen HTML-Dateien zu erstellen:
- In diesem zip-Archiv sind verschiedene Dateien: Die HTML-Datei
vorlage.htmlist eine einfache Vorlage für die erste Seite des Adventures. Da ein Bild eingebunden ist, funktioniert sie nur, wenn sie im gleichen Ordner wie der Ordnerimgliegt. Wenn ihr euch schon mit CSS auskennt, dann könnt ihr stattdessen die HTML-Dateischloss.htmlnutzen. Sie ist bereits so erstellt, dass sie die CSS-Dateistyles.cssverwendet. Je nach dem, was ihr in Schritt 2 besprochen habt, könnt ihr diese Datei weiter verwenden, Anpassungen vornehmen oder eine völlig eigene Datei anlegen. - Eine Webseite wird schöner, wenn man Bilder verwendet – so kann man sich die Stimmung unseres Text-Adventures gleich besser vorstellen. Doch Achtung: Ihr dürft nicht einfach beliebige Bilder aus dem Internet verwenden – in der Regel sind Bilder urheberrechtlich geschützt. Was das bedeutet, wird hier geklärt. Der Urheber eines Bildes kann aber festlegen, dass man das Bild einfach verwenden kann; solche Bilder findest du zum Beispiel auf der Plattform Pixabay.
- Ihr beherrscht vermutlich noch nicht alle HTML- und CSS-Elemente, die es gibt. Aber das ist gar kein Problem – es gibt viele Nachschlagewerke. Sucht selbst oder schaut zum Beispiel bei SELFTHTML.
Mehr zu SELFTHTML
Seiten wie SELFTHTML, auf denen man die Details zu Programmen oder Programmiersprachen (hier HTML) nachschlagen kann, nennt man eine Dokumentation. Mit solchen Dokumentationen zu arbeiten, ist das „täglich Brot“ von Informatikerinnen und Informatikern. Niemand lernt alle Befehle einer Sprache auswendig. Die Grundlagen – hier z.B. Überschriften, Paragraphen und Links – sollte man beherrschen. Alles, was man seltener nutzt, kann man auch nachschlagen. Wird man in der Dokumentation nicht fündig, hilft oft eine Suche mit einer Suchmaschine. Es gibt zahlreiche Foren, in denen viele Fragen schon gestellt und beantwortet wurden.
SELFHTML bietet neben einer Dokumentation auch einsteigerfreundliche Kurse an, weswegen wir die Seite für HTML-Einsteiger:innen empfehlen.
Aufgabe 4: Zusammenführung und Abschluss
Ihr habt jetzt einige Zeit lang, euer Text-Adventure erstellt. Nun ist es an der Zeit, alle Dateien zusammenzuführen und das Spiel zu testen.
(a) Legt alle erstellten HTML-Dateien (und ggf. CSS-Dateien) in einem gemeinsamen Ordner ab. Kontrolliert noch einmal die Schreibweise eurer Hyperlinks.
(b) Nun testet das Spiel ausgiebig: Funktionieren alle Links? Funktioniert das Spiel so, wie ihr es in Schritt 2 geplant habt? Gibt es vielleicht Verbesserungspotenzial bei einigen Texten? Fehlen Bilder?
(c) Wenn euer Spiel fertig ist, nehmt euch noch einmal Zeit für einen Rückblick auf das Projekt. Ihr könnt zum Beispiel so vorgehen: Jede:r von euch beantwortet die folgenden Fragen erst selbst für sich (mit farbigen Karteikarten oder mit oncoo), dann besprecht ihr die gesammelten Antworten gemeinsam in der Klasse:
- Was lief im Projekt besonders gut?
- Welche eigenen Stärken konnte ich einbringen? Welche Stärken habe ich entdeckt oder ausgebaut?
- Was hätte ich selbst am Projekt besser machen können?
- Was habe ich gelernt?
- Was sollten wir insgesamt beim nächsten Mal anders machen?
Weitere Projektideen
Nach der Erstellung des Text-Adventures (oder stattdessen) bieten sich noch viele andere Projekte an, um die Erstellung von Webseiten weiter zu üben (oder auch zu bewerten):
- Eine Website über die AGs deiner Schule (mit Unterseiten für jede AG und Links dazwischen).
- Eine Website über die einzelnen Fächer und fachspezifischen Angebote (AGs, Wettbewerbe) deiner Schule.
- Eine Website über die Geschichte deiner Schule mit Unterseiten für bisherige Schulleiter:innen.
- ...
