Webseiten erstellen mit HTML & CSS
2. HTML & CSS erkunden
Erkundung von HTML
Auf dieser Seite geht es darum, dass du erste Erfahrungen damit machst, wie man Webseiten mit der Sprache HTML erstellen kann. Es sind dafür zwei Wege vorgesehen: Entweder du bearbeitest eine Lernstrecke aus dem Kids-Bereich von Inf-Schule.de oder du greifst die im Folgenden dargestellte Webseiten auf und bleibst auf unserem Moodle.
Die „Rückseite“ einer Webseite
Wenn man eine Webseite betrachtet, sieht man ein Dokument im eigenen Browser. Im Hintergrund steht ein Quelltext, der vorgibt, welche Inhalte wie auf der Webseite erscheinen sollen. Man kann bei einer Webseite also zwischen einer Vorderseite und einer Rückseite unterscheiden.
Möglichkeit 1
Bearbeite diese Lernstrecke.
Möglichkeit 2
Die folgende Webseite des Sportvereins ist unten zu sehen – aufgeteilt in Vorderseite und Rückseite. Zur Einfachheit wurde auf die Farbgebung und die Verlinkungen zu einzelnen Abteilungen des Vereins verzichtet.
(a) Verschaffe dir einen Überblick über den Quelltext (die „Rückseite“) der Webseite. Versuche herauszufinden, wie die Elemente der Vorderseite mit denen der Rückseite zusammenhängen.
(b) Beschreibe, was passiert, wenn du „h1“ und „h2“ durch „h3“ und „h4“ ersetzt.
(c) Beschreibe, was passiert, wenn du „ol“ durch „ul“ ersetzt.
(d) Füge in der Auflistung eine weitere Abteilung „Bogenschießen“ ein.
(e) Es gibt auch ein passendes Bild zum Bogenschießen. Sein Dateiname ist „https://cdn-icons-png.flaticon.com/512/184/184101.png“. Füge es ein.
(f) Julie Nguyen ist als Beisitzerin zurückgetreten. Entferne sie aus der Tabelle und mache dich mit der Struktur einer Tabelle vertraut. „tr“ steht hier für „table row“; „td“ für „table data“ und „th“ für „table head“.
See the Pen Untitled by ASAMedia (@ludwigvictor) on CodePen.
Erkunden von CSS
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 folgende Webseiten auf.
Das Aussehen einer Webseite
Die Webseite auf der vorherigen Seite sieht anders aus als die auf dieser Seite: 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 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.
Tipp:
- 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.
See the Pen Untitled by ASAMedia (@ludwigvictor) on CodePen.