Aufgabe:

  1. Erstelle einen neuen Navigationspunkt in der Menüleiste.

  2. Erstelle eine zweite HTML-Seite und verlinke sie über den Navigationspunkt.

  3. Füge kleinen Text in die neue Seite ein.

  4. Teste die Navigation im Browser – alle Links sollen korrekt funktionieren.

Erklärung:

Navigationen verbinden die verschiedenen Seiten einer Website.

  • Meist werden ungeordnete Listen (<ul>) verwendet, die Links (<a>) enthalten.

  • Jede Liste (<li>) entspricht einem Navigationspunkt.

  • Mehrere Seiten ermöglichen es, Inhalte übersichtlich zu strukturieren.

Technische Umsetzung:

1. Navigation in HTML erstellen

Im <header> von index.html:

<header id="header">
  <h1>Meine Website</h1>
  <nav>
    <ul class="nav-list">
      <li><a href="index.html">Start</a></li>
      <li><a href="seite2.html">Geheime Mission</a></li>
    </ul>
  </nav>
</header>

  • <nav> = semantisches Element für Navigation

  • <ul> = Liste der Navigationspunkte

  • <li> = einzelner Punkt

  • <a> = Link zur jeweiligen Seite

2. CSS für Navigation (optional)

  list-style-type: none; /* Punkte entfernen */
  display: flex;         /* horizontale Anordnung */
  gap: 20px;             /* Abstand zwischen Links */
}

.nav-list a {
  text-decoration: none; /* Unterstreichung entfernen */
  color: white;
  font-weight: bold;
}

3. Neue Seite erstellen (seite2.html)

  1. Erstelle im Projektordner die Datei seite2.html.

  2. Füge Grundgerüst ein:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Geheime Mission</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header id="header">
    <h1>Meine Website</h1>
    <nav>
      <ul class="nav-list">
        <li><a href="index.html">Start</a></li>
        <li><a href="seite2.html">Geheime Mission</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section class="box">
      <h2>Geheime Mission</h2>
      <p>Hier verbirgt sich ein kleines Easter-Egg.</p>
    </section>
  </main>

  <footer id="footer">
    <p>© 2025 Webentwicklung</p>
  </footer>
</body>
</html>

  • Die Navigation ist identisch wie auf der Startseite

  • So kann der Nutzer zwischen Seiten wechseln

Grundlegende Fachkonzepte (zum Merken)

Navigation (<nav>)

  • Semantisches Element für die Hauptnavigation der Seite

  • Enthält Links zu anderen Seiten oder Bereichen

Liste in Navigation (<ul> / <li>)

  • Strukturiert Navigationspunkte

  • Flexibles Styling möglich

Interne Links (<a href="seite2.html">)

  • Verbindet Seiten innerhalb des Projekts

  • Pfad muss korrekt sein

Konsistente Navigation

  • Gleiche Navigation auf allen Seiten

  • Nutzer kann sich leicht orientieren

CSS Flexbox für Navigation

  • display: flex; → horizontale Anordnung

  • gap: 20px; → Abstand zwischen Links

  • list-style-type: none; → Standard-Bulletpunkte entfernen

Seitenstruktur

  • Jede Seite enthält <header>, <main>, <footer>

  • Gleiche CSS-Datei verwenden für konsistentes Design

Zuletzt geändert: Dienstag, 16. Dezember 2025, 09:20