Kopfteil in HTML erstellen

Einführung

In diesem Lab werden wir lernen, wie man den Kopfteil einer HTML-Seite mithilfe des <header>-Tags erstellt. Der Kopfteil einer Webseite enthält normalerweise das Logo der Website, das Navigationsmenü, die Suchleiste usw. Das <header>-Tag ist ein block-level-Element, das verwendet wird, um andere HTML-Elemente zusammenzufassen, um den Kopfteil einer Webseite zu erstellen.

Hinweis: Sie können im index.html programmieren und lernen, wie man HTML in Visual Studio Code schreibt. 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.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 86% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Einrichten der HTML-Dokumentation

Wir beginnen mit dem Erstellen einer neuen HTML-Datei namens index.html. In index.html fügen wir die grundlegende HTML-Dokumentstruktur hinzu, indem wir folgenden Code verwenden:

<!doctype html>
<html>
  <head>
    <title>HTML Header Tutorial</title>
  </head>
  <body></body>
</html>

Erstellen des Kopfteils

Wir werden den Kopfteil der HTML-Seite mithilfe des <header>-Tags erstellen. Fügen Sie innerhalb des <body>-Tags folgenden Code hinzu:

<header>
  <h1>Welcome to My Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

Im obigen Code haben wir ein <h1>-Tag hinzugefügt, um den Überschriftstext des Kopfteils zu definieren, und ein <nav>-Tag, um das Navigationsmenü zu definieren. Innerhalb des <nav>-Tags haben wir eine ungeordnete Liste <ul> und drei Listenelemente <li> mit den entsprechenden Anker-<a>-Tags hinzugefügt, um das Navigationsmenü zu erstellen.

Hinzufügen von Stilen zum Kopfteil

Um Stile zum Kopfteil hinzuzufügen, erstellen wir eine CSS-Datei namens style.css. In style.css schreiben wir folgenden Code:

header {
  background-color: #333;
  color: #fff;
  padding: 1rem;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav li a {
  color: #fff;
  display: block;
  padding: 0.5em;
  text-decoration: none;
}

Im obigen Code haben wir Stile zum <header>-Tag hinzugefügt, um die Hintergrundfarbe, die Textfarbe und den Innenabstand festzulegen. Wir haben auch Stile zum <nav>-Tag und seinen Kind-Elementen hinzugefügt, um die Stile für das Navigationsmenü festzulegen.

Verknüpfen der CSS-Datei

Um die CSS-Datei mit der HTML-Datei zu verknüpfen, fügen Sie folgenden Code innerhalb des <head>-Tags hinzu:

<link rel="stylesheet" href="style.css" />

Speichern Sie die Änderungen in index.html und öffnen Sie sie in einem Webbrowser. Sie sollten die folgende Ausgabe sehen:

Zusammenfassung

Herzlichen Glückwunsch! Sie haben erfolgreich einen grundlegenden HTML-Kopfteil mithilfe des <header>-Tags erstellt. In diesem Lab haben Sie gelernt, wie man den Kopfteil einer HTML-Seite erstellt, ihm Stile hinzufügt und eine CSS-Datei mit der HTML-Dokumentation verknüpft. Der Kopfteil ist ein essentieller Teil jeder Webseite, da er den Besuchern den Einführungstext und das Navigationsmenü bietet.

HTML Abschnitt Kopf