Das Web 1.0 lebt!

Kennt noch jemand das Web 1.0? Es bestand ausschließlich aus mehr oder minder handgestrickten Hypertext Markup Language (HTML)-Webseiten (für mich zumindest). Und für’s User-Feedback bot der Provider eine „Gästeseite“ an. Ja, richtig, eine Kommentarmöglichkeit für die ganze Homepage.

Als jüngst einmal ein Update meines Werkverzeichnisses anstand, das ich weiterhin auf meiner Web 1.0-mäßigen Homepage stefanhetzel.de führe, dachte ich mir: Ich muss den jungen Leuten jetzt doch mal zeigen, wie man Internetseiten gemacht hat, bevor es Content-Management-Systeme (CMS) wie WordPress, Typo3 oder Joomla! gab.

Im Prinzip geht das so:

SCREENSHOT 1 – Homepagebau im Web 1.0-Stil

Im Zentrum steht ein Text-Editor, hier PSPad (linke Bildschirmhälfte im Hintergrund), in den man seinen Content eingibt und lokal als HTML-Datei abspeichert. Der Editor ist via File Transfer Protocol mit dem Web-Server des Providers verbunden (Spalte ganz links). Ist man mit der Eingabe fertig, lädt man die HTML-Datei auf den Server und sie steht online, fertig. Will man später etwas ändern, lädt man eine lokale Kopie der Datei auf seine Festplatte runter, macht die gewünschten Änderungen und lädt die neue Version wieder hoch, dabei die alte überschreibend.

Der HTML-Quelltext meines Werkverzeichnisses beginnt so:

SCREENSHOT 2 – HTML-Quelltext unter PSPad

Ca. 80% dieses Ausschnitts besteht aus Anweisungen, die für den Internetnutzer unsichtbar bleiben. Die ersten zwei Zeilen bezeichnen den Dokumenttyp, die Deklarationen im Header-Bereich die verwendete Version von HTML Tidy (wird gleich erklärt), den Zeichensatz des Dokuments (hier: „Latin-1, westeuropäisch“), den Herausgeber der Seite und das eingebundene Style Sheet (wird auch gleich erklärt).

Auch wenn es hier nicht so aussieht: Im Grunde sind HTML-Quelltexte für Normalsterbliche gut lesbar. Im body-Bereich der Datei kann der Anteil unsichtbarer Text-Anteile schon mal auf unter 20% sinken.

Das für den Laien immer wieder Irritierende ist, dass es für „das Internet“ egal ist, ob ein Quelltext relativ human aussieht wie oben – oder z. B. so:

SCREENSHOT 3 – Dieselbe Datei wie oben, aber „komprimiert“, d. h. ohne menschenfreundliches Layout.

Für die Algorithmen, die den Quelltext online interpretieren, sind beide Darstellungsformen gleichwertig, denn sie haben keine Augen.

Es ist also entscheidend für die Lesbarkeit von HTML-Quelltext, wie er dargestellt wird. Dabei helfen die im Screenshot 2 gut erkennbaren diversen Absatz-Einrückungen. Kurz gesagt: Je tiefer die Einrückung, desto tiefer steht die entsprechende Zeile in der aktuelllen Text-Hierarchie. Haben zwei Zeilen die gleiche Einrückungstiefe, gehören sie auch derselben HIerarchiestufe an.

Ein Tool namens HTML Tidy hilft, bei all dem Kuddelmuddel nicht die Übersicht zu verlieren. Man kann den Quelltext „irgendwie“ eingeben, filtert ihn anschließend mit HTML Tidy und bekommt dann obenstehende Struktur. Macht man einen HTML-Fehler, wird der von Tidy ebenfalls erkannt und entweder automatisch korrigiert oder man wird zur manuellen Korrektur aufgefordert. Das gilt allerdings nicht für Rechtschreibfehler.

Auf Dauer ist das Seitenbauen mit einem Text-Editor dennoch recht ermüdend. Um dieser Malaise abzuhelfen, wurden WYSIWYG*-Editoren erfunden, die sich vor den Text-Editor blenden lassen. KompoZer ist ein solcher (siehe grün gerandetes Fenster im Screenshot 1) und hier werden alle für die spätere Nutzerin unsichtbaren Anweisungen ausgeblendet. Die Arbeit mit einem WYSIWYG-Editor kommt der mit einem CMS schon recht nahe. Man kann auch längere Texte wie in Word „einfach so“ eingeben und formatieren, ohne an irgendwelchen technischen Kram denken zu müssen. KompoZer übersetzt das dann automatisch in gültiges HTML.

*

Mit HTML lassen sich zwar komplette Webseiten erstellen, aber gestalten lassen sie sich damit nur sehr beschränkt. Deswegen wurde ein weiteres Tool erfunden: die Cascading Style Sheets (CSS), die festlegen, wie Inhalte dargestellt werden. Dabei lassen sich beliebig viele HTML-Seiten mithilfe einer CSS-Datei einheitlich gestalten, man muss nur im Header korrekt auf sie verweisen. Im Screenshot 2 geschieht das durch die Zeile

 <link href="css/shcomp.css" type="text/css" rel="stylesheet">

Und so sieht shcomp.css aus (Ausschnitt):

SCREENSHOT 4 – Ein typisches Cascading Style Sheet (Ausschnitt)

Die ersten vier Zeilen sagen hier bsp.weise: Verwende für alle Elemente die Schriftart „Trebuchet MS“ bzw. eine serifenlose Schriftart und richte sie im Blocksatz aus. – CSS-Dateien sind wesentlich abstrakter als HTML-Dateien, auch mag es kontraintuitiv sein, grafische Gestaltungsanweisungen als Text zu formulieren. Und dennoch ist das Prinzip kein Hexenwerk. Am besten, man beschränkt sich auf die Basics und übernimmt komplexere Lösungen en bloc aus den entsprechenden Online-Tutorials. Mir hat SELFHTML immer weitergeholfen.

*

Der Vorteil des Web 1.0 war seine komplette Unabhängigkeit von kommerziellen Plattformen (abgesehen natürlich vom Provider, der aber normalerweise keine Werbung schaltete). Sämtliche Software-Tools ließen sich kostenlos aus dem Netz beziehen, ebenso das Know-how. Man wusste exakt, was man tat und wie es umgesetzt wurde: schließlich hatte man das System selber aufgesetzt.

Der Nachteil war der geringere Vernetzungsgrad: Man wurde nicht so leicht gefunden, denn man betrieb ja sozusagen ein Standalone-Unternehmen. Aber ist das im Web 2.0, das um mehrere Größenordnungen gewaltiger ist als sein Vorgänger aus den Neunziger- und frühen Nullerjahren, wirklich besser?

Sei’s drum, für mich bleibt die handgestrickte, werbefreie Homepage der Inbegriff einer Form publizistischer Freiheit, wie sie das WorldWideWeb erstmalig ermöglichte.

Danke, Tim Berners-Lee!


* What You See Is What You Get
Advertisements
Das Web 1.0 lebt!