Zum Inhalt springen

Vertiefung 8: Komplexere Website-Strukturen mit HTML und CSS

Schritt 1 von 7

In diesem Schritt vertiefen wir uns in die strukturellen Elemente von HTML und die visuellen Effekte von CSS. Stell dir vor, du bist ein Architekt, der eine neue Website bauen willst. Du möchtest verschiedene Bereiche wie Header, Inhaltsbereich und Footer einbauen, um eine klare Navigation zu ermöglichen. Hier ist ein Beispiel: html <body> <header> <!-- Hier kannst du deine Logomarken oder Menüpunkte platzieren --> </header> <main> <!-- Hier kommt der Hauptinhalt --> </main> <footer> <!-- Hier kannst du deine Kontakt- oder Lizenzinformationen einfügen --> </footer> </body> Und um den Hauptinhalt ansprechender zu gestalten, verwendest du CSS: css header { background-color: #f1f1f1; padding: 10px; } main { margin: 20px; } footer { background-color: #555; color: white; padding: 10px; } Erwartungsvollerweise siehst du in deinem Browser nun eine strukturierte Seite mit einem hervorgehobenen Header und Fußbereich sowie einem ordentlich aufgeführten Hauptinhalt.