Modul 9
Meine Hobbyseite fertig gestalten
Deine Hobbyseite enthält bereits Texte, ein Bild, eine Tabelle und ein Video. Jetzt machst du daraus eine zusammenhängende Seite. Das Thema bestimmst du. Eine einzelne gut lesbare Seite reicht.
Deine Seite erzählt von einem Hobby
Stell dir vor, eine Person liest deine Seite und kennt dich nicht. Sie möchte wissen: Was machst du? Was brauchst du dafür? Was möchtest du als Nächstes lernen? Ordne deine vorhandenen Texte in dieser Reihenfolge. Verbinde kurze Einzelinformationen zu verständlichen Absätzen.
Bild, Tabelle und Video sollen zu diesem Thema passen. Erkläre jedes dieser Elemente mit eigenem Text. Ein Bild kann deine Ausrüstung zeigen, eine Tabelle deinen Wochenplan und ein Video eine interessante Technik. Du arbeitest an deiner bestehenden Seite weiter.
Ein ruhiger Platz für den Text
Das Hintergrundbild liegt hinter den Inhalten. Auf einem unruhigen Foto ist Schrift oft schwer lesbar. Deshalb bekommt dein Hauptinhalt mit main eine weiße Fläche. Setze <main> direkt vor deine erste Überschrift und </main> nach dem letzten Inhalt, noch vor </body>.
max-width begrenzt die Breite der Lesefläche. padding lässt innen Platz um den Text. margin: 24px auto; lässt oben und unten Abstand und verteilt freien Platz links und rechts gleichmäßig. Das Bild im Hintergrund darf am Rand sichtbar bleiben. Wenn cover Teile davon abschneidet, ist das normal.
Ein normales Bild ist Inhalt und wird mit img eingefügt. Ein Hintergrundbild ist Gestaltung und wird in CSS mit background-image gesetzt. url(...) nennt die Datei. Der Pfad wird von der CSS-Datei aus gelesen. Unsere style.css liegt neben dem Ordner bilder.
Die Bausteine
| Schreibweise | Bedeutung |
|---|---|
| background-image: url("bilder/hintergrund.svg"); | Bild als Hintergrund verwenden. |
| background-size: cover; | Bild so vergrößern, dass es den Bereich abdeckt; Teile können abgeschnitten werden. |
| background-position: center; | Hintergrundbild zentrieren. |
| background-repeat: no-repeat; | Hintergrundbild nicht kacheln. |
| main | Ein Bereich für den Hauptinhalt. |
| max-width und padding | Breite begrenzen und innen Abstand lassen. |
Ergänzung in style.css
body {
background-image: url("bilder/hintergrund.svg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
main {
max-width: 800px;
margin: 24px auto;
padding: 20px;
background-color: white;
}
img { max-width: 100%; height: auto; }
iframe { max-width: 100%; border: 0; }Schreibe im body einmal <main> vor deine Inhalte und </main> nach deine Inhalte. Das erzeugt mit unseren CSS-Regeln eine weiße Lesefläche vor dem Hintergrundbild. Das Hintergrundbild darf auch ein eigenes Foto sein. Passe dann den Dateinamen in url(...) an.
Deine Aufgabe
Arbeite in deinem Ordner mein-hobby weiter. Bearbeite die Schritte der Reihe nach. Verwende dein eigenes Hobby und formuliere eigene Sätze. Speichere nach jedem größeren Arbeitsschritt und sieh dir das Ergebnis im Browser an.
- Lies deine ganze Hobbyseite und ordne die Abschnitte. Beginne mit einer Einführung, beschreibe anschließend Ausrüstung und Aktivitäten und schließe mit einem eigenen Ziel ab.
- Überarbeite die Texte zu mindestens fünf eigenen Absätzen mit jeweils zwei bis vier Sätzen. Erkläre unbekannte Begriffe einfach. Behalte eine h1 und mindestens zwei passende h2-Überschriften.
- Setze einmal main um deinen gesamten sichtbaren Inhalt. Überschriften, Texte, Listen, Bild, Tabelle und Video sollen innerhalb dieses Bereichs stehen.
- Kopiere das Kurs-Hintergrundbild in bilder oder verwende ein eigenes geeignetes Foto. Ergänze background-image und die weiteren Hintergrundregeln in style.css. Achte auf den richtigen Dateinamen.
- Gestalte main mit der weißen Fläche, der begrenzten Breite und dem Innenabstand aus dem Beispiel. Ergänze die Regeln für img und iframe, damit diese nicht breiter als ihre Umgebung werden.
- Baue Bild, Tabelle und Video an passenden Stellen ein. Erkläre sie jeweils mit eigenem Text. Deine Tabelle soll eine Kopfzeile, mindestens vier Datenzeilen und sichtbare Zellrahmen haben.
- Sieh dir die Seite in einem breiten und in einem schmalen Browserfenster an. Verbessere Stellen, an denen Text schwer lesbar ist. Behalte deine Textgestaltung und alle bisherigen Inhalte, die zu deinem Thema passen.
Eine eigene Hobbyseite mit Textgestaltung, Bild, Hintergrundbild, Tabelle und Video.
Zum Abschluss
Kreuzworträtsel
Sechs Begriffe aus diesem Modul. Ein Kästchen steht für einen Buchstaben. Schreibe groß, ohne Leerzeichen: Ä = AE, Ö = OE, Ü = UE, ß = SS. Fülle das Rätsel auf deinem Handout aus.
Waagrecht →
- 3. Es kann Inhalt oder Gestaltung sein. (4 Buchstaben)
- 4. Deutscher Begriff für padding. (12 Buchstaben)
- 5. Dort liegt das Bild aus background-image. (11 Buchstaben)
Senkrecht ↓
- 1. Element für unseren Hauptinhalt. (4 Buchstaben)
- 2. Er gibt den Weg zur Hintergrunddatei an. (4 Buchstaben)
- 3. max-width begrenzt diese Abmessung. (6 Buchstaben)
Drei Abschlussfragen
- Was unterscheidet ein img-Bild vom Hintergrundbild?
- Warum verwenden wir main mit einer weißen Fläche?
- Worauf achtest du bei einem schmalen Browserfenster?
Online-Quiz
Zehn Fragen, jeweils eine richtige Antwort. Klicke dich durch und erhalte am Ende deine Punkte mit kurzen Erklärungen. Keine Anmeldung nötig.
Online-Quiz starten · Modul 9