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. Hat eine Website mehrere Webseiten, dann kann man mit CSS ein einheitliches Design für alle Webseiten bereitstellen in einer Datei.
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. Denn ein Vorteil der Design-Datei ist,
dass man nur in dieser Änderungen vornehmen kann, die sich auf die gesamte Webseite beziehen.
Aber das lernst du im Kapitel Browser und Editor.
