Einen grundlegenden Fußbereich mit HTML erstellen

Einführung

Das <footer>-Tag kann verwendet werden, um den Fußbereich einer Webseite/Website zu erstellen. In diesem Lab werden Sie lernen, wie Sie mithilfe des HTML-footer-Tags einen grundlegenden Fußbereich 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.

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 93% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Aufbau der grundlegenden Struktur der Webseite

Erstellen Sie eine neue Datei mit der Erweiterung .html und benennen Sie sie index.html. Hier ist der Ort, an dem wir den HTML-Code hinzufügen, um einen Fußbereich zu erstellen.

In diesem Schritt werden wir die grundlegende Struktur der Webseite erstellen. Hier ist der Code:

<!doctype html>
<html>
  <head>
    <title>Meine Webseite</title>
  </head>
  <body>
    <!-- Der Header wird hier sein -->
    <main>
      <!-- Der Hauptinhalt wird hier sein -->
    </main>
    <!-- Der Fußbereich wird hier sein -->
  </body>
</html>

Fügen Sie den Code für den Fußbereich hinzu

Fügen Sie den folgenden Code nach dem main-Tag hinzu, um einen grundlegenden Fußbereich zu erstellen:

<footer>
  <p>Copyright © 2021 Meine Webseite. Alle Rechte vorbehalten.</p>
</footer>

In diesem Beispiel haben wir einem Fußbereich einen einfachen Absatztag mit einigen Text hinzugefügt. Sie können den Fußbereich anpassen, um Links, Autoreninformationen, eine Seitenkarte und anderen Inhalt hinzuzufügen.

Speichern Sie die Datei index.html und öffnen Sie sie in Ihrem Webbrowser. Sie sollten eine einfache Webseite mit einem Fußbereich am unteren Rand sehen.

Anpassen des Fußbereichs

In diesem Schritt werden wir den Fußbereich durch Hinzufügen weiterer Informationen anpassen. Hier ist ein Beispiel:

<footer>
  <p>Kontaktieren Sie uns:</p>
  <ul>
    <li>E-Mail: [email protected]</li>
    <li>Telefon: 123-456-7890</li>
  </ul>
  <p>Folgen Sie uns:</p>
  <ul>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Instagram</a></li>
  </ul>
</footer>

In diesem Beispiel haben wir zwei Absätze und zwei ungeordnete Listen hinzugefügt. Die erste Liste enthält die Kontaktinformationen für die Website, und die zweite enthält Links zu den Sozialmedien-Profilen.

Speichern Sie die Datei index.html und öffnen Sie sie in Ihrem Webbrowser. Sie sollten Ihren anpassenden Fußbereich am unteren Rand der Webseite sehen.

Zusammenfassung

In diesem Lab haben wir gelernt, wie man mithilfe des HTML-footer-Tags einen grundlegenden Fußbereich erstellt. Das footer-Tag wird verwendet, um den Fußbereich einer Webseite zu definieren und kann verwendet werden, um verschiedene Informationen wie Links und Copyright-Daten, die mit der Webseite zusammenhängen, aufzunehmen. Wir haben auch gelernt, wie man den Fußbereich anpassen kann, um Kontaktinformationen und Links zu Sozialmedien hinzuzufügen.

HTML-Dokument/Fußbereich

Einführung

Einfach starten, ohne Installation.

Aufbau der grundlegenden Struktur der Webseite

Fügen Sie den Code für den Fußbereich hinzu

Echte Programmierer lernen durch Tun.

Anpassen des Fußbereichs

Zusammenfassung