Webseiten: Aufbau und Gestaltung — Informatik, 7–10
Eine Webseite hat Inhalte und Anweisungen für ihr Aussehen. HTML gibt ihr Struktur, CSS verändert ihr Erscheinungsbild.
Idee
Stell dir eine Webseite als kleines Dokument für einen Browser vor. HTML sagt, was jeder Teil ist, etwa Überschrift, Absatz, Bild oder Link. CSS sagt, wie diese Teile aussehen sollen, zum Beispiel mit welcher Farbe, Größe und welchem Abstand. Die beiden Aufgaben gehören zusammen, sind aber nicht dasselbe.
Warum es das gibt
Eine Seite braucht eine klare Struktur, damit Browser, Screenreader und Menschen ihre Teile verstehen. Außerdem soll man das Aussehen ändern können, ohne jeden Satz neu zu schreiben. Wenn Struktur und Gestaltung getrennt sind, lassen sich Seiten leichter aktualisieren, teilen und an verschiedene Bildschirme anpassen.
Beispiel Schritt für Schritt
Angenommen, du möchtest eine Seite über deine Katze erstellen. Schritt 1: Setze die Wörter „Meine Katze Luna“ in eine HTML-Überschrift. Schritt 2: Füge den Absatz „Luna schläft in der Sonne“ hinzu. Schritt 3: Füge ein Bild und einen Link ein. Schritt 4: Mache die Überschrift mit CSS dunkelblau und den Absatz größer. Der Inhalt blieb gleich; nur sein Aussehen änderte sich.
Ein häufiger Fehler
Ein verständlicher Fehler ist, viele Leerzeichen oder leere Zeilen zu verwenden, um etwas an die richtige Stelle zu schieben. Auf deinem Bildschirm kann das gut aussehen, aber ein anderer kann breiter oder schmaler sein, sodass sich alles verschiebt. CSS-Regeln für das Layout sind besser, weil sie die Beziehung zwischen Teilen beschreiben, statt das Problem mit Leerzeichen zu verstecken.
Außerhalb der Schule
Wenn du eine Nachrichtenseite, ein Rezept, einen Online-Laden oder die Seite eines Vereins liest, ordnet ein Browser strukturierte Inhalte und gestaltet sie für deinen Bildschirm. Mit denselben Ideen kannst du eine Seite über ein Hobby, ein Schulprojekt oder eine Veranstaltung erstellen. Eine gute Struktur hilft auch Menschen, die Assistenztechnik verwenden.
Weiter erkunden
Andere Sprachen
MyLeoNes™ wird geladen…