Auf einer Seite sollen alle Überschriften dunkelrot statt schwarz erscheinen. In welcher Datei wird das festgelegt?
Frage dich, welche der drei Sprachen die Frage „Wie sieht es aus?“ beantwortet.
2
HTML, CSS oder JavaScript?
AFB II
Ordne jede Beschreibung der Sprache zu, die dafür zuständig ist.
Festlegen, dass dieser Textblock ein Absatz ist
Den Abstand zwischen zwei Absätzen auf 20 Pixel setzen
Beim Klick auf einen Knopf ein Menü aufklappen
Ein Bild mit einer Beschreibung für Vorleseprogramme versehen
Alle Verweise auf der ganzen Website grün einfärben
Drei Fragen helfen: Was ist das? · Wie sieht es aus? · Was passiert, wenn?
3
Rückblick: Die Seite sieht kaputt aus
AFB II
Eine Seite zeigt allen Text an, aber völlig unformatiert: schwarze Standardschrift auf weißem Grund, alles untereinander. In den Entwicklerwerkzeugen steht neben stil.css der Code 404. Was ist passiert?
In 3.1.4 hast du gelernt, was ein 404 aussagt — und dass jede Datei einzeln angefordert wird.
4
Warum die Tags nicht egal sind
AFB II
Setze das Grundgerüst einer HTML-Seite in der richtigen Reihenfolge zusammen — zwei Bausteine gehören nicht hinein.
Klicke die Bausteine in der richtigen Reihenfolge an. Ein Klick im Bauplan legt einen Baustein wieder zurück.
Die Reihenfolge ist kein Selbstzweck: Browser, Suchmaschinen und Screenreader verlassen sich darauf. Genauso ist es bei <h1> oder <nav> — ein <div> sieht vielleicht gleich aus, sagt aber nichts über die Bedeutung. Das nennt man semantisches HTML.
Erst die Angabe, um welche Sprache es geht, dann die Klammer um alles, dann Kopf und Körper.
5
Fehlersuche im HTML-Merkzettel
AFB II
In diesem Merkzettel stecken drei Fehler. Klicke genau diese drei Zeilen an.
In diesem Text stecken Fehler. Klicke genau die falschen Zeilen an — die richtigen musst du stehen lassen.
Die saubere Trennung ist das Leitprinzip: HTML = Struktur, CSS = Aussehen, JavaScript = Verhalten. Wer sie einhält, kann das Aussehen einer ganzen Website ändern, ohne eine einzige Inhaltsdatei anzufassen.
Zwei Fehler verwechseln die Zuständigkeiten von HTML, CSS und JavaScript. Ein dritter behauptet etwas über Groß- und Kleinschreibung.
6
Paare finden: Element und Aufgabe
AFB I
Acht HTML-Elemente — finde zu jedem die passende Aufgabe. 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.
7
Kopf oder Körper?
AFB I
Ordne die acht Bausteine zu: Gehören sie in den Kopf (head) oder in den Körper (body) einer HTML-Datei?
Ziehe jede Karte in den passenden Korb — oder wähle sie mit Enter aus und drücke dann die Ziffer des Korbs (0 legt sie zurück).
1Kopf (head)
2Körper (body)
Im Kopf stehen Angaben über die Seite: ihr Name, die Zeichenkodierung und der Verweis auf die Gestaltungsdatei. Nichts davon erscheint im Seiteninhalt — der Titel taucht nur oben im Tab auf. Alles, was du auf der Seite selbst siehst oder anklickst, gehört in den Körper.
Frage bei jeder Karte: Erscheint das auf der Seite? Dann Körper. Ist es eine Angabe für den Browser über die Seite? Dann Kopf.
8
CSS-Regeln lesen
AFB II
Tippe links eine CSS-Regel an und danach rechts die Wirkung, die sie auf der ganzen Website hat.
Verbinde jeden linken Eintrag mit genau einem rechten. Ein Klick auf eine Verbindung löst sie wieder.
Der Selektor vor der geschweiften Klammer entscheidet, welche Elemente betroffen sind — und zwar alle dieser Art auf jeder Seite, die die CSS-Datei einbindet. Die Eigenschaft in der Klammer entscheidet, was sich an ihnen ändert.
Lies zuerst nur den Selektor ganz links: Welches Element ist gemeint? li ist ein einzelner Listenpunkt, img ein Bild.
9
Eine Seite, die auch vorgelesen funktioniert
AFB III
Ein Vorleseprogramm soll eine Seite für eine blinde Nutzerin gut erschließen können. Drei Umsetzungen helfen dabei. Markiere genau diese drei.
Mehrere Antworten sind richtig. Markiere alle zutreffenden und klicke dann auf „Prüfen“.
Ein Vorleseprogramm liest Tags, keine Farben und keine Schriftgrößen. Nur wer die Bedeutung eines Bereichs mit dem passenden Element ausdrückt — Überschrift, Liste, Navigation, Bildbeschreibung —, macht sie auch ohne Bildschirm zugänglich. Das ist der praktische Wert der Semantik.
Stell dir vor, du hörst die Seite nur: Welche Umsetzung verrät dem Programm, was ein Bereich ist — und welche wirkt nur fürs Auge?
10
Trickfrage: die Seite in den Entwicklerwerkzeugen ändern
AFB III
In den Entwicklerwerkzeugen deines Browsers änderst du die Überschrift einer Nachrichtenseite und machst einen Screenshot. Arbeite dich durch den Baum.
Beantworte die Fragen des Entscheidungsbaums mit Ja oder Nein und schau, wo du herauskommst.
Der Browser lädt immer nur eine Kopie der Seite und baut sie im Arbeitsspeicher zusammen. Du bearbeitest diese Kopie. Genau deshalb sind solche Screenshots als Beweis wertlos — und genau deshalb sollte man Bildern im Netz nicht blind trauen.
Überlege, wo die Datei liegt, die du gerade siehst — auf dem Server oder in deinem Browser?
