Trennung von Inhalt / Struktur und Design
Auf der letzten Seite hast du gesehen, dass man in dem CSS-Editorfenster die Darstellung, bzw. das Design, des Steckbriefs verändern kann. Den Inhalt und die Struktur verändert man weiterhin im HTML-Editorfenster.
Diese Trennung bietet einige Vorteile.
Aufgabe
Über dem Editorfenster des Quelltexts kannst du verschiedene CSS-Dateien auswählen.
Wähle die einzelnen Designs aus und schaue dir die Webseite an.
(a)🖊️ Notiere was sich verändert und was gleich bleibt.
(b) Verändere in einem Design die Schriftfarbe aller Aufzählungspunkte (li) und die Schriftgröße aller Absätze (p).
(c)💬 Tauscht euch aus, wie man folgendes Problem lösen könnte:
Stellt euch vor, ihr habt sehr viele Dokumente (z.B. eines über jeden eurer Lieblingscharaktere) und bei jedem Dokument soll der Name der Figur nun rot dargestellt werden.
(d)🖊️ Notiere Vorteile für die Trennung von Inhalt und Design.
Trennung von Struktur/ Inhalt und Darstellung
Die formale Sprache CSS (Cascading Style Sheets) wird verwendet, um das Design eines Dokuments oder einer Webseite festzulegen.
Mit der Auszeichnungssprache HTML (Hypertext Markup Language) legt man den Inhalt und die Struktur eines Dokuments fest.
Die beiden Bereiche Darstellung sowie Inhalt / Struktur werden dabei strikt getrennt.
