L

H4 TPL2HTML - Mein kleiner Homepage-Generator

PN Damit ist diese Homepage gemacht, die Sie jetzt gerade im Browser haben. Man ist etwas eingeschränkt in der Gestaltung, aber dafür geht das Schreiben und Einbauen sehr schön schnell, und man kann sich auf das Wesentliche konzentrieren. Ich habe ihn mir geschrieben, weil ich auf meinen Seiten relativ oft Änderungen oder Ergänzungen einbaue, und weil ich die verfügbaren HTML-Editoren nicht mag. Entweder sind sie nur für Windows, oder sie laufen nicht stabil, oder sie kosten mich zuviel Zeit mit Herumklicken. Außerdem erzeugen die meisten ein schreckliches HTML voller Fehler.

PN ("tpl" steht für "Template", das heißt "Schablone" oder "Vorlage", weil vom Generator aus gesehen die tpl-Dateien die Vorlagen sind für die späteren HTML-Dateien.)

PN _Der_ _Quelltext_ _dieser_ _Seite_ (die .tpl-Datei) heißt hier "tpl2.tpl.txt", damit sie vom Browser ohne Probleme angezeigt wird. Außerdem ist sie nicht ganz aktuell, aber man sieht, wie es geht: @tpl2.tpl.txt Im Browser stören natürlich die überlangen Zeilen ganz enorm, aber im Texteditor gibt es "weichen Zeilenumbruch" (z.B. in gnp oder in notepad.exe), damit ist das Editieren kein Problem.

L

H4 Download für Linux und Windows

PN Das Programm ist geschrieben in Pascal, kompiliert mit "Free Pascal": http://www.freepascal.org/ Im Tarball enthalten sind die Quelltexte, sowie Executables für Linux und Windows. Dokumentation gibt es noch keine. Diese Seite hier, das ist zur Zeit die einzige Dokumentation.

PN Die Datei ist 250 bis 300 K groß:

= vom 26.12.2004: @tpl2html2-0.1.5.tgz Signatur: @tpl2html2-0.1.5.tgz.sig
= vom 25.12.2004: @tpl2html2-0.1.4.tgz Signatur: @tpl2html2-0.1.4.tgz.sig
= vom 23.12.2004: @tpl2html2-0.1.3.tgz Signatur: @tpl2html2-0.1.3.tgz.sig
= vom 08.12.2004: @tpl2html2-0.1.2.tgz Signatur: @tpl2html2-0.1.2.tgz.sig

L

H4 Man legt folgende Verzeichnisse und Dateien an

PN Man hat für jedes HTML-Projekt (d.h. für jede Homepage, die natürlich meistens aus mehreren Seiten besteht) ein Verzeichnis (Ordner). Der Ordner für das Projekt "HTML-Generator" heißt natürlich "tpl2html2". Darin gibt es ein Verzeichnis "tpl" für die Inhalte, ein Verzeichnis "pix" für Bilder und Downloaddateien, und ein (leeres) Verzeichnis "html". Außerdem hat man eine Konfigurationsdatei für das Projekt:

PN tpl2html2-1.png

PN Das Executable ("tpl2html-2" bzw. "tpl2html-2.exe") tut man in ein Verzeichnis, das im "Suchpfad" liegt, z.B. in /usr/local/bin bzw. c:\windows oder man kann es auch im Projektverzeichnis lassen.

H4 Die Konfigurationsdatei eines Projektes

PN Die Konfigurationsdatei (tpl2html-2.cfg) enthält die Struktur der Homepage (das ist die Navigationsleiste auf der linken Seite), die Farben, Schriftarten, Schriftgrößen, Hintergrundbilder, den Seitenkopf und den Seitenfuß. Dadurch sind die drei Teile oben, links und unten festgelegt. Für den Hauptteil jeder Seite hat man eine eigene Datei mit Inhalt (*.tpl).

PN _Die_ _Konfigurationsdatei_ _für_ _diese_ _Homepage_ heißt hier "tpl2html-2.cfg.txt", damit der Browser sie anzeigt: @tpl2html-2.cfg.txt Verwirrend sind vermutlich die Style-Header am Anfang. Ich habe im Augenblick keine Zeit, das anders zu lösen. Die Links auf die Seiten der alten Homepage, "Archiv..." sind zwar in der Konfigurationsdatei, aber es gibt keine tpl-Dateien dafür. Die Seiten habe ich damals noch direkt in HTML geschrieben.

PN Jedes Feld, Navigationsleiste, Seitenkopf, Seitenfuß, Hauptteil kann eine Hintergrundfarbe und ein Hintergrundbild haben. Die Abgrenzungslinien werden aus kleinen Bildern gemacht, man ist also frei in der Gestaltung der Linien. Die drei Felder Navigationsleiste, Seitenkopf und Seitenfuß können auch ganz abgewählt werden, mit "navmode=off", "topmode=off", "bottommode=off".

PN Seitenkopf und -fuß bestehen aus drei Feldern, links, mitte, rechts, die entweder aus Text (mit oder ohne Links), aus einem Bild, aus einem Leerstring oder aus einem Schlüsselwort bestehen können:

= "pagepic" für "ein Bild, das so heißt wie die HTML-Datei, nur mit der Endung jpg, jpeg, gif oder png). Bei Seiten, für die kein solches Extrabild vorhanden ist, wird ein "defaultpic" eingesetzt.
= "pagetitle" für den Text, der in der Navigationsleiste steht. (Bei mir ist dieser Text auch im Seitenkopf im Mittelteil.)
= "moddate" für das Datum, an dem die .tpl-Datei zuletzt geändert wurde.

PN Die Option "autoanch=" bewirkt, daß alle HTML-Elemente eines bestimmten Typs (bei mir z.B. "h4") oben, am Anfang des Hauptteils noch einmal eingefügt werden, und zwar als Liste von Links auf sich selbst ("Anchor").

H4 Der Generator funktioniert folgendermaßen

PN Wenn man ihn aufruft oder doppelklickt, macht er aus jeder Datei *.tpl eine HTML-Datei in "html", und er kopiert den Inhalt des Verzeichnisses "pix" nach "html". Den Inhalt von "html" kann man dann zum Provider hochladen.

PN Wenn ich damit arbeite, habe ich vier Fenster offen: Browser, Texteditor, Shell (Eingabeaufforderung), Filebrowser (Explorer). Eine Änderung geht dann so:

= im Texteditor ändern
= speichern
= in der Shell tpl2html-2 aufrufen (den letzten Befehl wiederholen)
= im Browser "aktualisieren" drücken

H4 Die Dateien mit den Inhalten (*.tpl)

PN Die .tpl-Dateien bestehen aus Zeilen. Das Token (Kennzeichen) am Anfang der Zeile entscheidet, was für ein HTML-Element aus der Zeile gemacht wird:

= H2, H3, H4 für Header
= P für Paragraph (Textabsatz)
= PN für Paragraph mit normaler Schrift (P und PN sind identisch)
= PB für Paragraph mit fetter (bold) Schrift
= PC für Paragraph mit Schrift mit festen Abständen ("cite")
= HR für Linie
= L für Linie (aus Grafik)
= | für Tabellenzeile (weitere "|" trennen die Zellen voneinander)
= + für Tabellenzeile mit zentriertem Inhalt (weitere Zellen mit "|" trennen)
= = für Listenelement
= - für Sublistenelement

PN "Eine Zeile --> ein HTML-Element", das bedeutet:

= Die Zeilen sind in der Regel sehr lang, sie dürfen _nicht_ hart umbrochen werden (mit Enter). Man muß also in seinem Texteditor "Zeilenumbruch" oder "Wraparound" einstellen, damit man die Zeilen als Ganzes sehen kann und nicht immer seitwärts scrollen muß.
= Die Elemente können nicht verschachtelt werden. Man kann z.B. nicht eine Zwischenüberschrift in einer Tabellenzelle haben, sondern nur "Inhalt": Text, Bilder und Links.

PN (Im Generator sind auch Formulare drin, aber die zu beschreiben ist mir jetzt zu kompliziert, schau bitte im Quelltext nach: uhtmltpl.pas. Sie machen auch eigentlich nur Sinn, wenn man CGIs schreibt, aber das ist ein anderes Projekt, siehe z.B. @sqaf.html )

H4 Bilder und Links

PN Bilder werden einfach als Dateinamen geschrieben, .jpg, .jpeg, .gif und .png werden akzeptiert. Das kleine Bild von den Verzeichnissen oben ist z.B. so geschrieben: "tpl2html2-1.png" (aber ohne Anführungsstriche).

PN Links werden mit "@" geschrieben, oder müssen mit "http://" beginnen. Erst der Text, dann das Ziel. Es reicht auch, nur das Ziel anzugeben. Dies hier wäre z.B. ein Link: "http://www.abatz.de/", wenn man es ohne Anführungsstriche schreibt. Dies hier wäre ein Link zu einer anderen Seite dieser Homepage: "@index.html". Dies ist ein Link zu einer Download-Datei: "@tpl2html2-0.1.tgz". Dies ist ein Link mit anderem Text: "@hier__klicken@http://www.abatz.de/" (zwischen "hier" und "klicken" sind in der tpl-Datei dieser Seite zwei Unterstriche, aber die sieht man hier nicht mehr, und das ist Absicht, siehe nächster Absatz).

PN Das Programm orientiert sich an den Leerzeichen im Text. Deshalb dürfen innerhalb von Links und Dateinamen keine Leerzeichen stehen, und vorn und hinten dürfen keine Satzzeichen stehen (das ist SEHR gewöhnungsbedürftig). Wenn man unbedingt Leerzeichen im Text eines Links haben will, muß man anstelle jedes Leerzeichens zwei Unterstriche machen. Zwei Unterstriche werden zu einem "No-Break-Space".

H4 Zeichenfolgen im Text, die in etwas anderes übersetzt werden

= aus zwei Unterstrichen wird ein No-Break-Space
= aus zwei Doppelpunkten wird ein senkrechter Strich
= aus "Doppelpunkt BR Doppelpunkt" wird ein harter:BR:Break (Zeilenumbruch)
= aus "Doppelpunkt EU Doppelpunkt" wird das Eurozeichen (:EU:)

L

H4 Wie wichtig ist "gültiges HTML"?

PN Es ist umso wichtiger, je kleiner und je unbekannter eine Homepage ist. "Gültiges HTML" bedeutet, daß die Regeln eingehalten werden, die in den von w3.org empfohlenen Spezifikationen stehen, z.B. hier: http://www.w3.org/TR/html401/

PN Ein normaler Browser akzeptiert auch ungültiges HTML. Er versucht zu raten, was wohl gemeint war, und so stellt er es dann dar. Die verschiedenen Browser verhalten sich beim Raten nicht genau gleich. Je größer die Abweichungen vom Standard sind, umso verschiedener werden die verschiedenen Browser die Seite anzeigen.

PN Die Webseiten von großen Firmen und bekannte Zeitungen enthalten meistens mehr oder weniger zahlreiche Abweichungen vom Standard. Die User besuchen ihre Seiten, wegen des bekannten Namens - trotz fehlerhafter Webseiten. Den Luxus kann ich mir nicht leisten. Ich freue mich schon, wenn regelmäßig 100 Besucher pro Tag kommen. Die will ich mir nicht mit Fehlermeldungen im Browser und ähnlichen Peinlichkeiten verscheuchen.

PN Nach meiner ganz persönlichen Theorie könnten die Sicherheitslöcher in Mozilla und Internet Explorer zu einem gewissen Teil auch daher kommen, daß die Programmierer immer darauf achten müssen, daß auch fehlerhaftes HTML noch irgendwie angezeigt wird. Wenn es ihnen erlaubt wäre, z.B. fehlerhafte HTML-Tags einfach zu ignorieren und gar nicht darzustellen, wären die Algorithmen wahrscheinlich viel unkomplizierter und es würden sich weniger Programmierfehler einschleichen. (Dann würde von den meisten großen Websites im Browser wohl nicht viel übrig bleiben.)

L

H4 Bugs

PN Die meisten Bugs sind Kleinigkeiten, die mir im Laufe der Zeit aufgefallen sind.
= "Dringend" nenne ich einen Bug, wenn das Programm abstürzt oder Daten löscht, oder wenn http://validator.w3.org/ das erzeugte HTML beanstandet.
= "Kritisch" nenne ich einen Bug, wenn die Umwandlung in HTML nicht so funktioniert, wie ich es nach meinen eigenen Beschreibungen erwarte.
= "Wichtig" nenne ich Bugs, die die Gestaltungsfreiheit unnötig einschränken.
= "Unwichtig" sind Bugs, die nur ein bißchen mehr Tipparbeit beim Entwerfen erfordern.

| Bug______________ |Priorität |Status |Stand |Version
| __ |__ |__ |__ |__
| Die Style-Header sollten als Struktur angegeben werden und nicht einfach als komplette Header |unwichtig |offen |22.12.2004 |alle
| __ |__ |__ |__ |__
| Die Top- und Bottom-Tabellen müßten auch Hintergrundbilder für die einzelnen Zellen haben, mindestens für oben links |wichtig |gefixt |26.12.2004 |0.1.5
| Fettschrift für einzelne Worte fehlt |wichtig |gefixt |26.12.2004 |0.1.5
| Das Eurozeichen sollte normal umgewandelt werden, nicht über den häßlichen Workaround mit "Doppelpunkt EU Doppelpunkt" |unwichtig |gefixt |25.12.2004 |0.1.5
| Das Eurozeichen wird nicht umgewandelt |kritisch |gefixt |25.12.2004 |0.1.5
| Der IE unterstützt keine transparenten PNGs, nur GIFs |unwichtig |Workaround |24.12.2004 |0.1
| "autoanch" funktioniert nicht für Zwischenüberschriften, die Links enthalten |kritisch |gefixt |23.12.2004 |0.1.3
| In der Navigationsleiste können als Listenitems keine Bilder verwendet werden |wichtig |gefixt |23.12.2004 |0.1.3
| Wenn es in der Navigationsleiste eng wird, macht der IE hirnlose Umbrüche (z.B. 1 Buchstabe pro Zeile). No-Break-Spaces könnten das verhindern |wichtig |gefixt |23.12.2004 |0.1.3
| In der Navigationsleiste sind keine No-Break-Spaces möglich (eingegeben durch zwei Unterstriche) |wichtig |gefixt |23.12.2004 |0.1.3
| Leere Zellen in Tabellen werden von Mozilla schlecht dargestellt, wenn sie nicht mindestens einen No-Break-Space drin haben |unwichtig |Workaround |23.12.2004 |0.1
| Bilder, die im Hauptteil erscheinen sollen, dürfen nicht genauso heißen wie die Seite (also z.B. nicht index.jpg) |unwichtig |Workaround |22.12.2004 |0.1
| Sonderzeichen für andere Sprachen als Deutsch werden nicht HTML-kodiert. ISO-8859-1 sollte mindestens drin sein. |wichtig |gefixt |8.12.2004 |0.1.2
| Hintergrundbilder für Seitenkopf und Seitenfuß müssen in das "style"-Element für die entsprechende "TABLE", nicht für "TD". |wichtig |gefixt |29.11.2004 |0.1.1
| Zwei aufeinanderfolgende Tabellen werden in eine zusammenhängende Tabelle umgewandelt. Um sie zu trennen, muß man einen leeren Paragraphen dazwischen haben, am besten mit einem einzigen No-Break-Space drin, also: "P Leerzeichen Unterstrich Unterstrich". Dasselbe gilt für aufeinanderfolgende Listen. |unwichtig |Workaround |24.11.2004 |0.1
| Man muß die Höhe (in Pixel) der Bilder für die waagerechten Linien ("toplinepic", "bottomlinepic" und "linepic") und die Breite des Bildes für die vertikale Linie ("vertlinepic") extra angeben. |unwichtig |Workaround |24.11.2004 |0.1

L

H4 Wunschliste

= die Möglichkeit, eine Navigationsleiste oben zu bekommen, statt links