In dieser Übung erstellst du deine erste einfache Webseite mit HTML und CSS. Du lernst dabei, wie du grundlegende HTML-Elemente verwendest und mit CSS das Aussehen gestaltest.

## Schritt 1: HTML-Grundstruktur erstellen

Jede Webseite beginnt mit einer HTML-Grundstruktur. Diese besteht aus dem ``, dem ``, `` und `` Element.

    
Willkommen auf meiner Webseite
Das ist mein erstes HTML-Dokument.

## Schritt 2: Inhalt mit HTML-Elementen strukturieren

Füge verschiedene HTML-Elemente hinzu, um deiner Webseite Struktur und Inhalt zu geben. Verwende Überschriften, Absätze und Listen.

Meine Webseite
Über mich
Ich bin ein Anfänger im Webdesign und lerne gerade HTML.
Meine Hobbies

Programmieren lernen
Musik hören
Bücher lesen

Diese Seite wird immer weiter ausgebaut!

## Schritt 3: CSS für das Styling hinzufügen

Jetzt machst du deine Webseite schöner, indem du CSS-Styles direkt im ``-Bereich hinzufügst. Mit CSS kannst du Farben, Schriftarten und Abstände ändern.

    
        body {

            font-family: Arial, sans-serif;

            background-color: #f0f0f0;

            margin: 40px;

        }
        h1 {

            color: #2c3e50;

            text-align: center;

        }
        h2 {

            color: #34495e;

            border-bottom: 2px solid #3498db;

        }
        p {

            line-height: 1.5;

            color: #555;

        }
        ul {

            background-color: white;

            padding: 20px;

            border-radius: 5px;

        }
Meine Webseite
Über mich
Ich bin ein Anfänger im Webdesign und lerne gerade HTML.
Meine Hobbies

Programmieren lernen
Musik hören
Bücher lesen

Diese Seite wird immer weiter ausgebaut!

> **Tipp:** Speichere deinen Code als `.html`-Datei (z.B. `meine-webseite.html`) und öffne sie in deinem Browser, um das Ergebnis zu sehen.

## Vollständiges Beispiel

Hier ist deine fertige, einfache aber schön gestaltete Webseite. Die CSS-Styles im ``-Bereich sorgen für eine ansprechende Optik mit Farben, Abständen und einer schönen Schriftart.

**Warum funktioniert das?** HTML strukturiert den Inhalt mit Elementen wie `

`, `

` und `

`. CSS im ``-Bereich verändert das Aussehen dieser Elemente - von der Hintergrundfarbe über Schriftfarben bis hin zu Abständen und Rahmen.

> **Achtung:** Achte darauf, dass alle HTML-Tags korrekt geschlossen werden und die CSS-Syntax stimmt (Semikolon nach jeder Eigenschaft!).