Grundlagen der Webseiten im Browser

Ein Café hat eine Seite mit der Mittagskarte: eine Liste von Gerichten, ein Feld zum Suchen und eine Schaltfläche für ein dunkles Design. Jemand muss sagen, was auf der Seite steht, jemand, wie sie aussieht, und jemand, was passiert, wenn man auf die Schaltfläche klickt. Im Web sind das drei Sprachen, jede mit ihrer eigenen Aufgabe.

• HTML: die Sprache, die sagt, was auf einer Seite steht: Überschriften, Listen, Links, Formulare.
• Element: ein Teil einer Seite, geschrieben als Tag wie h2 oder li.
• CSS: die Sprache, die sagt, wie Elemente aussehen.
• Selektor: der Teil einer CSS-Regel, der sagt, für welche Elemente sie gilt.
• Deklaration: eine Einstellung in einer Regel, zum Beispiel margin: 1rem.
• Box-Modell: jedes Element ist eine Box aus Inhalt, Innenabstand, Rahmen und Außenabstand.
• DOM: die Seite, wie der Browser sie im Speicher hält und wie JavaScript sie lesen und ändern kann.
• Ereignis: etwas, das auf der Seite passiert, zum Beispiel ein Klick.

ls site listet die drei Dateien der Seite auf: index.html für das, was darauf steht, style.css für ihr Aussehen und app.js für das, was sie tut. Der zweite Befehl gibt ihre Größen aus: 1373, 1125 und 1093 Byte, zusammen 3591. Das ist eine ganze Seite. Öffne Preview, um sie zu sehen, und JupyterLab, um die Dateien zu lesen.

Das Skript liest index.html, wie ein Browser damit beginnt, Tag für Tag. Es zählt insgesamt 36 Tags. a und li kommen je fünfmal vor, section dreimal. Das zweite Skript gibt nur die Überschriften aus, also die Gliederung der Seite: eine h1, Lunch menu, und darunter drei h2-Überschriften. Überschriften sind nicht dazu da, Text groß zu machen. Mit ihnen sagt die Seite, worum es geht, und ein Screenreader springt zwischen ihnen hin und her.

Eine CSS-Regel besteht aus einem Selektor und Deklarationen in geschweiften Klammern. Das Skript findet 17 Regeln und 39 Deklarationen, und die am häufigsten verwendete Einstellung ist padding, sechsmal. Jedes Element ist eine Box: sein Inhalt, dann innen der Innenabstand, dann ein Rahmen, dann außen der Außenabstand. Die Regel für .dish setzt padding, margin-bottom, border und border-radius, deshalb ist jedes Gericht eine umrahmte Karte mit Luft drumherum. Treffen zwei Regeln dasselbe Element, gewinnt der genauere Selektor, bei Gleichstand die spätere Regel. Das ist die Kaskade. body.dark ist genauer als body, deshalb tauscht eine dunkle Seite die Farben. Ändere in style.css einen Wert, speichere, lade die Preview neu und führe das Skript noch einmal aus.

Das Skript liest app.js und zeigt, was es definiert und worauf es wartet. Es hat zwei Funktionen, filterDishes und toggleTheme, und drei Listener: submit und input am Suchfeld und click an der Schaltfläche für das Design. Tritt eines dieser Ereignisse ein, ändert die Funktion das DOM, also die Seite, die der Browser hält. Probiere es in der Preview aus: Tippe tom ins Feld, und die Liste schrumpft auf die zwei Gerichte, die diese Buchstaben enthalten; klicke dann auf Dark theme. Es gibt keine Bibliothek und keinen Netzwerkaufruf, nur das, was der Browser schon hat.

Eine Seite, die richtig aussieht, kann trotzdem kaputt sein. Das erste Skript listet jeden Link auf und sagt, wohin er führt: Drei Links bleiben auf der Seite und finden jeweils ihr Ziel, einer führt zu einer Datei hier und einer zu einer anderen Website. Das zweite fragt den Server der Preview nach der Seite, wie es ein Browser tut, und gibt den Status 200, den Titel Lunch menu und aus, dass style.css als text/css zurückkommt. Ein Status 404 würde bedeuten, dass eine Datei fehlt, die die Seite anfordert.

Öffne JupyterLab in der Leiste und doppelklicke auf start.ipynb. Seine Zellen lesen dieselben Dateien in Python: Sie zählen die Tags, listen die CSS-Regeln auf und fragen die Preview nach der Seite. Klicke auf eine Zelle und drücke Umschalt und Eingabe, um sie auszuführen. In der letzten Zelle ist Platz für deine eigene Änderung: Bearbeite style.css, speichere und zähle die Regeln noch einmal.