HTML/CSS-Prüfungsvorbereitung

Lernen, üben, prüfen

Dein Lernplan für die HTML/CSS-Prüfung

Diese Plattform führt dich von den Grundlagen zu einer vollständigen Übungsprüfung. Du wiederholst Theorie, siehst Beispiele, trainierst typische Aufgaben und wertest am Ende dein Ergebnis aus.

Lernübersicht — Bild lernuebersicht.png hier einfügen

Fortschritt

Bearbeitete Trainings- und Prüfungsaufgaben

0 %

Schriften einbinden

Systemfonts, Google Fonts und lokale Schriftdateien sicher unterscheiden.

Typografie

Lesbarkeit mit passenden CSS-Anweisungen verbessern.

HTML-Struktur

Semantische Bereiche wie header, nav, main, section und footer nutzen.

Layout

Flexbox und CSS Grid gezielt für Zeilen, Spalten und Karten einsetzen.

Formulare

Labels, Eingabefelder, Dropdowns, Textareas und Buttons korrekt aufbauen.

Übungsprüfung

Typische Aufgaben lösen, Musterlösungen prüfen und Punkte erhalten.

Nachschlagen

Lernzettel

Alle prüfungsrelevanten Inhalte kompakt und mit Beispielen.

Abschnittsübersicht

Aktueller Abschnitt: A) Schriften einbinden

A) Schriften einbinden

1. Systemfonts verwenden

font-family: Arial, Helvetica, sans-serif;

Systemfonts sind Schriften, die auf dem Gerät des Nutzers bereits installiert sind.

Vorteile

Schnell, weil nichts zusätzlich geladen werden muss
Einfach zu benutzen
Funktioniert ohne Internetverbindung

Nachteile

Begrenzte Auswahl
Auf verschiedenen Geräten können unterschiedliche Schriften angezeigt werden
Meistens nur ungefähr 9 bis 10 sichere Standardschriften

2. Google Fonts verlinken

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

font-family: 'Roboto', sans-serif;

Google Fonts werden über einen Link eingebunden und vom Browser geladen.

Vorteile

Sehr große Auswahl an Schriften
Einfach einzubinden
Sieht auf allen Geräten gleich aus

Nachteile

Braucht Internet
Externe Verbindung zu Google
Datenschutz kann ein Thema sein
Ladezeit kann etwas steigen

3. Eigene Schriftdatei einbinden

@font-face {
  font-family: 'MeineSchrift';
  src: url('fonts/meineschrift.woff2') format('woff2');
}

body {
  font-family: 'MeineSchrift', sans-serif;
}

Eine Schriftdatei wird lokal im Projekt gespeichert und mit @font-face eingebunden.

Vorteile

Volle Kontrolle über die Schrift
Keine externe Verbindung nötig
Einheitliches Aussehen

Nachteile

Schriftdateien müssen korrekt gespeichert werden
Dateigröße kann Ladezeit erhöhen
Lizenzrechte müssen beachtet werden

Systemfonts mit Fallback

Bei Systemfonts greift der Browser auf Schriften zu, die lokal auf dem Gerät installiert sind. Weil nicht alle Nutzer dieselben Schriften besitzen, werden mehrere Alternativen angegeben. Die letzte Angabe sollte immer eine allgemeine Schriftfamilie wie serif, sans-serif oder monospace sein.

p {
  font-family: Helvetica, Arial, sans-serif;
}

Webfont über Fremdhosting

Webfonts können über Anbieter wie Google Fonts oder Adobe Fonts geladen werden. Das ist bequem, erzeugt aber eine externe Verbindung. Dadurch können Datenschutz, Ladezeit, Cookies oder Unternehmens-Firewalls zum Thema werden.

<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">

body {
  font-family: "Roboto", sans-serif;
}

Systemschrift

Die Schrift wird direkt vom Computer des Nutzers geladen. Das ist schnell, aber nicht auf jedem Gerät identisch.

Fremdhosting

Die Schriftdatei wird beim Seitenaufruf von einem externen Server geladen, z. B. über Google Fonts oder Adobe Fonts.

Eigener Server

Die Schriftdatei liegt im eigenen Projekt und wird zusammen mit der Webseite ausgeliefert.

Eigenes Hosting

Beim Hosting auf dem eigenen Server liegen die Schriftdateien im Projekt, z. B. im Ordner fonts. Damit Browser die Schrift zuverlässig laden können, werden Webfont-Formate verwendet. WOFF bedeutet Web Open Font Format und ist ein speziell für Webseiten komprimiertes Schriftformat. WOFF2 ist die neuere, stärker komprimierte Variante und heute Standard für moderne Browser. Über @font-face wird der Schrift ein Name gegeben und der Pfad zur Datei angegeben. Wichtig: Nutzungs- und Urheberrechte der Schrift müssen vorher geprüft werden.

@font-face {
  font-family: "lobster_tworegular";
  src: url("fonts/lobstertwo-regular-webfont.woff2") format("woff2"),
       url("fonts/lobstertwo-regular-webfont.woff") format("woff");
}

body {
  font-family: "lobster_tworegular", Arial, sans-serif;
}

B) Unterschied zwischen HTML und CSS

HTML

HTML ist für die Struktur und den Inhalt einer Webseite zuständig. HTML legt fest, welche Elemente es gibt.

Überschriften
Absätze
Bilder
Navigation
Formulare
Buttons

CSS

CSS ist für die Gestaltung zuständig. CSS legt fest, wie die HTML-Elemente aussehen.

Farbe
Schriftgröße
Schriftart
Abstände
Layout
Positionierung

C) HTML-Grundgerüst und CSS-Datei einbinden

Eine HTML-Seite besteht aus Dokumenttyp, HTML-Element, Kopfbereich und sichtbarem Seiteninhalt. Die CSS-Datei wird im <head>-Bereich über ein <link>-Element eingebunden.

<!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>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Meine Überschrift</h1>
  </header>

  <main>
    <section>
      <h2>Inhaltsbereich</h2>
      <p>Hier steht der sichtbare Inhalt der Webseite.</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2026</p>
  </footer>
</body>
</html>

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

D) Kriterien der Lesbarkeit und passende CSS-Anweisungen

Kriterium	CSS	Beispiel
Schriftart	`font-family`	`font-family: Arial, sans-serif;`
Schriftgröße	`font-size`	`font-size: 18px;`
Schriftfarbe / Zeichenfarbe	`color`	`color: rgb(107, 142, 35);`
Zeilenabstand	`line-height`	`line-height: 21px;`
Laufweite / Zeichenabstand	`letter-spacing`	`letter-spacing: 5px;`
Satzart / Textausrichtung	`text-align`	`text-align: left;`
Schriftschnitt / Schriftlage	`font-style`	`font-style: italic;`
Schriftstärke / Stichstärke	`font-weight`	`font-weight: bold;`

Schriftgröße

px ist eine feste Bildschirmeinheit. % und em sind relative Angaben und beziehen sich auf die eingestellte oder geerbte Schriftgröße. Standardmäßig entspricht 100% meist 16px.

body {
  font-size: 100%;
}

Zeilenabstand

line-height steuert den Abstand zwischen den Textzeilen. Serifenlose Schriften benötigen häufig etwas mehr Zeilenabstand, damit längere Texte gut lesbar bleiben.

p {
  line-height: 1.5;
}

Laufweite

letter-spacing verändert den Abstand zwischen einzelnen Zeichen. Kleine Schriftgrößen profitieren manchmal von leicht erhöhter Laufweite; zu große Werte verschlechtern aber die Lesbarkeit.

h1 {
  letter-spacing: 5px;
}

Satzart

text-align richtet Text links, rechts, zentriert oder im Blocksatz aus. Im Web ist linksbündiger Flattersatz oft am besten lesbar, weil automatische Silbentrennung nicht immer zuverlässig ist.

p {
  text-align: left;
}

Zeilenbreite

Angenehm lesbar sind ungefähr 50 bis 70 Zeichen pro Zeile. Zu kurze Zeilen wirken unruhig, zu lange Zeilen erschweren das Zurückfinden in die nächste Zeile.

article {
  max-width: 70ch;
}

Farbe und Hintergrund

Text braucht ausreichenden Helligkeits- und Farbkontrast. Helle Schrift auf dunklem Hintergrund wirkt oft kräftiger und benötigt häufig mehr Zeilenabstand oder Zeichenabstand.

body {
  color: #222222;
  background-color: #ffffff;
}

E) CSS-Beispiel nach Prüfungsvorgabe

Vorgaben Überschrift

Schriftart: Univers
Schriftfarbe: RGB 107 142 35
Schriftgröße: 31px
Laufweite: 5px

h1 {
  font-family: Univers, Arial, sans-serif;
  color: rgb(107, 142, 35);
  font-size: 31px;
  letter-spacing: 5px;
}

Vorgaben Absatz

Schriftart: Times
Schriftfarbe: dunkelgrau
Schriftgröße: 15px
Zeilenabstand: 21px

p {
  font-family: Times, "Times New Roman", serif;
  color: darkgray;
  font-size: 15px;
  line-height: 21px;
}

F) HTML-Bereiche / semantische Struktur

<header>

Kopfbereich einer Webseite. Enthält oft Logo, Titel oder Navigation.

<nav>

Navigationsbereich. Enthält Links zu anderen Seitenbereichen.

<main>

Hauptinhalt der Seite.

<article>

Eigenständiger Inhalt, der mehrere Abschnitte enthalten kann.

<section>

Inhaltlicher Abschnitt innerhalb einer Seite, eines Articles oder eines anderen Bereichs.

<aside>

Ergänzender Seiteninhalt, z. B. Infobox, Werbung, Kontaktbox oder Formular.

<footer>

Fußbereich, z. B. Impressum, Kontakt, Copyright.

Warum kann die Reihenfolge unterschiedlich sein?

Semantisches HTML beschreibt die Bedeutung des Inhalts, nicht ein festes Pflicht-Layout. Deshalb kann ein <section> in einem <article> liegen, wenn ein eigenständiger Beitrag in mehrere Abschnitte gegliedert wird. Umgekehrt kann ein <article> auch in einer <section> liegen, wenn ein Themenbereich mehrere eigenständige Beiträge enthält. Wichtig ist: Die Verschachtelung muss zum Inhalt passen.

Semantische Seite als Modell

Der Header ist der Kopfbereich. Dort stehen meistens Logo, Seitentitel und oft auch die Navigation.

<header> Logo, Titel, Einstieg

<nav> Links

<main> Hauptinhalt

<article> Eigenständiger Inhalt

<section> Abschnitt 1

<section> Abschnitt 2

<aside> Ergänzung

<form> Kontakt oder Suche

<header>
  <h1>Vinylrausch</h1>
  <nav>
    <a href="#">Start</a>
    <a href="#">Produkte</a>
    <a href="#">Kontakt</a>
  </nav>
</header>

<main>
  <article>
    <h2>Unsere Plattenspieler</h2>

    <section>
      <h3>Direktantrieb</h3>
      <p>Informationen zu Direktantrieb und Klang.</p>
    </section>

    <section>
      <h3>Riemenantrieb</h3>
      <p>Informationen zu Riemenantrieb und Wartung.</p>
    </section>
  </article>

  <aside>
    <form>
      <label for="suche">Suche</label>
      <input id="suche" name="suche" type="search">
    </form>
  </aside>
</main>

<footer>
  <p>&copy; 2025 Vinylrausch</p>
</footer>

G) Flexbox

Flexbox wird verwendet, um Elemente in einer Zeile oder Spalte flexibel anzuordnen.

display: flex; flex-direction: row; flex-direction: column; justify-content: center; justify-content: space-between; align-items: center; gap: 20px;

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

H) CSS Grid

CSS Grid wird verwendet, um Layouts mit Zeilen und Spalten zu erstellen.

display: grid; grid-template-columns: 1fr 1fr; grid-template-columns: repeat(3, 1fr); gap: 20px;

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

Interaktiver Lernzettel: CSS selbst ausprobieren

Verändere die Werte und beobachte direkt, wie sich Layout und Typografie ändern. Genau so kannst du Prüfungsvorgaben in CSS-Anweisungen übersetzen.

Flexbox-Labor

flex-direction justify-content align-items gap: 20px

1 2 3

Grid-Labor

grid-template-columns gap: 20px

A B C D E F

Typografie-Labor

font-family font-size: 18px line-height: 28px letter-spacing: 0px color

Gute Lesbarkeit entsteht durch passende Schriftart, Schriftgröße, Zeilenabstand, Zeichenfarbe und Laufweite.

I) Formulare in HTML

<form>

Umschließt das Formular.

<label>

Beschriftung für Eingabefelder.

<input>

Eingabefeld, z. B. Text, E-Mail, Telefonnummer.

<textarea>

Mehrzeiliges Texteingabefeld.

<select>

Dropdown-Menü.

<option>

Auswahlmöglichkeit innerhalb eines Dropdowns.

<button>

Button zum Absenden oder Zurücksetzen.

<form>
  <label for="thema">Bitte wählen Sie das Thema aus:</label>
  <select id="thema" name="thema">
    <option>Rechnungen</option>
    <option>Technische Probleme</option>
    <option>Beratung</option>
    <option>Allgemeine Fragen</option>
  </select>

  <label for="anliegen">Bitte beschreiben Sie Ihr Anliegen:</label>
  <textarea id="anliegen" name="anliegen"></textarea>

  <label for="name">Name</label>
  <input type="text" id="name" name="name" placeholder="Nachname, Vorname">

  <label for="email">Mailadresse</label>
  <input type="email" id="email" name="email" placeholder="name@domain.com">

  <label for="telefon">Telefonnummer</label>
  <input type="tel" id="telefon" name="telefon" placeholder="+49 123 456789">

  <button type="submit">Absenden</button>
  <button type="reset">Eingaben löschen</button>
</form>

Vollständigkeitscheck für den Lernzettel

Hake ab, was du sicher erklären oder anwenden kannst. Wenn alle Punkte grün sind, deckt der Lernzettel die geforderten Prüfungsthemen vollständig ab.

0 von 11 Punkten abgehakt

Üben

Training

Trainiere einzelne Aufgabentypen, bevor du die Prüfung startest.

1. Multiple-Choice

0/1

Welche CSS-Eigenschaft ändert die Schriftgröße?

font-family font-size line-height text-align

2. Zuordnungsübung

0/8

3. Code-Lücken

0/4

h1 { font-family: ; color: ; font-size: ; letter-spacing: ; }

h1 {
  font-family: Univers, Arial, sans-serif;
  color: rgb(107, 142, 35);
  font-size: 31px;
  letter-spacing: 5px;
}

4. Formular-Tags

0/6

Wähle die passenden Tags aus.

Prüfung

Übungsprüfung HTML/CSS – Typografie, Layout und Formulare

Bearbeite alle Aufgaben. Freitextaufgaben werden mit Musterlösung und Selbstkontrolle ausgewertet.

0 von 6 Aufgaben bearbeitet

Aufgabe 1: HTML und CSS erklären

4 Punkte

Erkläre die Funktion von HTML und CSS bei der Umsetzung von Textinhalten.

Aufgabe 2: Fonts einbinden

6 Punkte

Beschreibe drei Möglichkeiten, Fonts in eine Internetseite einzubinden. Nenne jeweils einen Vorteil und einen Nachteil.

Aufgabe 3: Kriterien zuordnen

8 Punkte

Ordne die Kriterien den CSS-Anweisungen zu.

Aufgabe 4: CSS-Anweisungen entwickeln

8 Punkte

Entwickle CSS für Überschrift und Absatz nach den Vorgaben.

Überschrift

Schriftart: Univers
Schriftfarbe: R107 G142 B35
Schriftgröße: 31px
Laufweite: 5px

Absatz

Schriftart: Times
Schriftfarbe: dunkelgrau
Schriftgröße: 15px
Zeilenabstand: 21px

h1 {
  font-family: Univers, Arial, sans-serif;
  color: rgb(107, 142, 35);
  font-size: 31px;
  letter-spacing: 5px;
}

p {
  font-family: Times, "Times New Roman", serif;
  color: darkgray;
  font-size: 15px;
  line-height: 21px;
}

Aufgabe 5: HTML-Tags nennen

6 Punkte

Nenne die markierten HTML-Tags eines Support-Formulars.

1. Überschrift 2. Dropdown 3. Textfeld mehrzeilig 4. Beschriftung 5. Eingabefeld 6. Button

Aufgabe 6: body-Bereich für Support-Formular

8 Punkte

Entwickle den body-Bereich für ein Support-Formular mit Dropdown, Textarea, Kontaktfeldern und Buttons.

<body>
  <form>
    <h2>Bitte wählen Sie das Thema aus</h2>

    <label for="thema">Hier klicken zum Auswählen</label>
    <select id="thema" name="thema">
      <option>Rechnungen</option>
      <option>Technische Probleme</option>
      <option>Beratung</option>
      <option>Allgemeine Fragen</option>
    </select>

    <label for="anliegen">Bitte beschreiben Sie Ihr Anliegen:</label>
    <textarea id="anliegen" name="anliegen"></textarea>

    <h2>Wie können wir Sie erreichen?</h2>

    <label for="name">Name</label>
    <input type="text" id="name" name="name" placeholder="Nachname, Vorname">

    <label for="email">Mailadresse</label>
    <input type="email" id="email" name="email" placeholder="name@domain.com">

    <label for="telefon">Telefonnummer</label>
    <input type="tel" id="telefon" name="telefon" placeholder="+49 123 456789">

    <button type="submit">Absenden</button>
    <button type="reset">Eingaben löschen</button>
  </form>
</body>

Ergebnis

Auswertung

Hier erscheint dein aktueller Prüfungsstand. Gib die Prüfung ab, um alle Punkte zu berechnen.

0 % 0 / 40 Punkte

Noch keine Abgabe

Bearbeite die Prüfung und klicke auf „Prüfung abgeben“. Bei Freitextaufgaben kannst du nach dem Anzeigen der Musterlösung per Selbstkontrolle Punkte vergeben.