Für Klasse 10-3. Annahmen: Arbeit am Windows-Schulrechner mit H-Laufwerk; Bearbeitungszeit etwa 60 Minuten. Du kennst das HTML-Grundgerüst, Überschriften, Absätze und Links. Ein vorhandener Texteditor und ein Browser reichen aus. Auf einem anderen Betriebssystem kannst du denselben Website-Ordner in deinem persönlichen Arbeitsordner anlegen.
Du baust eine kleine Website über ein Hobby, einen Ort oder ein anderes Thema deiner Wahl. Sie besteht aus genau vier HTML-Seiten. Von jeder Seite sollst du alle vier Seiten über dasselbe Menü erreichen können.
Deine Lernziele
Am Ende kannst du relative Pfade vom Speicherort einer HTML-Datei aus bestimmen, mit ../ in den übergeordneten Ordner wechseln und relative Pfade von absoluten Dateipfaden sowie vollständigen Webadressen unterscheiden. Du kannst außerdem systematisch prüfen, ob deine Navigation funktioniert.
1. Ordner vorbereiten – etwa 5 Minuten
Lege in deinem Informatik-Ordner auf dem H-Laufwerk den Ordner vier-seiten an. Erstelle darin genau diese Struktur:
vier-seiten/
├── index.html
├── seiten/
│ ├── thema.html
│ ├── tipps.html
│ └── extras/
│ └── links.html
└── pfadprotokoll.txtSpeichere HTML-Dateien als reinen Text mit der Endung .html. Prüfe unter Windows mit eingeblendeten Dateinamenerweiterungen, dass sie nicht versehentlich .html.txt heißen. pfadprotokoll.txt enthält später deine Erklärungen und Testergebnisse.
2. Pfade verstehen – etwa 10 Minuten
Ein relativer Pfad beschreibt den Weg zur Zieldatei ausgehend vom Ordner der aktuellen HTML-Datei. Für diese Übung gibt es kein <base>-Element, das diesen Ausgangspunkt verändert.
| Ausgangsdatei | Zieldatei | Relativer Pfad |
|---|---|---|
index.html | seiten/thema.html | seiten/thema.html |
seiten/thema.html | seiten/tipps.html | tipps.html |
seiten/thema.html | index.html | ../index.html |
seiten/extras/links.html | index.html | ../../index.html |
../ bedeutet: eine Ordnerebene nach oben. In HTML verwendest du für diese Wege den Schrägstrich /.
Beispiel für einen Link aus thema.html zur Startseite:
<a href="../index.html">Start</a>Ein absoluter Dateipfad beschreibt den vollständigen Ort im Dateisystem, beispielsweise H:\Informatik 10\vier-seiten\index.html. Diese Windows-Schreibweise ist kein geeigneter Link für eine veröffentlichte Website. Eine lokale Datei kann im Browser auch als Datei-URL erscheinen, beispielsweise file:///H:/Informatik%2010/vier-seiten/index.html. Sie funktioniert nur, wenn dieser Speicherort auf dem jeweiligen Rechner vorhanden und zugänglich ist.
https://ezsh.info/ ist dagegen eine absolute Webadresse: Sie enthält Protokoll und Domain. Für einen Link zur Schulhomepage ist das sinnvoll. Für die Verbindungen innerhalb deiner Website verwendest du relative Pfade, damit du den ganzen Website-Ordner verschieben kannst.
Auch /seiten/thema.html ist eine besondere Schreibweise: Auf einer veröffentlichten Website beginnt dieser Pfad am Stamm der Domain, nicht am Ordner der aktuellen HTML-Datei. Verwende ihn in dieser lokalen Übung nicht.
Notiere im Pfadprotokoll für ../tipps.html, H:\Informatik 10\vier-seiten\index.html und https://ezsh.info/, um welche Art von Pfad oder Adresse es sich handelt. Erkläre außerdem in einem Satz, warum lokale absolute Dateipfade für andere Personen meist ungeeignet sind.
3. Vier Seiten bauen – etwa 25 Minuten
Verwende auf jeder Seite ein vollständiges HTML-Grundgerüst mit <!DOCTYPE html>, <html lang="de">, <head>, <meta charset="utf-8">, einem passenden <title> und <body>.
| Datei | Inhalt zusätzlich zum Menü |
|---|---|
index.html | Eine Hauptüberschrift und zwei kurze Absätze: Stelle das Thema vor und erkläre, was die anderen drei Seiten bieten. |
seiten/thema.html | Eine Hauptüberschrift, zwei Zwischenüberschriften und unter jeder mindestens ein Absatz mit Informationen zum Thema. |
seiten/tipps.html | Eine Hauptüberschrift und eine Liste mit mindestens drei hilfreichen Tipps, jeweils mit einer kurzen Erklärung. |
seiten/extras/links.html | Eine Hauptüberschrift, ein vollständiger Link zur Schulhomepage und ein Absatz, der erklärt, warum hier eine absolute Webadresse sinnvoll ist. |
Alle Seiten sollen dasselbe Thema behandeln. Kurze, eigene Texte genügen. Der Pflichtteil verwendet ausschließlich pures HTML, ohne CSS: keine style-Attribute, keine <style>-Elemente und keine eingebundenen Stylesheets. Die Standarddarstellung des Browsers genügt; Gestaltung wird im Pflichtteil nicht bewertet.
Das gemeinsame Navigationsmenü
Platziere auf jeder Seite direkt nach dem öffnenden <body> ein <nav>-Element. Darin steht eine ungeordnete Liste mit <ul> und genau vier <li>-Elementen. Jedes <li> enthält einen Link mit <a>. Die sichtbaren Namen und ihre Reihenfolge sind auf allen Seiten gleich: Start – Thema – Tipps – Links. Auch die gerade geöffnete Seite hat einen Link zu sich selbst. Ohne CSS erscheint das Menü als Liste untereinander; alle Links müssen bereits so funktionieren.
Die href-Werte müssen zum Speicherort der jeweiligen Seite passen. Dasselbe sichtbare Menü bedeutet daher nicht, dass du überall dieselben Pfade kopieren kannst.
So beginnt das Menü in index.html:
<nav>
<ul>
<li><a href="index.html">Start</a></li>
<li><a href="seiten/thema.html">Thema</a></li>
<!-- Ergänze zwei li-Elemente mit Links zu Tipps und Links. -->
</ul>
</nav>Bestimme die fehlenden Wege selbst. Zeichne bei Schwierigkeiten den Weg in der Ordnerstruktur nach: erst nach oben, dann in den passenden Unterordner und schließlich zur Datei.
4. Navigation testen – etwa 15 Minuten
Öffne index.html im Browser. Speichere nach Änderungen im Editor und lade die Seite im Browser neu.
Test A: Alle 16 Menüverbindungen
Prüfe von jeder der vier Seiten aus jeden der vier Menüpunkte. Kontrolliere an der Hauptüberschrift und der Browseradresse, ob die richtige Datei geöffnet wird. Übernimm diese Tabelle in dein Pfadprotokoll. Trage erst dann „OK“ ein, wenn du den Link tatsächlich getestet hast.
| Ausgangsseite | Start | Thema | Tipps | Links |
|---|---|---|---|---|
| Start | ||||
| Thema | ||||
| Tipps | ||||
| Links |
Bei einem Fehler: Notiere Ausgangsdatei, falschen Pfad und korrigierten Pfad. Teste die Verbindung erneut. Prüfe besonders Dateinamen, Groß-/Kleinschreibung, Endungen und die Anzahl der ../.
Test B: Website verschieben
Kopiere den gesamten Ordner vier-seiten an einen anderen Ort, beispielsweise in einen neuen Ordner pfadtest innerhalb deines Informatik-Ordners. Öffne die kopierte index.html und klicke den Weg Start → Thema → Tipps → Links → Start durch. Prüfe in der Browseradresse, ob du bei allen vier Seiten innerhalb der Kopie bleibst. Notiere das Ergebnis und erkläre in zwei Sätzen, warum die relativen Pfade weiterhin funktionieren.
Test C: Externe Adresse
Öffne von der Seite „Links“ aus die Schulhomepage. Notiere, welche Domain in der Browseradresse steht. Dieser Test benötigt eine Internetverbindung; fehlt sie, notiere „nicht prüfbar – keine Internetverbindung“.
Dein Ergebnis
Dein Ergebnis ist der vollständige Ordner vier-seiten mit vier HTML-Dateien und pfadprotokoll.txt. Das Protokoll enthält die drei Einordnungen aus Schritt 2, die Erklärung zu absoluten Dateipfaden, die Tabelle mit 16 Testergebnissen, gegebenenfalls Fehlerkorrekturen sowie die Ergebnisse der Tests B und C. Halte den Ordner zur Kontrolle bereit. Ein Abgabeweg und eine Abgabefrist werden gesondert festgelegt.
Selbstkontrolle
- ☐ Meine Ordnerstruktur und Dateinamen stimmen mit der Vorgabe überein.
- ☐ Alle vier Seiten besitzen ein vollständiges HTML-Grundgerüst und die geforderten Inhalte.
- ☐ Alle Menüs zeigen dieselben vier Namen in derselben Reihenfolge.
- ☐ Jedes Menü besteht aus einer ungeordneten Liste mit vier
li-Elementen und je einema-Link; es funktioniert ohne CSS. - ☐ Alle 16 internen Menülinks funktionieren und verwenden relative Pfade.
- ☐ Ich kann erklären, von welchem Ordner aus ein relativer Pfad gelesen wird.
- ☐ Ich unterscheide relative Pfade, absolute Dateipfade und absolute Webadressen.
- ☐ Die Navigation funktioniert auch innerhalb der kopierten Website.
- ☐ Mein Pfadprotokoll dokumentiert die tatsächlich durchgeführten Tests.
Freiwillige Erweiterung
Wenn du den Pflichtteil fertig getestet hast, erstelle direkt in vier-seiten den Ordner css und darin eine gemeinsame Datei stil.css. Kopiere diesen Inhalt hinein; weitere CSS-Kenntnisse sind dafür nicht nötig:
body { font-family: sans-serif; }
nav ul {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.5em;
padding: 0.75em;
background-color: #eeeeee;
border-radius: 0.5em;
}
nav a {
display: block;
padding: 0.5em 1em;
color: white;
background-color: #244666;
text-decoration: none;
border-radius: 0.3em;
}
nav a:hover, nav a:focus {
background-color: #142b40;
text-decoration: underline;
}Binde genau diese eine Datei auf allen vier HTML-Seiten im <head> ein. In index.html lautet die Einbindung:
<link rel="stylesheet" href="css/stil.css">Bestimme die relativen href-Pfade für die anderen drei Seiten selbst. Gestalte damit genau die vorhandene Menüliste: Die HTML-Struktur mit nav, ul, li und a bleibt bestehen. Prüfe auf allen vier Seiten, ob die Links als dunkelblaue Schaltflächen auf grauem Hintergrund erscheinen und weiterhin funktionieren. Kopiere anschließend die aktualisierte Website erneut in deinen Testordner und wiederhole die Prüfung dort. Dokumentiere im Pfadprotokoll die vier CSS-Pfade und deine Testergebnisse. Erkläre in einem Satz den Vorteil einer gemeinsamen CSS-Datei. Die Website bleibt bei vier HTML-Seiten.