Die Sehenswürdigkeiten von Amsterdam

Das Ziel

Aus deiner Liste werden eigene Seiten: für jeden Ort eine Datei, verlinkt von der Startseite und zurück. Damit wird aus einer Seite eine Webseite.

So könnte das aussehen

So ist eine Unterseite aufgebaut – eine Überschrift, ein Bild, ein paar Absätze und ein Rückweg:

<p><a href="../index.html">← Zurück zur Startseite</a></p> <h1>Rijksmuseum</h1> <figure> <img src="/images/amsterdam-platzhalter.svg" alt="Backsteinfassade des Rijksmuseums mit zwei Türmen" width="320" height="180"> <figcaption>Zeichnung: Hyperbook, CC BY-SA</figcaption> </figure> <p> Das Rijksmuseum ist das größte Museum der Niederlande. Sein bekanntestes Bild ist Rembrandts <em>Nachtwache</em> von 1642 – über vier Meter breit. </p> <h2>Gut zu wissen</h2> <ul> <li>Geöffnet täglich von 9 bis 17 Uhr</li> <li>Unter 18 Jahren ist der Eintritt frei</li> <li>Tickets vorher online kaufen, sonst wartet man lange</li> </ul>

body { font-family: system-ui, sans-serif; line-height: 1.6; max-width: 40rem; margin-inline: auto; padding: 1rem; } img { max-width: 100%; height: auto; }

Der Übungsbereich zeigt immer nur eine Seite. Das Springen zwischen Dateien kannst du deshalb erst in deinem eigenen Projekt ausprobieren – dort funktioniert es.

Wie es gemacht ist

Ein Link besteht aus dem Element <a>, dem Ziel in href und dem sichtbaren Text dazwischen:

<a href="orte/rijksmuseum.html">Rijksmuseum</a>

Entscheidend ist der Pfad. Er wird von der Datei aus gelesen, in der der Link steht:

meine-seite/
├── index.html          ← von hier …
├── stil.css
└── orte/
    ├── rijksmuseum.html   … nach hier: orte/rijksmuseum.html
    └── vondelpark.html

Von	Nach	`href`
`index.html`	`orte/rijksmuseum.html`	`orte/rijksmuseum.html`
`orte/rijksmuseum.html`	`index.html`	`../index.html`
`orte/rijksmuseum.html`	`orte/vondelpark.html`	`vondelpark.html`

.. bedeutet einen Ordner nach oben. Von einer Unterseite zurück zur Startseite geht es deshalb über ../index.html.

Und: keine Leerzeichen in Dateinamen. anne frank haus.html funktioniert im Browser nur mit Verrenkungen – anne-frank-haus.html immer.

Mehr dazu: Links und Bilder.

Deine Aufgabe

a) Leg in deinem Projektordner einen Unterordner an – orte/, spieler/, rezepte/, wie es zu deinem Thema passt.

b) Erstelle darin für zwei bis drei Einträge deiner Liste je eine HTML-Datei. Jede bekommt das volle Grundgerüst, eine <h1>, ein Bild und mindestens zwei Absätze.

c) Verlinke die Einträge auf deiner Startseite mit den passenden Unterseiten.

d) Setz auf jede Unterseite oben einen Rückweg zur Startseite.

e) Probier alle Links im Browser durch. Kommst du von jeder Seite zu jeder anderen und wieder zurück?

Tipp 1: Die erste Unterseite geht am schnellsten mit Kopieren

Kopier deine index.html, benenn die Kopie um und leg sie in den Unterordner. Danach tauschst du nur Überschrift und Text aus – das Grundgerüst stimmt schon.

Achtung bei den Pfaden: In der Kopie liegt das Bild jetzt eine Ebene höher. Aus bilder/hafen.jpg wird ../bilder/hafen.jpg.

Tipp 2: Der Link führt ins Leere

Klick den Link an und sieh in die Adresszeile. Dort steht, wonach der Browser gesucht hat. Meistens ist es eins von dreien:

Tippfehler im Dateinamen – rijkmuseum.html statt rijksmuseum.html.
Groß- und Kleinschreibung. Auf deinem Rechner mag Orte/ funktionieren, auf einem Webserver nicht. Schreib alles klein.
Ordner vergessen – rijksmuseum.html statt orte/rijksmuseum.html.

Eine mögliche Umsetzung. Erfrage das Passwort bei deiner Lehrkraft oder sieh auf der Seite Lösungspasswörter nach.