Zusammenfassung: die fertige Webseite und ein Ausblick auf CSS

~9 Min. Lesezeit Zuletzt aktualisiert am 8. August 2026

Herzlichen Glückwunsch! Du hast es bis zum letzten Kapitel geschafft. Schauen wir uns zum Abschluss an, was du alles erreicht hast, und was als Nächstes kommen könnte.

Dein fertiges Projekt

Du hast eine vollständige, mehrseitige Webseite gebaut:

meine-webseite/
  index.html      Startseite mit Über mich, Hobbys, Verein, Fotos, Video, Audio
  spieler.html    Tabelle mit Lieblingsspielern
  kontakt.html    Vollständiges Kontaktformular
  bilder/         Fotos für die ganze Webseite

Spickzettel: alle Elemente im Überblick

Eine Übersicht über jedes Element, das du in diesem Tutorial gelernt hast, nach Themen sortiert:

Grundgerüst: <!DOCTYPE html>, <html>, <head>, <body>, <title>, <meta>
Text: <h1>-<h6>, <p>, <br>, <hr>, <strong>, <em>, <small>, <mark>, <del>, <ins>
Listen: <ul>, <ol>, <li>, <dl>, <dt>, <dd>
Links: <a> mit href, target, rel
Bilder/Multimedia: <img>, <figure>, <figcaption>, <video>, <audio>, <source>
Tabellen: <table>, <tr>, <td>, <th>, <thead>, <tbody>, <caption>
Formulare: <form>, <input>, <label>, <textarea>, <select>, <option>, <button>, <fieldset>, <legend>
Struktur: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, <div>, <span>
Attribute: id, class, href, src, alt, type, name, value, required, placeholder, width/height

Zehn Faustregeln aus diesem Tutorial

Wähle Überschriften-Stufen nach Bedeutung, nicht nach gewünschter Größe.
Jedes <img> braucht ein aussagekräftiges alt-Attribut.
Jedes <label> gehört mit for/id zu seinem Feld verbunden.
Benutze semantische Elemente (<nav>, <main>, ...) statt bedeutungsloser <div>-Suppe, wo immer es ein passendes gibt.
id ist einzigartig, class darf mehrfach vorkommen.
Achte auf Groß-/Kleinschreibung bei Datei- und Ordnernamen.
Vermeide Linktexte wie "hier klicken".
Prüfe nach dem Ändern immer: gespeichert und im Browser neu geladen?
Bei Problemen: Seitenquelltext ansehen und von oben nach unten lesen.
HTML beschreibt Struktur und Bedeutung - wie etwas aussieht, ist Aufgabe von CSS.

Was jetzt noch fehlt: CSS und JavaScript

Erinnerst du dich an das Haus-Beispiel aus Kapitel 1? Du hast jetzt das komplette Rohgerüst gebaut - Wände, Fenster, Türen, alles an der richtigen Stelle, alles bedeutungsvoll beschriftet. Was noch fehlt:

CSS würde deiner Webseite Farben geben, eine hübsche Schriftart, Abstände, ein Layout mit mehreren Spalten nebeneinander, abgerundete Ecken, und vieles mehr - alles rein optisch, ohne den HTML-Inhalt selbst zu verändern.
JavaScript würde deiner Webseite echtes Verhalten geben: Das Kontaktformular könnte wirklich eine Nachricht verschicken, ein Klick auf einen Button könnte etwas auf der Seite verändern, ohne neu zu laden, und vieles mehr.

Die gute Nachricht: Weil du dein HTML von Anfang an sauber und semantisch aufgebaut hast, wirst du es beim Lernen von CSS und JavaScript sehr viel leichter haben als jemand, der mit einer <div>-Suppe ohne Struktur startet. Semantisches HTML ist eine Investition, die sich bei jedem weiteren Schritt auszahlt.

Herzlichen Glückwunsch!

Du hast in diesem Tutorial nicht nur einzelne Befehle gelernt, sondern eine vollständige, mehrseitige, semantisch sauber strukturierte und barrierefreie Webseite komplett von Grund auf selbst gebaut - mit Text, Bildern, Videos, Tabellen und einem echten Formular. Das ist eine großartige Leistung für den allerersten Schritt in die Programmierung. Viel Erfolg auf deinem weiteren Weg!

Tipp: Tipp für alle, die direkt weitermachen wollen: Schau dir gerne unsere anderen Tutorials an, sobald du bereit für CSS oder JavaScript bist - die Prinzipien aus diesem Tutorial (vollständige Beispiele, ein durchgehendes Projekt, Schritt für Schritt) findest du dort genauso wieder.

Vorheriges Kapitel Häufige Fehler und wie man sie findet Serie abgeschlossen Zurück zur Übersicht