MINT lernen

Textaufgaben: Aufbau einer Website

Eine eigene Seite für den Kuchenbasar und ein Vereinsauftritt, der nur gut aussieht.

Dein Fortschritt:
0 / 0 Aufgaben
1

Die Seite für den Kuchenbasar

AFB I–II

Die Klasse 10b veranstaltet einen Kuchenbasar und möchte dafür eine kleine Seite auf der Schulhomepage veröffentlichen. Die Abbildung zeigt, wie die Seite im Browser aussehen soll.

Das Foto liegt als Datei kuchen.jpg im selben Ordner wie die Seite; der Verweis soll zur Datei klasse.html führen. Das Aussehen der gesamten Schulhomepage wird über die gemeinsame Datei stil.css gesteuert.

So soll die Seite im Browser aussehen
Kuchenbasar der 10bAm Freitag verkaufen wir in der großen Pauseselbst gebackenen Kuchen für das Tierheim.Marmorkuchen – 1 €Apfelkuchen – 1,50 €Brownies – 1 €Foto:KuchenthekeZur Klassenseite
Ohne eigenes CSS — so, wie der Browser die Elemente von sich aus darstellt
  1. Erstellen Sie den HTML-Quelltext für den Körper (body) dieser Seite.
  2. Geben Sie eine CSS-Regel an, mit der auf der ganzen Schulhomepage alle Listenpunkte in Orange (#e79a3a) erscheinen, und geben Sie an, in welche Datei sie gehört.

Hinweise

Hinweis zu Aufgabe a)
Gehen Sie die Skizze von oben nach unten durch und wählen Sie für jeden Bereich das Element, das beschreibt, was er ist. Denken Sie beim Bild und beim Verweis an die nötigen Attribute.
Hinweis zu Aufgabe b)
Eine CSS-Regel besteht aus einem Selektor und Eigenschaften in geschweiften Klammern. Welches Element steht für einen einzelnen Listenpunkt?

Erwartungshorizont

Erwartungshorizont zu Aufgabe a)

Zum Beispiel:

<body>
  <h1>Kuchenbasar der 10b</h1>
  <p>Am Freitag verkaufen wir in der großen Pause
     selbst gebackenen Kuchen für das Tierheim.</p>
  <ul>
    <li>Marmorkuchen – 1 €</li>
    <li>Apfelkuchen – 1,50 €</li>
    <li>Brownies – 1 €</li>
  </ul>
  <img src="kuchen.jpg" alt="Kuchentheke mit verschiedenen Kuchen">
  <a href="klasse.html">Zur Klassenseite</a>
</body>

Bewertet wird die passende Wahl der Elemente (h1, p, ul mit li, img, a), korrekt geschlossene Tags, das Attribut src mit kuchen.jpg, eine sinnvolle alt-Beschreibung und href mit klasse.html. Die Reihenfolge von Bild und Liste darf abweichen.

Erwartungshorizont zu Aufgabe b)
li {
  color: #e79a3a;
}

Die Regel gehört in die gemeinsame Datei stil.css. Weil alle Seiten diese Datei über <link> einbinden, wirkt die Regel auf allen Seiten gleichzeitig.

2

Der alte Vereinsauftritt

AFB II–III

Die Website eines Handballvereins besteht aus 120 Seiten. Sie wurde vor Jahren von einem Mitglied erstellt; jede Seite ist aufgebaut wie der abgebildete Ausschnitt. Jede Überschrift erhält ihre Größe und Farbe einzeln über das Attribut style; eine gemeinsame CSS-Datei gibt es nicht. Im Durchschnitt enthält jede Seite 5 Überschriften.

Zwei Dinge sorgen für Diskussionen im Vorstand: Zum Vereinsjubiläum sollen alle Überschriften in der neuen Vereinsfarbe erscheinen, und ein blindes Mitglied meldet, dass sein Vorleseprogramm auf der Website „keine einzige Überschrift findet“. Der Kassenwart winkt ab: „Die Seite sieht doch gut aus. Für die Besucher macht es keinen Unterschied, wie der Quelltext geschrieben ist — eine Überarbeitung ist rausgeworfenes Geld.“

Ausschnitt aus dem Quelltext einer Vereinsseite
1<div style="font-size:32px; font-weight:bold;2 color:#2c5fb5">Unsere Mannschaften</div>3<div style="font-size:16px">Wir trainieren dienstags4 und donnerstags in der Halle am Wall.</div>5<div>- Jugend</div>6<div>- Damen</div>7<div>- Herren</div>8<img src="team.jpg">
Das Attribut style enthält CSS-Angaben direkt im Start-Tag.
  1. Untersuchen Sie den Ausschnitt auf Mängel hinsichtlich der Semantik und geben Sie jeweils eine Verbesserung an.
  2. Vergleichen Sie den Aufwand für die neue Überschriftenfarbe im jetzigen Aufbau mit dem Aufwand bei einer Website mit gemeinsamer Datei stil.css.
  3. Bewerten Sie die Aussage des Kassenwarts.

Hinweise

Hinweis zu Aufgabe a)
Gehen Sie Zeile für Zeile vor und fragen Sie jeweils: Verrät das Element, was dieser Bereich ist? Vergessen Sie das Bild nicht.
Hinweis zu Aufgabe b)
Zählen Sie, an wie vielen Stellen in wie vielen Dateien geändert werden müsste — und wie viele es bei einer gemeinsamen CSS-Regel wären.
Hinweis zu Aufgabe c)
Legen Sie Kriterien fest, etwa Aussehen, Zugänglichkeit für alle Nutzer, Aufwand bei künftigen Änderungen und Kosten, und prüfen Sie die Aussage an jedem davon.

Erwartungshorizont

Erwartungshorizont zu Aufgabe a)
  • Zeilen 1–2: Die Überschrift ist ein div und nur optisch groß und fett. Für Vorleseprogramme und Suchmaschinen ist sie keine Überschrift. Besser: <h1>Unsere Mannschaften</h1> (bzw. h2 auf Unterseiten).
  • Zeilen 3–4: Der Fließtext steht in einem div statt in einem Absatz. Besser: <p>…</p>.
  • Zeilen 5–7: Die Aufzählung besteht aus einzelnen div-Elementen mit Bindestrichen; sie ist nicht als Liste erkennbar. Besser: <ul> mit drei <li>.
  • Zeile 8: Dem Bild fehlt das Attribut alt; ein Vorleseprogramm kann nicht mitteilen, was es zeigt. Besser: alt="Mannschaftsfoto …".

Zusätzlich gehören die Gestaltungsangaben aus den style-Attributen in eine gemeinsame CSS-Datei.

Erwartungshorizont zu Aufgabe b)

Jetziger Aufbau: \(120 \cdot 5 = 600\) Farbangaben in 120 Dateien müssen einzeln geändert werden — aufwendig und fehleranfällig, weil leicht eine Stelle übersehen wird.

Mit stil.css: Eine einzige Zeile in einer einzigen Datei, etwa h1 { color: … }, ändert die Farbe auf allen 120 Seiten gleichzeitig.

Gemeinsam ist beiden Lösungen das Ergebnis im Browser; der Unterschied liegt allein im Aufwand. Die Trennung von Struktur (HTML) und Aussehen (CSS) zahlt sich also bei jeder künftigen Änderung aus.

Erwartungshorizont zu Aufgabe c)

Was für die Aussage spricht: Für sehende Besucher sieht die Seite tatsächlich so aus wie mit sauberem Quelltext; eine Überarbeitung kostet Zeit oder Geld.

Was dagegen spricht: Nicht alle Besucher „sehen“ die Seite. Vorleseprogramme und Suchmaschinen lesen Tags statt Farben; das blinde Mitglied ist bereits ausgeschlossen, und die Seite wird schlechter gefunden. Außerdem kostet jeder künftige Gestaltungswunsch ein Vielfaches an Arbeit, wie Teilaufgabe b) zeigt — die Überarbeitung spart langfristig Aufwand.

Mögliches Urteil: Die Aussage ist nicht haltbar, weil sie nur das Aussehen als Maßstab nimmt. Eine Überarbeitung mit semantischen Elementen und gemeinsamer CSS-Datei ist gerechtfertigt; sie kann schrittweise, beginnend mit den meistbesuchten Seiten, erfolgen. Vollständig ist die Antwort, wenn mindestens zwei Kriterien herangezogen, beide Seiten berücksichtigt und ein begründetes Urteil gefällt wird.