Woraus ein HTML-Tool besteht

Ein Tool ist eine einzige .html-Datei. Hier siehst du ein komplettes Beispiel und erfährst, welcher Teil wofür zuständig ist.

Ein Tool besteht aus drei Schichten, die alle in derselben Datei stehen: HTML legt fest, was da ist, CSS legt fest, wie es aussieht, und JavaScript legt fest, was passiert. Das folgende Beispiel ist ein kompletter Zähler. Du kannst es kopieren, als .html-Datei speichern und in der Toolbox einlegen.

Ein komplettes Beispiel

Ein kompletter Zähler in einer Datei

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mein Zähler</title>
  <style>
    body { font: 20px system-ui, sans-serif; background: #1b1713; color: #f5ecd8; text-align: center; padding: 2rem 1rem; }
    button { font-size: 2rem; min-height: 64px; padding: 0 2rem; border: 0; border-radius: 16px; background: #f2b84b; color: #2a1a05; }
    #zahl { font-size: 4rem; margin: 1rem 0; }
  </style>
</head>
<body>
  <h1>Mein Zähler</h1>
  <p id="zahl">0</p>
  <button id="plus" type="button">+1</button>
  <script>
    const zahl = document.getElementById('zahl');
    let n = Number(localStorage.getItem('n') || 0);   // gespeicherten Wert holen
    zahl.textContent = n;
    document.getElementById('plus').onclick = () => {
      n++;
      zahl.textContent = n;
      localStorage.setItem('n', n);                    // Wert merken
    };
  </script>
</body>
</html>

Was regelt was

Die Tabelle zeigt, wer in diesem Beispiel was regelt.

Was regelt was
Teil	Aufgabe	Im Beispiel
<head>	Rahmendaten: Zeichensatz, Titel, Darstellung auf dem Handy	charset, title, viewport
<meta name="viewport">	Sorgt dafür, dass die Seite auf dem Handy in normaler Größe erscheint und nicht winzig	width=device-width
<style> (CSS)	Aussehen: Farben, Schriftgrößen, Abstände, Anordnung	Hintergrund, Knopf, große Zahl
<body>	Alles, was sichtbar ist: Überschriften, Texte, Knöpfe, Eingabefelder	Überschrift, Zahl, Knopf „+1“
id und class	Namen, über die CSS und JavaScript ein Element finden	id="zahl", id="plus"
<script> (JavaScript)	Verhalten: rechnen, auf Tippen reagieren, Zeiten messen, Daten speichern	n erhöhen, Zahl anzeigen
localStorage	Merkzettel des Tools: Werte, die erhalten bleiben, wenn du das Tool schließt	getItem, setItem

Alles, was eine Webseite kann, kann auch ein Tool: Formulare, Rechnen, Zeichnen, Töne, Animationen, Spiele. Wichtig ist nur, dass alles in dieser einen Datei steht.