Inhalt und Darstellung trennen: HTML, CSS und JavaScript
Du unterscheidest Inhalt, Darstellung und Verhalten und erkennst, wie getrennte Dateien Änderungen an Webseiten erleichtern.
Kurz gesagt
Bei einer Webseite trennst du Inhalt und Struktur von der Gestaltung und zusätzlichen Abläufen. Gemeinsame Gestaltungsregeln erleichtern Änderungen an mehreren Seiten, weil du passende Regeln an einer Stelle bearbeiten kannst.
HTML steht für „Hypertext Markup Language“ und ist eine Sprache, die Webinhalten Struktur und Bedeutung gibt. CSS steht für „Cascading Style Sheets“ und ist eine Sprache für Gestaltungsregeln. JavaScript ist eine Programmiersprache, mit der du zum Beispiel nach einem Klick neuen Text anzeigen kannst. Ein Browser ist ein Programm, das Webseiten anzeigt.
Deine Lernziele
Zum Inhalt einer Webseite gehören Texte, Bilder und ihre Bedeutung. Auch die Struktur gehört dazu: Welcher Text ist eine Überschrift, welcher ein Absatz?
Die Darstellung bestimmt das Aussehen. Dazu gehören Schriftgrößen, Farben, Abstände und die Anordnung auf dem Bildschirm. Wenn eine vorhandene Überschrift größer erscheint, ändert sich ihre Darstellung. Ihr Wortlaut bleibt dabei gleich.
Verhalten meint hier zusätzliche Abläufe, die Programmcode steuert. Programmcode besteht aus Anweisungen für ein Programm. Ein Beispiel: Nach einem Klick erscheint ein neu erzeugter Hinweis. Dabei kann das Verhalten auch den sichtbaren Inhalt oder dessen Darstellung verändern.
Trennung von Inhalt und Darstellung
Du beschreibst, was auf einer Webseite steht und welche Bedeutung es hat, getrennt von den Regeln für sein Aussehen. Zusätzliche Abläufe kannst du ebenfalls getrennt beschreiben.
| Bereich | Ausgedachtes Beispiel: Schulradio |
|---|---|
| Inhalt und Struktur | „Unsere Sendung“ ist als Überschrift gekennzeichnet. |
| Darstellung | Die Überschrift erscheint in grüner Schrift. |
| Verhalten | Nach einem Klick erzeugt ein Programm einen Hinweis zur nächsten Sendung. |
Teste dich
Mit HTML kennzeichnest du die Bedeutung und Struktur von Webinhalten. Du legst zum Beispiel fest, dass ein Text eine Überschrift oder ein Absatz ist. Ein HTML-Element ist ein Baustein der Seite, etwa eine Überschrift oder ein Absatz. HTML kann auch Bilder einbinden.
Mit CSS formulierst du Gestaltungsregeln. Sie bestimmen zum Beispiel Textfarben, Schriftgrößen oder den Abstand zwischen Absätzen. Die Bedeutung eines Textes als Überschrift legst du mit HTML fest; seine sichtbare Gestaltung beschreibst du mit CSS.
JavaScript beschreibt ausführbare Anweisungen. Damit kannst du zum Beispiel nach einem Klick einen neuen Hinweistext erzeugen. JavaScript kann dabei vorhandene HTML-Inhalte und CSS-Gestaltung verändern. Die Zuordnung der drei Sprachen beschreibt ihre Hauptaufgaben: Ein durch JavaScript gesteuerter Ablauf kann also auch Inhalt und Darstellung beeinflussen.
Beispiel: Eine erfundene Seite für einen Schachtreff
- 1HTML kennzeichnet „Schach am Mittwoch“ als Überschrift und den Treffpunkt als Absatz.
- 2CSS legt eine dunkelblaue Schrift und einen größeren Abstand unter der Überschrift fest.
- 3JavaScript erzeugt nach einem Klick einen Hinweis, welcher Tisch für Anfänger vorgesehen ist.
Merke: HTML beschreibt Inhalt und Struktur, CSS die Gestaltung und JavaScript zusätzliche Abläufe. JavaScript kann dabei auch HTML und CSS verändern.
Teste dich
Eine externe CSS-Datei enthält Gestaltungsregeln in einer eigenen Datei. „Extern“ bedeutet hier: außerhalb der HTML-Datei. Mehrere HTML-Seiten können dieselbe CSS-Datei verknüpfen und ihre Regeln verwenden.
Dann kannst du eine gemeinsame Regel an einer Stelle ändern. Wenn die Browser die geänderte Datei neu laden, gilt die Änderung für die passenden Elemente der verknüpften Seiten. Voraussetzung ist, dass die Regel diese Elemente erfasst und keine widersprechende Regel Vorrang hat. Vorrang bedeutet: Der Browser verwendet die andere Regel statt der geänderten Angabe. Eine Seite, die diese CSS-Datei nicht verwendet, übernimmt deren Änderung nicht.
Steht dieselbe Regel dagegen in jeder HTML-Datei einzeln, musst du sie für eine gemeinsame Änderung an mehreren Stellen bearbeiten. Eine gemeinsame CSS-Datei spart solche Wiederholungen. Eine Farbänderung verändert dabei weder den Wortlaut noch die Bedeutung der Texte.
Auch JavaScript lässt sich in einer eigenen Datei speichern und auf mehreren Seiten verwenden. Das erleichtert die Wiederverwendung derselben Abläufe. Außerdem bleibt das HTML übersichtlicher, wenn dort keine langen Programmanweisungen stehen.
Beispiel: Gemeinsame Gestaltung für eine erfundene Ausstellung
- 1Die Seiten „Start“, „Räume“ und „Öffnungszeiten“ verwenden dieselbe CSS-Datei.
- 2In dieser Datei steht eine gemeinsame Regel für die Hintergrundfarbe aller drei Seiten.
- 3Du änderst diese Regel von Hellgrau zu Hellgelb. Keine andere Regel hat dafür Vorrang.
- 4Nachdem die Browser die geänderte Datei neu geladen haben, zeigen die drei Seiten den hellgelben Hintergrund.
Merke: Eine gemeinsame Datei erleichtert gemeinsame Änderungen. Prüfe, welche Seiten sie verwenden, welche Elemente die Regel erfasst und ob eine andere Regel Vorrang hat.
Teste dich
HTML-Tags sind Markierungen, die gewöhnlich in spitzen Klammern stehen. Ein öffnendes und ein schließendes Tag können ein Element begrenzen. Der Elementname „p“ steht für einen Absatz. Eine zusätzliche Angabe im öffnenden Tag heißt Attribut. Hier beschreiben wir Elemente durch ihre Namen und Attribute, ohne vollständige HTML-Tags zu zeigen. Attributwerte stehen dabei in geraden Anführungszeichen.
Das style-Attribut enthält CSS direkt an einem HTML-Element. Diese Form heißt Inline-CSS. Die Angabe style="color: red;" gestaltet den Text rot: „color“ bedeutet Textfarbe, „red“ bedeutet rot. Der Doppelpunkt verbindet Eigenschaft und Wert; das Semikolon beendet die Angabe. Hier stehen Inhalt und Gestaltung direkt beieinander.
Ein Stylesheet ist eine Sammlung von Gestaltungsregeln. Ein internes Stylesheet steht im style-Element im Kopfbereich derselben HTML-Datei. Der Kopfbereich enthält Angaben über die Seite und wird durch die head-Tags begrenzt. Internes CSS steht getrennt vom eigentlichen Inhalt, aber weiterhin in derselben Datei. Es kann für eine einzelne Seite nützlich sein. Für mehrere Seiten müsstest du gemeinsame Regeln dort jeweils wiederholen.
Ein externes Stylesheet liegt in einer eigenen Datei mit der Endung .css. Im Kopfbereich kann ein link-Element diese Datei verknüpfen. Das Attribut rel="stylesheet" kennzeichnet sie als Stylesheet; das Attribut „href“ nennt den Dateinamen. Eine solche Verknüpfung beweist nicht, dass die Seite daneben kein Inline-CSS enthält. Das Verknüpfen allein verschiebt keine style-Angaben aus dem HTML.
Das alte font-Element legt Schriftmerkmale direkt im HTML fest und gilt als veraltet. Bei diesem Element bestimmt das Attribut color="red" eine rote Schriftfarbe. Verwende für neue Seiten stattdessen CSS. Das style-Attribut ist dagegen weiterhin möglich. Inline-CSS kann etwa bei eingeschränkten Bearbeitungsmöglichkeiten, in E-Mails oder bei Änderungen durch JavaScript vorkommen. Für gemeinsam gepflegte Webseiten erschwert es oft Änderungen, weil Angaben an vielen einzelnen Elementen stehen können.
| Beschriebener HTML-Ausschnitt | Was erkennst du? |
|---|---|
| p-Element mit style="color: red;" und dem Text „Flohmarkt“ | Inline-CSS: Die rote Textfarbe steht direkt am Absatz. |
| font-Element mit color="red" und dem Text „Kino“ | Ein veraltetes font-Element bestimmt die rote Schriftfarbe. |
| link-Element mit rel="stylesheet" und href="gestaltung.css" | Eine eigene CSS-Datei namens „gestaltung.css“ wird verknüpft. |
Merke: Die Tabellenzeilen beschreiben einzelne Ausschnitte, keine vollständigen Webseiten. Prüfe jede Gestaltungsangabe: Eine Seite kann eine externe CSS-Datei und zusätzlich Inline-CSS verwenden.
Teste dich
Alles auf einen Blick
Trennung von Inhalt und Darstellung
Texte, Bilder sowie ihre Struktur und Bedeutung gehören zusammen.
CSS beschreibt das Aussehen, etwa Farben, Schriftgrößen und Abstände.
JavaScript kann Abläufe steuern und dabei Inhalt oder Gestaltung verändern.
Eine gemeinsame CSS-Datei kann passende Regeln für mehrere verknüpfte Seiten liefern.
style-Attribute enthalten Inline-CSS; ein style-Element enthält internes CSS; ein link-Element kann eine externe CSS-Datei verknüpfen.
Das font-Element ist veraltet. Inline-CSS bleibt möglich, kann gemeinsame Änderungen aber erschweren.
Die Überschriften einer erfundenen Büchereiseite ändern
- 1Aufgabe: Auf den Seiten „Ausleihe“ und „Lesetipps“ sollen vorhandene Überschriften statt schwarz nun violett erscheinen. Ihr Wortlaut soll gleich bleiben.
- 2Beide Seiten verwenden dieselbe CSS-Datei. Eine gemeinsame Regel erfasst ihre Überschriften; keine andere Farbregel hat Vorrang.
- 3Ordne die Änderung zu: Die Schriftfarbe gehört zur Darstellung. Die Kennzeichnung und der Wortlaut der Überschriften bleiben erhalten.
- 4Ändere die Farbe in der gemeinsamen CSS-Regel von Schwarz zu Violett.
- 5Nachdem die Browser die geänderte Datei neu geladen haben, erscheinen die erfassten Überschriften beider Seiten violett.
Fehler finden
Fehler in Zeile 3Die dritte Zeile verwechselt den Ort der Farbangabe. Richtig: Die Farbangabe im style-Attribut ist Inline-CSS. Sie bleibt direkt im HTML, obwohl zusätzlich eine externe CSS-Datei verknüpft ist.
Lückentext
Der bereits gespeicherte Wortlaut „Heute ist Wandertag“ gehört zum einer Webseite. Die Sprache für Gestaltungsregeln wie Schriftgrößen heißt . Steht eine Farbregel direkt im style-Attribut eines Absatzes, ist das .