Der Verein braucht eine Seite
Dein Verein hat noch keine Webseite. Neue Mitglieder wissen nicht, wann das Training ist. Das Vereinsfest kennt kaum jemand.
Heute baust du die Seite. Du planst erst, dann gliederst du sie mit HTML, dann gestaltest du sie mit CSS. Zum Schluss prüfst du sie.
Am Ende dieser Lektion
Notiz
Ich kann eine kleine Webseite planen, bauen und prüfen.
Schlüsselwörter
| Begriff | Was er bedeutet | Beispiel |
|---|---|---|
| Entwurf | Eine Skizze, bevor du Code schreibst. | |
| Gliederung | Die Teile der Seite in ihrer Reihenfolge. | |
| Header | Der Kopf der Seite mit Titel und Menü. | <header> |
| Footer | Der Fuß der Seite mit Kontakt. | <footer> |
| Prüfliste | Eine Liste von Punkten, die du abhakst. |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Start: Das weißt du schon
Probier es aus
Start: Das weißt du schon
4 FragenDeine Antworten werden hier bewertet und nicht gespeichert. Mit einem Konto bleiben deine Ergebnisse erhalten.
Erst planen, dann schreiben
Frage dich vor dem Code: Wer liest die Seite? Was will diese Person wissen? Meist sind das Termine, ein Foto vom Team und ein Kontakt.
Zeichne die Teile auf Papier: oben der Kopf mit Menü, in der Mitte die Abschnitte, unten der Fuß. Dann weißt du, welche Tags du brauchst.
Beispiel: Vom Entwurf zu den Tags
| Teil im Entwurf | HTML-Tag | CSS-Idee |
|---|---|---|
| Kopf mit Titel und Menü | header, nav | Hintergrundfarbe, Flexbox |
| Abschnitt Termine | section, ul | Karten mit Rand |
| Foto vom Team | img mit alt | Breite in Prozent |
| Kontakt unten | footer | helle Farbe |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Probiere es aus: Ein Seitengerüst
<header>
<h1>Tischtennis-Club Eichenau</h1>
<nav class="menue">
<a href="#training">Training</a>
<a href="#kontakt">Kontakt</a>
</nav>
</header>
<main>
<section id="training">
<h2>Training</h2>
<p>Jeden Mittwoch um 17 Uhr in der Turnhalle.</p>
</section>
</main>
<footer>
<p id="kontakt">Fragen? Schreib uns eine Nachricht.</p>
</footer>
Kontrolle: Planung
Probier es aus
Kontrolle: Planung
3 FragenDeine Antworten werden hier bewertet und nicht gespeichert. Mit einem Konto bleiben deine Ergebnisse erhalten.