LEITFAEDEN / ENTWICKLUNG

HTML, CSS und JavaScript: der ausfuehrliche Leitfaden

← Alle Leitfaeden
Entwicklung Einsteiger 4 Jun 2026 12 Min Lesezeit von Les Techniciens du Net

HTML, CSS und JavaScript: der ausfuehrliche Leitfaden

Das Kerntrio des Web, ausfuehrlich: mit HTML strukturieren, mit CSS gestalten (Box-Modell, Flexbox, Grid), mit JavaScript interaktiv machen (DOM, Ereignisse, fetch). Vom Anfaenger bis zur Mittelstufe, mit Beispielen.

#developpement#html#css#javascript

Kurz gesagt

Jede Website beruht auf demselben Kerntrio: HTML strukturiert den Inhalt, CSS gestaltet ihn, JavaScript macht ihn interaktiv. Der Ueberblick ueber die Websprachen stellt sie vor; dieser Leitfaden geht weiter, vom Anfaenger bis zur Mittelstufe, mit konkreten Beispielen. Es ist die Grundlage, auf der jedes Framework im Hintergrund aufbaut.

HTML — den Inhalt strukturieren

HTML beschreibt mithilfe von Tags, was jeder Inhaltsbaustein ist. Ein Element hat oft ein oeffnendes Tag, einen Inhalt, ein schliessendes Tag und manchmal Attribute.

<a href="https://example.com" title="Besuchen">Mein Link</a>

Hier ist <a> das Element (ein Link), href und title sind Attribute, und “Mein Link” ist der Inhalt.

Der Aufbau einer Seite

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Meine Seite</title>
  </head>
  <body>
    <h1>Hallo</h1>
    <p>Mein erster Absatz.</p>
  </body>
</html>

Der <head> enthaelt die Informationen (Titel, Kodierung, Verweise auf das CSS); der <body> enthaelt den sichtbaren Inhalt.

Semantische Tags (Mittelstufe)

Statt generische <div>-Elemente zu stapeln, verwendet man Tags, die eine Bedeutung haben: <header>, <nav>, <main>, <article>, <section>, <footer>. Das verbessert die Barrierefreiheit (Screenreader) und das SEO (Suchmaschinen verstehen die Seite besser).

  • Links und Bilder: <a href="...">, <img src="..." alt="Beschreibung">. Das Attribut alt ist wesentlich (Barrierefreiheit + SEO).
  • Listen: <ul> (mit Aufzaehlungspunkten), <ol> (nummeriert), mit <li>-Elementen.
  • Formulare: <form>, <label>, <input> (mit Typen: text, email, tel, checkbox…), <button>. Ein <label> mit seinem Feld zu verknuepfen, ist eine gute Praxis fuer die Barrierefreiheit.

CSS — gestalten

CSS wendet Stilregeln auf Elemente an, die ueber einen Selektor ausgewaehlt werden.

p { color: #333; font-size: 16px; }       /* alle Absaetze */
.intro { font-weight: bold; }              /* Elemente mit der Klasse "intro" */
#menu { background: #f5f5f5; }             /* das Element mit der id "menu" */

Wenn mehrere Regeln gelten, entscheidet die Spezifitaet (eine #id gewinnt gegen eine .klasse, die gegen ein Tag gewinnt).

Das Box-Modell (box model)

Jedes Element ist eine Box, die von innen nach aussen aus Folgendem besteht: Inhalt → Padding (Innenabstand) → Border (Rahmen) → Margin (Aussenabstand). Es zu verstehen, loest 80 % der Layout-Probleme.

Einheiten und Farben

  • px (Pixel, fest), % (relativ zum Elternelement), em/rem (relativ zur Schriftgroesse).
  • Farben: #0B66FF, rgb(11,102,255), oder ein Name (red).

Flexbox und Grid (Mittelstufe)

Zwei moderne Layout-Systeme:

  • Flexbox — um Elemente entlang einer Dimension auszurichten (einer Zeile oder einer Spalte). Ideal fuer eine Navigationsleiste.
  • Grid — fuer Layouts in zwei Dimensionen (Zeilen und Spalten). Ideal fuer ein Raster aus Karten.
.bar { display: flex; gap: 16px; justify-content: space-between; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

Responsive und Variablen

  • Responsive (Anpassung an Mobilgeraete) mit media queries, beginnend beim Mobilgeraet (mobile-first):
@media (min-width: 768px) { .grid { grid-template-columns: repeat(4, 1fr); } }
  • CSS-Variablen (custom properties), um wiederverwendete Werte zu zentralisieren:
:root { --blau: #0B66FF; }
a { color: var(--blau); }

JavaScript — interaktiv machen

JavaScript fuegt das Verhalten hinzu: auf Klicks reagieren, die Seite veraendern, Daten mit einem Server austauschen.

Variablen, Typen, Funktionen

const name = "Marie";       // wird nicht neu zugewiesen
let zaehler = 0;            // kann sich aendern
zaehler = zaehler + 1;

function begruessen(vorname) {
  return "Hallo " + vorname;
}

Gaengige Typen: Text (string), Zahl, Boolean (true/false), Array ([]), Objekt ({}).

Das DOM: die Seite lesen und aendern

Das DOM ist die Darstellung der Seite, die JavaScript manipulieren kann.

const titel = document.querySelector("h1");
titel.textContent = "Geaenderter Titel";

Die Ereignisse

const button = document.querySelector("#senden");
button.addEventListener("click", () => {
  alert("Button geklickt!");
});

Daten abrufen: fetch und async (Mittelstufe)

Um Daten mit einer API auszutauschen, verwendet man fetch(). Da die Antwort spaeter eintrifft, verwendet man async/await:

async function wetterLaden() {
  const antwort = await fetch("https://api.example.com/wetter");
  const daten = await antwort.json();
  console.log(daten.temperature);
}

Die Daten kommen oft als JSON an, einem einfachen Textformat, das JavaScript nativ liest.

Wie die drei zusammenspielen

Stellen Sie sich einen “Gefaellt mir”-Button vor: HTML deklariert ihn (<button>), CSS faerbt und rundet ihn, JavaScript hoert auf den Klick und aktualisiert den Zaehler. Jeder bleibt in seiner Rolle — es ist diese Trennung von Struktur / Stil / Verhalten, die eine Website wartbar haelt.

Wo anfangen und ueben

  1. Ein einfacher Texteditor und ein Browser reichen aus: keine komplizierte Installation.
  2. Oeffnen Sie die Entwicklerwerkzeuge des Browsers (Taste F12), um das HTML zu inspizieren, CSS live zu testen und die JavaScript-Konsole zu lesen.
  3. Gehen Sie in kleinen Schritten vor: eine Seite, ein Stil, eine Interaktion. Dann kombinieren.
  4. Wenn Ihre Projekte wachsen, wird der Umstieg auf ein Framework sich genau auf diese Grundlagen stuetzen.

Zum Merken

HTML strukturiert, CSS kleidet ein, JavaScript belebt — drei sich ergaenzende Rollen. Indem Sie semantische Tags, das Box-Modell, Flexbox/Grid, dann das DOM, die Ereignisse und fetch beherrschen, halten Sie das Fundament der gesamten Webentwicklung in der Hand. Alles Weitere, Frameworks eingeschlossen, baut darauf auf.

Testen Sie Ihr Wissen

0 / 6

  1. Wozu dient das Attribut `alt` eines Bildes in HTML?

  2. Das 'Box-Modell' (box model) in CSS beschreibt…

  3. Um Elemente in zwei Dimensionen (Zeilen UND Spalten) anzuordnen, verwendet man eher…

  4. In JavaScript deklariert `const`…

  5. Das DOM ist…

  6. Die Funktion `fetch()` dient dazu…