Buch druckenBuch drucken

Webseiten erstellen mit HTML & CSS

Website: Moodle Weimar - Jenaplan
Kurs: Test
Buch: Webseiten erstellen mit HTML & CSS
Gedruckt von: Gast
Datum: Freitag, 24. Juli 2026, 06:32

Inhaltsverzeichnis

1. Worum geht es hier?

Beim Surfen im World Wide Web besucht mach viele Webseiten – irgendwann wurden diese erstellt. Doch wie geht das? Woraus bestehen Webseiten? In diesem Unterkapitel werden die Fragen beantwortet. Dafür werden zwei spezielle Sprachen einführen: HTML zum Erstellen von Webseiten und CSS zur Formatierung von Webseiten. 

Hier lernst du, ...

  • ... wie man einfache Webseiten mit HTML selbst erstellt und mit CSS formatiert.
  • ... warum es sinnvoll ist, bei der Informationsdarstellung zwischen Strukturierung und Formatierung zu trennen.
  • ... was man unter Syntax und Semantik einer (formalen) Sprache versteht.
  • ... wie man in einer Gruppe gemeinsam eine Website erstellt.
  • ... wie man mit einer Dokumentation umgeht.
  • ... was man unter Fehlertoleranz und Fehlererkennung versteht.
  • ... wie man eine Webseite validieren kann und warum es sinnvoll ist, auf valide Webseiten zu achten.
  • ... wie man eine Webseite so erstellt, dass sie auf ganz unterschiedlichen Endgeräten gut aussieht..

Es geht explizit nicht darum, hier ein Tutorial für HTML und CSS anzubieten. Vielmehr sollen die grundlegenden Prinzipien herausgearbeitet werden. Für ein Tutorial und Nachschlagewerk empfehlen wir selfhtml oder andere Websites.

2. HTML & CSS erkunden

Erkundung von HTML

Auf dieser Seite geht es darum, dass du erste Erfahrungen damit machst, wie man Webseiten mit der Sprache HTML erstellen kann. Es sind dafür zwei Wege vorgesehen: Entweder du bearbeitest eine Lernstrecke aus dem Kids-Bereich von Inf-Schule.de oder du greifst die im Folgenden dargestellte Webseiten auf und bleibst auf unserem Moodle.

Die „Rückseite“ einer Webseite

Wenn man eine Webseite betrachtet, sieht man ein Dokument im eigenen Browser. Im Hintergrund steht ein Quelltext, der vorgibt, welche Inhalte wie auf der Webseite erscheinen sollen. Man kann bei einer Webseite also zwischen einer Vorderseite und einer Rückseite unterscheiden.

Möglichkeit 1

Bearbeite diese Lernstrecke.

Möglichkeit 2

Die folgende Webseite des Sportvereins ist unten zu sehen – aufgeteilt in Vorderseite und Rückseite. Zur Einfachheit wurde auf die Farbgebung und die Verlinkungen zu einzelnen Abteilungen des Vereins verzichtet.

(a) Verschaffe dir einen Überblick über den Quelltext (die „Rückseite“) der Webseite. Versuche herauszufinden, wie die Elemente der Vorderseite mit denen der Rückseite zusammenhängen.

(b) Beschreibe, was passiert, wenn du „h1“ und „h2“ durch „h3“ und „h4“ ersetzt.

(c) Beschreibe, was passiert, wenn du „ol“ durch „ul“ ersetzt.

(d) Füge in der Auflistung eine weitere Abteilung „Bogenschießen“ ein.

(e) Es gibt auch ein passendes Bild zum Bogenschießen. Sein Dateiname ist „https://cdn-icons-png.flaticon.com/512/184/184101.png“. Füge es ein.

(f) Julie Nguyen ist als Beisitzerin zurückgetreten. Entferne sie aus der Tabelle und mache dich mit der Struktur einer Tabelle vertraut. „tr“ steht hier für „table row“; „td“ für „table data“ und „th“ für „table head“.

See the Pen Untitled by ASAMedia (@ludwigvictor) on CodePen.

Erkunden von CSS

Webseiten können ganz unterschiedlich aussehen. Die Formatierung einer Webseite geschieht mit der Sprache CSS. Auf dieser Seite geht es darum, dass du erste Erfahrungen damit sammelst. Es sind dafür zwei Wege vorgesehen: Entweder du bearbeitest eine Lernstrecke aus dem Kids-Bereich oder du greifst folgende Webseiten auf.

Das Aussehen einer Webseite

Die Webseite auf der vorherigen Seite sieht anders aus als die auf dieser Seite: Es gibt keine Farben und eine andere Schriftart. Da die Inhalte einer Webseite einfach nur als Text gespeichert werden, ist es naheliegend, auch die Formatierung der Webseite durch Text zu speichern, beispielsweise so:

Hintergrundfarbe: hellblau; Schriftart: ...

Damit der Browser die Formatierung auslesen kann, nutzt man eine bestimmte Sprache: Cascading Style Sheets (kurz CSS).

Möglichkeit 1

Bearbeite diese Lernstrecke.

Möglichkeit 2

Die Webseite des Sportvereins ist unten noch einmal (leicht verändert) zu sehen. Die Rückseite ist in zwei Teile aufgeteilt – den Inhalt (HTML) und die Formatierung (CSS).

(a) Verschaffe dir einen Überblick über den CSS-Quelltext. Versuche herauszufinden, wie die Elemente des Quelltextes mit dem Layout der Webseite zusammenhängen.

(b) Verändere Farben und Schriftgrößen.

Tipp:

  • Als Farben kannst du z.B. „red“, „green“, „orange“ oder „purple“ verwenden. Als Schriftgrößen sind „x-small“, „small“, „medium“, aber auch Angaben wie „150%“ möglich.
  • Für mehr Auswahl bei Farben kannst du diese im RGB-System darstellen und dann entweder in der Form „rgb(...,...,...)“ oder durch Hexadezimalzahlen darstellen. Mehr zu diesem Thema findest du hier.

See the Pen Untitled by ASAMedia (@ludwigvictor) on CodePen.

3. Syntax, Semantik & Werkzeuge

Syntax und Semantik

Zielsetzung

Du hast bereits erste Erfahrungen damit gesammelt, wie man Webseiten mit HTML erstellen kann. Eventuell hast du sogar betrachtet, wie man mit CSS eine Webseite formatiert. Auf dieser Seite geht es darum, die Erfahrungen mit HTML etwas zu ordnen.

HTML als Sprache

HTML steht für „Hypertext Markup Language“ – es handelt sich also um eine Sprache (englisch: „language“). Wie jede andere Sprache (Deutsch, Latein, ...) gibt es Regeln, die die Sprache beachten muss. Gleichzeitig haben die verschiedenen Elemente der Sprache eine klare Bedeutung.

Zur einfacheren Beschreibung nutze diesen Fachbegriff: Die „Klammerausdrücke“ (<h1>...</h1> oder <p>...</p>) nennt man Tags (englisch für Etikett). In manchen Tags gibt man weitere Informationen an; das nennt man Attribut. So legt man z. B. im img-Tag mit dem Attribut src den Speicherort eines Bildes an:

<img src="img/volleyball.png" >

Aufgabe 1: HTML-Syntax

Die Grammatik-Regeln einer Sprache bezeichnet man auch als Syntax der Sprache. Die Syntax legt fest, wie Sätze in der Sprache aufgebaut sind und wo beispielsweise Kommas stehen müssen.

(a) ✏️️ Sammle Syntax-Regeln von HTML.

(b) Probiere auf einer der vorherigen Seiten aus, was geschieht, wenn du gegen Syntax-Regeln verstößt.

Aufgabe 2: HTML-Semantik

Alternative Vorgehensweise

In dieser Aufgabe wird die Semantik vorgegebener Tags herausgefunden. Alternativ können auch erst mögliche Auszeichnungen (Überschrift, Link, Aufzählung) im Unterrichtsgespräch gesammelt werden. In Gruppen sollen dann die zugehörigen Tags mit einem Musterbeispiel (aus den bestehenden Beispiel-Seiten) herausgesucht werden. Sobald alles zusammengetragen ist, hat die Lerngruppe eine gemeinsame Lernhilfe, die bei Bedarf immer weiter ergänzt werden kann.

Die Semantik einer Sprache gibt – im Gegensatz zur Syntax – die Bedeutung an.

(a) ✏️️ Beschreibe die Bedeutung (Semantik) der folgenden Tags:

  • <p>...</p>
  • <ol>...</ol>
  • <li>...</li>
  • <h1>...</h1>
  • Gehe auch auf den Unterschied zwischen <h1>, <h2> usw. ein.
  • <img src=... >
  • <a href=... >...</a>

(b) Ordne zu Syntax oder Semantik zu.

Quelle: LearningApps

CSS als Sprache

CSS steht für „Cascading Style Sheets“. Es handelt sich ebenfalls um eine Sprache mit Syntax und Semantik. Ein CSS-Dokument ist aus mehreren CSS-Regeln, die so aufgebaut sind:

h2
{
    color: green;
}
 

Jede Regel wird durch den Namen von einem oder mehreren HTML-Elementen eingeleitet (hier h2); das nennt man den Selektor der CSS-Regel. Innerhalb der Regeln stehen Anweisungen. Diese bestehen immer aus einer Eigenschaft und einem Wert.

Aufgabe 3: Syntax und Semantik von CSS

(a) ✏️️ Sammle Syntax-Regeln von CSS: Beschreibe dafür den Aufbau eines gesamten CSS-Dokuments, einer CSS-Regel und einer einzelnen Anweisung.

(b) ✏️️ Beschreibe die Semantik einer CSS-Regel und einer CSS-Anweisung.

(c) Für Expert:innen: Probiere aus, ob die Reihenfolge der CSS-Regeln eine Rolle spielt. Tausche dafür auf der vorherigen Seite die Reihenfolgen der Regel mit dem Selektor h1, h2 und der Regel mit dem Selektor h1. Kannst du das Verhalten erklären?

(d) Für Expert:innen: Man kann als Selektor z.B. li, a oder aber li a verwenden. Das hat eine unterschiedliche Semantik. Probiere das aus und versuche, das unterschiedliche Verhalten zu erklären.

Formale Sprachen

Wie du auf dieser Seite gesehen hast, sind HTML und CSS Sprachen. Im Gegensatz zu natürlichen Sprachen (deutsch, englisch, ...) dienen sie aber nicht der zwischenmenschlichen Verständigung, sondern zur computergerechten Darstellung von Information und zur Ermöglichung automatisierter Verarbeitung von Daten. Solche Sprachen nennt man Formale Sprachen.

Zum Nachschlagen

Du beherrschst nun einige – aber noch längst nicht alle – HTML- und CSS-Elemente, die es gibt. Aber das ist gar kein Problem – es gibt viele Nachschlagewerke. Suche selbst oder schau zum Beispiel bei selfhtml, wenn du eine bestimmte Sache suchst.

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.

Browser und Texteditor

Bisher haben wir ein Tool zur Erstellung und Betrachtung von Webseiten genutzt. Doch natürlich kann man Webseiten auch ohne das Tool von inf-schule erstellen und betrachten. Auf dieser Seite lösen wir uns davon.

HTML mit einem Text-Editor

Bisher hast du das HTML-Tool von inf-schule genutzt, um Webseiten zu erstellen und zu betrachten. Für größere Projekte mit mehreren Unterseiten, die miteinander verlinkt sind, ist das ungeeignet. Deshalb wirst du nun zu einer anderen Vorgehensweise wechseln.

Aufgabe 1: Der Browser zeigt HTML an

Dein Browser zeigt HTML-Dokumente an. Davon kann man sich auch selbst überzeugen. In vielen Browsern kannst du mit der Tastenkombination „Strg.“ und „U“ (gleichzeitig drücken) von der Vorder- zur Rückseite wechseln. Achtung: Es folgt ein – ggf. riesiger – Quelltext. Versuche nicht, alles zu verstehen, sondern schau, ob du das ein oder andere Tag, das wir oben kennengelernt haben, wiederfindest.

Aufgabe 2: Webseiten im Editor erstellen

In der vorherigen Aufgabe hast du gesehen, dass die Rückseite einer Webseite tatsächlich aus ganz normalem Text besteht – dem HTML-Quelltext. Entsprechend kannst du diesen Quelltext auch ohne das HTML-Tool von inf-schule erstellen und mit einem Browser anzeigen.

(a) Lade dir das folgende zip-Archiv herunter und entpacke es an einen beliebigen Ordner auf deinem Computer. Verschaffe dir einen kurzen Überblick, welche Dateien enthalten sind. Wo befinden sich die ganzen Bilder?

(b) Öffne nun die Datei sport.html in einem Editor (z.B. Notepad++). Verschaffe dir einen Überblick über den HTML-Quelltext (die Rückseite).

(c) Öffne nun dieselbe Datei mit einem Browser. Nun siehst du die Vorderseite. Es ist ein Hyperlink eingebaut. Finde ihn und teste seine Funktionsweise.

(d) Baue in die HTML-Datei Hyperlinks zu den anderen Abteilungen ein. Abteilung 4 fehlt aktuell auch noch. Wenn du die drei zustzlichen Links erstellt hast, dann betrachte die Dateien noch einmal im Browser und teste die Website aus.

Aufgabe 3: CSS einbinden

Das Layout (Farben, Schriftart, ...) einer Website wird durch einen CSS-Quelltext beschrieben.

(a) Lade dir das folgende zip-Archiv herunter und entpacke es an einen beliebigen Ordner auf deinem Computer. Verschaffe dir einen kurzen Überblick, welche Dateien enthalten sind. Wo befinden sich die CSS-Dateien?

(b) Öffne eine beliebige der enthaltenen HTML-Dateien in einem Editor und verschaffe dir einen Überblick über den Quelltext. Was hat sich im Vergleich zu den vorherigen Aufgaben geändert? An welcher Stelle des HTML-Quelltextes wird festgelegt, welche CSS-Datei verwendet werden soll?

(c) Es ist eine zweite CSS-Datei enthalten. Ändere den HTML-Quelltext einer Datei so ab, dass nun diese andere CSS-Datei genutzt wird. Überprüfe die Auswirkungen davon, indem du die HTML-Datei von einem Browser anzeigen lässt.

(d) Ändere bei allen enthaltenen Webseiten die Hintergrundfarbe zu grün.

Aufgabe 4: Trennung von Inhalt/Struktur und Design

(a) 💬 Begründe mithilfe von Aufgabe 3, dass es sinnvoll ist, die Layout/Design-Informationen für eine Website in einer separaten Datei zu speichern, statt in jeder einzelnen HTML-Datei das Layout festzulegen. Man spricht dabei von der Trennung von Inhalt/Struktur und Design.

(b) ✏️️ Notiere dir die eben kennengelernte Trennung von Inhalt/Struktur (mit HTML) und Design (mit CSS in einer eigenen Datei) als ein wesentliches Prinzip bei der Erstellung von Webseiten. Halte eine Begründung fest, warum das sinnvoll ist.

4. Projekt: Ein HTML-Text-Adventure

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.html ist 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 Ordner img liegt. Wenn ihr euch schon mit CSS auskennt, dann könnt ihr stattdessen die HTML-Datei schloss.html nutzen. Sie ist bereits so erstellt, dass sie die CSS-Datei styles.css verwendet. 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. 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: Jeder 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.
  • ...