In diesem Kapitel lernst du, wie du eine Navigationsleiste zu deiner Webseite hinzufügst und den Hauptinhalt darunter anordnest. Eine Navigationsleiste hilft Nutzern, sich auf deiner Webseite leichter zurechtzufinden.
Schritt 1: Grundstruktur der HTML-Seite erstellen
Erstelle eine neue Datei index.html und füge den folgenden Code ein:
<!DOCTYPE html>
<html>
<head>
<title>Webseite mit Navigation</title>
<style>
/* Navigationsleiste */
nav {
background-color: #333;
color: white;
padding: 10px;
display: flex;
justify-content: space-around;
}
nav a {
color: white;
text-decoration: none;
padding: 8px 16px;
}
nav a:hover {
background-color: #575757;
}
/* Hauptinhalt */
main {
padding: 20px;
}
</style>
</head>
<body>
<nav>
<a href="#">Startseite</a>
<a href="#">Über uns</a>
<a href="#">Kontakt</a>
</nav>
<main>
<h1>Willkommen auf meiner Webseite</h1>
<p>Dies ist der Hauptinhalt der Seite. Hier kannst du Informationen, Bilder oder andere Inhalte anzeigen lassen.</p>
</main>
</body>
</html>Erklärung des Codes
- Navigation (
<nav>):- Enthält Links, die zu verschiedenen Abschnitten oder Seiten führen.
- Die Navigation ist mit einem dunklen Hintergrund und weißen Schriftfarben gestaltet.
- Hauptinhalt (
<main>):- Hier wird der Hauptinhalt der Seite angezeigt.
- Ein einfacher Absatz erklärt den Zweck der Seite.
- CSS-Styling:
nav: Setzt die Navigation als horizontalen Balken mit dunklem Hintergrund.nav a: Verleiht den Links eine weiße Farbe und sorgt dafür, dass sie beim Überfahren mit der Maus hervorgehoben werden.
Schritt 2: Weitere Seiten erstellen
Erstelle eine zweite Datei about.html mit dem folgenden Inhalt:
<!DOCTYPE html>
<html>
<head>
<title>Über uns</title>
<style>
nav {
background-color: #333;
color: white;
padding: 10px;
display: flex;
justify-content: space-around;
}
nav a {
color: white;
text-decoration: none;
padding: 8px 16px;
}
nav a:hover {
background-color: #575757;
}
main {
padding: 20px;
}
</style>
</head>
<body>
<nav>
<a href="index.html">Startseite</a>
<a href="about.html">Über uns</a>
<a href="#">Kontakt</a>
</nav>
<main>
<h1>Über uns</h1>
<p>Auf dieser Seite erfährst du mehr über uns und unsere Projekte.</p>
</main>
</body>
</html>Schritt 3: Testen der Navigation
- Speichere beide Dateien im gleichen Ordner.
- Öffne
index.htmlin deinem Browser. - Klicke auf die Links in der Navigationsleiste, um zwischen den Seiten zu wechseln.
Ergebnis
Du hast eine einfache Webseite mit einer Navigationsleiste erstellt, die verschiedene Seiten miteinander verbindet. Die Inhalte jeder Seite sind klar strukturiert und für Nutzer leicht zugänglich.