HTML + CSS: Was sind HTML und CSS?

Kurz: Jede Webseite, die du besuchst, besteht aus drei Technologien:

Teil des Kurses HTML + CSS

Kapitel 1 von 27 im Kurs HTML + CSS (Abschnitt „HTML: Struktur“). Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Jede Webseite, die du besuchst, besteht aus drei Technologien:

Sprache	Aufgabe	Vergleich mit einem Haus
HTML	Struktur und Inhalt	Mauern, Räume, Türen
CSS	Aussehen	Farbe, Möbel, Einrichtung
JavaScript	Verhalten	Strom, Heizung, Klingel

HTML (HyperText Markup Language) ist keine Programmiersprache, sondern eine Auszeichnungssprache: Du markierst Textteile mit Tags und sagst damit, was sie bedeuten (“das ist eine Überschrift”, “das ist ein Link”).

Deine erste Seite

hallo.html

<h1>Hallo Welt!</h1>
<p>Das ist meine <strong>erste</strong> Webseite.</p>

Ändere den Text und klicke auf Ausführen. Das Ergebnis erscheint direkt darunter.

Wie funktioniert das Web?

1. Du gibst eine Adresse ein oder klickst einen Link.
2. Der Browser fragt beim Server nach der Datei.
3. Der Server schickt HTML (und dazu CSS, Bilder, JavaScript).
4. Der Browser baut daraus die Seite auf und zeigt sie dir.

Alles, was du im Browser siehst, kannst du mit F12 (Entwicklerwerkzeuge) untersuchen, auch bei fremden Seiten.

Was du brauchst

Nur zwei Dinge: einen Texteditor (zum Beispiel VS Code, kostenlos) und einen Browser. Speichere deine Datei mit der Endung .html, zum Beispiel index.html, und öffne sie per Doppelklick.

Tipp

Schalte in deinem Editor die Zeilennummern und das automatische Einrücken ein. Beides hilft enorm beim Lesen von HTML.

Ein Blick auf CSS

stil.html

<style>
  h1 { color: teal; font-family: Georgia, serif; }
  p  { background: #fff3cd; padding: 8px; border-left: 4px solid orange; }
</style>
<h1>Mit Stil</h1>
<p>Dieser Absatz hat Farbe, Rahmen und Abstand: nur durch CSS.</p>

CSS besteht aus Regeln: Ein Selektor (h1) sagt, was gestaltet wird, und in { } stehen Deklarationen (color: teal;), die sagen, wie.

Der Lernweg in diesem Kurs

1. HTML: Gerüst, Text, Links, Bilder, Listen, Tabellen, Formulare, Semantik, Medien
2. CSS: Selektoren, Farben, Text, Box-Modell, Layout (Flexbox, Grid), responsives Design, Animationen
3. Praxis: Barrierefreiheit, moderne CSS-Funktionen, ein komplettes Projekt

Merke

• HTML liefert Struktur und Bedeutung, CSS das Aussehen, JavaScript das Verhalten
• HTML ist eine Auszeichnungssprache, keine Programmiersprache
• Du brauchst nur einen Editor und einen Browser
• Mit F12 kannst du jede Seite untersuchen

Quiz zur Selbstkontrolle

Wofür ist CSS zuständig?

• Für das Aussehen (richtig)
• Für den Inhalt
• Für den Server
• Für Datenbanken

Was ist HTML?

• Eine Auszeichnungssprache für Struktur und Inhalt (richtig)
• Eine Programmiersprache für Server
• Ein Bildformat
• Ein Betriebssystem

Wie öffnest du lokal eine .html-Datei?

• Per Doppelklick im Browser (richtig)
• Mit einem Compiler
• Nur über einen Server
• Mit Excel

Weiter im Kurs

Weiter: Das Grundgerüst einer Seite

Alle Kapitel: HTML + CSS im Überblick