Links und eine zweite Seite · Code mit Martin

Deine Website ist nicht mehr nur eine Seite. Du baust eine zweite und verbindest sie mit Links.

Zeig mir das: ein Link

Ein Link – das Klickbare, das dich woanders hinführt – entsteht mit dem <a>-Tag:

<!-- A link to another page on your own website -->
<a href="lunch-menu.html">Lunch Menu</a>

<!-- A link out to somewhere else on the internet -->
<a href="https://www.si.edu">Our favorite museum's website</a>

href sagt, wohin der Link führt.
Der Text zwischen <a> und </a> ist sichtbar und klickbar.

Eine zweite Seite

Deine Website hat bisher nur index.html. Fügen wir eine zweite Seite hinzu – einfach eine weitere Datei im gleichen Ordner:

In VS Code erstelle eine neue Datei. Benenne sie passend zu deinem Projekt, z. B. lunch-menu.html, about-me.html, trips.html oder roster.html. Wieder: Kleinbuchstaben, keine Leerzeichen oder Umlaute.
Füge das komplette Seiten-Gerüst ein (dasselbe aus Lektion 1) und gib ihm eigenen <title>, <h1> und etwas Inhalt.
Verbinde die Seiten mit Links: auf index.html einen Link zur neuen Seite, und auf der neuen Seite einen Link zurück – so etwas wie <a href="index.html">Back home</a>.

Jetzt du 💪

Erstelle eine zweite Seite und verlinke beide Seiten miteinander. Mindestens ein Link soll auch ins Internet führen.

🏫 Schulwebsite – Lösung (lunch-menu.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Lunch Menu – Riverside Elementary</title>
  </head>
  <body>
    <h1>This Week's Lunch Menu</h1>
    <ul>
      <li>Monday: tomato soup with pasta</li>
      <li>Tuesday: chicken with rice</li>
      <li>Wednesday: pancakes with syrup 🎉</li>
      <li>Thursday: beef stew with dumplings</li>
      <li>Friday: fish and potatoes</li>
    </ul>
    <p><a href="index.html">← Back to the homepage</a></p>
  </body>
</html>

Und auf index.html füge hinzu:

<p><a href="lunch-menu.html">Check out the lunch menu</a></p>

🙋 Persönliche Website – Lösung (about-me.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>More About Me – Jake</title>
  </head>
  <body>
    <h1>More About Me</h1>
    <p>I'm in 4th grade, I have a dog named Rocky, and I collect soccer cards.</p>
    <p>My favorite thing to listen to is <a href="https://www.youtube.com">music on YouTube</a>.</p>
    <p><a href="index.html">← Back home</a></p>
  </body>
</html>

🌍 Reisetagebuch – Lösung (trips.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>All Trips – Where We've Been</title>
  </head>
  <body>
    <h1>All Our Trips</h1>
    <ol>
      <li>The mountains – a ridge hike</li>
      <li>Greece – island hopping</li>
      <li>Washington, D.C. – museums and monuments</li>
    </ol>
    <p>We plan our routes with <a href="https://maps.google.com">Google Maps</a>.</p>
    <p><a href="index.html">← Back to the homepage</a></p>
  </body>
</html>

⚽ Vereinswebsite – Lösung (roster.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Roster – Riverside Eagles FC</title>
  </head>
  <body>
    <h1>Team Roster</h1>
    <ul>
      <li>Jake – goalkeeper (captain)</li>
      <li>Matt – defense</li>
      <li>Owen – midfield</li>
      <li>Tom – forward</li>
    </ul>
    <p>Check the league schedule at <a href="https://www.ussoccer.com">ussoccer.com</a>.</p>
    <p><a href="index.html">← Back to the homepage</a></p>
  </body>
</html>

✅

Kontrolliere dich selbst: Du klickst auf der Startseite einen Link → die zweite Seite öffnet sich. Du klickst „Zurück” → du bist wieder daheim. Deine Website hat zum ersten Mal mehr als eine Seite!

Das nimmst du aus dieser Lektion mit

Ein Link: <a href="wohin">Linktext</a>.
Eine neue Seite auf deiner Website = eine neue .html-Datei im gleichen Ordner.
Links zwischen eigenen Seiten nutzen nur den Dateinamen (lunch-menu.html); Links nach draußen beginnen mit https://.