3. Unterrichtsblock: Größen, Text, Schriften und Icons

Aufgabe 1 – border oder outline?

Zeit: ca. 7 Minuten

Zwei Boxen sind gleich breit eingestellt, die eine hat einen Rahmen (border), die andere eine Kontur (outline). Sage voraus, wie breit jede Box in Wirklichkeit ist.

Lege outline.html an (Inhalt des body, das style-Element gehört in den head):

<div class="a">border: 10px</div>
<div class="b">outline: 10px</div>
<div class="c">outline-offset: 10px</div>

1. Gib allen div die Regel width: 200px; background-color: lightyellow; margin-bottom: 30px;.
2. .a bekommt border: 10px solid seagreen;, .b bekommt outline: 10px solid crimson;, .c bekommt outline: 4px solid navy; und outline-offset: 10px;.
3. Schreibe auf, wie breit du jede der drei Boxen erwartest. Miss dann in den Entwicklerwerkzeugen (Reiter „Elemente“, Maus über das Element halten) und vergleiche.
4. Erkläre in einem Satz, warum outline das Layout nicht verschiebt.

Kontrolle: Die erste Box ist 220 px breit (200 + 2 × 10), die beiden anderen sind 200 px breit, obwohl die Konturen weit nach außen reichen.

Aufgabe 2 – Wie groß wird der Text?

Zeit: ca. 8 Minuten

Drei Elemente stecken ineinander. Das äußere hat font-size: 20px;, die beiden inneren font-size: 1.5em;. Sage voraus, wie groß die Schrift auf jeder Stufe ist.

Lege schriftgroesse.html an (Inhalt des body):

<div class="stufe1">Stufe 1
  <div class="stufe2">Stufe 2
    <div class="stufe3">Stufe 3</div>
  </div>
</div>

1. Schreibe deine Vorhersage für alle drei Stufen auf. Gib dann .stufe1 die Schrift 20px und .stufe2, .stufe3 die Schrift 1.5em.
2. Prüfe die Größen mit den Entwicklerwerkzeugen: Markiere ein Element und lies rechts im Reiter „Berechnet“ den Wert von font-size ab. Wo lagst du falsch?
3. Ersetze bei den beiden inneren Stufen em durch rem. Sage voraus, was sich ändert, und prüfe es.

Kontrolle: Mit em sind es 20 px, 30 px und 45 px. Mit rem sind die Stufen 2 und 3 beide 24 px groß.

em rechnet vom Elternelement aus, deshalb wächst die Schrift bei jeder Verschachtelung weiter (20 × 1,5 × 1,5 = 45). rem rechnet immer von der Schrift des html-Elements aus (Standard 16 px), egal wie tief ein Element steckt: 1,5 × 16 = 24.

Aufgabe 3 – Typografie der Projektseite

Zeit: ca. 12 Minuten

Auf großen Bildschirmen laufen Zeilen über 1500 Pixel Breite. Das liest niemand gern. Du gibst deiner Projektseite eine gut lesbare Spalte und eine bessere Schrift.

1. Gib main eine Höchstbreite von 800 px (max-width) und zentriere es mit margin: 0 auto;.
2. Stelle bei body eine Schriftliste ein: font-family: "Segoe UI", Arial, sans-serif;. Ergänze line-height: 1.6; (ohne Einheit).
3. Stelle die Schriftgröße der Klasse hervorgehoben auf 1.25rem um, statt in Pixeln.
4. Ziehe das Browserfenster breit und schmal. Beschreibe, was mit der Textspalte passiert.

Kontrolle: Im breiten Fenster steht der Text in einer mittigen Spalte, in den Entwicklerwerkzeugen ist main höchstens 800 px breit. Im schmalen Fenster füllt der Text die ganze Breite. Der größere Zeilenabstand macht die Absätze luftiger.

max-width begrenzt nur nach oben: Ist das Fenster schmaler, gibt der Browser dem Element weniger Breite. margin: 0 auto; verteilt den übrigen Platz links und rechts gleichmäßig. Das funktioniert nur, weil main eine Breite hat. Die vollständige Datei steht in style.css der Musterlösung.

Aufgabe 4 – Tourenkarten mit Icons

Zeit: ca. 12 Minuten

Die Tourenkarten werden lesbarer, wenn Gehzeit und Schwierigkeit ein Symbol haben. Du verwendest dafür die Google Material Icons.

1. Binde im head von index.html das Icon-Stylesheet ein (siehe Abschnitt „Icons“) und setze vor die Gehzeit das Icon schedule, vor die Schwierigkeit das Icon terrain, vor den Titel das Icon directions_walk.
2. Färbe alle Icons über color in einem Blauton deiner Palette. Bei der Klasse schwer sollen sie rot sein.
3. Die Icons sitzen vermutlich etwas zu hoch oder zu tief. Mit vertical-align: middle; richtest du sie an der Mitte der Textzeile aus. Setze zusätzlich margin: 4px 0; für die Absätze in den Karten.
4. Mache die Titel-Icons mit font-size größer (28 px) als die kleinen Icons in den Absätzen (der Standard sind 24 px).

Kontrolle: Jede Karte hat drei Icons, die auf Höhe des Textes sitzen. Die Icons der Gipfeltour sind rot, die anderen blau.

Die Regel .schwer .material-icons trifft nur Icons innerhalb von .schwer (Nachfahrenselektor mit Leerzeichen, wie nav a im Bonus von Block 1). Sie steht unter der allgemeinen Regel und ist außerdem genauer, deshalb gewinnt sie.

Aufgabe 5 – Ein Hero-Bild, das nie zu breit ist

Zeit: ca. 8 Minuten

Ein großes Bild kann auf schmalen Bildschirmen die Seite breiter machen als das Fenster. Dann erscheint ein waagerechter Rollbalken. Das vermeidest du mit zwei Zeilen CSS.

1. Füge am Anfang von main in index.html ein großes Bild ein: <img class="hero" src="images/hobby.svg" alt="Gezeichnete Berge mit Sonne" width="1200">. Nimm gern ein eigenes Foto, wenn du eins hast.
2. Ziehe das Fenster schmaler als 1200 px. Was passiert mit dem Bild, was mit der Seite?
3. Schreibe eine Regel für .hero mit max-width: 100%; und height: auto;. Sage voraus, was sich ändert, und prüfe es.
4. Erkläre in einem Satz, wozu height: auto; nötig ist.

Kontrolle: Ohne die Regel entsteht im schmalen Fenster ein waagerechter Rollbalken. Mit der Regel passt sich das Bild der Breite an, ohne verzerrt zu werden.

max-width: 100%; begrenzt das Bild auf die Breite seines Elternelements. height: auto; rechnet die Höhe passend zur Breite aus; ohne das bliebe sie fest, und das Bild würde gestaucht. display: block; entfernt die kleine Lücke, die Bilder als Inline-Elemente unter sich lassen.

Aufgabe 6 – Kontaktformular mit sichtbarem Fokus

Zeit: ca. 8 Minuten

Wer die Tab-Taste benutzt, springt von Feld zu Feld. Damit er sieht, wo er gerade ist, braucht das aktive Feld eine deutliche Kontur.

Lege kontakt.html mit dieser Formularstruktur an (oder nimm das Formular aus deinem HTML-Projekt) und binde style.css ein:

<form action="#" method="post">
  <p>
    <label for="name">Name</label><br>
    <input type="text" id="name" name="name">
  </p>
  <p>
    <label for="mail">E-Mail</label><br>
    <input type="email" id="mail" name="mail">
  </p>
  <p>
    <label for="text">Nachricht</label><br>
    <textarea id="text" name="text" rows="5"></textarea>
  </p>
  <p><button type="submit">Absenden</button></p>
</form>

1. Gib input und textarea die Breite 100%, padding: 10px;, einen Rahmen 2px solid in einem hellen Blaugrau und border-radius: 6px;.
2. Klicke in ein Feld. Der Browser zeichnet eine Standard-Kontur. Ersetze sie durch deine eigene: input:focus, textarea:focus { ... } mit outline: 3px solid in einem kräftigen Blau und outline-offset: 2px;. :focus gilt nur für das Feld, in dem der Cursor gerade steht.
3. Springe mit der Tab-Taste durch die Felder. Sage voraus, ob jedes Feld seine Kontur bekommt, und prüfe es.
4. Teste, was passiert, wenn du outline: none; einstellst. Warum ist das für Tastaturnutzer schlecht?

Kontrolle: Jedes Feld zeigt beim Anklicken und beim Anspringen mit Tab deine blaue Kontur. Ohne Kontur erkennt man nicht, welches Feld aktiv ist.

Der Fokus-Teil der style.css:

Mit outline: none; verschwindet jede Markierung. Wer nur die Tastatur benutzt, weiß dann nicht mehr, wo er ist. Ersetze die Kontur deshalb nie durch nichts, sondern durch eine eigene.

Bonusaufgabe 1 – Ein Flyer für den Wandertag

Gestalte frei einen Flyer (bonus-flyer.html) für den Wandertag am Bergsee. Du darfst alles aus den Blöcken 1 bis 3 benutzen.

1. Der Flyer ist eine zentrierte Karte (max-width etwa 480 px) mit Rahmen, Rundung und Innenabstand.
2. Er enthält ein Bild (max-width: 100%), eine Überschrift mit eigener Schrift, letter-spacing und text-transform, drei Informationen mit je einem Icon (Datum, Ort, Mitbringen) und einen auffälligen Anmeldehinweis.
3. Alle Farben bestehen aus hsl() mit einem gemeinsamen Farbton.

Kontrolle: Aus einem Meter Abstand erkennst du sofort, wann und wo der Wandertag stattfindet. Wenn du den Farbton änderst, ändert sich der ganze Flyer.

Bonusaufgabe 2 – Logo-Schriftzug mit Google Font

Mit einer Schrift von Google Fonts und text-shadow baust du einen Schriftzug für den Wanderverein (bonus-logo.html).

1. Wähle auf Google Fonts eine auffällige Schrift, zum Beispiel „Pacifico“, und binde sie mit dem link-Element im head ein.
2. Setze den Namen „Alpenblick“ in dieser Schrift auf einen dunklen Hintergrund, groß (60 px) und weiß. Gib eine Ersatzschrift mit an, falls die Google-Schrift nicht lädt (cursive).
3. Ergänze letter-spacing und einen text-shadow aus einer hellen Farbe, der etwas versetzt hinter dem Text liegt. Der Schatten besteht aus Versatz rechts, Versatz unten, Unschärfe und Farbe.

Kontrolle: Der Schriftzug steht in der gewählten Schrift, hat sichtbaren Schatten, und mit ausgeschaltetem Internet erscheint die Ersatzschrift.