HTML beschreibt die Struktur einer Seite durch Elemente. Ein Element besteht aus Anfangs-Tag, Inhalt und End-Tag, zum Beispiel $\texttt{<p>Text</p>}$. Manche Elemente haben keinen Inhalt, etwa $\texttt{<meta>}$ und $\texttt{<input>}$. Attribute stehen im Anfangs-Tag als Paare $\texttt{name="wert"}$ und bestimmen das Element näher. Jede HTML5-Seite hat dieses Grundgerüst:

Zeile 1 meldet HTML5. Das Element $\texttt{html}$ enthält $\texttt{head}$ mit Angaben über die Seite (Zeichensatz, Titel im Tab) und $\texttt{body}$ mit dem sichtbaren Inhalt. Ein Hyperlink ist das Element $\texttt{a}$. Sein Attribut $\texttt{href}$ nennt das Ziel.

Der Browser liest den Text und baut daraus den Dokumentbaum (DOM). Jedes Element ist ein Knoten und liegt in genau einem Elternelement. Elemente im selben Elternelement sind Geschwister. Die Wurzel ist $\texttt{html}$. CSS und Skripte greifen über den Baum auf Elemente zu. Für das Gerüst oben (ohne die Textknoten) gilt:

Es sind 8 Elemente.

CSS trennt das Aussehen von der Struktur. Eine Regel hat die Form $\texttt{selektor \{ eigenschaft: wert; \}}$. Der Selektor wählt Elemente aus:

• $\texttt{p}$ wählt alle Elemente $\texttt{p}$ (Typselektor).
• $\texttt{.hinweis}$ wählt Elemente mit $\texttt{class="hinweis"}$ (Klasse, mehrfach verwendbar).
• $\texttt{\#kopf}$ wählt das Element mit $\texttt{id="kopf"}$ (die ID gibt es auf einer Seite nur einmal).
• $\texttt{nav a}$ wählt alle $\texttt{a}$, die irgendwo in einem $\texttt{nav}$ liegen. $\texttt{ul > li}$ wählt nur $\texttt{li}$, die direkt in einem $\texttt{ul}$ liegen.
• $\texttt{a:hover}$ wählt einen Link, über dem die Maus steht (Pseudoklasse).

Treffen mehrere Regeln ein Element mit verschiedenen Werten, gewinnt die spezifischere: ID vor Klasse und Pseudoklasse vor Typ. Bei gleicher Spezifität gilt die spätere Regel. Manche Eigenschaften, etwa die Schriftfarbe, erben Kinder vom Elternelement. Hat ein $\texttt{p}$ die Klasse $\texttt{hinweis}$ und die ID $\texttt{kopf}$, schlägt $\texttt{\#kopf \{ color: green; \}}$ die Regeln $\texttt{.hinweis \{ color: red; \}}$ und $\texttt{p \{ color: navy; \}}$.

Mit $\texttt{display: grid}$ wird ein Container zum Raster. $\texttt{grid-template-columns}$ legt die Spalten fest, $\texttt{grid-template-rows}$ die Zeilen. Maße sind feste Größen ($\texttt{100px}$) oder Anteile ($\texttt{1fr}$): Ein Anteil ist ein Teil des Platzes, der nach Abzug der festen Größen und der Abstände ($\texttt{gap}$) übrig bleibt. Kindelemente füllen die Zellen der Reihe nach. Mit $\texttt{grid-column: 1 / 3}$ reicht ein Element von Spaltenlinie 1 bis 3, also über zwei Spalten.

Ein Formular ist ein Element $\texttt{form}$ mit Eingabefeldern. Das Attribut $\texttt{action}$ nennt die Adresse, die die Daten verarbeitet, $\texttt{method}$ die Art des Versands. Eingaben sind $\texttt{input}$ mit $\texttt{type}$ (etwa $\texttt{text}$, $\texttt{password}$, $\texttt{number}$, $\texttt{checkbox}$, $\texttt{submit}$), $\texttt{select}$ und $\texttt{textarea}$. Ein $\texttt{label}$ beschriftet ein Feld. Das Attribut $\texttt{name}$ ist der Schlüssel: Beim Absenden schickt der Browser Paare $\texttt{name=wert}$ an den Server.

Bei GET hängen die Paare an der URL (wie die Anfrage in der URL aus der Mittelstufe). Sie sind sichtbar, stehen im Verlauf und eignen sich für Abfragen ohne Folgen, etwa eine Suche. Bei POST stehen sie im Körper der Anfrage und nicht in der URL. POST nimmt man für Eingaben, die etwas verändern, wie Anmeldung oder Passwort. Sonderzeichen werden prozentkodiert: ein Leerzeichen als $\texttt{+}$ oder $\texttt{\%20}$, ein ä als $\texttt{\%C3\%A4}$.

Eine dynamische Webseite wird erst beim Abruf erzeugt. Ein Programm auf dem Server, etwa in Python oder PHP, liest die Formulardaten, fragt per SQL die Datenbank und baut aus dem Ergebnis HTML, das zum Browser zurückgeht. Die Seite zeigt so immer den aktuellen Stand.

Formulardaten stammen von Fremden. Fügt man sie als Text in eine SQL-Anweisung ein, ermöglicht das SQL-Injection. Schutz bieten Platzhalter: Die Anweisung enthält ein $\texttt{?}$, der Wert wird getrennt übergeben und nie als SQL gelesen.

Die Benutzerverwaltung nutzt eine Tabelle, etwa $\texttt{nutzer(id, benutzername, passwort\_hash, rolle)}$. Passwörter speichert man nie im Klartext, sondern als Hashwert mit Salt, einem zufälligen Zusatz je Nutzer, damit gleiche Passwörter verschiedene Hashwerte ergeben. Bei der Anmeldung hasht man das eingegebene Passwort und vergleicht. Danach vergibt der Server eine zufällige Sitzungs-ID, die der Browser als Cookie mitschickt. Authentifizierung prüft, wer jemand ist, Autorisierung, was die Person darf (nur die Rolle $\texttt{orga}$ sieht die Anmeldeliste). Die Übertragung läuft über HTTPS.