MINT üben

Aufbau einer Website

Dreißig Übungen zum Aufbau einer Website — HTML-Elemente, CSS-Regeln, JavaScript und semantische Bereiche.

Dein Fortschritt:
0 / 0 Aufgaben
1

Übungsaufgaben

Dreißig Übungen in gemischter Reihenfolge — du klickst, ziehst, ordnest, rechnest und knobelst. Jede Übung gibt dir sofort eine Rückmeldung, und zu jeder Aufgabe gibt es zwei gestufte Tipps: Der erste zeigt die Richtung, der zweite den entscheidenden Schritt. Die Chips zeigen das Anforderungsniveau: AFB I heißt wiedergeben und direkt anwenden, AFB II selbst entscheiden und verknüpfen, AFB III begründen, beurteilen oder eine Falle durchschauen. Aufgaben mit dem Chip Mix verbinden Wissen aus früheren Unterkapiteln, bei Trick steckt eine Falle drin. Fährst du über ein unterstrichenes Arbeitswort, siehst du, was es genau von dir verlangt.

A1
HTML oder CSS?
AFB I

Nenne für jede Aufgabe die zuständige Sprache: Schiebe jede Karte auf den passenden Stapel.

Schiebe die oberste Karte auf den passenden Stapel: ziehen, einen der beiden Stapel-Knöpfe drücken oder auf der Karte ←/→. Eine abgelegte Karte holst du mit Klick oder Enter zurück. „Prüfen“ schickt falsch abgelegte Karten mit einem Hinweis zurück in den Stapel.
Festlegen, dass ein Text eine Überschrift ist
Die Schriftfarbe aller Überschriften auf Blau setzen
Eine Liste mit drei Punkten anlegen
Den Abstand zwischen Absätzen auf 20 Pixel setzen
Einen Verweis auf eine andere Seite einfügen
Die Breite aller Bilder auf 300 Pixel setzen
Ein Bild mit einer Beschreibung einbinden
HTML beantwortet die Frage „Was ist das?“, CSS die Frage „Wie sieht es aus?“. Farben, Abstände und Größen sind immer CSS.
Zwei Fragen helfen: Was ist das? Wie sieht es aus?
Farben, Abstände und Größen sind Aussehen. Listen, Überschriften und Verweise sind Struktur.
A2
Paare finden: Element und Aufgabe
AFB I

Gib zu acht HTML-Elementen die passende Aufgabe an: Finde die Paare. Du hast dafür höchstens 16 Versuche.

Decke zwei Karten auf, die zusammengehören. Mit der Tastatur: Tab zur Karte, Enter aufdecken, Pfeiltasten zum Wandern.
Versuche: 0 von 16
Diese Elemente heißen semantisch, weil sie eine Bedeutung transportieren. Screenreader springen damit gezielt zum Hauptinhalt, und Suchmaschinen erkennen den Aufbau der Seite. Ein Layout aus lauter <div>-Kästen sieht gleich aus, verrät aber nichts über den Sinn.
Achte auf die Bedeutung, nicht auf das Aussehen: Zwei Elemente können gleich aussehen und trotzdem Verschiedenes bedeuten.
Beginne mit den Elementen, deren Name schon verrät, was sie tun: header, nav, footer.
A3
Tags zählen
AFB II

Berechne die Anzahlen in den beiden Quelltexten.

Quelltext 1: <ul><li>Pizza</li><li>Pasta</li></ul>

Quelltext 2: <img src="a.png" alt="Hund">

Trage alle Werte ein. Enter prüft, ↑/↓ wechseln das Feld.
Quelltext 1 hat die Elemente ul, li und li, also 3 Elemente mit je Start- und End-Tag: 6 Tags. Quelltext 2 ist ein Element ohne Inhalt mit den Attributen src und alt und ohne End-Tag.
Jedes Element mit Inhalt hat einen Start-Tag und einen End-Tag.
Attribute stehen im Start-Tag als name="wert". Ein img hat keinen Inhalt.