Welt 19 · Web-Baumeister

Die eigene Webseite – Wie das Web funktioniert und wie man mit HTML, CSS und JavaScript eine eigene Webseite baut.

8 Lektionen
Prüfung: 10 Fragen, bestanden ab 8
4 Feldforscher-Aufgaben

Willkommen auf der Web-Baustelle! Du lernst, wie Browser und Server miteinander reden. Dann baust du eine Webseite wie einen Menschen: HTML ist das Skelett, CSS sind die Kleider, JavaScript sind die Muskeln.

Selber machen

Deine Steckbrief-Seite

Du planst deine eigene Steckbrief-Seite mit Fantasiename, Lieblingstier und einem Knopf, der etwas tut. Wie das geht, lernst du in Lektion 5.

Die Lektionen

Jede Lektion hat fünf Schritte: Entdecken, Spielen, Mission, Test und Anhören.

Lektion 1
Wie eine Webseite und eine App funktionieren
Ich weiss, dass der Browser fragt und der Server antwortet, lese Adressen und erkenne https.
Darin lernt man (7 Unterthemen)
- Der Browser fragt
- Der Server antwortet
- Der Browser baut die Seite
- Die Adresse
- In deinem Land …
- https und das Schloss
- Und eine App?
Wichtige Wörter: Browser, Server, Adresse, Endung, App
Merke«Der Browser fragt, der Server antwortet mit Dateien, und der Browser baut daraus die Seite. Eine App wird einmal geholt und bleibt auf dem Gerät.»
Lektion 2
Skelett: HTML
Ich kenne HTML-Tags für Überschrift, Absatz, Bild und Link, öffnen und schliessen.
Darin lernt man (7 Unterthemen)
- Skelett, Kleider, Muskeln
- Etiketten in spitzen Klammern
- Auf und zu
- Kopf und Körper
- Bilder und Links
- Schachtel in Schachtel
- Hineinschauen erlaubt
Wichtige Wörter: HTML, Tag, Überschrift, Absatz, Link
Merke«HTML ist das Skelett einer Webseite. Tags in spitzen Klammern sagen, was etwas ist: Überschrift, Absatz, Bild oder Link. Fast jedes Tag wird geöffnet und wieder geschlossen.»
Lektion 3
Kleider: CSS
Ich gestalte Webseiten mit CSS-Regeln, Farbcodes, Kistenmodell und für jeden Bildschirm.
Darin lernt man (6 Unterthemen)
- Kleider für das Skelett
- Eine CSS-Regel
- Farben aus Licht
- Jedes Ding ist eine Kiste
- Eine Datei für alle Seiten
- Passt auf jeden Bildschirm
Wichtige Wörter: CSS, Regel, Farbcode, Rand, Abstand
Merke«CSS sind die Kleider einer Webseite: Farben, Schriften, Abstände und Ränder. Eine Regel sagt, wer wie aussehen soll.»
Lektion 4
Muskeln: JavaScript
Ich verstehe JavaScript als Befehle nach Ereignissen und füge nie fremden Code in den Browser ein.
Darin lernt man (6 Unterthemen)
- Muskeln bringen Bewegung
- Wenn …, dann …
- Ein Knopf wechselt die Farbe
- So sieht der Code aus
- Sich etwas merken
- Fremden Code nicht einfügen
Wichtige Wörter: JavaScript, Ereignis, Befehl, Variable
Merke«JavaScript sind die Muskeln einer Webseite. Es wartet auf Ereignisse wie einen Klick und führt dann Befehle aus. Fremden Code fügst du nie ein.»
Lektion 5
Meine Steckbrief-Seite
Ich baue eine eigene Steckbrief-Seite mit Plan, HTML, CSS und JavaScript ohne persönliche Daten.
Darin lernt man (7 Unterthemen)
- Zuerst ein Plan
- Was auf deinen Steckbrief kommt
- Skelett, Kleider, Muskeln
- Knöpfe, die man findet
- Ausprobieren lassen
- Fehler gehören dazu
- Ins Internet nur mit Eltern
Wichtige Wörter: Wireframe, Steckbrief, Kontrast, testen
Merke«Erst ein Plan auf Papier, dann Skelett, Kleider und Muskeln. Gute Knöpfe findet man sofort. Persönliches bleibt weg, und ins Internet geht die Seite nur mit Mama oder Papa.»
Lektion 6
Gemeinsam bauen
Ich kenne Wikipedia, OpenStreetMap und offene Programme und weiss: gratis ist nicht gleich offen.
Darin lernt man (7 Unterthemen)
- Ein Lexikon von allen
- Eine Karte von allen
- Offene Programme
- Ein Student fängt an
- Sogar eine offene KI
- Gratis ist nicht offen
- Mitbauen mit Regeln
Wichtige Wörter: offen, Freiwillige, Wikipedia, OpenStreetMap, Linux
Merke«Wikipedia, OpenStreetMap und offene Programme wie Linux und Scratch bauen viele Menschen gemeinsam. Offen heisst: Der Bauplan ist für alle sichtbar. Gratis heisst nur: Es kostet nichts.»
Lektion 7 · Zeitmaschine
Zeitmaschine: info.cern.ch und die blinkenden 90er
Ich kenne die Geschichte des Webs vom CERN über GeoCities bis Google.
Darin lernt man (7 Unterthemen)
- Bipo steigt in die Zeitmaschine
- Früher: Die allererste Webseite
- Früher: Bilder im Browser
- Früher: Blinken und Glitzern
- Früher: Muskeln und Kleider
- Früher: Die Suchmaschine
- Heute: Über eine Milliarde Webseiten
Wichtige Wörter: CERN, Modem, Suchmaschine
Merke«Ende 1990 lief am CERN die erste Webseite info.cern.ch, ab 1991 für alle. Dann kamen Bilder, blinkende Bastelseiten, JavaScript, CSS und Google. Gebaut wird bis heute mit HTML, CSS und JavaScript.»
Bonus-Lektion
Bonus: Webseiten für alle
Ich weiss, was barrierefrei heisst: Alt-Text, Kontrast, Tastatur, Untertitel, klare Sprache.
Darin lernt man (6 Unterthemen)
- Eine Seite für alle
- Der Computer liest vor
- Bilder beschreiben
- Starker Kontrast
- Ganz ohne Maus
- Untertitel und klare Sprache
Wichtige Wörter: barrierefrei, Bildschirmleser, Alt-Text, Kontrast, Untertitel
Merke«Eine barrierefreie Seite funktioniert für alle: Bilder mit Alt-Text, starker Kontrast, Bedienung mit der Tastatur, Untertitel und klare Sprache.»