9.4.2009

HTML_Generator

default

nosoftwarepatents

 

TPL2HTML - Mein kleiner Homepage-Generator für Linux und Windows

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.

("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.)

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.

 

Download für Linux und Windows

Der Website-Generator 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.

 

Hinweis für Windows-User:

Die Beispieldateien (*.tpl, *.cfg, *.html) sind unter Linux geschrieben und haben am Zeilenende nur ein Linefeed-Zeichen. Texteditoren unter Windows erwarten aber die Kombination Carriage-Return und Linefeed. Man kann die Dateien mit "Word" öffnen und wieder "als Text" abspeichern. Dann stimmen die Zeilenenden.

 

Man legt folgende Verzeichnisse und Dateien an

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 "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:

tpl2html2-1

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.

 

Die Konfigurationsdatei eines Projektes

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).

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.

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".

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.

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").

 

Der Generator funktioniert folgendermaßen

===> Man wechselt in das Directory, wo sich die Konfigurationsdatei des Projekts befindet.

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.

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

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

So sieht es aus: Homepage bearbeiten

 

Die Dateien mit den Inhalten (*.tpl)

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 Tabellenzeile ohne sichtbare Begrenzung (border=0) (weitere Zellen mit "|" trennen)
  • = für Listenelement
  • - für Sublistenelement

"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.

(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 )

 

Bilder und Links

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).

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).

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".

 

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
    Break (Zeilenumbruch)
  • aus "Doppelpunkt EU Doppelpunkt" wird das Eurozeichen (€)

 

Wie wichtig ist "gültiges HTML"?

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/

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.

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 im Schnitt 200 Besucher pro Tag kommen. Die möchte ich nicht verscheuchen, z.B. mit weißen Seiten, nicht existierenden Bildern, verrutschtem Layout, Fehlermeldungen, usw.

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.)

 

Beispiele für HTML-Seiten mit und ohne Fehler

Ich habe die folgenden URLs nur mal so aus Spaß eingegeben in: http://validator.w3.org/

Die Seiten sollen hier nicht inhaltlich bewertet werden, sondern nur zeigen, daß es zahlreiche fehlerhafte, aber auch zahlreiche fehlerfreie Seiten gibt. Außerdem soll an den Beispielen gezeigt werden, daß fehlerhaftes HTML für eine ansprechende Gestaltung weder notwendig noch hinreichend ist.

URL   Fehler   Art
     
http://rechtschreibreform.com/ 15 Gegner der Rechtschreibreform
http://www2.atelco.de/ 16 Computer-Discounter
http://www.hp.com/ 17 Hewlett Packard, Hardware-Hersteller
http://www.lotto-toto.de/ 18 Nordwest-Lotto, offizielle Seite
http://www.duden.de/ 23 Die Rechtschreibungs-Experten
https://www.elster.de/ 38 Steuererklärung Online, offizielle Seite
http://www.html-world.de/ 44 Kurse und Tipps für HTML-Autoren
http://www.umweltbundesamt.de/ 87 Behörde, offizielle Seite
http://www.spiegel.de/ 159 Zeitschrift
http://www.hamburg.de/ 192 Behörde, offizielle Seite
http://www.kaspersky.com/ 228 Anti-Viren-Software-Hersteller
http://www.t-online.de/ 250 Internet-Service-Provider
http://www.n-tv.de/ 281 Fernsehsender- und Nachrichtenseite
http://www.arcor.de/ 308 Internetprovider
http://www.abendblatt.de/ 460 Regionalzeitung
http://www.amazon.de/ enthält nichtinterpretierbare Zeichen, keine Prüfung möglich weltgrößter Buchhändler
http://www.rat-fuer-deutsche-rechtschreibung.de/ enthält nichtinterpretierbare Zeichen, keine Prüfung möglich z.Zt. Oberste Instanz für Rechtschreibung
http://www.volkswagenbank.de/index.php enthält nichtinterpretierbare Zeichen, keine Prüfung möglich Finanzierungsbank

Beispielseiten ohne HTML-Fehler:

 

Fehler- und Wunschliste

abatz.de Jörn Abatz - Technische Software Impressum