Willkommen auf deiner HTML-Lernseite!

Hier lernst du Schritt für Schritt, wie du eine eigene Webseite baust – ganz in deinem eigenen Tempo!
Du brauchst keine Vorkenntnisse. Alles wird leicht erklärt.
Diese Webseite ist wie ein Lernpfad: Du kannst von oben nach unten scrollen, dir die Erklärungen und Aufgaben anschauen und selbst entscheiden, was du als Nächstes machen möchtest.
Es gibt keine extra Unterseiten oder versteckte Links – du findest alles auf dieser einen Seite!

⏳ Du bestimmst dein eigenes Lerntempo.
🎯 Du kannst Aufgaben überspringen oder die Reihenfolge selbst wählen.
📝 Jede Aufgabe hat eine einfache Erklärung und ein Beispiel zum Ausprobieren.

So funktioniert's:

Oben steht immer eine Erklärung – kurz, klar und mit Beispiel.
Direkt darunter gibt es einen Code-Bereich. Den Code kannst du einfach mit der Maus markieren und kopieren.
Am Computer: STRG+C (Windows/Linux) oder CMD+C (Mac)
Auf Tablets/Handy: Text lange gedrückt halten und „Kopieren“ wählen.
Probiere den Code in deinem Editor oder Browser aus und schau, was passiert.
Hilfe bekommen: Frag deinen Lehrer, Mitschüler – oder schau mal, ob du eine Antwort online findest!

Was erwartet dich auf dieser Seite?

HTML-Grundlagen mit vielen Beispielen und Übungen
Eigene Projekte: Texte, Farben, Listen, Bilder und mehr
Alles an einem Ort – du musst nur nach unten scrollen!
Tipps und Tricks zum Kopieren, Speichern und Testen deines Codes

Teste deinen ersten Code

<p style="color: blue; font-size: 32px;">Hallo HTML!</p>

Was ist HTML?

HTML ist eine Computersprache. Mit ihr kannst du dem Computer sagen, wie eine Webseite aussehen soll. Zum Beispiel bestimmst du mit HTML, wo Texte, Überschriften oder Bilder stehen. Fast alle Webseiten auf der Welt benutzen HTML, damit alles ordentlich angezeigt wird.

Wenn du eine Webseite gestalten willst, schreibst du deinen Text in HTML auf. Der Computer liest dann den HTML-Code und baut daraus die Seite, die du im Browser siehst.

Wie ist HTML aufgebaut?

Jede HTML-Seite hat einen festen Aufbau, damit der Computer sie versteht. Am Anfang steht immer eine Zeile, die sagt: "Achtung, jetzt kommt HTML!". Danach beginnt die eigentliche Seite.

Es gibt bestimmte Bereiche, die jede HTML-Seite haben muss:

<!DOCTYPE html> – Das steht ganz oben und zeigt, dass es eine HTML-Seite ist.
<html> – Das ist der Start deiner Webseite. Alles, was zu deiner Seite gehört, steht dazwischen.
<head> – Hier kommen wichtige Infos rein, wie der Name deiner Seite.
<title> – Das ist der Titel deiner Seite. Er steht ganz oben im Browser.
<body> – Hier kommt alles rein, was man auf der Webseite sehen kann, wie Texte, Bilder oder Listen.

Wenn du diese Bausteine benutzt, kannst du schon deine eigene Webseite machen. Keine Angst: Mit ein bisschen Übung wird dir HTML schnell vertraut!

So sieht eine ganz einfache HTML-Seite aus:
(Klicke in den Kasten, markiere alles und kopiere ihn mit STRG+C (Windows/Linux) oder CMD+C (Mac) – dann kannst du ihn einfügen!)

<!DOCTYPE html> <html> <head> <title>Meine erste HTML-Seite</title> </head> <body> <h1>Hallo, ich bin Max!</h1> <p>Heute habe ich meine allererste eigene Webseite gebaut!</p> </body> </html>

Tipp:

Jeder HTML-Tag muss immer geöffnet und wieder geschlossen werden!
Beispiel: <body> beginnt, </body> beendet den Abschnitt.
Teste ruhig aus: Schreibe mal deinen eigenen Namen oder ändere den Text zwischen <h1> und </h1>!

Noch ein Hinweis: Wenn irgendetwas nicht klappt, schau zuerst nach, ob du einen Tag vielleicht nicht richtig geschlossen hast. Fast immer findet man so den Fehler!

Überschriften und Texte einfügen

Wozu braucht man Überschriften und Texte?

Mit HTML kannst du deine Seite so gestalten, dass alles übersichtlich bleibt. Dafür benutzt du Überschriften und normale Absätze. Überschriften helfen dir und deinen Besuchern, sofort zu erkennen, worum es geht. Sie gliedern die Seite und machen sie leichter zu lesen.

Überschriften werden mit besonderen HTML-Tags geschrieben. Der wichtigste Tag ist <h1> – das ist die größte und wichtigste Überschrift. Dann gibt es noch <h2> bis <h6> für kleinere Überschriften und Unterthemen.

<h1> – Der Haupttitel der Seite (gibt es nur einmal pro Seite).
<h2> – Überschriften für große Abschnitte.
<h3> bis <h6> – Weitere Unterüberschriften, immer kleiner.

Für normalen Text benutzt du den <p>-Tag. Das steht für „Paragraph“ – das ist ein ganz normaler Absatz, wie du ihn aus Aufsätzen oder Geschichten kennst.

Du kannst so viele Absätze (<p>) schreiben, wie du möchtest, und überall Überschriften einbauen. Das macht deine Seite spannend und einfach zu lesen!

So sehen Überschriften und Text als HTML aus:
(Markiere den Kasten und kopiere den Beispiel-Code – probier ihn gleich aus!)

<h1>Das ist eine große Überschrift (h1)</h1> <h2>Das ist eine mittlere Überschrift (h2)</h2> <h3>Das ist eine etwas kleinere Überschrift (h3)</h3> <h4>Noch kleiner (h4)</h4> <h5>Ganz klein (h5)</h5> <h6>Die kleinste Überschrift (h6)</h6> <p>Das ist ein normaler Text in einem Absatz (p).
Hier kannst du alles schreiben, was du möchtest!</p>

Tipp:

Du brauchst <h1> nur einmal pro Seite – als Hauptüberschrift.
Für Unterthemen nimm <h2> oder <h3>. Je größer die Zahl, desto kleiner die Überschrift.
Schreibe für jeden neuen Gedanken einen eigenen <p>-Absatz.

Willst du Überschriften und Texte bunt oder anders machen?
Nutze style, um Aussehen zu verändern!

Farbe ändern:
<h1 style="color:red;">Rote Überschrift</h1>

Schriftart ändern:
<h2 style="font-family:Comic Sans MS;">Lustige Schrift</h2>

Größe ändern:
<p style="font-size:24px;">Großer Text!</p>

Mehrere Sachen auf einmal verändern?
Das geht auch! Schreibe einfach alles mit Semikolon (;) hintereinander ins style-Feld.

<h2 style="color:blue; font-size:30px; font-family:Arial;">Blaue, große Überschrift in Arial</h2>

Noch mehr möglich?
Probiere auch mal background-color (Hintergrundfarbe) oder font-weight:bold (fett):
<p style="background-color:yellow;">Gelber Hintergrund</p>
<h3 style="font-weight:bold;">Fette Überschrift</h3>

Viel Spaß beim Ausprobieren und Gestalten!

Bilder einbinden

Wie füge ich ein Bild in meine Webseite ein?

Mit HTML kannst du ganz einfach Bilder auf deiner Webseite zeigen. Dafür benutzt du den <img>-Tag. Du musst dem Computer nur sagen, wo dein Bild gespeichert ist (z.B. "katze.jpg"). Wichtig ist auch der alt-Text: Der beschreibt, was auf dem Bild zu sehen ist – das ist gut für Menschen, die das Bild nicht sehen können, und für Suchmaschinen.

<img src="DATEINAME.jpg" alt="Beschreibung"> – so fügst du ein Bild ein.
Das src-Feld zeigt, wo das Bild liegt (im gleichen Ordner wie deine Webseite, oder mit einem Internet-Link).
Mit alt erklärst du kurz, was das Bild zeigt.
Du kannst das Bild noch schöner machen: Größe ändern, Rahmen, Schatten, Ecken abrunden und sogar in die Mitte setzen!

So sieht das Bild als HTML aus:
(Markiere den Kasten und kopiere den Code – ändere gern den Bildnamen oder probier verschiedene Einstellungen!)

Tipp und Erklärung:

Größe ändern (width/height):
<img src="katze.jpg" alt="Katze" width="200">
→ Das Bild wird 200 Pixel breit angezeigt. width ist die Breite. Du kannst auch height benutzen, das ist die Höhe. Schreibe einfach eine Zahl (wie 150) ohne „px“ dahinter.
Rahmen um das Bild (border):
<img src="katze.jpg" alt="Katze" style="border: 4px solid #2d8fff;">
→ border ist der Rahmen. 4px heißt: Der Rahmen ist 4 Pixel dick. solid bedeutet „durchgezogen“ (also kein Strich oder Punktmuster). #2d8fff ist die Farbe als Hexadezimalzahl – die fängt immer mit „#“ an und steht für eine genaue Farbe. Du kannst aber auch Farbnamen wie red oder blue benutzen.
Schatten (box-shadow):
<img src="katze.jpg" alt="Katze" style="box-shadow: 4px 4px 16px #888;">
→ box-shadow macht einen Schatten hinter das Bild.
Die Zahlen bedeuten:
4px (nach rechts), 4px (nach unten), 16px (wie weich/verschwommen der Schatten ist). #888 ist die Farbe des Schattens (hier: grau).
Runde Ecken (border-radius):
<img src="katze.jpg" alt="Katze" style="border-radius: 18px;">
→ border-radius macht die Ecken rund. 18px heißt: Die Ecken sind 18 Pixel rund. Je größer die Zahl, desto runder die Ecke!
Bild in die Mitte setzen:
<div style="text-align:center;"><img src="katze.jpg" alt="Katze"></div>
→ text-align:center; sorgt dafür, dass alles im div-Bereich (auch das Bild) in der Mitte steht.
Mehrere Sachen auf einmal:
<img src="katze.jpg" alt="Katze" style="border:3px dashed #ff8800; box-shadow:2px 2px 10px #888; border-radius:20px; width:180px;">
→ Du kannst viele Dinge gleichzeitig im style angeben – trenne sie immer mit einem Semikolon „;“.
- border:3px dashed #ff8800; → Rahmen, 3 Pixel dick, gestrichelt (dashed), orange (#ff8800)
- box-shadow:2px 2px 10px #888; → kleiner Schatten, grau
- border-radius:20px; → stark abgerundete Ecken
- width:180px; → Bild ist 180 Pixel breit
Probier es aus: Du kannst solid (durchgezogen), dashed (gestrichelt) oder dotted (gepunktet) beim Rahmen nehmen. Für Farben kannst du Farbnamen („red“, „blue“), Hexadezimalzahlen (#ff0000 für Rot), oder sogar rgb(…) benutzen!

Tipp: Wenn du den Stil ändern willst, schreibe alles ins style-Feld, getrennt durch Semikolon.
Experimentiere ruhig! Du kannst Zahlen, Farben und sogar Rahmen-Arten ausprobieren.
Und vergiss nicht: Der alt-Text beschreibt, was auf dem Bild zu sehen ist – das hilft allen, auch wenn das Bild mal nicht angezeigt werden kann!

Links einfügen (Wie funktionieren Webseiten und Verbindungen?)

Wie funktionieren Webseiten überhaupt?

Stell dir vor, deine Webseite ist wie ein großes Wohnhaus. Die Hauptseite, also index.html, ist der Haupteingang. Jeder, der einfach nur die Adresse (also den Link zur Webseite) aufruft, landet dort. Wenn du aber möchtest, dass jemand direkt zu einem bestimmten Zimmer oder in einen anderen Teil des Hauses geht, brauchst du einen speziellen Wegweiser – das ist ein Link!

Damit deine Besucher zu anderen Seiten deiner Webseite kommen, musst du weitere HTML-Dateien anlegen (zum Beispiel kontakt.html oder info.html). Um von einer Datei zur anderen zu kommen, benutzt man in HTML den <a>-Tag. Das sieht aus wie ein kleines Hinweisschild: Wenn man darauf klickt, kommt man direkt dorthin!

Wichtig: Jeder Link braucht das href-Feld. Das ist die Adresse, wohin der Link führen soll. Bleibst du auf deiner eigenen Seite, schreibst du einfach den Dateinamen, z. B. kontakt.html.

Hin und zurück: Wenn du zum Beispiel von index.html zu kontakt.html verlinkst, musst du auch in kontakt.html einen Link zurück zu index.html machen, sonst kommt man nicht zurück!

So sieht ein Link in HTML aus:
(Kopiere die Beispiele und ändere die Namen oder den Text einfach ab!)

<a href="kontakt.html">Zur Kontaktseite</a>  <a href="index.html">Zurück zur Startseite</a>

Tipp und Gestaltungsideen für Links:

Farbe ändern:
<a href="kontakt.html" style="color:green;">Grüner Link</a>
(Das funktioniert genau wie bei Überschriften und Texten – style="color:...")
Hintergrundfarbe:
<a href="kontakt.html" style="background-color:yellow;">Gelber Hintergrund</a>
Rahmen um den Link:
<a href="kontakt.html" style="border:2px solid #2d8fff; padding:4px;">Link mit Rahmen</a> (Rahmen wie bei Bildern, padding macht den Abstand innen größer!)
Schriftart oder Größe:
<a href="kontakt.html" style="font-family:Comic Sans MS; font-size:22px;">Großer, lustiger Link</a>
Runde Ecken um den Link:
<a href="kontakt.html" style="border:2px solid #FF6600; border-radius:12px; padding:4px 12px;">Runder Link</a>
Hover-Effekt (Farbe ändert sich beim Drüberfahren):
Das macht man mit einem kleinen Zusatz-Code im <style>-Bereich. Zum Beispiel:
<style> a:hover { color: white; background-color: #2d8fff; } </style> (Jetzt leuchtet der Link blau auf, wenn du mit der Maus drübergehst!)

Wichtig:

Links zu anderen Seiten deiner Webseite schreibst du immer als Dateinamen (z.B. kontakt.html).
Du kannst auch Links zu anderen Webseiten machen, z.B. <a href="https://www.google.de">Google</a>
Damit alle Wege funktionieren, achte darauf, dass du auch immer einen Rückweg verlinkst!

Probier alles aus: Färbe Links, gib ihnen einen Rahmen oder lass sie beim Drüberfahren die Farbe wechseln – so macht das Surfen richtig Spaß!

Tabellen einfügen und gestalten

Wofür sind Tabellen da?

Mit Tabellen kannst du Dinge ganz ordentlich in Zeilen und Spalten aufschreiben – zum Beispiel einen Stundenplan, eine Preisliste oder eine Mannschaftsaufstellung. Tabellen helfen dir, wenn du viele Infos nebeneinander und untereinander brauchst.

Eine Tabelle baust du mit dem <table>-Tag. Jede neue Zeile beginnt mit <tr> („table row“), jedes Feld in der Zeile mit <td> („table data“). Überschriften in der Tabelle macht man mit <th> („table header“).

Tabellen sind am Anfang unsichtbar, sie sehen einfach aus wie normaler Text – das nennt man ein „Gerüst“. Wenn du willst, kannst du sie aber richtig gestalten und sichtbar machen!

So sieht eine Tabelle in HTML aus:
(Markiere und kopiere – probier ruhig eigene Daten aus!)

<table> <tr> <th>Name</th> <th>Lieblingsfach</th> </tr> <tr> <td>Mia</td> <td>Mathe</td> </tr> <tr> <td>Ben</td> <td>Sport</td> </tr> </table>

Tipp und Gestaltungsideen für Tabellen:

Tabellen sichtbar machen (Rahmen):
<table style="border:2px solid #2d8fff; border-collapse:collapse;"> <tr> <th style="border:1px solid #2d8fff; padding:8px;">Name</th> <th style="border:1px solid #2d8fff; padding:8px;">Lieblingsfach</th> </tr> <tr> <td style="border:1px solid #2d8fff; padding:8px;">Mia</td> <td style="border:1px solid #2d8fff; padding:8px;">Mathe</td> </tr> <tr> <td style="border:1px solid #2d8fff; padding:8px;">Ben</td> <td style="border:1px solid #2d8fff; padding:8px;">Sport</td> </tr> </table> (Mit border bekommt jede Zelle einen sichtbaren Rand. border-collapse:collapse sorgt dafür, dass die Ränder nicht doppelt angezeigt werden. padding macht die Felder innen größer.)
Tabellen als Gerüst (unsichtbar):
Lässt du border einfach weg, ist die Tabelle „unsichtbar“ – das heißt, man sieht keine Linien, aber alles bleibt ordentlich in Zeilen und Spalten. So kann man z. B. die Seite aufteilen, ohne dass es nach Tabelle aussieht.
Hintergrundfarbe für Zellen:
<td style="background-color: #f9f700;">Gelb</td> (So kannst du Felder bunt machen!)
Text in Tabellenzellen ausrichten:
<td style="text-align: center;">zentriert</td>
Zellen zusammenfassen (z.B. für Überschriften):
<th colspan="2">Beide Spalten zusammen!</th> (colspan verbindet mehrere Spalten zu einer großen Zelle.)
Tabellen für Layout (ohne Rahmen):
Früher wurden Tabellen benutzt, um die gesamte Seite aufzubauen – heute nimmt man lieber CSS dafür. Aber als verstecktes Gerüst, z. B. für Aufgabenblätter, kannst du es ruhig mal ausprobieren!

Merke:

Tabellen sind super für Listen, Pläne oder Daten, die ordentlich in Reihen und Spalten stehen sollen.
Du kannst Tabellen unsichtbar lassen oder mit Farben und Rahmen gestalten – probier verschiedene Kombinationen aus!
Mach deine Tabelle immer mit <table>, dann <tr> (Zeile) und darin <th> (Überschrift) oder <td> (Datenfeld).

Datenbank – Infos speichern ohne MySQL

Was ist eine Datenbank und wie kann man sie einfach nutzen?

Große Webseiten benutzen oft spezielle Datenbanken wie MySQL, um viele Infos zu speichern, zum Beispiel Nutzernamen, Ergebnisse oder Texte. Eine Datenbank ist wie ein großer, geordneter Schrank, in dem alles schnell gefunden werden kann.

Für kleine Projekte oder im Unterricht kannst du aber auch ganz einfach eine Textdatei als „Mini-Datenbank“ nutzen. Das ist wie ein Notizblock auf deinem Computer, den du immer wieder neu beschreiben und lesen kannst!

Du kannst mit etwas JavaScript den Inhalt aus einer Textdatei direkt in deine Webseite laden und anzeigen lassen.

So bindest du eine Textdatei als Mini-Datenbank ein:
(Das Beispiel lädt eine Textdatei und zeigt den Inhalt auf deiner Seite an)

<div id="datenfeld"></div>


<script>
  fetch('meine-daten.txt')
    .then(response => response.text())
    .then(text => {
      document.getElementById('datenfeld').innerText = text;
    });
</script>

Tipp & Hinweise zur Mini-Datenbank:

Speichere deine Daten einfach in einer Textdatei (z. B. meine-daten.txt) und lege sie im gleichen Ordner ab wie deine Webseite.
Inhalt ändern? – Öffne die Textdatei, passe sie an und lade die Webseite neu: Der neue Inhalt erscheint direkt!
Für große Webseiten: Benutze später lieber eine „echte“ Datenbank wie MySQL – das ist schneller und sicherer.
Damit das Laden funktioniert: Öffne deine Seite am besten mit einem lokalen Webserver (z. B. VSCode mit Live Server, oder python3 -m http.server).
Du kannst mehrere Datenfelder machen und aus verschiedenen Textdateien laden, z. B. für verschiedene Bereiche deiner Seite!

Merke:

Eine Textdatei als Mini-Datenbank ist einfach, praktisch und perfekt für den Unterricht.
Teste es aus, probiere verschiedene Inhalte, und lerne so, wie Webseiten „dynamisch“ werden können!