Einführungsphase

E2 – Hypertext Markup Language

Strukturierte Webdokumente als Grundlage späterer Webanwendungen

E1 hat gezeigt, wie ein Client eine Webseite anfordert und vom Webserver eine Antwort erhält. E2 setzt an der nächsten Stelle dieser Kette an: Was wird dabei eigentlich geladen? Eine Webseite ist nicht nur sichtbarer Text mit Bildern, sondern ein strukturiertes Dokument. HTML zeichnet Inhalte aus, der Browser erzeugt daraus eine Dokumentstruktur, CSS beschreibt die Darstellung, und Links verbinden einzelne Dokumente zu einem Hypertext-System.

Perspektivwechsel: E1 betrachtet denselben Vorgang von außen als Kommunikation zwischen Client, DNS, Netzwerk und Webserver. E2 betrachtet ihn von innen als Dokument: Welche Struktur hat die gelieferte Datei, wie interpretiert der Browser sie, und wie wird daraus ein navigierbares Webprojekt?

Leitfrage dieser Seite ist deshalb: Wie wird aus Inhalt ein strukturiertes, verlinktes und gestaltbares Webdokument, das später Teil einer interaktiven Webanwendung werden kann?

Das D-Book selbst ist dafür ein direktes Beispiel. Kursseiten, Glossar, Suche, Werkzeuge, Übungen und Wissensnetz greifen als Lernsystem ineinander. E2 macht diese Architektur zum Lerngegenstand: Die Seite erklärt nicht nur einzelne HTML-Elemente, sondern die Bewegung vom Webseitenabruf zum interpretierbaren, vernetzten und später datenverarbeitenden Websystem.

Kerncurriculum kompakt
E2 als Lernweg von HTML-Struktur über Hypertext und CSS zu formularbasierten Datenflüssen

Das Themenfeld E.2 HTML-Dokumente bündelt vier fachliche Linien:

Hypertext Markup Language (HTML5): HTML-Grundgerüst, grundlegende HTML-Elemente, öffnende und schließende Tags, HTML-Attribute und Attributwerte sowie Hyperlinks.
Struktur von HTML-Dokumenten: Dokumentbaum, Schachtelung und strukturierende Elemente.
Cascading Style Sheets (CSS3): Selektoren, grundlegende CSS-Eigenschaften, CSS-Klassen und Grid-Layout.
Formulare: Eingabefelder, Formularstruktur und Versand der Eingabedaten.

Die Seite folgt als Leseführung vier Bewegungen: Inhalte strukturieren, Dokumente verlinken, Darstellung gestalten, Eingaben übertragen. Im D-Book wird diese Ordnung als Lernbewegung gedeutet: Aus Inhalt wird eine ausgezeichnete Dokumentstruktur, daraus ein vom Browser interpretierter Dokumentbaum, über Hyperlinks ein Hypertextsystem, über CSS eine gestaltete Oberfläche und über Formulare eine Eingabeschnittstelle für spätere Webanwendungen.

Die Detailarbeit der Seite konkretisiert diese Linien am HTML-Grundgerüst mit <!DOCTYPE html>, <html>, <head>, Meta-Angaben, <title> und <body> sowie an relativen, absoluten und dokumentinternen Verweisen.

Als roter Faden dient eine kleine Kurswebsite. Sie besteht aus mehreren Dateien, etwa index.html, projekt.html, glossar.html und kontakt.html. An ihr lässt sich zeigen, wie Inhalte ausgezeichnet, Seiten verlinkt, wiederkehrende Bereiche gestaltet, Medien eingebunden und Formulare vorbereitet werden. So wird aus einzelnen HTML-Dateien schrittweise ein kleines Websystem.

Curricularer Orientierungsrahmen E2

E2 führt von strukturierten Dokumenten über Hypertext-Navigation zu Formularen als Eingabeschnittstelle. Damit entsteht die direkte Brücke zu Q2.3: Formular → HTTP-Übertragung → PHP-Verarbeitung → Datenbank → dynamische Ausgabe.

HTML als Struktur- und Auszeichnungssprache
Warum Tags Bedeutung markieren und nicht einfach Designbefehle sind

HTML ist eine Auszeichnungssprache. Sie beschreibt, welche Rolle ein Inhalt im Dokument besitzt: Überschrift, Absatz, Liste, Bild, Link, Navigation oder Formularbereich. Damit wird nicht das Aussehen programmiert, sondern die fachliche Struktur eines Dokuments modelliert.

Ein HTML-Tag ist kein Befehl im Sinne eines Programms. Es markiert, welche Rolle ein Inhalt im Dokument hat. Ein <h1>-Element bedeutet nicht einfach: „mache diesen Text groß“, sondern: „dies ist die Hauptüberschrift“. Ein <p>-Element bedeutet nicht: „setze Abstand“, sondern: „dies ist ein Absatz“. Die sichtbare Darstellung übernimmt später CSS.

Merksatz

HTML zeichnet Bedeutung und Struktur aus; CSS beschreibt die Darstellung dieser Struktur.

Warum diese Trennung didaktisch so wichtig ist

Diese Trennung ist mehr als eine Stilregel. Sie macht Webprojekte wartbar: Wenn Struktur und Gestaltung vermischt werden, muss jede Seite einzeln angepasst werden. Wenn HTML die Bedeutung sauber beschreibt und CSS die Darstellung zentral steuert, können viele Seiten einheitlich gestaltet und später leichter erweitert werden.

Code

<h1>Kursprojekt Web</h1>
<p>Dieses Dokument erklärt den Projektablauf.</p>

Browseransicht / Ergebnis

Kursprojekt Web

Dieses Dokument erklärt den Projektablauf.

Links steht die Auszeichnung, rechts die Browseransicht. HTML legt hier nicht Farbe und Abstand als Designentscheidung fest, sondern markiert: Dies ist die Hauptüberschrift, dies ist ein Absatz.

In der Kurswebsite steht im HTML nur die Bedeutung: Hauptüberschrift und Absatz. Wie groß die Überschrift ist, welche Farbe sie hat und wie viel Abstand darunter erscheint, gehört nicht in dieses Markup, sondern in die Darstellungsschicht.

Vom Quelltext zum Dokumentbaum: Browserinterpretation und DOM
Warum HTML als Strukturmodell verstanden werden muss

Jede HTML-Seite besitzt ein Grundgerüst mit <!DOCTYPE html>, <html>, <head> und <body>. Entscheidend ist dabei nicht nur die Reihenfolge, sondern die Verschachtelung: Elemente liegen in anderen Elementen und bilden so eine Hierarchie.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>E2 - HTML-Projekt</title>
    <link rel="stylesheet" href="/css/base.css">
  </head>
  <body>
    <main>...sichtbarer Seiteninhalt...</main>
  </body>
</html>

Beim Arbeiten mit HTML gibt es drei Perspektiven auf dieselbe Webseite. Der Quelltext ist das, was geschrieben wird. Der Dokumentbaum ist die Struktur, die der Browser daraus intern aufbaut. Die gerenderte Seite ist das, was Nutzende im Browser sehen. Wer HTML versteht, kann zwischen diesen Perspektiven wechseln: Ein Fehler im Quelltext verändert den Dokumentbaum und kann dadurch die sichtbare Darstellung beeinflussen.

Quelltext

<section>
  <h2>Arbeitsplan</h2>
  <p>Die Gruppe plant die Projektseite.</p>
</section>

Dokumentbaum

html
└── body
    └── main
        └── section
            ├── h2
            └── p

Gerenderte Seite

Arbeitsplan

Die Gruppe plant die Projektseite.

Der Quelltext ist linear geschrieben. Der Browser baut daraus eine Baumstruktur. Die gerenderte Seite ist die sichtbare Ausgabe dieser Struktur.

Öffnende und schließende Tags korrekt lesen

Viele HTML-Elemente bestehen aus einem öffnenden Tag, einem Inhalt und einem schließenden Tag. Das schließende Tag erkennt man am Schrägstrich. Es beendet genau den Bereich, der zuvor geöffnet wurde. Wird diese Reihenfolge verletzt, entsteht ein anderer oder fehlerhafter Dokumentbaum.

<article>
  <h2>Projektidee</h2>
  <p>Unsere Website erklärt ein Informatikthema.</p>
</article>

<article> öffnet den Inhaltsbereich, </article> schließt ihn. Die Überschrift und der Absatz liegen innerhalb dieses Bereichs. Dadurch entsteht im Dokumentbaum eine klare Eltern-Kind-Struktur.

Falsch geschachtelt

<p>Ein Thema <strong>wird erklärt.</p></strong>

Richtig geschachtelt

<p>Ein Thema <strong>wird erklärt.</strong></p>

Beim Schließen gilt: Das zuletzt geöffnete Element wird zuerst geschlossen. Einige Elemente sind dagegen leer beziehungsweise selbstständig, etwa <img> oder <meta>. Sie besitzen keinen eingeschlossenen Textinhalt, sondern werden über HTML-Attribute wie src, alt oder charset und den jeweiligen Attributwert beschrieben.

Baumstruktur (DOM-Grundidee) verstehen

Der Browser behandelt HTML nicht als flachen Text. Durch Schachtelung entstehen Eltern-, Kind- und Geschwisterbeziehungen. Genau diese Beziehungen bilden den Dokumentbaum. CSS kann später gezielt Elemente in dieser Struktur auswählen, und JavaScript kann Knoten suchen, verändern oder neu erzeugen. Deshalb ist korrekt geschachteltes HTML eine Grundlage späterer Interaktivität.

Elternknoten: z. B. main oder section
Kindknoten: z. B. h2 und p innerhalb einer Section
Geschwisterknoten: Elemente auf derselben Hierarchiestufe im Dokumentbaum
Fehlerdiagnose: fehlende schließende Tags, falsche Schachtelung oder ungültige Ressourcenpfade können zu unerwarteter Darstellung führen.

Semantische HTML-Elemente und Inhaltsstruktur
Von Überschriften und Absätzen zu Navigation, Abschnitten, Listen, Links und Medien

Die folgenden Elemente sind keine Vokabelliste. Sie beantworten unterschiedliche Strukturfragen: Was ist eine Überschrift? Was ist ein Absatz? Welche Informationen bilden eine Liste? Welche Inhalte gehören als Abschnitt zusammen? Welche Ressource wird eingebunden? Welche Beziehung führt zu einem anderen Dokument?

Semantische HTML-Elemente beschreiben nicht zuerst, wie etwas aussieht, sondern welche Rolle ein Inhalt im Dokument übernimmt. Eine Navigation ist nicht nur eine Gruppe von Links, sondern ein Navigationsbereich; ein Abschnitt ist nicht nur ein Kasten, sondern eine inhaltlich zusammengehörige Einheit. Browser, Suchmaschinen, Screenreader, CSS-Regeln und spätere Skripte profitieren davon, wenn diese Rollen sauber im Dokumentbaum erkennbar sind.

Damit ist Semantik keine Gestaltung, sondern Struktur- und Bedeutungsmodellierung. CSS-Klassen können Bereiche wiedererkennbar gestalten oder technisch adressierbar machen, ersetzen aber nicht die fachliche Bedeutung eines Elements. Ein <div class="navigation"> kann aussehen wie eine Navigation; <nav> sagt zusätzlich, dass dieser Bereich als Navigation gemeint ist.

<h1> / <h2> Welche Überschriftsebene?

<p> Welcher Textabsatz?

<nav> Welche Navigation?

<section> Welcher Inhaltsabschnitt?

<ol> / <ul> Welche Listenstruktur?

<img> Welche Ressource mit Bildaussage?

Diese Elemente sind keine Vokabelsammlung. Sie beantworten Strukturfragen eines Dokuments.

1) Strukturierende Elemente

Überschriften <h1> bis <h6> strukturieren Themenebenen, <p> markiert inhaltliche Absätze. Elemente wie <main>, <section> oder <nav> machen größere Seitenbereiche der Kurswebsite sichtbar.

<header>
  <h1>Kursprojekt Web</h1>
  <nav>
    <a href="index.html">Start</a>
    <a href="projekt.html">Projekt</a>
  </nav>
</header>
<main>
  <section>
    <h2>Projektidee</h2>
    <p>Wir erklären ein Informatikthema im Web.</p>
  </section>
</main>
<footer>Kontakt und Quellen</footer>

<header>, <nav>, <main>, <section> und <footer> teilen die Seite nach Rollen auf. Die spätere Gestaltung kann daran anknüpfen, ohne diese Struktur zu ersetzen.

2) Listen für geordnete und ungeordnete Information

<ul>/<li> eignen sich für Sammlungen ohne feste Reihenfolge, <ol>/<li> für Schrittfolgen. Listen machen Informationsstrukturen explizit, etwa einen Arbeitsplan auf projekt.html.

3) Verweise und Medien im Gesamtsystem

<a> verbindet Dokumente im Hypertext-System. <img> bindet externe Ressourcen ein; über alt wird die Bildaussage textlich beschrieben. Tabellen (<table>) strukturieren Daten, nicht Layout.

<section>
  <h2>Arbeitsplan</h2>
  <ol>
    <li>Seitenstruktur erstellen</li>
    <li>Navigation verlinken</li>
    <li>Bild mit alt-Text einbinden</li>
  </ol>
</section>

Semantik vor Container

Zuerst wird geprüft, ob ein passendes semantisches Element existiert: Überschrift, Absatz, Liste, Navigation, Abschnitt, Bild, Formularbereich oder Fußbereich. Erst wenn keine passende Bedeutung vorliegt oder eine technische Gruppierung nötig ist, wird ein neutraler Container sinnvoll.

Ein <div> trägt selbst keine fachliche Bedeutung. Es gruppiert Inhalte, damit sie gemeinsam gestaltet, positioniert oder später durch Skripte angesprochen werden können. Damit gehört der Containerbegriff bereits an die Schnittstelle zu CSS.

Hypertext und Verlinkung als Kernidee des Webs
Warum Links Beziehungen zwischen Dokumenten, Begriffen und Lernwegen modellieren

Ein Link ist mehr als ein Sprungziel. Er modelliert eine Beziehung zwischen Dokumenten. Durch Hyperlinks entsteht aus einzelnen Dateien ein Hypertext: Nutzende können Hyperlinks folgen, Begriffe vertiefen, zu Quellen wechseln oder zwischen Teilbereichen eines Projekts navigieren.

<a href="projekt.html">Zum Projektplan</a>

Der href-Wert bestimmt das Ziel. Erst diese Verknüpfung macht aus einer einzelnen Datei eine Website mit Navigation, Kontextwechsel und Informationswegen. In der Kurswebsite verbindet die Navigation zum Beispiel index.html, projekt.html, glossar.html und kontakt.html.

Einstieg index.html verweist auf mehrere Ziele

projekt.html

glossar.html#html

kontakt.html

index.html steht hier als Einstieg, der mehrere Navigationsziele anbietet. Ein Hypertext entsteht nicht durch eine einzelne Datei, sondern durch Beziehungen zwischen Dateien und Ankern.

<!-- index.html als Einstieg im statischen Kursprojekt -->
<nav aria-label="Kursnavigation">
  <a href="projekt.html">Projektplan</a>
  <a href="glossar.html#html">HTML im Glossar</a>
  <a href="kontakt.html">Kontakt</a>
</nav>

<!-- Ankerlink zu einer Stelle im Dokument -->
<a href="glossar.html#html">Zum Glossareintrag HTML</a>

<!-- absolute Verlinkung auf externe Inhalte -->
<a href="https://developer.mozilla.org/" target="_blank" rel="noopener">MDN Web Docs</a>

Relative Verlinkungen beschreiben Ziele ausgehend vom aktuellen Dateistandort und sind deshalb besonders wichtig innerhalb eines Projekts. Absolute Verlinkungen enthalten ein vollständiges Ziel, etwa eine externe Webadresse. Ankerlinks führen zu einer bestimmten Stelle innerhalb eines Dokuments. Für größere Webprojekte ist diese Unterscheidung entscheidend, weil Navigation, Ressourcen und stabile Verweise davon abhängen.

Relative Verlinkung
projekt.html

Ankerlink
glossar.html#html

Absolute Verlinkung
https://developer.mozilla.org/

Ressourcenpfad
bilder/logo.png

D-Book als reales Hypertext-System

Das D-Book macht diese Idee selbst sichtbar. Inhaltsseiten, Glossaranker, Suche, Werkzeuge und Wissensnetz sind nicht zufällig verlinkt. Sie bilden kuratierte Zugänge zu denselben fachlichen Begriffen. Ein Glossarlink führt nicht nur zu einer anderen Seite, sondern öffnet einen Begriffskontext; ein Wissensnetz-Embed zeigt Beziehungen zwischen Begriffen; eine Werkzeugseite macht einen Begriff operativ erfahrbar.

Cascading Style Sheets (CSS) als Darstellungsschicht: Selektoren, CSS-Klassen, Layout
Wie Gestaltung auf vorhandene HTML-Struktur angewendet wird

Cascading Style Sheets bedeutet sinngemäß: gestufte Gestaltungsregeln. Mehrere Regeln können auf dasselbe Element wirken; welche Regel sichtbar wird, hängt unter anderem von Reihenfolge, Spezifität und Vererbung ab. Style Sheets sind Regelblätter: Gestaltung wird getrennt von der HTML-Struktur beschrieben.

CSS ist damit die Darstellungsschicht über der HTML-Struktur. Eine CSS-Regel besteht aus einem Selektor und Deklarationen: Der Selektor bestimmt, welche Elemente gemeint sind; die Deklarationen legen Eigenschaften wie Farbe, Abstand, Schrift oder Layout fest. Dadurch wird nicht die Bedeutung des Inhalts verändert, sondern seine sichtbare Darstellung.

.hinweisbox {
  border: 1px solid #4d89c7;
  padding: 0.75rem;
  background: #102033;
}

Selektor: .hinweisbox wählt alle Elemente mit dieser CSS-Klasse aus.
Deklaration: padding: 0.75rem; legt eine konkrete Darstellungseigenschaft fest.
Wiederverwendung: dieselbe Regel kann auf mehreren Seiten und Elementen wirken.

CSS-Klassen als Schnittstelle zwischen HTML und CSS

CSS-Klassen verbinden die HTML-Struktur mit der Darstellungsschicht. Im HTML markiert class="hinweisbox", dass ein Bereich zu einem wiederverwendbaren Gestaltungsmuster gehört. Im CSS wählt der Selektor .hinweisbox genau diese Bereiche aus und legt fest, wie sie dargestellt werden. Dadurch bleibt die Bedeutung im HTML lesbar, während die Gestaltung zentral und wiederverwendbar im Stylesheet geregelt wird.

Neutrale Container wie <div> können solche Muster technisch gruppieren, sind aber keine semantischen Elemente. Wenn ein passendes Element wie <nav>, <main>, <section> oder <article> existiert, bleibt es die bessere Strukturentscheidung. Semantische Elemente können ebenfalls eine CSS-Klasse tragen; die CSS-Klasse ersetzt ihre Bedeutung nicht.

Semantisch

<nav class="hauptnavigation">
  <a href="index.html">Start</a>
  <a href="projekt.html">Projekt</a>
</nav>

Nur technisch gruppiert

<div class="hauptnavigation">
  <a href="index.html">Start</a>
  <a href="projekt.html">Projekt</a>
</div>

Beide Varianten können über CSS gleich aussehen. <nav> sagt zusätzlich: Dieser Bereich ist Navigation. <div> gruppiert nur technisch und ist deshalb nachgeordnet, wenn es ein semantisch passendes Element gibt.

Wiederverwendbare Struktur und zentrale Gestaltungsregel

HTML-Struktur

<section class="hinweisbox">
  <h2>Projektinfo</h2>
  <p>Diese Box erscheint auf mehreren Seiten.</p>
</section>

CSS-Regel

.hinweisbox {
  border: 1px solid #4d89c7;
  padding: 0.75rem;
  background: #102033;
}

Die CSS-Klasse wird über das class-Attribut im HTML eingetragen, die Gestaltungsregel steht im CSS. So kann dieselbe Struktur auf mehreren Seiten gleich dargestellt werden, ohne die Darstellung in jedes HTML-Element zu schreiben.

Auf index.html kann dieselbe CSS-Klasse eine Einführung markieren, auf projekt.html einen Arbeitshinweis und auf kontakt.html eine Kontaktinformation. Entscheidend ist: Die Seiten behalten ihre eigene HTML-Struktur, teilen aber eine gemeinsame Gestaltungslogik.

Projektinfo Die CSS-Klasse markiert wiederkehrende Hinweise zum Kursprojekt.

Material Die Darstellung bleibt gleich, obwohl der Inhalt wechselt.

Kontakt Auch Kontaktinformationen können dieselbe Demo-CSS-Klasse nutzen.

Der Inhalt ändert sich, die Gestaltungslogik bleibt gleich. Genau dafür sind CSS-Klassen in größeren Webprojekten wichtig.

Sobald eine Kursseite aus mehreren Bereichen besteht – etwa einem Hauptbereich mit Projektbeschreibung und einer Infobox mit Terminen oder Materiallinks –, reicht reine Textformatierung nicht mehr aus. Layoutverfahren wie CSS Grid ordnen solche Bereiche systematisch in Zeilen und Spalten. Dadurch wird Gestaltung planbar und kann sich an unterschiedliche Bildschirmgrößen anpassen.

Codeausschnitt

.kurs-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
}

Gerendertes Mini-Layout

Projektbeschreibung

Hier steht der Hauptbereich der Kursseite.

Grid ordnet Bereiche, nicht einzelne Textfragmente. Es löst ein Layoutproblem: Wie werden Inhaltsbereich und Infobox systematisch angeordnet?

Bilder, Medien und Ressourcen fachlich einordnen
Warum Medien Teil von Struktur, Ressourcenpfaden und Qualitätsentscheidungen sind

Bilder und Medien sind in einer Webseite nicht nur Schmuck. Sie können Informationen erklären, Abläufe veranschaulichen, Quellen sichtbar machen oder Inhalte zugänglich ergänzen. Zuerst muss also klar sein, welche Rolle ein Medium im Dokument übernimmt.

Informationsrolle: Diagramme und Skizzen ergänzen Textinhalte.
Strukturrolle: Das Bild ist ein Element im Dokumentbaum und kann mit Überschrift oder Absatz kombiniert werden.
Ressourcenbezug: src verweist auf eine Datei, deren Ressourcenpfad stimmen muss.
Qualitätsbeitrag: alt sorgt für Zugänglichkeit und klare inhaltliche Beschreibung.

Ressourcenpfade und Dateiorganisation systematisieren

Nach der fachlichen Rolle folgt die technische Einbindung: Ein Bild ist in HTML nicht einfach im Dokument enthalten. Es wird über einen Ressourcenpfad als externe Ressource referenziert. Ein falscher Ressourcenpfad führt nicht zu einem Syntaxfehler im Text, aber dazu, dass die Ressource im Browser nicht erscheint.

<img src="bilder/netzwerk-topologie.png" alt="Topologie mit Router, Switch und Clients">

src organisiert die Datei im Projekt, alt beschreibt die Bildaussage. Damit werden Ressourcenpfad und fachliche Bedeutung bewusst getrennt.

Code

<figure>
  <img src="bilder/ablauf-server.png" alt="Browser sendet Anfrage an Server und Datenbank">
  <figcaption>Datenfluss vom Browser zur Datenbank.</figcaption>
</figure>

Platzhaltergrafik ohne neues Bildasset

Browser Server Datenbank

Datenfluss vom Browser zur Datenbank.

Der alt-Text beschreibt die inhaltliche Rolle eines Bildes. Er ist wichtig, wenn ein Bild nicht geladen wird oder wenn Screenreader die Seite vorlesen. <figure> und <figcaption> binden Bild und Beschreibung zusätzlich semantisch zusammen. Damit wird ein Bild nicht nur dekorativ eingefügt, sondern als erklärender Bestandteil des Dokuments ausgezeichnet.

src verweist auf eine Ressource, alt beschreibt die Bildaussage, <figcaption> bindet eine sichtbare Beschriftung an.

Zur Qualität eines Webprojekts gehören außerdem knappe Verantwortungsperspektiven: Sind Bilder nutzbar lizenziert? Ist die Seite barrierearm lesbar? Werden bei eingebetteten Medien oder Formularen Datenschutzfragen mitgedacht? In E2 werden diese Fragen angebahnt, damit Webentwicklung nicht nur technisch, sondern auch verantwortlich verstanden wird.

Formulare als Schnittstelle zwischen Nutzer und System
Wie Eingaben zu strukturierten HTTP-Anfragen werden

E1 hat HTTP als Kommunikationsform zwischen Client und Server eingeführt. Formulare zeigen nun, wie eine HTML-Seite selbst Daten für eine solche Kommunikation vorbereitet. Nutzende tragen Werte ein; HTML ordnet diese Werte über Feldnamen; beim Absenden entsteht daraus eine HTTP-Anfrage an ein serverseitiges Ziel.

In E2 kann das zunächst ein einfaches Kontakt- oder Projektanmeldeformular sein: Wer möchte am Projekt teilnehmen? Welche Gruppe meldet sich an? Welche Rückfrage soll übermittelt werden? Fachlich steht hier noch die HTML-Struktur der Eingabe im Mittelpunkt; die serverseitige Verarbeitung folgt in Q2.3.

<form action="/api/eintrag-speichern.php" method="post">
  <label for="titel">Titel</label>
  <input id="titel" name="titel" required>
  <button type="submit">Speichern</button>
</form>

Bei Formularen ist nicht nur das sichtbare Eingabefeld wichtig. <label> beschreibt die Bedeutung des Feldes für Nutzende. <input> stellt eine Eingabemöglichkeit bereit. name legt fest, unter welchem Feldnamen der eingegebene Wert übertragen wird. Die Eingabe oder ein vorgegebener value wird zum Wert. action bestimmt das Ziel der Anfrage, method die Art der Übertragung. So wird aus einer Eingabe ein strukturierter Datenfluss.

Formular-Demo ohne Navigation oder serverseitige Verarbeitung

Trage Name und Thema ein und betätige den Button.

Beispielhafte GET-Anfrage anzeigen

kontakt.html?name=Mira&thema=HTML-Struktur

Der Button verschickt hier keine Daten an einen Server. Er zeigt nur lokal, dass Formulare Eingaben strukturieren und dass ein Skript Werte auslesen und eine Rückmeldung setzen kann. Wenn JavaScript nicht läuft, bleiben Formularfelder, Feldnamen und Beispielanfrage weiterhin lesbar. Fachlich entscheidend sind in echten Formularen label, input, name, value, action und method: Aus Eingaben wird später eine strukturierte HTTP-Anfrage.

Damit schließt sich der Kreis zu E1: Beim Laden einer Webseite war der Browser zunächst Empfänger einer HTTP-Antwort. Mit einem Formular wird dieselbe Webseite zur Eingabeschnittstelle: Der Browser erzeugt nun selbst eine neue HTTP-Anfrage, deren Daten später serverseitig verarbeitet werden können.

`method="get"` und `method="post"` fachlich unterscheiden

Die Übertragungsmethode entscheidet nicht nur technisch über URL oder Request-Body, sondern über die Kommunikationssituation.

<form method="get" action="auswertung.php">
  <input type="text" name="titel">
  <button>Absenden</button>
</form>

GET eignet sich für Anfragen, die lesbar, wiederholbar und teilbar sein sollen, etwa Such- oder Filteranfragen. Die Parameter erscheinen in der URL, z. B. auswertung.php?titel=HTML.

<form method="post" action="auswertung.php">
  <input type="text" name="titel">
  <button>Absenden</button>
</form>

POST eignet sich für Eingaben, die verarbeitet, gespeichert oder sensibler behandelt werden, etwa Kommentare, Registrierungen oder Datenbankeinträge. Für Q2.3 ist POST besonders wichtig, weil dort Formulardaten serverseitig verarbeitet und in Datenbanken gespeichert werden.

Was passiert im Hintergrund?

<label> und Eingabefeld bilden eine semantische Einheit.
name definiert den Feldnamen für die Übertragung.
value oder die Nutzereingabe wird zum übertragenen Wert.
action und method beschreiben Ziel und Art des Datenversands.
GET: Parameter in der URL, gut für lesbare und teilbare Anfragen.
POST: Daten im Request-Body, geeignet für Verarbeitung und Datenbankoperationen.

Die fachliche Kette lautet bereits hier: Formular → HTTP-Anfrage → Verarbeitung → Ausgabe. In Q2.3 wird diese Kette mit PHP und Datenbanktechnik vollständig umgesetzt.

Ausblick: vom statischen Hypertext zur Webanwendung
Wie E2 Projektarbeit, JavaScript, PHP und Datenbanken vorbereitet

Ein HTML-Projekt bedeutet nicht nur, einzelne Tags zu kennen. Es bedeutet, Inhalte zu planen, Seitenstruktur zu entwerfen, Navigation festzulegen, wiederkehrende Gestaltung über CSS aufzubauen, Medien korrekt einzubinden, relative Verlinkungen und Ressourcenpfade zu organisieren, Formulare als Eingabeschnittstelle zu verstehen und Ergebnisse zu prüfen.

Fehler	Wirkung im Browser	Diagnosefrage
schließendes Tag fehlt	Struktur verschiebt sich	Ist die Schachtelung korrekt?
falscher Bild-Dateipfad	Bild erscheint nicht	Stimmt `src` relativ zur Datei?
falsches Linkziel	Link führt ins Leere	Stimmt `href`?
CSS-Klasse falsch geschrieben	CSS wirkt nicht	Stimmen class-Attribut und CSS-Selektor überein?
`name` im Formular fehlt	Wert wird nicht sinnvoll übertragen	Hat jedes Eingabefeld einen Feldnamen?

HTML-Projekte werden nicht nur geschrieben, sondern geprüft. Viele Fehler sind Strukturfehler, falsche Ressourcenbezüge oder Zuordnungsfehler.

Die klare Aufgabentrennung bleibt der rote Faden: HTML strukturiert Inhalte, CSS beschreibt die Darstellung, JavaScript kann den Dokumentbaum im Browser verändern, und PHP verarbeitet Formulardaten serverseitig. Dadurch wird sichtbar, wie aus einem statischen Hypertext Schritt für Schritt eine interaktive Webanwendung entstehen kann.

HTML: zeichnet Inhalte als Dokumentstruktur aus.
CSS: übernimmt Layout, Farben, Typografie und responsives Verhalten.
JavaScript: nutzt den Dokumentbaum für Interaktivität im Browser.
PHP: verarbeitet Formulardaten serverseitig und verbindet sie mit Datenbanken.
Q2.3: führt diese technischen Bausteine zu einer vollständigen Webdatenbankanwendung zusammen.

Fachliche Entwicklungslogik E2 → Q2.3

E2 legt die strukturelle Grundlage: saubere HTML-Dokumente, Hypertext-Verknüpfung, CSS als Darstellungsschicht und Formulare als Eingabeschnittstelle. Q2.3 ergänzt die serverseitige Verarbeitung mit PHP und die persistente Speicherung in relationalen Datenbanken.