Erkundung: Formatierung mit CSS
Zielsetzung
Webseiten können ganz unterschiedlich aussehen. Die Formatierung einer Webseite geschieht mit der Sprache CSS. Auf dieser Seite geht es darum, dass du erste Erfahrungen damit sammelst. Es sind dafür zwei Wege vorgesehen: Entweder du bearbeitest eine Lernstrecke aus dem Kids-Bereich oder du greifst Webseiten aus dem Vorwort auf. Wir empfehlen die erste Vorgehensweise (Möglichkeit 1).
Das Aussehen einer Webseite
Die Webseite auf der vorherigen Seite sieht anders aus als die aus dem Vorwort: Es gibt keine Farben und eine andere Schriftart. Da die Inhalte einer Webseite einfach nur als Text gespeichert werden, ist es naheliegend, auch die Formatierung der Webseite durch Text zu speichern, beispielsweise so:
Hintergrundfarbe: hellblau;
Schriftart: ...
Damit der Browser die Formatierung auslesen kann, nutzt man eine bestimmte Sprache: Cascading Style Sheets (kurz CSS).
Möglichkeit 1
Bearbeite diese Lernstrecke.
Möglichkeit 2
Die Webseite des Sportvereins aus dem Vorwort ist unten noch einmal (leicht verändert) zu sehen. Die Rückseite ist in zwei Teile aufgeteilt – den Inhalt (HTML) und die Formatierung (CSS).
(a) Verschaffe dir einen Überblick über den CSS-Quelltext. Versuche herauszufinden, wie die Elemente des Quelltextes mit dem Layout der Webseite zusammenhängen.
(b) Verändere Farben und Schriftgrößen.
Als Farben kannst du z.B. „red“, „green“, „orange“ oder „purple“ verwenden. Als Schriftgrößen sind „x-small“, „small“, „medium“, aber auch Angaben wie „150%“ möglich.
Für mehr Auswahl bei Farben kannst du diese im RGB-System darstellen und dann entweder in der Form „rgb(...,...,...)“ oder durch Hexadezimalzahlen darstellen. Mehr zu diesem Thema findest du hier.
(c) Sorge dafür, dass Hyperlinks rot angezeigt werden.
