Lernziel: Du verstehst den Aufbau eines HTML-Dokuments und kannst eine kleine Webseite selbst verändern. Geeignet ab etwa Klasse 7; Programmiererfahrung ist nicht erforderlich.
Drei Aufgaben, drei Sprachen
| Technik | Aufgabe | Beispiel |
|---|---|---|
| HTML | Inhalt und Bedeutung strukturieren | Überschrift, Absatz, Link, Schaltfläche. |
| CSS | Die Darstellung gestalten | Farben, Abstände, Schriftgrößen. |
| JavaScript | Verhalten programmieren | Auf einen Klick reagieren und Text verändern. |
HTML ist eine Auszeichnungssprache. Ein Element kann aus Start-Tag, Inhalt und End-Tag bestehen: <p>Hallo</p>. Attribute ergänzen Angaben, etwa das Linkziel in <a href="https://joevoi.de">Wissenswert</a>. Einige Elemente wie <meta> haben kein End-Tag.
Der Rahmen eines Dokuments
<!doctype html>aktiviert den modernen HTML-Standardmodus.<html lang="de">umschließt das Dokument und kennzeichnet seine Sprache.- Im
<head>stehen Metadaten: Zeichencodierung, Seitentitel und Hinweise zur Darstellung. Der Seitentitel erscheint beispielsweise im Browser-Tab. - Im
<body>steht der sichtbare Seiteninhalt. <header>,<main>und<footer>geben Bereichen eine Bedeutung. Überschriften ordnen Inhalte hierarchisch.
Ein vollständiges Beispiel zum Ausprobieren
Kopiere den folgenden Code in eine reine Textdatei namens index.html und öffne sie im Browser. Verwende einen Texteditor, kein Textverarbeitungsdokument. Für dieses Beispiel brauchst du weder einen Server noch eine zusätzliche Bibliothek. Wenn du einen Onlineeditor nutzt, kannst du HTML, CSS und JavaScript bei Bedarf auf dessen getrennte Felder verteilen.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Meine erste Lernseite</title>
<style>
body { font-family: sans-serif; max-width: 42rem;
margin: 2rem auto; padding: 0 1rem; }
h1 { color: #185c70; }
button { padding: 0.7rem 1rem; }
</style>
</head>
<body>
<header><h1>Mein Lernprojekt</h1></header>
<main>
<h2>Eine kleine Interaktion</h2>
<p id="meldung" aria-live="polite">Ich lerne HTML, CSS und JavaScript.</p>
<button id="knopf" type="button">Zeige eine Nachricht</button>
</main>
<footer><p>Selbst gebaut und ausprobiert.</p></footer>
<script>
const knopf = document.querySelector("#knopf");
const meldung = document.querySelector("#meldung");
knopf.addEventListener("click", () => {
meldung.textContent = "Der Klick hat funktioniert!";
});
</script>
</body>
</html>Was passiert beim Klick?
Der Browser erstellt aus dem HTML eine Baumstruktur, das Document Object Model (DOM). JavaScript findet über querySelector die Elemente mit den IDs knopf und meldung. Ein Ereignisbehandler wartet auf einen Klick. Dann ersetzt textContent den Text des Absatzes. Das Skript steht hier am Ende des Dokuments, damit die vorherigen Elemente schon vorhanden sind.
Die CSS-Regel h1 { color: #185c70; } wählt die Hauptüberschrift aus und gibt ihr eine Farbe. Das Zeichen # in einem CSS-Selektor wie #knopf bezeichnet dagegen eine ID. Dieselbe Schreibweise kann also je nach Position eine andere Aufgabe erfüllen.
Gut lesbar und bedienbar bauen
- Nutze echte Überschriften und echte Schaltflächen. Ein
<button>kann auch per Tastatur bedient werden. - Vergib für informative Bilder einen passenden Alternativtext. Rein dekorative Bilder können einen leeren Alternativtext erhalten.
- Wähle ausreichend kontrastreiche Farben und verständliche Linktexte.
- Eine ID darf in einem Dokument nur einmal vorkommen. Achte auf richtig geschlossene und verschachtelte Tags.
Das Beispiel enthält bewusst alle Teile in einer Datei. Größere Projekte lagern CSS meist in eine Datei wie style.css und JavaScript in script.js aus. Eine WordPress-Seite wird zusätzlich auf dem Server aus Inhalten und einer Vorlage zusammengesetzt; der Browser erhält trotzdem HTML, CSS und JavaScript.
Übungsaufgaben
- Ändere die Farbe der Hauptüberschrift auf dunkelrot.
- Ändere den Text, der nach dem Klick erscheint.
- Füge vor der Schaltfläche einen Link zur Startseite von joevoi.de ein.
- Was unterscheidet den Inhalt von <title> und <h1>?
Lösungen anzeigen
- Ändere die CSS-Regel zu
h1 { color: darkred; }. - Ändere die Zeichenkette rechts von
meldung.textContent =. - Füge
<p><a href="https://joevoi.de">Zur Startseite</a></p>ein. - title ist der Dokumenttitel, unter anderem für den Browser-Tab. h1 ist die sichtbare Hauptüberschrift im Seiteninhalt.
Quellen und weiterführende Informationen
Inhalt geprüft und überarbeitet am 8. Oktober 2026.