HTML Navigation Links: Website Navigation meistern

Einführung

Das HTML <nav>-Tag ist ein wichtiges Element zum Erstellen von Navigationslinks auf einer Website. In diesem Lab werden Sie lernen, wie Sie das <nav>-Tag verwenden, um ein Navigationsmenü auf Ihrer Website zu erstellen.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie in Visual Studio Code HTML schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Erstellen einer einfachen HTML-Seite

Zunächst erstellen wir eine neue HTML-Seite namens index.html und fügen die grundlegende HTML-Struktur hinzu.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Website</title>
  </head>
  <body></body>
</html>

Hinzufügen von Navigationslinks mit dem
-Tag

Lassen Sie uns nun mit Hilfe des HTML <nav>-Tags ein Navigationsmenü erstellen. Erstellen Sie ein <nav>-Element innerhalb des <body>-Tags.

<body>
  <nav></nav>
</body>

Hinzufügen von Navigationslinks mit dem -Tag

Als nächstes fügen Sie einige Navigationslinks innerhalb des <nav>-Tags hinzu, indem Sie das HTML <a>-Tag verwenden.

<body>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact Us</a>
  </nav>
</body>

Gestalten des Navigationsmenüs

Um das Navigationsmenü visuell ansprechender zu gestalten, fügen wir einigen CSS hinzu. Fügen Sie die folgenden Stile zu Ihrer HTML hinzu:

<head>
  <meta charset="UTF-8" />
  <title>My Website</title>

  <style>
    nav {
      background-color: #333;
      overflow: hidden;
    }

    a {
      float: left;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    a:hover {
      background-color: #ddd;
      color: black;
    }
  </style>
</head>

Endgültige Seite

Ihre endgültige index.html-Seite sollte ungefähr so aussehen:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Website</title>

    <style>
      nav {
        background-color: #333;
        overflow: hidden;
      }

      a {
        float: left;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }

      a:hover {
        background-color: #ddd;
        color: black;
      }
    </style>
  </head>
  <body>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Contact Us</a>
    </nav>
  </body>
</html>

Zusammenfassung

In diesem Lab haben Sie gelernt, wie Sie das HTML <nav>-Tag verwenden, um ein Navigationsmenü auf Ihrer Website zu erstellen. Die Verwendung des <nav>-Tags zum Erstellen von Navigationsmenüs und deren Gestaltung mit CSS kann Benutzern helfen, sich leicht durch Ihre Website zu navigieren und sie visuell ansprechender zu gestalten.