Deine erste Webseite

Jetzt wird es praktisch! In diesem Kapitel erstellst du deine erste vollstaendige Webseite von Grund auf. Am Ende hast du eine echte HTML-Seite, die du im Browser oeffnen kannst.

Was du brauchst

Bevor wir loslegen, brauchst du nur zwei Dinge:

Einen Texteditor — am besten Visual Studio Code (kostenlos)
Einen Browser — Chrome, Firefox, Edge oder Safari

Das war’s! Kein Server, keine Installation, keine Konfiguration.

VS Code einrichten

Falls du VS Code verwendest, installiere diese hilfreiche Erweiterung:

Live Server — aktualisiert die Seite automatisch, wenn du Aenderungen speicherst

Die HTML-Grundstruktur

Jede HTML-Seite hat dieselbe Grundstruktur. Das ist wie ein Rezept — du brauchst immer die gleichen Zutaten:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Seitentitel</title>
</head>
<body>
    <!-- Hier kommt dein sichtbarer Inhalt -->
</body>
</html>

Was bedeutet jede Zeile?

Element	Bedeutung
`<!DOCTYPE html>`	Sagt dem Browser: “Das ist HTML5”
`<html lang="de">`	Startet das HTML-Dokument, Sprache: Deutsch
`<head>`	Metadaten — unsichtbar fuer Besucher
`<meta charset="UTF-8">`	Zeichensatz fuer Umlaute (ae, oe, ue)
`<meta name="viewport">`	Macht die Seite mobilfreundlich
`<title>`	Der Titel im Browser-Tab
`<body>`	Alles, was der Besucher sieht

Head vs. Body

<head>  = Das Gehirn (unsichtbar, aber wichtig)
<body>  = Der Koerper (sichtbar fuer alle)

Der <head> enthaelt Informationen ueber die Seite. Der <body> enthaelt die Seite selbst.

Schritt fuer Schritt: Deine erste Seite

Schritt 1: Projektordner erstellen

Erstelle einen neuen Ordner auf deinem Computer, z.B. meine-erste-seite/.

Schritt 2: HTML-Datei anlegen

Erstelle in diesem Ordner eine Datei namens index.html und fuege folgenden Code ein:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine erste Webseite</title>
</head>
<body>
    <h1>Willkommen auf meiner Webseite!</h1>

    <p>
        Hallo! Mein Name ist [dein Name] und das ist meine
        allererste Webseite. Ich lerne gerade HTML und finde
        es richtig spannend.
    </p>

    <h2>Was ich mag</h2>

    <ul>
        <li>Programmieren lernen</li>
        <li>Webseiten bauen</li>
        <li>Neue Technologien entdecken</li>
    </ul>

    <h2>Mein Lieblingszitat</h2>

    <blockquote>
        "Jede Reise beginnt mit dem ersten Schritt."
    </blockquote>

    <p>
        <a href="https://www.wikipedia.org">Besuche Wikipedia</a>
        fuer noch mehr Wissen!
    </p>
</body>
</html>

Schritt 3: Im Browser oeffnen

Oeffne die Datei index.html mit einem Doppelklick — dein Browser zeigt jetzt deine erste Webseite an!

Die Seite erweitern

Jetzt fuegen wir Schritt fuer Schritt mehr Inhalte hinzu.

Einen Infobereich hinzufuegen

Fuege diesen Code vor dem schliessenden </body> ein:

<h2>Ueber mich</h2>

<p>Ich bin Anfaenger in der <strong>Webentwicklung</strong>
und lerne gerade die Grundlagen von <em>HTML</em> und <em>CSS</em>.</p>

<h3>Meine Ziele</h3>

<ol>
    <li>HTML verstehen</li>
    <li>CSS lernen</li>
    <li>Meine eigene Portfolio-Seite bauen</li>
    <li>JavaScript entdecken</li>
</ol>

Unterschied: `<ul>` vs. `<ol>`

<!-- Ungeordnete Liste (Punkte) -->
<ul>
    <li>Punkt eins</li>
    <li>Punkt zwei</li>
</ul>

<!-- Geordnete Liste (Nummern) -->
<ol>
    <li>Erstens</li>
    <li>Zweitens</li>
</ol>

<ul> = Unordered List (Aufzaehlungszeichen)
<ol> = Ordered List (Nummerierung)
<li> = List Item (ein einzelner Listenpunkt)

Kommentare in HTML

Kommentare sind Notizen im Code, die der Browser nicht anzeigt:

<!-- Das ist ein Kommentar -->
<!-- Der Browser ignoriert das komplett -->

<p>Dieser Text wird angezeigt.</p>
<!-- <p>Dieser Text wird NICHT angezeigt.</p> -->

Kommentare sind nuetzlich, um:

Deinen Code zu erklaeren
Abschnitte zu markieren
Code voruebergehend zu deaktivieren

Sonderzeichen und Entities

Manche Zeichen haben in HTML eine besondere Bedeutung. Um sie als normalen Text anzuzeigen, verwendest du HTML-Entities:

<!-- Diese Zeichen muessen escaped werden -->
<p>5 &lt; 10 und 10 &gt; 5</p>      <!-- < und > -->
<p>Tom &amp; Jerry</p>                <!-- & -->
<p>&quot;Zitat&quot;</p>              <!-- " -->

<!-- Nuetzliche Sonderzeichen -->
<p>Preis: 29,99 &euro;</p>           <!-- Euro-Zeichen -->
<p>&copy; 2026 Mein Name</p>         <!-- Copyright -->
<p>Leerzeichen&nbsp;das&nbsp;nicht&nbsp;umbricht</p>

Wichtige HTML-Entities

Entity	Zeichen	Beschreibung
`<`	<	Kleiner als
`>`	>	Groesser als
`&`	&	Und-Zeichen
`"`	”	Anfuehrungszeichen
`€`	Euro	Euro-Zeichen
`©`	(c)	Copyright
` `	(Leerzeichen)	Geschuetztes Leerzeichen

Deine Seite mit CSS aufhuebschen

Lass uns der Seite ein Minimum an Style geben. Fuege im <head> ein <style>-Tag ein:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine erste Webseite</title>
    <style>
        body {
            font-family: system-ui, -apple-system, sans-serif;
            max-width: 700px;
            margin: 0 auto;
            padding: 2rem;
            line-height: 1.6;
            color: #333;
        }

        h1 {
            color: #e44d26;
        }

        blockquote {
            border-left: 4px solid #e44d26;
            padding-left: 1rem;
            color: #666;
            font-style: italic;
        }

        a {
            color: #264de4;
        }
    </style>
</head>

Speichere die Datei und lade den Browser neu — deine Seite sieht jetzt viel besser aus!

Haeufige Anfaengerfehler

1. Tags nicht schliessen

<!-- Falsch -->
<p>Erster Absatz
<p>Zweiter Absatz

<!-- Richtig -->
<p>Erster Absatz</p>
<p>Zweiter Absatz</p>

2. Falsche Verschachtelung

<!-- Falsch -->
<strong><em>Text</strong></em>

<!-- Richtig -->
<strong><em>Text</em></strong>

3. Fehlende Anfuehrungszeichen bei Attributen

<!-- Falsch -->
<a href=https://example.com>Link</a>

<!-- Richtig -->
<a href="https://example.com">Link</a>

4. DOCTYPE vergessen

<!-- Immer als erste Zeile! -->
<!DOCTYPE html>
<html lang="de">
...

Uebungen

Uebung 1: Persoenliche Seite

Erstelle eine HTML-Seite ueber dich selbst mit:

Deinem Namen als <h1>
Einem Absatz, der dich beschreibt
Einer Liste mit deinen Hobbys
Mindestens einem Link zu einer anderen Webseite
Einem Zitat in <blockquote>

Uebung 2: Rezeptseite

Erstelle eine HTML-Seite fuer dein Lieblingsrezept:

Name des Gerichts als <h1>
Zutaten als ungeordnete Liste (<ul>)
Zubereitungsschritte als geordnete Liste (<ol>)
Garzeiten mit <strong> hervorgehoben

Was kommt als Naechstes?

Im naechsten Kapitel schauen wir uns die HTML-Struktur genauer an. Du lernst:

Den Unterschied zwischen Block- und Inline-Elementen
Wie du deine Seite sinnvoll mit <div> und semantischen Tags gliederst
Wie der Browser HTML verarbeitet (das DOM)

Zusammenfassung

Jede HTML-Seite braucht die Grundstruktur: DOCTYPE, html, head, body
Der <head> enthaelt Metadaten, der <body> den sichtbaren Inhalt
Kommentare mit  helfen beim Organisieren des Codes
HTML-Entities wie & werden fuer Sonderzeichen verwendet
Du kannst HTML sofort im Browser testen — ohne Server oder Setup

Pro-Tipp: Installiere die VS Code-Erweiterung “Live Server”. Damit wird deine Seite automatisch im Browser aktualisiert, sobald du speicherst. Das spart enorm viel Zeit beim Entwickeln!