Verschachtelte Elemente

Erstellen Sie die Seite aus der Abbildung mit HTML mit Hilfe von den HTML-Elementen:

• body
• div. Dabei enthält das Beispiel insgesamt 14 div-Elemente, die ineinander verschachtelt sind. Die Verschachtelungsstruktur erkennen Sie in der Abbildung anhand der unterschiedlichen Farben.
• p: Alle Texte sind in Absätze eingebettet.

Hinterlegen Sie in den Boxen beliebige Texte, die lang genug sind, um die Größe der Box zu erkennen.

Gehen Sie dabei am besten schrittweise vor und bauen Sie die Seiten von "außen" nach "innen" auf:

1. Erstellen Sie zu nächst nur eine Seite mit einem body-Element. Der Body soll eine helle Hintergrundfarbe haben, z.B. hellgelb. Setzen Sie die passenden Abstände so groß, dass Sie das body-Element im Browser sehen können, obwohl es noch keine Inhalte hat. Überprüfen Sie Ihre Seite im Browser.
2. Hinterlegen Sie nun im body-Element einen Absatz mit einem dunkleren Text und darunter eine div-Box. Beide Elemente sollen dieselbe Hintergrundfarbe (in der Abbildung: gold) haben. Setzen Sie jeweils die passenden Abstände so groß, dass Sie beide Elemente im Browser sehen können. Überprüfen Sie Ihre Seite im Browser.
3. Hinterlegen Sie dann die div-Elemente in der 1. Verschachtelungsebene (div1_1, div1_2, div1_3 in der Abbildung). Alle drei sollten jeweils unterschiedliche Farben haben (in der Abbildung: rot, grün und blau). Setzen Sie jeweils die passenden Abstände so groß, dass Sie die Elemente im Browser sehen können. Überprüfen Sie Ihre Seite im Browser.
4. Die div-Elemente auf den weiteren Ebenen (div1_1_1, div1_1_2, div1_2_1, div1_3_1 und div1_3_2 in der Abbildung) sollen heller als ihre Eltern-Boxen sein. Das Element div1_2_1 aus der Abbildung soll zudem einen Absatz mit einem Text in einer passenden, dunkleren Farbe haben. Überprüfen Sie Ihre Seite im Browser.
5. Die restlichen div-Elemente sollen noch heller als ihre Eltern-Boxen sein. Zudem sollen alle jeweils einen Absatz mit einem in einer zum Hintergrund passenden, dunkleren Farbe haben. Überprüfen Sie Ihre Seite im Browser.