Ein einfacher, zweigeteilter HTML-Editor: links der Code mit farblicher Hervorhebung, per Knopfdruck eine echte Browser-Vorschau – die sich sogar direkt im Browserfenster bearbeiten lässt, ganz ohne HTML-Kenntnisse.
Am einfachsten: Doppelklick auf start_HTML-Editor-BL.bat.
Es öffnet sich kein schwarzes Konsolenfenster – nur das Editor-Fenster selbst.
HTML-Editor-BL.exe
im Unterordner dist existiert (dann wird diese gestartet) – ansonsten
wird das Programm über pythonw gestartet, welches ebenfalls kein
Konsolenfenster anzeigt. Es wird lediglich vorausgesetzt, dass Python 3 installiert ist,
falls noch keine EXE gebaut wurde.
Wer eine eigenständige .exe-Datei möchte, die auch ohne installiertes
Python läuft, führt einmalig build_HTML-Editor-BL.bat per Doppelklick aus.
build_HTML-Editor-BL.bat.PyInstaller und baut die EXE.dist\HTML-Editor-BL.exe – ab jetzt startet
start_HTML-Editor-BL.bat automatisch diese EXE, komplett ohne Terminal
und ohne dass Python weiterhin benötigt wird.start_HTML-Editor-BL.bat als auch build_HTML-Editor-BL.bat
prüfen selbstständig, ob Python vorhanden ist – sie installieren es aber
nicht automatisch. Fehlt Python, erscheint nur ein Hinweis mit Link zu
python.org. Automatisch nachinstalliert wird lediglich das kleine
Python-Zusatzpaket PyInstaller beim Bau der EXE (und auch nur,
wenn Python selbst schon da ist).build_HTML-Editor-BL.bat ausführen.
Die daraus entstehende Datei dist\HTML-Editor-BL.exe enthält die
komplette Python-Umgebung eingebettet – sie lässt sich 1:1 (zusammen mit
Handbuch.html und optional start_HTML-Editor-BL.bat)
auf jeden anderen Windows-PC kopieren und läuft dort ganz ohne installiertes
Python. Einen Webbrowser bringt Windows in aller Regel schon mit (mindestens
Microsoft Edge) – auch dieser wird nicht automatisch installiert.
| Bereich | Beschreibung |
|---|---|
| Menüleiste | Datei, Bearbeiten, Ansicht, Hilfe – alle Funktionen sind zusätzlich hier erreichbar. |
| Werkzeugleiste | Die wichtigsten Knöpfe als Kurzwahl. Beim Überfahren mit der Maus erscheint ein kurzer Hilfetext (Tooltip), der die Funktion erklärt. |
| Code-Fenster | Links die Zeilennummern, rechts der HTML-Code mit farblicher Hervorhebung. |
| Statusleiste | Zeigt unten den Dateipfad, ob ungespeicherte Änderungen vorliegen, die Cursor-Position sowie – falls aktiv – den Port der Browser-Vorschau. Ab Version 1.7 erscheinen hier auch kurze Rückmeldungen (z. B. „Vorschau aktualisiert"), die nach wenigen Sekunden von selbst wieder verschwinden. |
.html/.htm-Datei zum Bearbeiten.Gibt es beim Schließen, Neu-Anlegen oder Öffnen noch ungespeicherte Änderungen, fragt das Programm automatisch nach, ob vorher gespeichert werden soll.
Im Menü Datei steht direkt unter „Öffnen …" ein Untermenü mit den 5 zuletzt geöffneten bzw. per „Speichern unter" neu benannten Dateien – sortiert nach der zuletzt verwendeten zuerst. Ein Klick auf einen Eintrag öffnet die betreffende Datei sofort (auch hier wird bei ungespeicherten Änderungen vorher nachgefragt).
index.html),
zeigt jeder Eintrag zusätzlich zum Dateinamen den übergeordneten Ordner in
Klammern an.html_editor_bl_settings.json gespeichert und bleibt auch nach
dem nächsten Programmstart erhalten.
Über Datei → Von Adresse (URL) öffnen …, den Werkzeugleisten-Knopf „Von URL" oder Strg+U lässt sich der HTML-Quelltext einer Internetseite direkt in den Editor laden – praktisch, um eine bereits veröffentlichte eigene Seite zu bearbeiten, ohne sie vorher von Hand herunterladen zu müssen.
www.meineseite.de – fehlt
https://, wird es automatisch ergänzt.<meta charset>-Angabe im
Dokument. Aus Sicherheitsgründen werden ausschließlich Adressen mit
http:// oder https:// geladen.
bilder/foto.png), fehlen sie in der Vorschau so lange,
bis die Datei am passenden Ort neben diesen Ordnern gespeichert wurde.| Farbe | Bedeutung |
|---|---|
| Blau | HTML-Tags, z. B. <body>, <p> |
| Hellblau | Attributnamen, z. B. class, id |
| Orange | Attributwerte in Anführungszeichen, z. B. "main" |
| Grün | Kommentare <!-- … --> |
| Grau | <!DOCTYPE …> |
| Gelbbraun | Sonderzeichen (Entities), z. B. & |
Die Hervorhebung aktualisiert sich automatisch, während getippt wird.
Bis Version 1.6 wurde nach jeder Eingabe das gesamte Dokument neu eingefärbt – und zwar Farbbereich für Farbbereich einzeln. Bei größeren Seiten kamen so mehrere tausend Einzelanweisungen pro Tastendruck zusammen; das Tippen wurde spürbar zäh und es konnten dabei leicht Vertipper entstehen.
Ab Version 1.7 wird nur noch der Bereich neu eingefärbt, der gerade auf dem Bildschirm zu sehen ist (zuzüglich eines Puffers ober- und unterhalb, damit beim Blättern nichts farblos aufblitzt) – und alle Bereiche einer Farbe werden mit einer einzigen Anweisung gesetzt. Auch die Zeilennummern und die Statusleiste werden nur noch dann neu gezeichnet, wenn sich dort tatsächlich etwas geändert hat.
| Größe der Seite | Anweisungen je Neu-Einfärbung v1.6 | v1.7 |
|---|---|---|
| ca. 15 KB | 1.226 | 12 |
| ca. 40 KB | 3.226 | 12 |
| ca. 80 KB | 6.626 | 12 |
| ca. 160 KB | 13.226 | 12 |
Manche Dateien enthalten – meist ungewollt – eine einzige, extrem lange Zeile: zum Beispiel minifiziertes CSS/JavaScript ohne Zeilenumbrüche, oder Code, den eine Browser-Erweiterung (z. B. ein Übersetzer-Add-on) beim Speichern einer Webseite in die Datei mit eingefügt hat. Tkinter, die technische Grundlage dieses Programms, verwaltet jede Zeile intern als eigene Struktur – bei einer einzelnen Zeile mit tausenden Farbbereichen wird das Einfärben spürbar zäh, unabhängig davon, wie klein die restliche Datei ist.
Ab Version 1.8 wird deshalb pro Einfärbe-Durchlauf nur noch eine Höchstmenge an Zeichen tatsächlich eingefärbt. Der Rest einer solchen ungewöhnlich langen Zeile bleibt einfach ungefärbt – am gespeicherten Inhalt ändert sich dadurch nichts, nur an der Darstellung dieser einen Zeile.
moz-extension://…
oder ähnlichem auf, stammt das in aller Regel nicht von Ihrer eigenen Seite,
sondern von einer im Browser aktiven Erweiterung, die beim Speichern der
Seite ihr eigenes Overlay mit in den HTML-Code geschrieben hat. Diese Zeile
kann in der Regel gefahrlos gelöscht werden.
Über Strg+F, den Menüpunkt Bearbeiten → Suchen / Ersetzen … oder den Werkzeugleisten-Knopf öffnet sich ein kleines Fenster:
Knopf „🌐 Vorschau im Browser" (oder Taste F5) öffnet die aktuelle Seite in Ihrem normalen Webbrowser (Chrome, Edge, Firefox, …) – so, wie sie später auch für andere aussehen wird.
127.0.0.1, also nur auf diesem Rechner
erreichbar – nichts wird ins Internet übertragen). Manche Firewalls fragen beim ersten
Start einmalig nach einer Erlaubnis – das ist normal und kann bestätigt werden.
Standardmäßig wird beim Öffnen der Vorschau der Systemstandard-Browser verwendet. Über den Knopf mit der Aufschrift „Vorschau-Browser: …" in der Werkzeugleiste (oder Menü Ansicht → Vorschau-Browser wählen …) öffnet sich ein Auswahlfenster:
html_editor_bl_settings.json
neben dem Programm gespeichert und bleibt dauerhaft erhalten – auch nach dem
nächsten Programmstart – bis hier erneut ein anderer Browser gewählt wird.
Das Besondere an HTML-Editor-BL: Sie müssen nicht immer im Code-Fenster arbeiten.
Warum keine Zeilennummern in der Browser-Vorschau?
Die Browser-Vorschau zeigt die fertig gerenderte Seite – also so, wie
sie später für Leser aussieht (Text, Absätze, Bilder), nicht den HTML-Quellcode.
Da dort keine einzelnen Code-Zeilen mehr sichtbar sind, gibt es dort auch nichts,
was man nummerieren könnte. Zeilennummern gehören daher bewusst zum Code-Fenster
im Editor selbst (links), wo sie beim Auffinden bestimmter Code-Stellen helfen.
Ab Version 1.5 sind Vorschau und Code-Fenster miteinander verknüpft, ohne dass dafür sichtbare Zeilennummern in der Vorschau nötig sind:
127.0.0.1, also rein
lokal). Diese Zuordnung wird bei jedem Öffnen bzw. Aktualisieren der Vorschau neu erstellt
und ist unsichtbarer Teil der Vorschau – beim Speichern (egal ob über den
„Speichern"-Knopf im Browser oder Strg+S im Editor) wird sie
automatisch wieder vollständig entfernt und taucht nie in der gespeicherten Datei auf.
| Taste | Funktion |
|---|---|
| Strg+N | Neue Datei |
| Strg+O | Datei öffnen |
| Strg+U | Seite von Adresse (URL) öffnen |
| Strg+S | Speichern |
| Strg+Umschalt+S | Speichern unter |
| Strg+Z | Rückgängig |
| Strg+Y | Wiederholen |
| Strg+F | Suchen / Ersetzen |
| F5 | Vorschau im Browser öffnen |
| Strg+R | Vorschau aktualisieren |
Muss ich die Browser-Vorschau nach einer Code-Änderung von Hand neu laden?
Seit Version 1.7 nicht mehr. Nach „Vorschau aktualisieren" (Strg+R)
lädt sich das Browser-Fenster innerhalb einer knappen Sekunde selbst neu. Einzige
Ausnahme: Solange dort Bearbeiten: AN aktiv ist, wird gewartet, damit die
im Browser getippten Änderungen nicht verloren gehen – dort erscheint dann ein
entsprechender Hinweis in der Leiste.
Das Tippen fühlt sich träge an?
Version 1.7 hat die Einfärbung des Codes von Grund auf umgebaut, Version 1.8
zusätzlich einzelne, ungewöhnlich lange Zeilen abgesichert (siehe Abschnitt 6).
Sollte eine Datei außergewöhnlich groß sein oder eine einzelne sehr lange
Zeile enthalten (z. B. durch eine Browser-Erweiterung eingefügter Code, siehe
Abschnitt 6), lässt sich die farbliche Hervorhebung zusätzlich über
Ansicht → Farbliche Hervorhebung des Codes komplett abschalten.
Es öffnet sich kein Browserfenster?
Prüfen Sie, ob ein Standardbrowser auf dem System eingerichtet ist. Alternativ die in
der Statusleiste angezeigte Adresse (z. B. http://127.0.0.1:PORTNUMMER/)
manuell in einen Browser eingeben.
Windows/Firewall zeigt eine Sicherheitswarnung?
Das Programm öffnet lediglich einen lokalen Server auf Ihrem eigenen Rechner
(127.0.0.1) – es ist kein Internetzugriff nötig. Die Warnung kann
gefahrlos bestätigt werden.
Python wurde nicht gefunden?
Python 3 von python.org installieren (Haken bei "Add Python to PATH" setzen)
oder direkt build_HTML-Editor-BL.bat ausführen, um eine EXE zu erzeugen, die
kein separat installiertes Python mehr benötigt.
Es wird kein passender Browser gefunden?
Über Ansicht → Vorschau-Browser wählen … lässt sich per
„Andere .exe auswählen …" jedes beliebige Browser-Programm manuell festlegen.
HTML-Editor-BL – Version 2.0
Autor: Bernhard Lickert
Entwickelt mit Claude (Anthropic)
Copyright © 2026 Bernhard Lickert
| Version | Änderungen |
|---|---|
| 2.0 |
Neu: Menü Datei → Zuletzt geöffnete Dateien – ein
Untermenü direkt nach „Öffnen …" mit den 5 zuletzt geöffneten bzw. unter
neuem Namen gespeicherten Dateien, anklickbar zum sofortigen Öffnen. Zeigt
bei gleichnamigen Dateien zusätzlich den übergeordneten Ordner an, entfernt
nicht mehr vorhandene Dateien automatisch und bietet einen Eintrag „Liste
leeren". Die Liste wird in html_editor_bl_settings.json
gespeichert (siehe Abschnitt 4).
|
| 1.9 | Fehlerbehebung: Im Menü Datei stand das Tastenkürzel bei „Neu", „Öffnen ...", „Von Adresse (URL) öffnen ..." und „Speichern" versehentlich doppelt (einmal im Menütext selbst, einmal in der eigentlich dafür vorgesehenen rechtsbündigen Spalte). In den Menüs Bearbeiten und Ansicht war es umgekehrt: Die Kürzel klebten unformatiert links im Menütext, statt sauber rechtsbündig zu erscheinen. Betroffen waren „Speichern unter ...", „Rückgängig", „Wiederholen", „Ausschneiden", „Kopieren", „Einfügen", „Suchen / Ersetzen ...", „Vorschau / Bearbeiten im Browser öffnen" und „Vorschau aktualisieren". Alle Menükürzel laufen jetzt einheitlich über die dafür vorgesehene Tk-eigene Spalte. |
| 1.8 |
Weitere Beschleunigung beim Tippen: Version 1.7 hatte die
Einfärbung auf den sichtbaren Bereich beschränkt – dabei blieb aber ein Fall
unberücksichtigt: eine einzelne, extrem lange Zeile (z. B. minifiziertes
CSS/JavaScript ohne Zeilenumbrüche oder von einer Browser-Erweiterung beim
Speichern eingefügter Code) konnte trotzdem hunderte bis tausende
Farbbereiche erzeugen, die Tkinter innerhalb dieser einen Zeile bei jedem
Tastendruck neu aufbauen musste. Pro Einfärbe-Durchlauf wird jetzt eine
Höchstmenge an Zeichen nicht überschritten; überzählige Farbbereiche einer
solchen Zeile bleiben ungefärbt, der gespeicherte Inhalt ist davon nicht
betroffen (siehe Abschnitt 6). Konkret gemessen an einer 59-KB-Datei mit einer 18.000 Zeichen langen, von einer Übersetzer-Erweiterung eingefügten Zeile: rund 86 % weniger Tk-Farbregionen pro Einfärbe-Durchlauf gegenüber Version 1.7. |
| 1.7 |
Deutlich schnelleres Tippen. Die farbliche Hervorhebung wurde
von Grund auf neu gebaut: Statt nach jedem Tastendruck das gesamte Dokument
Bereich für Bereich neu einzufärben, wird nur noch der sichtbare Ausschnitt
behandelt, und alle Bereiche einer Farbe werden mit einer einzigen Anweisung
gesetzt. Statt mehrerer tausend Einzelanweisungen sind es nun zwölf – unabhängig
von der Größe der Datei (Vergleichstabelle in Abschnitt 6). Weniger Arbeit im Hintergrund: Zeilennummern wurden bisher dreimal je Tastendruck komplett neu gezeichnet; jetzt geschieht das gebündelt und nur, wenn sich tatsächlich etwas geändert hat. Auch Statusleiste und Fenstertitel werden nur noch bei echten Änderungen angefasst. Reine Bewegungstasten (Pfeiltasten, Umschalt, Strg …) lösen überhaupt keine Neu-Einfärbung mehr aus. Neu: Die farbliche Hervorhebung lässt sich über Ansicht → Farbliche Hervorhebung des Codes abschalten (bleibt gespeichert). Neu: Die Browser-Vorschau lädt sich nach „Vorschau aktualisieren" von selbst neu – das bisherige Hinweisfenster entfällt und wurde durch eine kurze Meldung in der Statusleiste ersetzt. Während im Browser bearbeitet wird, wird bewusst gewartet, damit dort nichts verloren geht. Fehlerbehebungen: Nach „Alles ersetzen" blieb der Text ungefärbt zurück – behoben. Das Handbuch wird jetzt über eine korrekt gebildete Dateiadresse geöffnet (das bisherige file://C:\… wurde von manchen Browsern
abgelehnt). Der lokale Vorschau-Server arbeitet nebenläufig, sodass die
regelmäßige Abfrage der Cursorzeile das Speichern aus dem Browser nicht mehr
kurzzeitig blockieren kann.
|
| 1.6 |
Neu: HTML-Seiten lassen sich jetzt direkt über ihre Internetadresse
laden (Datei → Von Adresse (URL) öffnen … bzw. Strg+U),
inklusive automatischer Zeichensatz-Erkennung. Verbesserung bei Suchen & Ersetzen: Das gefundene Wort war bisher praktisch nicht zu erkennen, weil die normale Textauswahl unter Windows blass dargestellt wird, solange der Eingabefokus im Suchfenster liegt. Der Treffer wird jetzt zusätzlich gelb hinterlegt und ist dadurch immer eindeutig sichtbar. Neu ist außerdem eine Anzeige von Fundzeile und Gesamtzahl der Treffer sowie automatisches Weitersuchen am Dateianfang, wenn das Ende erreicht ist. |
| 1.5 |
Fehlerbehebung: Wurde beim Speichern über den Browser-Knopf
„Speichern" die Seite mit eingeschaltetem Bearbeiten-Modus gespeichert, blieben
contenteditable="true" und ein interner Abstands-Stil am
<body>-Tag versehentlich in der gespeicherten Datei zurück. Das
hatte zur Folge, dass Links in der veröffentlichten Seite nicht mehr anklickbar
waren, weil der Browser die Seite weiterhin als bearbeitbar behandelte. Der
Speicher-Vorgang entfernt jetzt zuverlässig alle internen Hilfsattribute.Neu: Zeilen-Sprung zwischen Browser-Vorschau und Code-Editor in beide Richtungen (siehe Abschnitt 11). |
| 1.4 |
Eigenes Programm-Icon ergänzt (Fenster-/Taskleisten-Symbol und EXE-Symbol):
dunkles Code-Fenster mit hellblauem Rand. Icon-Dateien icon.png
und icon.svg stehen zusätzlich einzeln zum Download bereit.
|
| 1.3 | Browser-Bearbeiten-Leiste: Knöpfe „↶ Rückgängig" und „↷ Wiederholen" ergänzt (mehrfach hintereinander nutzbar). Mehrfach-Rückgängig im Code-Fenster zusätzlich fest abgesichert (unbegrenzte Undo-Stufen). |
| 1.2 | Werkzeugleiste: eigener Knopf „Speichern unter" ergänzt (bisher nur im Menü Datei vorhanden). |
| 1.1 |
Fehlerbehebung: Der „Bearbeiten"-Knopf in der Browser-Vorschau reagierte nicht,
weil beim Einfügen des Bearbeiten-Bausteins ein Zeichenfehler das eingebettete
JavaScript ungültig gemacht hat – behoben. Neu: Auswahl des Vorschau-Browsers (automatische Erkennung installierter Browser + manuelle Auswahl), Wahl bleibt dauerhaft gespeichert. |
| 1.0 | Erste Version. |