Meisterung von HTML Div und CSS-Stillegung

Einführung

In diesem Lab lernst du, wie du das HTML <div>-Tag verwendest, um eine Webseite in verschiedene Abschnitte oder Teile zu unterteilen. Du wirst auch lernen, wie du CSS auf die Elemente anwendest, die mithilfe des <div>-Tags gruppiert werden.

Hinweis: Du kannst im index.html programmieren und lernen, wie du HTML in Visual Studio Code schreibst. Klicke in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend kannst du die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Erstellen der Webseite-Struktur

Öffnen Sie die Datei index.html in Ihrem Texteditor.

Erstellen Sie zunächst die grundlegende Struktur der HTML-Datei, indem Sie die Dokumenttypdeklaration, die <html>, <head>- und <body>-Tags hinzufügen.

<!doctype html>
<html>
  <head>
    <title>Meine Webseite</title>
  </head>
  <body></body>
</html>

Hinzufügen des Headers

In diesem Schritt fügen wir den Header-Abschnitt zur Webseite hinzu, indem wir das <div>-Tag verwenden.

Fügen Sie innerhalb des <body>-Tags ein <div>-Tag mit dem Klassenamen "header" hinzu.

<div class="header"></div>

Fügen Sie einige Inhalte innerhalb des <div>-Tags hinzu, um den Header-Abschnitt darzustellen. Beispielsweise:

<div class="header">
  <h1>Willkommen auf meiner Website</h1>
</div>

Hinzufügen der Seitenleiste und der Hauptinhaltsabschnitte

Als nächstes fügen wir die Seitenleiste und die Hauptinhaltsabschnitte zur Webseite hinzu, indem wir das <div>-Tag verwenden.

Fügen Sie innerhalb des <body>-Tags ein weiteres <div>-Tag mit dem Klassenamen "container" hinzu.

<div class="container"></div>

Fügen Sie innerhalb des <div>-Tags "container" zwei weitere <div>-Tags hinzu – eines für die Seitenleiste und eines für den Hauptinhalt. Benennen Sie sie jeweils mit den Klassenamen "sidebar" und "main-content".

<div class="container">
  <div class="sidebar">
    <!-- add sidebar content -->
  </div>
  <div class="main-content">
    <!-- add main content here -->
  </div>
</div>

Fügen Sie Inhalte innerhalb der <div>-Tags hinzu, um die Seitenleiste und die Hauptinhaltsabschnitte darzustellen. Beispielsweise:

<div class="container">
  <div class="sidebar">
    <h2>Über mich</h2>
    <p>Hallo, ich heiße John und bin ein Webdesigner.</p>
  </div>
  <div class="main-content">
    <h2>Mein aktuelles Projekt</h2>
    <p>Schau dir mein aktuelles Webprojekt an!</p>
  </div>
</div>

Hinzufügen des Fußzeils

Schließlich fügen wir den Fußzeilenabschnitt zur Webseite hinzu, indem wir das <div>-Tag verwenden.

Fügen Sie innerhalb des <body>-Tags ein weiteres <div>-Tag mit dem Klassenamen "footer" hinzu.

<div class="footer"></div>

Fügen Sie einige Inhalte innerhalb des <div>-Tags hinzu, um den Fußzeilenabschnitt darzustellen. Beispielsweise:

<div class="footer">
  <p>&copy; 2021 Meine Website. Alle Rechte vorbehalten.</p>
</div>

Gestalten der Webseite

Jetzt, nachdem wir die grundlegende Struktur der Webseite mit dem <div>-Tag erstellt haben, können wir CSS-Stile anwenden, um die Seite besser aussehen zu lassen.

Öffnen Sie die Datei style.css in Ihrem Texteditor oder erstellen Sie eine neue Datei mit dem Namen style.css und verknüpfen Sie sie mit der Datei index.html mithilfe eines <link>-Tags im <head>-Abschnitt.

<!doctype html>
<html>
  <head>
    <title>Meine Webseite</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body></body>
</html>

Fügen Sie in der Datei style.css die folgenden Stile zu den verschiedenen Klassenamen hinzu, die wir zuvor verwendet haben:

/* Header-Stile */
.header {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}

/* Container-Stile */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* Seitenleisten-Stile */
.sidebar {
  width: 30%;
  padding: 10px;
  background-color: #f2f2f2;
}

/* Hauptinhalt-Stile */
.main-content {
  width: 65%;
  padding: 10px;
  background-color: #fff;
}

/* Footer-Stile */
.footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}

Vorschau der Webseite

Jetzt, nachdem wir die Webseitengestaltung und die CSS-Stile mit dem <div>-Tag erstellt haben, schauen wir uns die Webseite in einem Webbrowser an.

Speichern Sie die Dateien index.html und style.css.
Öffnen Sie die Datei index.html in einem Webbrowser, um die Webseite zu sehen.

Sie sollten eine Webseite sehen, die einen Header, eine Seitenleiste, einen Hauptinhalt und einen Footer-Abschnitt hat, alle gut mit CSS gestaltet.

Zusammenfassung

In diesem Lab haben Sie gelernt, wie man das HTML <div>-Tag verwendet, um eine Webseite in verschiedene Abschnitte oder Teile zu unterteilen. Sie haben auch gelernt, wie man CSS-Stile auf die verschiedenen Abschnitte mithilfe der ihnen zugewiesenen Klassenamen anwendet. Mit diesen Techniken können Sie komplexere und visuell ansprechende Webseiten erstellen.

HTML Div-Tag und CSS-Stillegung