Webdokumente: HTML und CSS verstehen

Wenn du im Browser die Seitenquelle anzeigen lässt, siehst du keinen Text mit Schriftgrößen, sondern eine Menge spitzer Klammern.

Der Grund dafür ist eine Entscheidung, die vor über dreißig Jahren getroffen wurde und die sich bis heute bewährt: Eine Webseite sagt nicht, wie etwas aussehen soll, sondern was es ist. Ob eine Überschrift groß und blau erscheint, wird an einer ganz anderen Stelle festgelegt.

Diese Trennung wirkt zunächst umständlich. Sie ist der Grund dafür, dass dieselbe Seite auf einem Telefon, einem Fernseher und in einem Vorleseprogramm für blinde Menschen funktioniert.

Eine Webseite besteht aus zwei getrennten Teilen:

• HTML beschreibt die Struktur und die Bedeutung: Das hier ist eine Überschrift, das ein Absatz, das eine Liste, das ein Verweis.
• CSS beschreibt das Aussehen: Überschriften sind 24 Pixel groß und dunkelblau, Absätze haben 1,5-fachen Zeilenabstand.

Warum trennt man das? Drei Gründe, und jeder allein würde schon genügen.

Erstens: eine Änderung an einer Stelle. Bei 200 Seiten mit je 30 Überschriften stünde die Farbangabe 6000 Mal im Dokument. Eine Farbänderung wäre 6000 Änderungen. Steht sie im CSS, ist es eine.

Zweitens: verschiedene Ausgabegeräte. Dieselbe Struktur wird auf einem Telefon anders dargestellt als auf einem großen Bildschirm und beim Drucken noch einmal anders. Das geht nur, wenn die Darstellung nicht fest im Dokument steht.

Drittens, und didaktisch am wichtigsten: Maschinen können den Inhalt verstehen. Ein Vorleseprogramm für blinde Menschen kann sagen „Überschrift Ebene 2: Ergebnisse“, wenn dort eine Überschrift ausgezeichnet ist. Steht dort nur „fetter Text in 20 Pixel“, weiß es nichts. Dasselbe gilt für Suchmaschinen.

Daraus folgt die wichtigste Regel für eigene Seiten: Wähle das Element nach der Bedeutung, nicht nach dem Aussehen. Eine Überschrift wird als Überschrift ausgezeichnet, weil sie eine ist, nicht weil sie groß aussehen soll.

Ein Element besteht meist aus drei Teilen:

<p>Das ist ein Absatz.</p>

Das $\texttt{<p>}$ ist der Start-Tag, dazwischen steht der Inhalt, und $\texttt{</p>}$ ist der End-Tag mit dem Schrägstrich. Elemente dürfen ineinander liegen, müssen sich aber sauber schachteln: Was zuletzt geöffnet wurde, wird zuerst geschlossen.

Ein Start-Tag kann Attribute tragen, also zusätzliche Angaben in der Form Name gleich Wert:

<a href="seite2.html">Weiter zur zweiten Seite</a>
<img src="bild.jpg" alt="Blick auf den Schulhof">

Das Attribut $\texttt{alt}$ beim Bild ist keine Nebensache: Es enthält die Bildbeschreibung, die vorgelesen wird und die erscheint, wenn das Bild nicht geladen werden kann.

Jedes Webdokument hat denselben Rahmen:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Meine Seite</title>
    <link rel="stylesheet" href="stil.css">
  </head>
  <body>
    <h1>Willkommen</h1>
    <p>Der erste Absatz.</p>
  </body>
</html>

Zwei Angaben im Kopf verdienen eine Erklärung, weil sie direkt an frühere Kapitel anschließen:

$\texttt{charset="utf-8"}$ sagt dem Browser, nach welcher Vereinbarung die Bytes als Zeichen zu lesen sind. Fehlt sie, erscheinen Umlaute als seltsame Zeichenpaare, und zwar genau aus dem Grund, den das Kapitel zur Nachrichtenübertragung beschreibt: Die Daten sind unverändert, die Decodierung ist falsch.

$\texttt{lang="de"}$ nennt die Sprache. Ein Vorleseprogramm wählt danach die Aussprache aus.

Beachte die Überschriftenebenen: Sie bilden eine Gliederung und werden nicht nach Größe gewählt. Auf eine $\texttt{h1}$ folgt eine $\texttt{h2}$, nicht gleich eine $\texttt{h4}$, nur weil die kleiner aussieht.

Eine CSS-Regel besteht aus zwei Teilen: Der Selektor sagt, welche Elemente gemeint sind, und in den geschweiften Klammern stehen die Eigenschaften mit ihren Werten.

h1 {
  color: darkblue;
  font-size: 32px;
}

p {
  line-height: 1.5;
}

Gelesen: „Alle Überschriften erster Ebene sind dunkelblau und 32 Pixel groß. Alle Absätze haben eineinhalbfachen Zeilenabstand.“

Der Gewinn ist derselbe wie bei den Variablen: Eine Änderung an einer Stelle wirkt überall. Wenn die Überschriften grün werden sollen, ändert man ein Wort, nicht 6000.

Testen heißt bei Webdokumenten mehr als „sieht gut aus“:

1. Im Browser ansehen und alle Verweise anklicken. Ein Tippfehler im Dateinamen fällt sonst niemandem auf.
2. Bei verschiedenen Fensterbreiten prüfen, mindestens schmal wie ein Telefon und breit wie ein Bildschirm.
3. Den Quelltext prüfen lassen, etwa mit einem Prüfprogramm. Browser sind sehr nachsichtig und stellen auch fehlerhaftes HTML dar; ein anderer Browser tut das vielleicht anders.
4. Ohne Bilder ansehen: Erscheinen die Beschreibungen aus dem $\texttt{alt}$-Attribut?

Veröffentlichen heißt, die Dateien auf einen Webserver zu legen, der über eine Adresse erreichbar ist. Dazu gehören mehrere Schritte: Die Dateien werden übertragen, eine Adresse wird auf den Server verwiesen, und für die Startseite gilt eine Namensvereinbarung. Für ein Schulprojekt genügt oft der Schulserver oder eine Netzwerkfreigabe.

Vor jeder Veröffentlichung gehören zwei Fragen dazu, die nichts mit Technik zu tun haben: Habe ich die Rechte an allen Bildern und Texten? Und stehen dort personenbezogene Daten, die dort nicht hingehören? Beides ist in einem späteren Kapitel ausführlich Thema und gilt trotzdem ab dem ersten eigenen Webdokument.