Weswegen
Tippen, um zu suchen
    Esc zum Schließen · Sofortsuche auf der ganzen Website

    HTML-Website erstellen mit Notepad++: Anleitung für Einsteiger

    · Weswegen-Redaktion
    Website erstellen

    Für eine einfache HTML-Seite brauchen Sie kein teures Programm und keinen Baukasten. Ein kostenloser Texteditor wie Notepad++ genügt: Sie tippen den Code, speichern die Datei mit der Endung .html und öffnen sie im Browser — fertig ist die erste eigene Seite. Nach dieser Anleitung liegt bei Ihnen eine funktionierende, korrekt kodierte HTML-Datei mit eigenem CSS auf der Festplatte, und Sie kennen die drei Fehler, an denen Einsteiger fast immer scheitern: kaputte Umlaute, eine heimlich zu .txt umbenannte Datei und Änderungen, die im Browser einfach nicht ankommen.

    Notepad++ installieren und für HTML einrichten

    Notepad++ ist ein kostenloser, quelloffener Editor für Windows. Laden Sie die aktuelle Version von der offiziellen Seite notepad-plus-plus.org/downloads herunter und installieren Sie sie. Es gibt einen Installer und eine portable Variante, die ohne Installation aus einem Ordner läuft.

    Wichtig: Notepad++ gibt es nur für Windows. Unter macOS oder Linux nutzen Sie stattdessen einen gleichwertigen Editor, etwa Visual Studio Code (alle Systeme), Sublime Text oder auf Linux den Notepad++-Klon Notepadqq. Die HTML-Grundlagen in dieser Anleitung gelten dort genauso.

    Zwei Einstellungen sollten Sie vor dem ersten Tippen setzen:

    • Zeichenkodierung auf UTF-8. Öffnen Sie das Menü Kodierung und wählen Sie UTF-8. So werden Umlaute (ä, ö, ü, ß) korrekt gespeichert. Damit neue Dateien automatisch UTF-8 verwenden, stellen Sie das dauerhaft unter Einstellungen → Voreinstellungen → Neues Dokument → Kodierung → UTF-8 ein.
    • Syntaxhervorhebung für HTML. Sobald Sie die Datei als .html speichern, färbt Notepad++ die Tags automatisch ein. Vorher können Sie die Sprache manuell setzen: Menü Sprachen → H → HTML.

    Das Grundgerüst einer HTML5-Seite

    Jede HTML-Seite folgt derselben Grundstruktur. Legen Sie ein neues Dokument an (Datei → Neu) und tippen Sie dieses Gerüst ab:

    <!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine erste Website</title>
</head>
<body>
    <h1>Willkommen auf meiner Seite</h1>
    <p>Das ist mein erster Absatz in HTML.</p>
</body>
</html>

    Was die einzelnen Teile bedeuten:

    • <!DOCTYPE html> sagt dem Browser, dass es sich um HTML5 handelt. Diese Zeile gehört immer ganz nach oben.
    • <html lang="de"> umschließt das gesamte Dokument. Das Attribut lang="de" teilt Suchmaschinen und Screenreadern mit, dass die Seite auf Deutsch ist.
    • Im <head> stehen unsichtbare Angaben. <meta charset="UTF-8"> sorgt gemeinsam mit der UTF-8-Speicherung für saubere Umlaute. Das viewport-Meta-Tag ist Pflicht, damit die Seite auf dem Smartphone nicht winzig erscheint. <title> ist der Text im Browser-Tab.
    • Im <body> steht der sichtbare Inhalt: Überschriften (<h1> bis <h6>), Absätze (<p>), Links, Bilder und so weiter.

    Achten Sie darauf, jedes Tag wieder zu schließen (<p>…</p>). Nicht geschlossene Tags sind die häufigste Ursache für ein zerschossenes Layout.

    Ihre erste Seite Schritt für Schritt

    1. Code einfügen. Übernehmen Sie das Grundgerüst von oben und ändern Sie Titel, Überschrift und Absatz nach Belieben.
    2. Datei speichern. Gehen Sie zu Datei → Speichern unter. Vergeben Sie einen Namen und hängen Sie ausdrücklich .html an, zum Beispiel index.html. Wählen Sie im Feld Dateityp entweder „Hyper Text Markup Language file“ oder „All types (*.*)“, damit Windows die Endung nicht heimlich zu .txt ergänzt.
    3. Im Browser öffnen. Öffnen Sie den gespeicherten Dateiordner und ziehen Sie index.html in ein Browserfenster, oder Doppelklick auf die Datei. Ihre Seite erscheint.

    Nennen Sie die Startseite index.html — später bei einem Webserver oder Hoster wird diese Datei automatisch als Startseite ausgeliefert. Wenn Sie Ihre Seite anschließend ins Netz stellen möchten, ohne gleich eine Domain zu kaufen, hilft der Beitrag Website erstellen ohne Domain weiter.

    Design mit CSS ergänzen

    Nacktes HTML sieht schlicht aus. Mit CSS (Cascading Style Sheets) bestimmen Sie Farben, Schriften und Abstände. Für den Anfang schreiben Sie das CSS direkt in den <head>:

    <style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        color: #333;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }
    h1 {
        color: #1a5276;
    }
</style>

    Sobald das Projekt wächst, lagern Sie das CSS in eine eigene Datei aus. Legen Sie neben index.html eine Datei style.css an und verknüpfen Sie sie im <head>:

    <link rel="stylesheet" href="style.css">

    Der Vorteil: Eine zentrale CSS-Datei gilt für alle Unterseiten. Ändern Sie dort eine Farbe, ändert sie sich überall. Wichtig ist der richtige Pfad in href — liegt die CSS-Datei in einem Unterordner css, schreiben Sie href="css/style.css".

    Vorschau und Produktivität in Notepad++

    Ein reiner Texteditor zeigt keine Live-Vorschau. Trotzdem müssen Sie nicht jedes Mal die Datei manuell im Explorer suchen:

    • Browser aus Notepad++ starten. Das Menü Ausführen enthält je nach Installation fertige Einträge wie „Launch in Firefox“ oder „Launch in Chrome“. Fehlen sie, wählen Sie Ausführen → Ausführen… und tragen den Pfad zu Ihrem Browser gefolgt von $(FULL_CURRENT_PATH) ein. Über „Speichern“ legen Sie ein eigenes Tastenkürzel dafür an.
    • Automatische Vervollständigung. Mit Strg+Leertaste schlägt Notepad++ Tags und Attribute vor. Aktivieren lässt sich das dauerhaft unter Einstellungen → Voreinstellungen → Auto-Vervollständigung.
    • Plugins nachrüsten. Über Plugins → Plugin-Verwaltung (Plugin Admin) installieren Sie Erweiterungen. „Preview HTML“ zeigt eine eingebettete Vorschau, ein Emmet-Plugin beschleunigt das Tippen von HTML deutlich.

    Nach jeder Änderung gilt: erst in Notepad++ speichern (Strg+S), dann im Browser mit F5 neu laden. Vergessen Sie einen der beiden Schritte, sehen Sie noch die alte Version — genau hier entsteht die verbreitete Verwirrung „meine Änderung wird nicht angezeigt“.

    Typische Anfängerfehler und ihre Lösung

    • Umlaute erscheinen als ä oder ?. Die Datei ist nicht als UTF-8 gespeichert oder das <meta charset="UTF-8"> fehlt. Beides setzen, dann Datei neu speichern.
    • Der Browser zeigt den Quelltext statt der Seite oder öffnet wieder Notepad++. Meist hat die Datei die doppelte Endung .html.txt, weil Windows Endungen ausblendet. Blenden Sie im Explorer unter Ansicht → Dateinamenerweiterungen die Endungen ein und benennen Sie die Datei korrekt um.
    • Änderungen sind nicht sichtbar. Datei nicht gespeichert oder Browser nicht aktualisiert — Strg+S, dann F5.
    • Das Layout ist zerschossen. Ein Tag wurde nicht geschlossen. Notepad++ markiert das zusammengehörige Tag, wenn der Cursor auf einem Tag steht — so finden Sie die offene Stelle schneller.
    • Die CSS-Datei greift nicht. Der Pfad in <link href="…"> stimmt nicht mit dem tatsächlichen Speicherort überein. Kontrollieren Sie Groß-/Kleinschreibung und Ordnernamen.

    Wie geht es weiter?

    Mit HTML und CSS steht das Fundament. Für dynamische Effekte — Menüs, Formulare mit Prüfung, Bildergalerien — kommt JavaScript hinzu; ob sich der Einstieg lohnt, ordnet der Beitrag Hat JavaScript Zukunft? ein. Ein häufiges nächstes Projekt ist ein Anmeldebereich; wie eine Login-Seite in HTML aufgebaut ist, lesen Sie im verlinkten Artikel.

    FAQ

    Ist Notepad++ für den Bau einer Website wirklich ausreichend? Für statische Seiten aus HTML, CSS und etwas JavaScript ja. Sie schreiben denselben Code wie in jedem professionellen Editor. Sobald Sie automatische Vorschau, integrierte Fehlerprüfung oder Git-Anbindung möchten, ist Visual Studio Code komfortabler — aber nötig ist es nicht.

    Ist Notepad++ dasselbe wie der Windows-Editor „Notepad“? Nein, das sind zwei getrennte Programme mit ähnlichem Namen. Der Windows-Editor „Notepad“ ist auf jedem Windows-PC vorinstalliert und speichert ebenfalls HTML-Dateien, hat aber keine Syntaxhervorhebung, keine Auto-Vervollständigung und keine Plugins. Notepad++ muss separat installiert werden, bringt genau diese Zusatzfunktionen mit und ist deshalb die deutlich bessere Wahl für Code.

    Muss ich die Startseite index.html nennen? Zum lokalen Testen im Browser nicht — jeder Dateiname funktioniert. Sobald die Seite aber auf einem Webserver liegt, wird index.html automatisch als Startseite ausgeliefert. Deshalb ist dieser Name die sichere Wahl.