HTML und CSS Grundlagen lernen – Webseiten erstellen

HTML & CSS Grundlagen – Vollständiger Leitfaden

🛠️ Empfohlene Tools für Web-Entwickler

Diese Tools nutze ich selbst – sie helfen Ihnen, Ihre Web-Projekte professionell umzusetzen und zu vermarkten.

📄 HTML Executable

HTML-Dateien und Websites als eigenständige Windows-EXE-Dateien kompilieren.

Jetzt ansehen →

⚡ ExeOutput for PHP

PHP-Anwendungen in eigenständige Windows-EXE-Dateien kompilieren.

Jetzt ansehen →

🔒 XLS Padlock

Excel-Arbeitsmappen als EXE kompilieren und schützen.

Jetzt ansehen →

🐍 VBA Padlock

VBA-Code kompilieren und Office-Lösungen verkaufen.

Jetzt ansehen →

📦 Paquet Builder

Professionelle Windows-Installationsprogramme erstellen.

Jetzt ansehen →

* Affiliate-Links: Bei einem Kauf über diese Links erhalten wir eine kleine Provision – für Sie entstehen keine zusätzlichen Kosten.

1. Was ist HTML?

HTML (HyperText Markup Language) ist die Struktur-Sprache des Internets. Mit HTML legen Sie fest, was auf einer Webseite zu sehen ist:

✅ Überschriften und Texte
✅ Bilder und Videos
✅ Links und Navigation
✅ Formulare und Buttons
✅ Tabellen und Listen

💡 Merke: HTML ist wie das Skelett einer Webseite. Es definiert die Struktur, aber nicht das Aussehen – dafür ist CSS zuständig.

🏗️ Die Philosophie hinter HTML

HTML verwendet Tags (auch Elemente genannt), die in spitzen Klammern geschrieben werden. Die meisten Tags haben einen öffnenden und einen schließenden Teil:

<h1>Das ist eine Überschrift</h1>
<p>Das ist ein Absatz mit Text.</p>

Die geschweiften Klammern < > kennzeichnen den Tag, der Schrägstrich / beim schließenden Tag zeigt das Ende an.

✅ HTML-Grundregel: Jeder öffnende Tag braucht einen schließenden Tag (außer bei sogenannten selbstschließenden Tags wie <img />).

2. Die Grundstruktur einer HTML-Seite

Jede HTML-Seite hat eine feste Grundstruktur, die wie folgt aussieht:

📄 index.html

<!-- Das ist ein Kommentar -->
<!DOCTYPE html>          <!-- Gibt an, dass es HTML5 ist -->
<html lang="de">    <!-- Sprache: Deutsch -->
<head>                       <!-- Kopfbereich (Meta-Informationen) -->
    <meta charset="UTF-8">   <!-- Zeichenkodierung -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine erste Webseite</title>  <!-- Titel im Browser-Tab -->
</head>
<body>                       <!-- Sichtbarer Inhalt der Seite -->
    <h1>Willkommen auf meiner Webseite!</h1>
    <p>Das ist meine erste HTML-Seite.</p>
</body>
</html>

<!DOCTYPE html>

Legt fest, dass die Seite HTML5 verwendet – immer ganz oben!

Das Wurzelelement – lang gibt die Sprache der Seite an.

<head>

Enthält Meta-Informationen, Titel, CSS- und JavaScript-Links.

<body>

Alles, was im Browser sichtbar ist, kommt hierhin.

3. Die wichtigsten HTML-Tags

📝 Text-Elemente

Tag	Bedeutung	Beispiel
`<h1> - <h6>`	Überschriften (h1 = wichtigste)	`<h1>Titel der Seite</h1>`
`<p>`	Absatz / Textblock	`<p>Das ist ein Textabsatz.</p>`
`<strong>`	Fetter Text (wichtig)	`<strong>Achtung!</strong>`
`<em>`	Kursiver Text (betont)	`<em>wichtig</em>`
`<br>`	Zeilenumbruch (selbstschließend)	`Erste Zeile<br>Zweite Zeile`
`<hr>`	Horizontale Linie	`<hr>`

🔗 Links & Medien

Tag	Bedeutung	Beispiel
`<a>`	Link (Hyperlink)	`<a href="https://google.de">Google</a>`
`<img>`	Bild (selbstschließend)	`<img src="bild.jpg" alt="Beschreibung">`
`<video>`	Video einbetten	`<video src="video.mp4" controls></video>`
`<audio>`	Audio einbetten	`<audio src="song.mp3" controls></audio>`

📋 Listen

📄 Beispiel: Ungeordnete Liste

<ul>  <!-- Ungeordnete Liste (Punkte) -->
    <li>Einkaufen</li>
    <li>Kochen</li>
    <li>Essen</li>
</ul>

<ol>  <!-- Geordnete Liste (Nummerierung) -->
    <li>Erster Schritt</li>
    <li>Zweiter Schritt</li>
    <li>Dritter Schritt</li>
</ol>

🧩 Container-Elemente

Tag	Bedeutung	Einsatz
`<div>`	Universeller Container (Block-Element)	Zum Gruppieren und Stylen von Inhalten
`<span>`	Universeller Container (Inline-Element)	Für kleine Text-Auszeichnungen
`<header>`	Kopfbereich einer Seite	Logo, Navigation, Titel
`<nav>`	Navigation	Hauptmenü der Seite
`<main>`	Hauptinhalt der Seite	Der wichtigste Inhalt
`<section>`	Bereich / Abschnitt	Logische Abschnitte der Seite
`<article>`	Eigenständiger Inhalt	Blog-Posts, News-Artikel
`<footer>`	Fußbereich	Impressum, Copyright, Links

✅ Tipp: Verwenden Sie semantische Tags wie <header>, <nav> oder <main> statt immer <div>. Das verbessert die Lesbarkeit und hilft Suchmaschinen.

4. Was ist CSS?

CSS (Cascading Style Sheets) ist die Design-Sprache des Internets. Mit CSS legen Sie fest, wie HTML-Elemente aussehen:

✅ Farben und Hintergründe
✅ Schriftarten und -größen
✅ Abstände (Padding, Margin)
✅ Ränder und Rahmen
✅ Positionierung und Layout
✅ Animationen und Übergänge

💡 Merke: CSS ist wie die Kleidung einer Webseite – es macht sie schön und ansprechend.

📐 Die CSS-Syntax

h1 {                      /* Selektiert alle h1-Elemente */
    color: #0f3460;           /* Textfarbe */
    font-size: 2.5rem;       /* Schriftgröße */
    text-align: center;       /* Zentriert den Text */
    margin-bottom: 20px;    /* Abstand nach unten */
}

Selektor

Bestimmt, welche Elemente gestylt werden (z.B. h1, .klasse, #id).

Eigenschaft

Bestimmt, was gestylt wird (z.B. color, font-size).

Wert

Bestimmt, wie es gestylt wird (z.B. #0f3460, 2.5rem).

Regelblock

Alles zwischen { } – die eigentlichen Stil-Anweisungen.

5. CSS einbinden

Es gibt drei Wege, CSS in Ihre HTML-Seite einzubinden:

📌 Methode 1: Externe CSS-Datei (Empfohlen!)

📄 index.html

<head>
    <link rel="stylesheet" href="style.css">
</head>

📄 style.css

body {
    font-family: Arial, sans-serif;
    background: #f0f4f8;
}

✅ Vorteil: Wiederverwendbar – eine CSS-Datei für viele Seiten!

📌 Methode 2: Interner CSS-Block (im Head)

📄 index.html

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
    </style>
</head>

📌 Methode 3: Inline-Styles (direkt am Element)

📄 index.html

<h1 style="color: #0f3460; font-size: 2rem;">Titel</h1>

⚠️ Tipp: Verwenden Sie Inline-Styles nur in Ausnahmefällen – sie sind schwer zu warten und überschreiben andere CSS-Regeln.

6. CSS-Selektoren

Selektoren bestimmen, welche HTML-Elemente gestylt werden. Hier sind die wichtigsten:

Selektor	Schreibweise	Beispiel	Bedeutung
Typselektor	`element`	`p { color: red; }`	Alle `<p>`-Elemente
Klassenselektor	`.klasse`	`.highlight { background: yellow; }`	Alle Elemente mit `class="highlight"`
ID-Selektor	`#id`	`#logo { width: 200px; }`	Das Element mit `id="logo"`
Nachfahre	`eltern kind`	`div p { color: blue; }`	Alle `<p>` innerhalb von `<div>`
Gruppierung	`el1, el2`	`h1, h2, h3 { color: green; }`	Alle h1, h2 und h3
Universeller	`*`	`* { margin: 0; }`	Alle Elemente
Pseudoklasse	`:zustand`	`a:hover { color: red; }`	Links, wenn die Maus darüber ist

📝 Beispiel: Klassen in der Praxis

📄 index.html

<p class="highlight">Dieser Text wird hervorgehoben.</p>
<p class="highlight error">Fehlermeldung</p>  <!-- Mehrere Klassen -->

📄 style.css

.highlight {
    background: #eef6ff;
    padding: 10px;
    border-radius: 6px;
}
.error {
    color: #e94560;
    border-left: 4px solid #e94560;
}

7. Gestaltung mit CSS

🎨 Farben

Hexadezimal

#0f3460 – 6-stelliger Farbcode

RGB

rgb(15, 52, 96) – Rot, Grün, Blau

HSL

hsl(220, 73%, 22%) – Farbton, Sättigung, Helligkeit

Farbnamen

red, blue, white – einfache Namen

📐 Schriftarten

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 400;  /* 400 = normal, 700 = fett */
}

📦 Box-Modell

📦 Das Box-Modell

Inhalt (padding: 15px)

margin border padding content

.box {
    padding: 20px;     /* Innenabstand */
    margin: 15px;      /* Außenabstand */
    border: 2px solid #0f3460;  /* Rahmen */
    border-radius: 8px;   /* Abgerundete Ecken */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);  /* Schatten */
}

8. Layout mit Flexbox

Flexbox ist ein modernes CSS-Layout-System für 1-dimensionale Anordnungen (Reihen oder Spalten).

📝 Grundlagen

.container {
    display: flex;
    flex-direction: row;   /* row = waagerecht, column = senkrecht */
    justify-content: center; /* Waagerechte Ausrichtung */
    align-items: center;     /* Senkrechte Ausrichtung */
    gap: 20px;               /* Abstand zwischen Elementen */
}

🎯 Live-Demo: Flexbox

Element 1

Element 2

Element 3

Element 4

display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;

📌 Wichtige Flexbox-Eigenschaften

Eigenschaft	Mögliche Werte	Bedeutung
`flex-direction`	`row`, `column`, `row-reverse`, `column-reverse`	Ausrichtung der Elemente
`justify-content`	`flex-start`, `center`, `flex-end`, `space-between`, `space-around`	Ausrichtung auf der Hauptachse
`align-items`	`stretch`, `flex-start`, `center`, `flex-end`	Ausrichtung auf der Querachse
`flex-wrap`	`nowrap`, `wrap`, `wrap-reverse`	Umbruch bei zu wenig Platz
`gap`	Abstand in px, rem, %	Abstand zwischen Elementen

9. Layout mit CSS-Grid

CSS-Grid ist für 2-dimensionale Layouts (Zeilen und Spalten) – perfekt für komplexe Seitenlayouts.

📝 Grundlagen

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;  /* 3 Spalten */
    grid-template-rows: auto 300px auto;
    gap: 20px;
}

🎯 Live-Demo: CSS-Grid

Kopf

Hauptbereich

Seitenleiste

grid-template-columns: 1fr 2fr 1fr;

📌 Wichtige Grid-Eigenschaften

Eigenschaft	Mögliche Werte	Bedeutung
`grid-template-columns`	`1fr 2fr`, `100px 1fr`, `repeat(3, 1fr)`	Spalten definieren
`grid-template-rows`	`auto 200px`, `1fr 2fr`	Zeilen definieren
`gap`	Abstand in px, rem, %	Abstand zwischen Zeilen und Spalten
`grid-column`	`1 / 3`, `span 2`	Element über mehrere Spalten spannen
`grid-row`	`1 / 4`, `span 3`	Element über mehrere Zeilen spannen

10. Responsive Design

Responsive Design bedeutet, dass Ihre Webseite auf allen Geräten gut aussieht – vom Smartphone bis zum großen Monitor.

📱 Media Queries

/* Standard für alle Geräte */
.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

/* Für Tablets (unter 768px) */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;  /* Nur eine Spalte */
    }
}

/* Für Smartphones (unter 480px) */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
    h1 {
        font-size: 1.8rem;
    }
}

💡 Tipp für Responsive Design:

Verwenden Sie relative Einheiten wie %, rem, em, vh, vw
Nutzen Sie Flexbox oder Grid für flexible Layouts
Verwenden Sie max-width: 100% für Bilder
Testen Sie Ihre Seite auf verschiedenen Bildschirmgrößen

📐 Relative Einheiten im Vergleich

Einheit	Bedeutung	Beispiel
`%`	Prozent des Elternelements	`width: 80%;`
`rem`	Relativ zur Schriftgröße des Root-Elements (meist 16px)	`font-size: 1.5rem;` → 24px
`em`	Relativ zur Schriftgröße des aktuellen Elements	`padding: 2em;`
`vw`	Prozent der Viewport-Breite	`width: 50vw;`
`vh`	Prozent der Viewport-Höhe	`height: 100vh;` → Vollbildhöhe

11. Praxis-Beispiele

📝 Beispiel 1: Eine einfache Webseite

📄 index.html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine Webseite</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', sans-serif; background: #f0f4f8; padding: 20px; }
        .container { max-width: 800px; margin: 0 auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
        h1 { color: #0f3460; border-bottom: 3px solid #e94560; padding-bottom: 10px; }
        .btn { display: inline-block; padding: 10px 20px; background: #0f3460; color: white; border-radius: 8px; text-decoration: none; transition: 0.3s; }
        .btn:hover { background: #e94560; transform: scale(1.05); }
    </style>
</head>
<body>
    <div class="container">
        <h1>Willkommen auf meiner Webseite</h1>
        <p>Das ist eine einfache, aber moderne Webseite mit HTML und CSS.</p>
        <a href="#" class="btn">Mehr erfahren</a>
    </div>
</body>
</html>

📝 Beispiel 2: Navigation mit Flexbox

<!-- HTML -->
<nav class="nav">
    <a href="#">Startseite</a>
    <a href="#">Über uns</a>
    <a href="#">Produkte</a>
    <a href="#">Kontakt</a>
</nav>

<!-- CSS -->
.nav {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    background: #0f3460;
    padding: 12px;
    border-radius: 10px;
}
.nav a {
    color: white;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 6px;
    transition: 0.3s;
    font-size: 15px;
}
.nav a:hover {
    background: #e94560;
}

📝 Beispiel 3: Card-Layout mit Grid

<!-- HTML -->
<div class="card-grid">
    <div class="card"><h3>Karte 1</h3><p>Inhalt der Karte 1</p></div>
    <div class="card"><h3>Karte 2</h3><p>Inhalt der Karte 2</p></div>
    <div class="card"><h3>Karte 3</h3><p>Inhalt der Karte 3</p></div>
</div>

<!-- CSS -->
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}
.card {
    background: white;
    padding: 16px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-left: 4px solid #e94560;
}

12. Übungen zum Mitmachen

📝 Übung 1: Ihre erste HTML-Seite

Erstellen Sie eine HTML-Seite mit:

Einer Hauptüberschrift (h1)
Zwei Absätzen (p)
Einem Bild (img) – nutzen Sie ein Platzhalter-Bild
Einem Link (a) zu einer externen Seite

💡 Lösung:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Meine erste Seite</title>
</head>
<body>
    <h1>Willkommen auf meiner Seite</h1>
    <p>Das ist der erste Absatz mit Text.</p>
    <p>Und hier kommt der zweite Absatz.</p>
    <img src="https://picsum.photos/400/200" alt="Platzhalter-Bild">
    <br>
    <a href="https://google.de">Zu Google</a>
</body>
</html>

📝 Übung 2: CSS-Grundlagen

Stylen Sie die Seite von Übung 1:

Die Überschrift soll blau und zentriert sein
Die Absätze sollen eine Schriftgröße von 18px haben
Das Bild soll 50% Breite haben und zentriert sein

💡 Lösung (CSS im Head):

<style>
    h1 { color: #0f3460; text-align: center; }
    p { font-size: 18px; }
    img { width: 50%; display: block; margin: 0 auto; }
</style>

📝 Übung 3: Flexbox-Navigation

Erstellen Sie eine horizontale Navigation mit 4 Links, die:

Zentriert ist
Einen Abstand von 15px zwischen den Links hat
Die Links haben einen Hintergrund und ändern die Farbe bei Hover

💡 Lösung:

<nav style="display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; background: #0f3460; padding: 12px; border-radius: 10px;">
    <a href="#" style="padding: 8px 16px; background: #0f3460; color: white; border-radius: 6px; text-decoration: none; transition: 0.3s;">Start</a>
    <a href="#" style="padding: 8px 16px; background: #0f3460; color: white; border-radius: 6px; text-decoration: none; transition: 0.3s;">Über uns</a>
    <a href="#" style="padding: 8px 16px; background: #0f3460; color: white; border-radius: 6px; text-decoration: none; transition: 0.3s;">Services</a>
    <a href="#" style="padding: 8px 16px; background: #0f3460; color: white; border-radius: 6px; text-decoration: none; transition: 0.3s;">Kontakt</a>
</nav>
<!-- Mit CSS-Klasse besser: -->
.nav a:hover { background: #e94560; transform: scale(1.05); }

📝 Übung 4: Responsive Grid

Erstellen Sie ein Grid mit 3 Spalten, das auf Smartphones automatisch auf 1 Spalte umschaltet.

💡 Lösung:

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr;
    }
}

📝 Übung 5: Eigene Webseite

Bauen Sie Ihre eigene kleine Webseite mit:

Einem Header mit Logo und Navigation
Einem Hauptbereich mit 3 Karten (Flexbox oder Grid)
Einem Footer mit Copyright
Responsive Design (Smartphone-freundlich)

💡 Tipp: Orientieren Sie sich an den Beispielen oben und kombinieren Sie die Techniken! Das ist die beste Übung, um HTML & CSS wirklich zu lernen.

13. Tipps & Best Practices

✅ Semantisches HTML: Verwenden Sie <header>, <nav>, <main>, <section>, <article> und <footer> für bessere Lesbarkeit und SEO.

✅ CSS-Klassen statt IDs: Verwenden Sie Klassen (.klasse) für das Styling, IDs (#id) nur für JavaScript oder einmalige Elemente.

⚠️ Inline-Styles vermeiden: Sie sind schwer zu warten und überschreiben andere CSS-Regeln. Nutzen Sie externe CSS-Dateien oder interne Style-Blöcke.

✅ Mobile First: Designen Sie zuerst für Smartphones und fügen Sie dann Media Queries für größere Bildschirme hinzu.

✅ Browser-Entwicklertools: Nutzen Sie die F12-Taste in Chrome oder Firefox, um CSS live zu testen und zu ändern.

✅ Spezifität verstehen: Je spezifischer ein Selektor, desto höher seine Priorität. #id > .klasse > element.

🚀 Fortgeschrittenen-Tipp: Lernen Sie CSS-Variablen (:root { --primary: #0f3460; }) für wiederverwendbare Farben und Werte!

14. Weiterführende Ressourcen

📚 Online-Lernplattformen

MDN Web Docs – Die beste HTML & CSS-Dokumentation (kostenlos)
W3Schools – Einfache Tutorials mit Live-Editoren
freeCodeCamp – Interaktive Kurse mit Zertifikaten
CSS-Tricks – Tipps, Tricks und Layout-Guides
Flexbox Froggy – Spielerisch Flexbox lernen
CSS Grid Garden – Spielerisch Grid lernen

📖 Empfohlene Bücher

"HTML und CSS – Das umfassende Handbuch" – Thomas Theis
"CSS – Das umfassende Handbuch" – Florence Maurice
"Responsive Webdesign" – Ben Frain
"HTML & CSS – Einstieg ohne Vorkenntnisse" – Philip Ackermann

🛠️ Nützliche Tools

VS Code – Der beste Code-Editor (kostenlos)
Emmet – Abkürzungen für schnelles HTML/CSS-Schreiben
Google Fonts – Tausende kostenlose Schriftarten
ColorHunt – Farbpaletten für schönes Design
Coolors – Farbpalette-Generator
CodePen – HTML/CSS/JS online testen und teilen
Can I Use – Prüfen, ob CSS-Eigenschaften von Browsern unterstützt werden

🎮 Lernspiele

Flexbox Froggy – Flexbox spielerisch lernen
CSS Grid Garden – CSS-Grid spielerisch lernen
CSS Diner – Selektoren spielerisch lernen

💡 Tipp für die Praxis: Bauen Sie Ihre eigene kleine Webseite – das ist der beste Weg, HTML & CSS wirklich zu verinnerlichen!

← Zurück zu den Grundlagen