Home

Wozu "SELFHTML"?

Die "Energie des Verstehens" im Zusammenspiel mit Webeditoren und Weblogs

Matthias H. Rauert

Aktualisiert 31.03.2011

 

Inhalt:

SELFHTML ist eine ursprünglich von Stefan Münz erstellte Online-Anleitung zum selbständigen Erstellen von HTML-Dateien. HTML steht für "Hypertext Markup Language", die "lingua franca" des Word Wide Web.

 

Es handelt sich bei SELFHTML im Prinzip um eine große Website mit implementierter Suchfunktion, mit deren Hilfe Anfänger im Website-Building Schritt für Schritt die Techniken erlernen können, auf denen eine statische Website basiert.

 

Auch Fortgeschrittene und sogar Webdesigner finden hier ein praktisches Online-Nachschlagewerk, das nicht nur Grundfertigkeiten vermittelt, sondern in dem auch viele Spezialfragen wie beispielsweise die Behandlung von XHTML und die Einbindung von Medienformaten (Filme, Song- und Soundclips etc.) allgemeinverständlich erläutert und anhand von Beispielen illustriert werden.

 

Das Motto von SELFHTML - "die Energie des Verstehens" - sagt bereits, dass hier Grundwissen, und zwar von Grund auf, zum selbständigen Studium geboten wird. ABER eine Warnung für ungeduldige Zeitgenossen sei vorausgeschickt: "Diese Dokumentation ist kein 'Ihre-Homepage-in-zehn-Minuten'-Quickie" (SELFHTML-Redaktion in der Version 8.1.2 vom 01.03. 2007). Wer wirklich daran interessiert ist, eine einigermaßen befriedigend gestaltete, eigene Website zu schaffen, sollte vor allem eins mitbringen - etwas Zeit.

 

Auch wenn Sie sich - besonders am Anfang - gern eines WISWYG-Webeditors bedienen, sollten Sie bedenken: Keine der angebotenen, offline oder online (in manchen Provider-Paketen enthalten) zu bedienenden Programme erfüllt alle Wünsche. In vielen Fällen besteht beim damit erzielten Ergebnis mehr oder minder manueller Nachbesserungsbedarf. Einige Beispiele für aus dem Web downloadbare Free- oder Shareware werden unten genannt.

 

SELFHTML steht auch als Hypertextfile-Version (e-Book aus verlinkten HTML-Seiten mit CSS, Beispielgrafiken, -filmen, -sounds etc.) zum freien Download bereit und kann offline über jeden modernen Browser gesteuert werden.

 

Ferner kann SELFHTML - laut Angaben der SELFHTML-Redaktion - auch als gedrucktes Buch bezogen werden.

 

Für die Diskussion von Fachthemen rund um die sich rasch wandelnden Online-Techniken und spezifischen Problemstellungen, wie sie in der alltäglichen Praxis des Webdesigns auftreten, steht ferner das SELFHTML-Forum zur Verfügung.

 

Auch die PHP-Technik, mit der dynamische Websiten generiert werden können, setzt auf HTML/XHTML auf. Ihre Behandlung ist der Version 9.0 von SELFHTML vorgesehen.

 

Einige häufig benutzte, meist frei im Web downloadbare WISWYG-Webeditoren sind (bitte selbst googeln!):

 

Amaya: Der Webeditor des W3-Consortiums. Steht hier nicht nur aus alphanumerischen Gründen an erster Stelle. Sehr empfehlenswert vor allem zur Generierung von XHMTL-Seiten. Features u.a.: eingebauter CSS-Editor, Tools zur Entfernung und Änderung von DTD's. Im Darstellungsmodus "Textbrowser" lassen sich Texte ohne HTML-Kenntnisse schreiben, formatieren und one-click verlinken (WYSWIG-Methode). Die ständig aktive Echtzeit-Validierung des Quellcodes überwacht während des Schreibens und z.B. nach Migration des Doctypes die Konformität der Elemente. Nachteile: Amaya stürzt - besonders unter Windows Vista - gern mal ab. Am besten nach jedem Schritt sichern. Außerdem vermisst man einen echten FTP-Klienten.

 

Arachnophilia: Einfacher WYSWYG-Editor auf JavaScript-Basis, läuft daher auf vielen Plattformen. Sehr klein (ca. 1,6 MB), daher auch zur Installation auf älteren Notebooks mit kleiner Festplatte geeignet, sofern dort auch JavaScript installiert ist. Kann Seiten mit der Dateierweiterung *.php – im folgenden PHP-Seiten – öffnen und lesen (natürlich ohne PHP-includes, dazu unten im Abschnitt über den KompoZer). Nachteile: Benutzeroberfläche in Englisch. Die "Hilfe" erschöpft sich in einigen Beispiel-Tests. Von einem Forum ist mir nichts bekannt. Schon von daher ist SELFHTML ein MUSS.

 

Bluevoda: Umfangreiches Tool einer US-amerikanischen Programmierschmiede mit vielen Komfortfunktionen wie elementare Bildbearbeitung, FTP-Klient etc. Beherrscht die Layer-Technik. Online-Lehrfilme, Forum. Nachteile: Nur in Englisch. Baut seinen "bv"-Code in den gesamten Quelltext ein; das Ergebnis ist daher nur mit Aufwand emigrierbar.


KompoZer: Der KompoZer (Freeware unter mehreren Lizenzen) ist der Nachfolger von NVU (siehe unten ↙). Sein Name knüpft an den Netscape Composer, ein im Netscape Browser implementiertes Webauthoring-Tool, an (zu Einzelheiten der Entwicklungsgeschichte vgl. de.wikipedia.org/wiki/KompoZer). Damit lassen sich einfache HTML-4.0-Seiten, die vom Browser im Quirks-Modus angezeigt werden, erzeugen. Auch meine Stammseite artemes-media.com/index.htm wurde im Oktober 2005 mit dem Netscape Composer (unter Netscape 7.1) angelegt. Allerdings sind weder der Composer noch NVU in der Lage, PHP-Seiten zu öffnen (man muss die Dateierweiterung in htm(l) ändern). Das hat sich zwar mit dem letzten KompoZer-Release 0.8b3 (veröffentlicht 01.03.2010) geändert, doch kommt das Programm nicht mit dieser speziellen Notierung am Kopf von XHTML-Seiten, die der Server als PHP lesen soll, zurecht:


<?php echo '<?xml version="1.0" encoding="UTF-8"?>'; ?>


Die PHP-Klammern um die XML-DTD (dazu s. unten ↙, OpenOffice), die sehr wohl ein standardkonformes Dokument im "Client" (in den meisten Fällen ein Browser) anzeigen, ermöglichen erst, dass die PHP-Notierungen innerhalb des XHTML-Dateigerüsts von der Serversoftware verarbeitet werden können, d.h. dass die XHMTL-Datei als PHP-Seite geparst wird. KompoZer öffnet zwar die Datei, ändert aber das Dokument: So werden die PHP-Klammern zerlegt und unterhalb der Namensraum-Wurzel in den Head-Bereich eingeschoben (soweit ich sehe, davon auch nur der linke Teil hinter der öffnenden PHP-Klammer), die gesamte DTD und alle Head-Notierungen aber in eine einzigen Zeile, die rechts aus dem Bild läuft, "zusammengefasst" - mit anderen Worten: Das Dokument ist spätestens beim Absichern zerstört und muss von Hand zurückgesetzt werden.

Ferner ist auch die neue KompoZer-Version nicht in der Lage, PHP-includes – das sind sozusagen importierte Abschnitte des Quelltextes des Gesamtdokuments ohne eigene DTD, Head-Raum und html-Klammern (also ohne speziellen Dateikopf) – korrekt darzustellen: Der Zeichensatz, das sog. encoding, lässt sich nicht auswählen – mit fatalen Folgen, wenn man z.B. osteuropäische Sprachen im UTF-Code darstellen will. Das Dokument ist nicht mehr lesbar und entzieht sich der weiteren Bearbeitung.

Auch der letzte Release von Amaya (11.3.1, 09.12. 2009) weist noch den PHP-Klammer-Bug um die XML-DTD auf. TIPP: Entweder für die Dauer der Bearbeitung in Amaya/KompoZer die PHP-Klammern entfernen, z. B. eine Kopie dieser Zeile in ein Windows-Editor-Dokument sichern und nachträglich außerhalb der Webeditoren wieder einsetzen – aber bitte nur im Editor und auch nur, wenn das Dokument UTF-8-codiert ist (Auswahl der Codierung im Editor vor Absichern nicht vergessen!). Oder man ziehe einen auf Programming spezialisierten Texteditor wie Arachnophilia zum Kreis der Werkzeuge hinzu. Andere Alternative zum Windows Editor: Notepad++ (entsprechende Versuche z. B. im MS Word/Wordpad sollten besser Gedankenspiele bleiben!).

Die Layer-Technik wird vom KompoZer (begrenzt) unterstützt, hinkt aber in der Darstellung der Strukturansicht hinter Amaya hinterher. Eine nähere Ausführung der Layer-Frage wird hiermit in Aussicht gestellt. Für Erläuterungen zu den in diesem Absatz eingeführten Fachtermini kann ich nur einmal mehr auf SELFHTML verweisen.


Netobjects Fusion 7.5: Auch kurz NOF genannt, ein mächtiges Tool mit eingebautem FTP-Client, wurde bis 2008 als kostenlose Lizenz in Deutsch vom NOF-Club Deutschland zum Download (gegen Registrierung) angeboten. Jüngere Versionen in der englischen Originalsprache (NOF 8.0) liegen gelegentlich PC-Zeitschriften auf CD-ROM bei. Nachteile: Magere JavaScript-Bibliothek. Der Quelltext ist geschützt und kann - jedenfalls von der Programmoberfläche selbst - nur bedingt geändert werden. Bleibt also nur wieder die manuelle Nachbearbeitung mittels SELFHTML im Notepad oder Wordpad, mit Risiken und Nebenwirkungen, da diese Windows-Hilfsprogramme über keinerlei Kontroll- und Monitoring-Mechanismen verfügen - reines Handwerk eben.

 

NVU (sprich "new"): Freeware unter GNU-Lizenz. Deutsch. Eines der besten Freeware-Tools. Erinnert an BlueVoda, unterstützt aber keine Layer-Technik, die zuweilen, z. B. in Verbindung mit Javascript, Sinn macht.

 

Opera: Der Webbrowser selbst ist eigentlich kein WISWYG-Editor, kann aber, da hier, anders als z. B. im Mozilla Firefox, Eingriffe in den Quelltext möglich sind, als solcher benutzt werden. Sehr nützlich: Unter "Ansicht" kann die Seitenstruktur durch Umrahmung von Elementen im Browserfenster kenntlich gemacht werden; zeigt auch Klassen (class) an. Ein CSS-Editor kann als Widget zusätzlich heruntergeladen und installiert werden. Tolles Feature: Tabindizes und Accesskeys (wichtig bei Mobiltelefonen!) werden beim Anwählen mit einem hellblauen, sphährisch funkelnden Rahmen gut sichtbar gemacht. Opera eignet sich hervorragend im Zusammenspiel mit Amaya. Da der fortschrittliche Browser eine ständig wachsende Fangemeinde hat, sollte er neben Firefox und Internetexplorer (IE 8/9) standardmäßig auf Ihrem PC installiert sein, damit Sie das Erscheinungsbild Ihrer werdenden Site speziell für Mobiltelefon-Bildschirme testen können.

Einen entsprechenden Beitrag mit näheren Einzelheiten zu diesem Thema habe ich vor kurzem auf http://www.sy-resolute.de/ publiziert (Startseite etwas nach unten scrollen).

 

Blogsoftware:

Blogs oder Weblogs werden immer beliebter und sind vom Blog-Autor ("Blogger") leicht zu konfigurieren und zu bedienen. Denn bei einem Blog handelt es sich in technischer Hinsicht um ein CMS-System. Im Web erscheint er als eine Seite, die zahlreiche Sonderfunktionen wie: Kommentare zufügen, Kalender, RSS-Feed oder Atom und Suchfunktion, aufweist. Die Vielfalt macht in Verbindung mit einer gut gewählten Schwerpunkthematik auch eine einzelne Seite attraktiv. Die Administrationsoberfläche ist meist mit einem eigenen Online-WYSWIG-Editor ausgestattet und erlaubt die Einbindung von Bildern und Filmchen. Neben textorientierten Blogs wie WordPress gibt es spezielle Blogsoftware, wie z. B. Loudblog für Film- und Soundclips. Wenn sie keine tiefgestaffelte Website benötigen, sondern Ihnen ein Blog für Ihre Zwecke genügt, finden Sie mit etwas Glück einen Helfer, der Ihnen auf einem von Ihnen gemieteten Webspache (mit Datenbank) an einem Samstagnachmittag die Blogsoftware installiert (manche Provider wie Hosteurope bieten auch Space mit fertig vorinstalliertem Blog an; allerdings: Kommt man dadurch auf den Geschmack, könnte die Jacke bald zu eng werden). Aber auch wenn der Freiwillige sich die Zeit nimmt, Sie ein wenig in das System einzuführen, werden Sie bald merken: Eigene HTML-Kenntnisse sind von Vorteil, sei es, um ein Template anzupassen oder spezielle Codierungen in den Text einzufügen. Die an jede Blogsoftware angeschlossene Foren-Community gibt Zeugnis davon. Auch hier liegt also ein genuines Anwendungspotential von SELFHTML.

 

Galeriesoftware:

Die meisten FreeMail-Provider bieten entweder etwas Webspace für eine Internet-Visitenkarte oder eine einfache Fotogalerie an. Letztere gehört meistens auch zur Grundausstattung einer Chat-Community. Eine gute Fotogalerie-Software ist ebenfalls als CMS benutzerfreundlich konstruiert. Dennoch wird sie meistens nicht selbstständig installiert, obwohl dies in aller Regel möglich ist. Anspruchsvollere Galerien sind z. B. die Gallery1 (ohne Datenbank) oder die Gallery2 (mit DB). Sinnvoll ist eine Kombination mit einer Startseite, auf der man sich oder seine Firma vorstellt, in der Gallery aber seine Hobbies oder Produkte.
Freilich ist die Auswahl an Templates mit Pfiff nicht gerade berauschend. Schon ein einfach konfigurierbarer "Return-to-Homepage"-Button (Home-Button) ist nicht in den derzeitigen Versionen enthalten und muss nachträglich eingebastelt werden, am besten unter Anleitung von: SELFHTML.

Generell ist die Home-Button-Frage wie überhaupt alle Verlinkungen mit Elementen, die zur eigenen Site gehören, aber außerhalb solcher Ein-Zweck-Applikationen wie Blogs, Galerien und Gästebucher liegen, ein Schwachpunkt dieses CMS-Typs.

 

Zum Schluss seien einige in diesem Zusammenhang häufig auftauchende Fragen behandelt:

 

Websoftware offline auf dem eigenen PC betreiben?

 

Antwort: Ist prinzipell möglich und sinnvoll, wenn man z. B. die Weböffentlichkeit "auf einen Schlag" mit einer ausgereiften, PHP-modularisierten Site oder einem sinnvoll vorbereiteten Blog (PHP-basiert und Datenbank-gestützt) überraschen will. Dazu benötigen Sie einen eigenen Server. Der verbreitete Apache-Server ist Freeware, aber, schreibt Kai O. Siedler:
"Ein Apache-Webserver installiert sich nicht so leicht. Noch schwieriger wird es, wenn weitere Pakete wie MySQL, PHP oder Perl dazukommen. XAMPP ist eine Distribution von Apache, MySQL, PHP und Perl, die es ermöglicht, diese Programme auf sehr einfache Weise zu installieren."
Eine Einführung in dies Thema behalte ich einer jüngeren Version dieses Dokumentes vor.

 

Warum brauche ich SELFHTML und/oder einen Webeditor, wenn ich doch MS Word habe?

 

Antwort: Das ist vom Ansatz her richtig - ein Text im MS Word oder RTF-Format lässt sich auch als HTML abspeichern oder "umsichern". Tatsächlich finden sich hin und wieder Word-generierte Webseiten im Netz: Meistens einfache Textdokumente, denen man schon deshalb nachträglich kein noch so kleines Admin-Icon oder auch nur einen Smiley zufügen mag, weil der aufgeblähte Quelltext in aller Regel schon bei schwachem Traffic - und das kann selbst bei Breitbandverbindungen zu bestimmten Zeiten vorkommen - lange Ladezeiten der Seite bewirkt. Die Folge: Viele Besucher brechen den Seitenaufruf vorzeitig ab. Der Quelltext einer Word-html-Seite wirkt besonders für Anfänger chaotisch und undurchschaubar.

Abhilfe: Speichern Sie Ihr MS-Word-Dokument als HTML-Seite ab. Dann laden Sie die Seite in einem WISWYG-Webeditor, der über eine "Quelltext-bereinigen"-Funktion verfügt. Hier leistet wieder Amaya gute Dienste. Ein sehr empfehlenswertes Programm ist ferner der "HTML Cleaner for Word" (Cleaner.exe, www.wonderstudio.cn). Eine Trial-Version kann von http://www.htmlcleaner.com heruntergeladen werden. Nachteil: Das Programm arbeitet nur mit gleichzeitig installiertem Word.

 

Ist OpenOffice von Sun eine Alternative zu MS Office?

 

Antwort: Grundsätzlich ja - zum "aber" gleich. Das Freeware-Paket OpenOffice von Sun Microsytems, Inc. enthält einen Texteditor namens sWriter. Die damit erzeugten *.odt-Files lassen sich in gängige MS-Office-Formate-exportieren (umgekehrt kann OpenOffice u. a. Word- und RTF-Dateien importieren), was den Datenaustausch mit Anderen erleichtert. sWriter-Files sind ferner in Hypertext-Formate exportierbar:

 

1. HTML 4.0 Transitional (Menü "Datei" → "sichern unter"). Dies Exportformat ist freilich nicht zu empfehlen, denn absehen davon, dass es nicht der neueste Dokumenttyp HTML 4.01 ist, wird im Exportvorgang auch keine Dokumentyp-Definition (DTD; macht das Dokument maschinenlesbar) angelegt, so dass die Dokumente im Quirks- und nicht im standardkonformen Modus angezeigt werden. Zudem generiert OpenOffice hier alle Tags in GROSSschreibung, eine Migration zu XHTML ist damit erschwert: Die Seite muss wieder in einem Webeditor wie beispielsweise Arachnophilia, welcher Tags automatisiert von Upper- auf Lowercase umstellen kann, umgearbeitet werden.

 

2. XML/XHTML 1.1 (Menü "Datei" → "Exportieren"). Dies ist eine sehr fortschrittliche, weiterungsfähige Doctype-Variante, die hier deshalb vollständig mit DTD und Namespace (3. Zeile) zitiert sei:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
      "http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 

Öffnen Sie einmal in Ihrem Firefox-Browser mit den Tasten strg + u den Quelltext dieses Dokuments: Richtig, auch dies Essay wurde mit OpenOffice erzeugt! Ich habe nur einige kleine Nachbearbeitungen zugefügt, zum Beispiel das Inhaltsverzeichnis (mit Amaya) und einen Meta-Tag zu meiner Autorschaft.

 

Die Meta-Tags (dokumentbeschreibende und anweisende Tags im Head-Bereich) werden nach der Dulin-Core-Methode formuliert, vgl. http://dublincore.org/. Wer sich damit näher ausandersetzen will und, sofern zusätzliche DC Terms eingefügt werden sollen, auch muss, sollte entweder über gute Englischkenntnisse verfügen oder sei hiermit alternativ wieder auf den Sinn und Nutzen des deutschen SELFHTML, welches einen Übersichtsartikel über DC enthält, verwiesen.

SELFHTML ist auch deshalb ratsam, weil durch den Export aus dem OpenOffice-Writer der XHTML-Quelltext eines simplen Schriftsatzes zu einem umfangreichen text/css aufbläht werden KANN, je nachdem, wie viele Formate Sie verwenden (Absätze, Schriften, Einrückung, Überschriften etc.). Die Ergänzung des text/css oder sein Export und weitere Anpassung in einem externen *.css-File erfordert schon etwas intimere HTML-Kenntnisse. Eine bei eiliger Tipperei vergessene Tag-Klammer macht in HTML 4.0/4.01 transitional noch nicht allzu viel, zumal wenn eine Seite ohne DTD im Quirks-Modus vom Browser gelesen wird. In der HTML-4.01-strict-Variante oder gar XTHML sind die Regeln strenger, eine schlampig gemachte HTML-Notierung lässt Ihr Dokument in Browsern mit korrekter Anzeige (wie Firefox, Opera etc.) kunterbunt aussehen.

 

Post Scriptum: Und was ist mit Dreamweaver? Der soll doch einfach und intuitiv zu bedienen sein?

 

Antwort: Nun, der Adobe Dreamweaver kann alles, was hier beschrieben wurde, selbstverständlich einen Word-Quelltext säubern, sauberes CSS und XHTML erzeugen, alle möglichen Medien einbinden und noch viel mehr. Einfach zu erlernen ist dieses Autorensystem auch (Kautele: Übung macht den Meister ...) ABER: Als Adobe-Produkt kostet das aufwendige Programm auch eine Kleinigkeit. Mit dem Inhalt von Sohnemann's Sparschwein kommt der an die Gratis-Kultur der Freeware-Netzangebote gewohnte User da nicht allzu weit:-/

Ganz abgesehen davon: Trotz allen Komforts und implementierter Hilfe erfordert auch die Bedienung des Dreamweaver Grundkenntnisse in HTML/XTML und CSS - und die erwirbt man sich ganz gratis mit SELFHTML.

 

13.03. 2010

 

TOP

 

Version 0.2 | 30.03. 2010 | Einige Rechtschreibfehler bereinigt; Styles erweitert.

Version 0.3 | 31.03. 2011 | Hinweise zu Arachnophilia, zu Praxisbeispielen Tabindex, Accesskeys unter "Opera" sowie Abschnitt über Netscape Composer und KompoZer 0.8b3 eingefügt