Modul 2
Absätze und Überschriften
Öffne in VS Code wieder deinen Ordner mein-hobby und die Datei index.html. Dein Grundgerüst bleibt erhalten. Neue sichtbare Inhalte schreibst du zwischen <body> und </body>.
Ein Gedanke bekommt einen Absatz
Ein Besucher kennt dein Hobby vielleicht noch gar nicht. Erkläre ihm zuerst, was du machst. In einem zweiten Absatz kannst du erzählen, warum es dir Spaß macht. In einem dritten Absatz beschreibst du, wie du angefangen hast. Jeder Absatz behandelt einen eigenen Gedanken und darf aus mehreren Sätzen bestehen.
Die p-Tags gehören um den ganzen Absatz. Du brauchst nicht nach jedem Satz einen neuen Tag. Eine Leerzeile im HTML-Code hilft dir beim Lesen des Codes. Im Browser entsteht dadurch aber kein neuer Absatz. Dort sind die p-Tags entscheidend.
Überschriften helfen beim Finden
Die h1 ist der Name deiner ganzen Seite, zum Beispiel Mein Hobby Mountainbiken. Darunter ordnen h2-Überschriften die Themen. Meine Ausrüstung und Meine Lieblingsstrecke sind zum Beispiel zwei Abschnitte. Schreibe unter jede Überschrift auch Text, damit der Besucher etwas über das Thema erfährt.
title und h1 haben verschiedene Plätze: title steht im head und erscheint im Browser-Tab. h1 steht im body und ist auf der Seite sichtbar. br erzeugt nur eine neue Zeile im selben Text. Für einen neuen Gedanken verwendest du einen neuen Absatz.
Mit <h1> bekommt die Seite eine Hauptüberschrift. <h2> beginnt einen Abschnitt darunter. Ein Absatz steht zwischen <p> und </p>. Eine neue Zeile im Editor erzeugt noch keinen neuen Absatz im Browser. Dafür brauchst du ein neues p-Element.
Die Bausteine
| Schreibweise | Bedeutung |
|---|---|
| <h1>Mein Hobby</h1> | Die Hauptüberschrift der Seite. |
| <h2>Meine Ausrüstung</h2> | Eine Unterüberschrift. |
| <p>Ein Satz.</p> | Ein eigener Absatz. |
| <br> | Ein Zeilenumbruch innerhalb eines Textes. |
Diesen Ausschnitt schreibst du in den body
<h1>Mein Hobby Robotik</h1>
<p>Ich baue gerne kleine Roboter.
Dabei verbinde ich Bauteile und teste ihre Bewegung.</p>
<p>Angefangen habe ich mit einem einfachen Bausatz.
Heute probiere ich auch eigene Ideen aus.</p>
<h2>Mein nächstes Ziel</h2>
<p>Mein Roboter soll Hindernisse erkennen.
Zuerst möchte ich dafür einen Sensor ausprobieren.</p>h1 bis h6 sind Überschriftenebenen. Im Kurs reichen h1 und h2. Verwende auf deiner Seite eine h1. Wähle eine Ebene nach dem Inhalt; die Schriftgröße ändern wir später mit CSS.
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.
- Öffne deine bestehende index.html. Lass head und body erhalten. Ergänze im body eine h1 mit dem Namen deines Hobbys.
- Schreibe eine Einführung aus zwei Absätzen mit jeweils zwei bis drei Sätzen. Erkläre, was dein Hobby ist und wie du dazu gekommen bist. Schreibe für jemanden, der davon noch wenig weiß.
- Ergänze die h2 Meine Ausrüstung. Beschreibe darunter in einem Absatz mindestens drei Dinge, die du für dein Hobby brauchst. Erkläre auch, wofür du eines davon verwendest.
- Ergänze eine zweite h2 mit einem eigenen Thema, zum Beispiel Mein nächstes Ziel. Schreibe darunter zwei Absätze: Was möchtest du schaffen? Wie möchtest du beginnen?
- Deine Seite soll jetzt mindestens fünf eigene Absätze enthalten. Verwende jeweils p-Tags. Teile lange Texte nach ihrem Inhalt auf, statt einzelne Wörter mit vielen br-Tags nach unten zu schieben.
- Speichere die Seite und lies sie im Browser von oben nach unten. Verbessere unklare Sätze. Ändere auch den title so, dass der Browser-Tab zu deinem Hobby passt.
Eine Hauptüberschrift, mindestens zwei Unterüberschriften und fünf verständliche eigene Absätze.
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. Textbereich mit einem zusammengehörigen Gedanken. (6 Buchstaben)
- 5. Diesen erzeugt br. (13 Buchstaben)
- 6. Sie gibt einem Abschnitt einen Namen. (12 Buchstaben)
Senkrecht ↓
- 1. Der Name im Browser-Tab. (5 Buchstaben)
- 2. h1 und h2 stehen auf einer unterschiedlichen … (5 Buchstaben)
- 4. Sichtbarer Text gehört im body zu diesem Teil der Seite. (6 Buchstaben)
Drei Abschlussfragen
- Wann beginnt ein neuer Absatz?
- Wie unterscheiden sich h1 und h2?
- Warum ersetzt eine Leerzeile im Code keinen neuen Absatz?
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 2