Das weltweite Datennetz – ein Geheimnis?

Du benutzt jeden Tag Webseiten. Aber was passiert eigentlich, wenn du eine Adresse eintippst? Woher weiß dein Browser, wie die Seite aussehen soll? Und wieso darf man ein Bild aus dem Netz nicht einfach auf die eigene Seite stellen?

In diesem Lernpfad nimmst du Webseiten auseinander und baust deine eigene. Am Ende steht eine Homepage, die du selbst entworfen, geschrieben und gestaltet hast.

Gearbeitet wird direkt im Browser – du musst nichts installieren und kannst nichts kaputt machen.

Wie du mit diesem Lernpfad arbeitest

Übungsbereiche kannst du sofort verändern. Was du tippst, erscheint in der Vorschau – ohne Speichern, ohne Neuladen.
Verändere die Beispiele! Über den Zurücksetzen-Knopf kommst du zum Ausgangszustand zurück.
Der Browser zeigt bei fehlerhaftem HTML keine Fehlermeldung. Er versucht zu retten, was zu retten ist. Deine Rückmeldung ist deshalb immer die Vorschau: Sieht es aus wie gedacht?
Tipps sind eingeklappt. Öffne sie erst, wenn du wirklich nicht weiterkommst – und immer nur den nächsten.
Lösungen sind mit einem Passwort geschützt. Alle Passwörter stehen auf der Seite Lösungspasswörter – sieh dort erst nach, wenn du die Aufgabe wirklich versucht und die Tipps geöffnet hast.
Am Ende jeder Lektion findest du einen Selbsttest.

Eine Regel begleitet dich durch den ganzen Lernpfad: Erst denken, dann tippen. Sag bei jedem Beispiel zuerst voraus, wie die Seite aussehen wird. Erst danach schaust du in die Vorschau. Wenn Vorhersage und Ergebnis auseinandergehen, hast du gerade am meisten gelernt.

Die Kapitel

Wie das Web funktioniert – was beim Aufrufen einer Seite passiert und wie man eine fremde Seite untersucht
HTML: Inhalte auszeichnen – Überschriften, Absätze, Listen, Tabellen, Links, Bilder, Struktur
Quelltexte analysieren – den Aufbau einer Seite lesen und Fehler darin finden
CSS: gestalten – Selektoren, Farben, Schrift, Boxmodell, Layout, verschiedene Bildschirmgrößen
Recht und Verantwortung – Urheberrecht, Impressum, Datenschutz, Chancen und Risiken
Projekt – deine eigene Homepage
Referenz – HTML und CSS zum Nachschlagen