E2 – HTML-Projekt: Struktur, Hypertext und CSS

Einführungsphase

E2 – HTML

Strukturierte Webdokumente als Grundlage späterer Webanwendungen

Im Themenfeld E2 geht es nicht nur darum, „eine Seite zu bauen“, sondern um einen zentralen Gedanken der Informatik: Ein Webdokument ist Teil eines vernetzten Systems. HTML beschreibt dabei die Dokumentstruktur, der Browser interpretiert diese Struktur, und über Links wird aus Einzelseiten ein zusammenhängendes Hypertext-System.

Das D-Book selbst ist dafür ein direktes Beispiel: Kursseiten, Glossar, Suche, Werkzeuge und Übungen sind nicht isoliert, sondern funktional verbunden. Genau diese Logik wird im HTML-Projekt fachlich aufgebaut und später im Webdatenbankprojekt (Q2.3) technisch erweitert.

Kerncurriculum kompakt
E2 als strukturierte Grundlage für Hypertext, CSS und formularbasierte Datenflüsse

Das Themenfeld E2 bündelt die Kernbausteine der Webentwicklung in einer klaren Lernlogik: HTML5 als Strukturierungssprache, Hypertext als Vernetzungsprinzip und CSS3 als Gestaltungsschicht. Der fachliche Fokus liegt auf einem korrekten HTML-Grundgerüst mit <!DOCTYPE html>, <html>, <head>, Meta-Tags, <title> und <body> als Grundlage für valide, wartbare Webseiten.

Daran schließen sich zentrale Strukturkonzepte an: Dokumentbaum, Schachtelung, strukturierende HTML-Elemente sowie Verlinkungskonzepte mit relativen und absoluten Verweisen. Ergänzend werden CSS-Selektoren, CSS-Klassen, grundlegende Formatierungsattribute und das Grid-Layout als systematische Schritte von der Einzelseite zum Mehrseitendesign behandelt.

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 Beschreibungssprache
Was HTML ist, wofür es da ist und warum die Trennung zu CSS zentral ist

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

Merksatz

HTML beschreibt Struktur und Bedeutung, CSS gestaltet die Darstellung.

Warum diese Trennung didaktisch so wichtig ist

In einem größeren Webprojekt arbeiten Struktur und Gestaltung arbeitsteilig: HTML wird einmal sauber aufgebaut und kann auf vielen Seiten wiederverwendet werden, während CSS einheitliche Gestaltung für das ganze System sicherstellt. Genau deshalb sind große Websites wartbar und konsistent.

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

In diesem Beispiel steht im HTML nur die Bedeutung: Überschrift und Absatz. Wie groß die Überschrift ist, welche Farbe sie hat und wie viel Abstand darunter erscheint, wird bewusst nicht hier festgelegt, sondern über CSS.

Aufbau von HTML-Dokumenten: Hierarchie, Schachtelung, Baumdenken
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>

Diese Struktur zeigt zwei Ebenen: Metadaten im head und sichtbarer Inhalt im body. Im Body werden wiederum Bereiche wie <section>, Überschriften oder Listen weiter verschachtelt.

Baumstruktur (DOM-Grundidee) verstehen

Aus der Schachtelung entsteht ein Dokumentbaum. Das ist die Grundlage für spätere Arbeit mit CSS-Selektoren und JavaScript: Beide greifen nicht „irgendwo im Code“ zu, sondern auf Knoten in dieser Struktur.

Elternknoten: z. B. section
Kindknoten: z. B. h2 und p innerhalb dieser Section
Geschwisterknoten: Elemente auf derselben Ebene
Didaktischer Kern: HTML ist ein Strukturmodell, nicht nur eine Befehlsliste.

Strukturierung mit <div> und Klassen
Vom reinen Markup zur planbaren, wiederverwendbaren Seitenstruktur

Das Element <div> ist ein strukturierender Container. Es hat keine eigene Semantik wie etwa <section> oder <article>, sondern dient dazu, zusammengehörige Inhalte technisch zu gruppieren.

<div>
  <h3>Hinweis</h3>
  <p>Dieser Block gehört inhaltlich zusammen.</p>
</div>

Im nächsten Schritt werden Container mit Klassen versehen. Eine class ist wiederverwendbar, kann mehreren Elementen zugewiesen werden und bildet die Grundlage für gezielte CSS-Gestaltung.

<div class="hinweisbox">
  <h3>Wichtiger Hinweis</h3>
  <p>Diese Box nutzt eine wiederverwendbare Klasse.</p>
</div>

<div class="hinweisbox">
  <p>Auch dieser Bereich verwendet dieselbe Klasse.</p>
</div>

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

So wird sichtbar, wie Struktur entsteht: HTML gruppiert Inhalte mit Containern, und Klassen machen diese Struktur für einheitliches Design und spätere Erweiterung nutzbar.

Zentrale HTML-Elemente systematisch gruppiert
Von Strukturbausteinen über Listen bis zu Links und Medien

1) Strukturierende Elemente

Überschriften <h1> bis <h6> strukturieren Themenebenen, <p> markiert inhaltliche Absätze. Diese Elemente schaffen Leseführung und sind die Basis für verständliche Seiten.

2) Gruppierung von Inhalten

<section> gruppiert inhaltlich zusammengehörige Abschnitte, <div> ist ein neutraler Container für technische Gruppierung. So werden wiederkehrende Seitenteile planbar und mehrfach nutzbar.

3) 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 und wiederverwendbar.

4) 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.

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

Hypertext und Verlinkung als Kernidee des Webs
Warum eine Website aus verknüpften Dokumenten besteht

Der Begriff Hypertext bedeutet: Dokumente sind über Hyperlinks verbunden und dadurch navigierbar. Das Web ist deshalb kein Stapel isolierter Seiten, sondern ein Netz aus Verweisen.

<a href="seite2.html">Zur nächsten Seite</a>

Der href-Wert bestimmt das Ziel. Erst diese Verknüpfung macht aus einer einzelnen Datei eine Website mit Navigation, Kontextwechsel und Informationspfaden.

<!-- relative Verlinkung innerhalb des Projekts -->
<a href="../Glossar.html#html">Zum Glossar: HTML</a>

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

D-Book als reales Hypertext-System

Navigation, Glossaranker und Suche verknüpfen Inhalte über mehrere Bereiche hinweg.
Relative und absolute Verweise erfüllen unterschiedliche Aufgaben im Projektsystem.
Hyperlinks sind damit die funktionale Grundlage des World Wide Web.

Bilder und Medien funktional einordnen
Visualisierung, Informationsverdichtung und externe Ressourcen

Medien sind in HTML kein dekoratives Extra, sondern Teil der Informationsdarstellung. Bilder können erklären, vergleichen, hervorheben oder komplexe Inhalte schneller verständlich machen. Technisch werden sie als externe Datei eingebunden und in die Dokumentstruktur integriert.

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

Informationsfunktion: Diagramme und Skizzen ergänzen Textinhalte.
Strukturfunktion: Das Bild ist ein Element im Dokumentbaum und kann mit Überschrift/Absatz kombiniert werden.
Qualitätsfunktion: alt sorgt für Zugänglichkeit und klare inhaltliche Beschreibung.

<figure>
  <img src="ablauf.png" alt="Ablauf: Formular zu Datenbank">
  <figcaption>Datenfluss vom Browser zur Datenbank.</figcaption>
</figure>

Als Ausblick gilt: Medien können auch interaktiv werden (z. B. klickbare Bildbereiche), werden in E2 aber zunächst als strukturierte Inhaltsbausteine verstanden.

Ausblick: Formulare als Schnittstelle zwischen Nutzer und System
Dateneingabe in E2 als fachliche Vorbereitung auf Q2.3

Formulare sind die zentrale Schnittstelle zwischen Nutzenden und System. Hier werden Daten strukturiert erfasst, an den Server übertragen und dort weiterverarbeitet. Damit beginnt der Übergang von statischen Seiten zu interaktiven Webanwendungen.

<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>

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

Die Übertragungsmethode entscheidet, wie Formulardaten versendet werden. Bei GET landen die Daten in der URL, bei POST im Request-Body.

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

Typischer GET-Fall: Suche oder Filter, bei denen eine URL mit Parametern sinnvoll teilbar ist, z. B. auswertung.php?titel=HTML.

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

Typischer POST-Fall: Eingaben, die gespeichert, verändert oder sensibler behandelt werden (z. B. Registrierungen, Kommentare, Datenbankeinträge). POST ist deshalb für Webdatenbankanwendungen in Q2.3 der Standardfall.

Was passiert im Hintergrund?

<label> und Eingabefeld bilden eine semantische Einheit.
name definiert den Feldnamen für die Übertragung.
action und method beschreiben das Ziel und die Art des Datenversands.
GET: Parameter in der URL, gut für lesbare Anfragen und Navigation.
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: Trennung HTML–CSS und Brücke zu JavaScript/PHP
Vom strukturierten Dokument zur Webanwendung

Die klare Aufgabentrennung bleibt der rote Faden: HTML strukturiert Inhalte, CSS gestaltet das Erscheinungsbild. Dadurch können Webprojekte wachsen, ohne unübersichtlich zu werden.

<p class="wichtig">Formulardaten prüfen</p>

.wichtig { color: #d9ecff; font-weight: 700; }

Kontinuität zu späteren Kapiteln

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 Ebenen zu einer vollständigen Webdatenbankanwendung zusammen.

Fachliche Entwicklungslogik E2 → Q2.3

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