Bereiche (Divisions)
Teil des Abschnitts Fundamentals der HTML-Journey von Coddy — Lektion 25 von 60.
Stellen Sie sich vor, Sie möchten Ihre Webseite in Blöcke unterteilen, um Ihren Inhalt zu organisieren. In HTML können Sie ein div verwenden, um Elemente zu gruppieren.
div-Tags eignen sich hervorragend zum Erstellen von Layouts und zum Trennen von Abschnitten.
Hier ist die grundlegende Syntax:
<div>
<!-- Hier steht der Inhalt -->
</div>Sie können andere HTML-Elemente innerhalb eines div-Elements hinzufügen, wie z. B. Absätze, Überschriften, Bilder und sogar weitere div-Elemente.
Hier ist ein Beispiel dafür, wie man div-Tags verwendet, um ein einfaches Layout mit einer Kopfzeile, einem Hauptinhaltsbereich und einer Fußzeile zu erstellen:
<div>
<h1>Header</h1>
</div>
<div>
<p>Main content goes here.</p>
</div>
<div>
<p>Footer</p>
</div>
Aufgabe
EinfachErstelle 3 div-Elemente, die nacheinander in deinem HTML-Dokument platziert sind.
Füge in jedes div ein p-Tag hinzu, das den Namen eines Films enthält, den du magst.
Spickzettel
Verwenden Sie div-Tags, um Elemente zu gruppieren und Inhalte in Blöcken zu organisieren:
<div>
<!-- Content goes here -->
</div>Sie können andere HTML-Elemente innerhalb eines div verschachteln, einschließlich Absätzen, Überschriften, Bildern und anderen div-Elementen:
<div>
<h1>Header</h1>
</div>
<div>
<p>Main content goes here.</p>
</div>
<div>
<p>Footer</p>
</div>Probier es selbst
<!DOCTYPE html>
<html>
<body>
<!-- Hier Code schreiben -->
</body>
</html>
Teste dich selbstDiese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Alle Lektionen in Fundamentals
2Text und Formatierung
ÜberschriftenAbsätzeZeilenumbrücheFetter und kursiver TextNochmals fett und kursivWiederholung – Formatierung8Formulare und Eingaben Teil 1
Formular-GrundlagenTexteingabenInput-AttributePasswortfeldLabels für EingabenZusammenfassung – Einfaches Formular11Event-Registrierungsseite
ProjektübersichtHeader-Bereich
Event-Details-BereichRegistrierungsformularFooter-Bereich6Seitenlayout
Bereiche (Divisions)Inline-SpansSemantische TagsSections und ArticlesZusammenfassung – Layout9Formulare und Eingaben Teil 2
Radio-ButtonsCheckboxenDropdownsButtonsButtons in FormularenWiederholung - Formulare #1Wiederholung - Formulare #212Abschlussherausforderungen
Einfache ProfilkarteEvent-EinladungskarteEinfache ArtikelseiteLieblingsbücher-Liste