Informatik · Gymnasium Muttenz
HTML und CSS
Dieses Kapitel zeigt, wie eine Webseite aufgebaut ist und wie sie gestaltet wird. Sie brauchen dazu keinen Editor und kein Programm zu installieren: Jede Übung hat eine Werkbank mit Editor und Vorschau direkt in dieser Seite.
So arbeiten Sie mit dieser Seite
-
Schreiben Sie Ihren Code links in die Werkbank. Die Vorschau
rechts aktualisiert sich automatisch, mit
Ctrl/⌘+Entersofort. -
Braucht eine Übung zwei Dateien, hat die Werkbank die Reiter
index.htmlundstyle.css. Das<link>-Tag verbindet die beiden, genau wie auf einem echten Webserver. - Ihr Code bleibt in diesem Browser gespeichert, auch wenn Sie die Seite schliessen. Mit Herunterladen holen Sie eine Datei auf den Computer.
-
Abschnitt 1
Die Struktur von Webseiten: HTML
Tags, Elemente und der DOM. Überschriften, Abschnitte, Listen, Bilder und Links. Seiten sinnvoll strukturieren, Attribute, IDs und Klassen.
0 / 14 Übungen erledigt -
Abschnitt 2
Webseiten gestalten: CSS
Regeln und Selektoren, das Box-Modell, Animationen, Bilder und Hintergründe sowie die Layouts mit Grid und Flexbox.
0 / 23 Übungen erledigt -
Abschnitt 3
Eine eigene Webseite
Das Schlussprojekt: eine vollständige Webseite zu einem Thema, das Sie interessiert – mit allem aus diesem Kapitel.
0 / 2 Übungen erledigt
Zum Nachschlagen
Die folgenden Adressen werden im Kapitel immer wieder erwähnt. Sie lohnen sich auch später, wenn Sie eine eigene Seite bauen.