Schöne Houmpäidsch! - Wie macht man so etwas?

Das werde ich oft gefragt, meistens von Altersgenossen, die ebenfalls vom Kompjuterbazillus infiziert wurden. Es gibt bereits soviele Anleitungen, so dass es auf eine mehr oder weniger nicht ankommt.
Hier ist meine: Ich beschreibe dabei nicht, wie es gemacht werden muss, ich beschreibe nur,  auf ca. vier DIN A4 - Seiten, wie ich dabei vorgehe.
Ich vermittle Informationen in Wort und Bild, die Information steht im Vordergrund, d.h., ich verzichte auf Animationen und alles, was die Ladezeiten verlängert und keine Nachrichten enthält. Bilder werden erst geladen, wenn bereits Text gelesen werden kann. Weil es sich um umfangreiche Texte handelt, verzichte ich auf eine Unterteilung der Seiten und auf Randleisten. Für die Darstellung längerer Texte ist eine möglichst große Bildfläche wichtig, damit der Leser sich an den Absätzen orientieren kann. Wer seine Interessen mit diesen Vorgaben im Einklang sieht, kein Geld für Spezialwerkzeuge ausgeben möchte, kann seine Informationen mit einfachen Werkzeugen netztauglich verpacken. Die Werkzeuge sind menügesteuert, selbsterklärend und untereinander sehr ähnlich in der Handhabung. Ich beschreibe daher nicht die Handhabung der Werkzeuge im Detail, sondern die grundsätzlichen Arbeitsschritte und die technischen Erfordernisse.

Die Vorgaben des Anbieters müssen zuerst durchgelesen werden. Diese betreffen zulässige Dateinamen, den Namen der Hauptseite, zur Verfügung stehenden Speicherplatz und sonstige Festlegungen. Zur Übertragung auf den Rechner des Anbieters (Server) stellt dieser geeignete und einfach zu handhabende Werkzeuge zur Verfügung. Beachten Sie auch die Angebote des Netzanbieters an kostenlosen Beschreibungen und die Hinweise zur Anmeldung bei den Suchmaschinen. Sollte Ihr Anbieter keine entsprechenden Informationen bieten, schauen Sie einfach bei t-online nach.

HTML nennt man die Programmiersprache, mit der die Informationen codiert werden müssen. Man kann nun diese Sprache erlernen und seine Seiten mit dem (Windows-) Editor erstellen. Mit dem Editor erstellte Dateien müssen in der Form: name.htm abgespeichert werden. HTML- Beschreibungen können aus dem Netz kostenlos heruntergeladen werden.
Es geht aber viel einfacher, wenn man den im NETSCAPE Communicator integrierten COMPOSER verwendet. Man schreibt einfach drauf los, wie mit einem Textsystem und speichert die Datei mit einem einfachen Namen, wobei der Zusatz .htm automatisch ergänzt wird. Sobald die Datei erstmals gespeichert wurde, kann diese mit jedem Brauser gelesen werden. Dabei wird der automatisch generierte HTML-Code nicht sichtbar. Sie können jetzt auch mit der Funktion "Seite bearbeiten" (im Datei-Menü) zum Composer wechseln. Vergessen sie nicht, ab und zu zu speichern (save). Mit der Funktion "Vorschau" (preview) wechseln sie zurück zum Navigator. Tun Sie das hin und wieder, denn der Composer zeigt, besonders bei eingebundenen Bildern, eine abweichende Bildschirmdarstellung.
Mit dem Editor können Sie den HTML-Code lesen und verändern. Man sollte sich für ein Werkzeug entscheiden (hier: Composer), weil es zu Inkompatibilitäten zwischen diesen Programmen kommen kann. Die ergänzende Verwendung des EDITOR vermittelt die erforderlichen (minimalen) Kenntnisse über die HTML - Sprache. Wer mit dem Internet-Explorer arbeitet, wird zum Bearbeiten der Seite zum EDITOR geleitet.
Längere Textpassagen können mit der Kopierfunktion aus beliebigen Textdateien übernommen werden, allerdings gehen die meisten Formatierungen dabei verloren. In den Menüleisten des COMPOSER finden Sie alle zur differenzierten Ausgestaltung erforderlichen Funktionen, die Sie auch von Ihrem Textsystem gewohnt sind. Probieren Sie diese einfach aus.
Um den künftigen Leser vor Überraschungen und Frust zu bewahren, empfehle ich, die erstellte Seiten vor Veröffentlichung auch mit dem anderen Brauser (also hier ms explorer) zu betrachten und auch bei verschiedenen Bildschirmauflösungen. Besonders bei eingebundenen Bildern kann es sonst zu Überraschungen kommen. Wenn Sie ein Problem nicht lösen können, rufen Sie einfach eine vorbildliche Seite aus dem Netz ab, analysieren Sie den Seitenquelltext (Funktion "Quelltext" bzw. "page source" im Navigator), nehmen Sie dann die erforderlichen Korrekturen in Ihrer Seite mit dem EDITOR vor. Bei Seiten mit eingebundenen Bildern kann es zweckmäßig sein, dem Leser eine optimale Bildschirmdarstellung und evtl. den Brauser zu empfehlen (z.B.: 800 x 600, NETSCAPE)).

Organisatorisches: Legen Sie einen Ordner an, indem Sie alle zu veröffentlichenden Dateien und die eingebundenen Bilder speichern. Manche Anbieter schreiben den Namen dieses Ordners vor. Die eingebundenen Bilder sollten das JPG - Format haben. Es ist sinnvoll, die Dateinamen so zu wählen, dass diese auf den Seiteninhalt schließen lassen und den der Bilder so, dass auf die Seite geschlossen werden kann, in die das Bild eingebunden wird ("sprechende Namen"). Dies erleichtert Ihnen die Verwaltung des Ordners. Vermeiden Sie, viele Bilder in ein Dokument einzubinden, teilen Sie in mehrere Seiten auf oder bieten Sie die Großdarstellung des Bildes gesondert an. Haben Sie mehrere Themen auf Lager, so bieten Sie zuerst eine Übersichtsseite an. Denken sie immer an die Ladezeiten bei Ihren Lesern.
Zusammenfassend: Machen Sie einen Plan, legen Sie sich eine Strategie zur Umsetzung zurecht. Denn die Seiten wachsen ständig, bei mir sind schon mehr als 220 Dateien im Netz verfügbar.
Bei Anbietern, die eine Bearbeitung der Seiten auf dem Server zulassen (z.B. bluewin.ch), sollte man auch für eine aktuelle Kopie auf dem eigenen Rechner sorgen.

Ein Beispiel zur Erstellung einer Seite:
Rufen sie den Composer auf und schreiben sie einen beliebigen Text, z. B.:


Das ist die Heimseite von Karl Mustermann
usw.
Der Text wird aus einem anderen Dokument übernommen oder mit dem Composer geschrieben.
Beginnen sie mit einer reinen Textdarstellung und machen Sie das Textende kenntlich, z.B. durch den Hinweis auf eine Fortsetzungsseite. 
Wählen sie jetzt die Funktion speichern unter (save as) mit einem einfachen Dateinamen, z.B.: index (dieser Name wird häufig für die Startseite verlangt). Beim erstmaligen Speichern werden Sie nach einem Seitentitel gefragt, der in der obersten Zeile des Bildschirmes erscheinen soll (hier: "Wir basteln eine Heimseite"). Sie können diesen auch später ergänzen. Rufen Sie nun die soeben erstellte Datei mit dem Editor auf (aber den Dateityp alle Dateien wählen), Sie sehen jetzt folgendes:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <meta name="Author" content="Karl Mustermann">
   <meta name="GENERATOR" content="Mozilla/4.7 [en] (Win95; I) [Netscape]">
   <title>index</title>
</head>
<body>
<center><b>Das ist die Heimseite von Karl Mustermann</b></center>
<font size=-1>usw.</font>
<br>Der Text wird aus einem anderen Dokument &uuml;bernommen
oder mit dem <i>Composer</i> geschrieben.<br>Beginnen sie mit einer reinen Textdarstellung und machen
Sie das Textende kenntlich, z.B. durch den Hinweis auf eine Fortsetzungsseite.
</body>
</html>

Eine HTML - Seite muss mindestens den hier rot dargestellten Kommandoumfang haben (das ist dann aber nur eine leere Seite). Der Schrägstrich vor dem Kommando beendet die Gültigkeit des vorher gegebenen Kommandos, diese werden also paarweise und geschachtelt verwendet.
Die erste Zeile hat für uns keine Bedeutung, es ist eine Bemerkungszeile. Die im Kopfteil (head) generierten META - Einträge werden von den Suchmaschinen ausgewertet, der Inhalt kann von Ihnen ergänzt werden. Mit weiteren Meta-Einträgen können Sie den Suchmaschinen Schlüsselwörter anbieten oder Kurzbeschreibungen hinterlegen, oder auch den Zugriff für Suchmaschinen sperren.
Mit dem Kommando
<TITLE> wird der ganz oben am Bildschirm erscheinende Titel vorgegeben.
Mit den hier blau hervorgehobenen Anweisungen werden die Formatierungen des Textes beschrieben, in der ersten Zeile ist die Schachtelung gut zu erkennen.
<center> zentriert die Überschrift,
<b> bedeutet Fettdruck und
<font> stellt von der Standardgröße (12) abweichende Schriftgrößen und Farben dar.
&uuml; codiert das Sonderzeichen "ü" (u Umlaut)
<br> erzwingt eine neue Zeile,
<i> schaltet auf Kursivschrift um.

Wir navigieren: Wir bleiben bei der reinen Textdarstellung. Diese wird sehr schnell eine Bildschirmgröße überschreiten. Wir müssen daher für den Leser Navigationshilfen einbauen, die ein "springen" innerhalb eines Dokumentes oder zwischen zwei Dokumenten (Dateien) ermöglichen. Dazu müssen wir das Sprungziel innerhalb eines Textes (unsichtbar) markieren und die Absprungstelle (sichtbar) als Verknüpfung (link, hier wird zum Beginn des Absatzes verzweigt) kennzeichnen. Ohne diese Markierung wird immer zum Textanfang der Datei verzweigt. Bei längeren Texten sollte man vom Inhaltsverzeichnis sowohl direkt in den entsprechenden Absatz, als auch von diesem Zurück zum Inhaltsverzeichnis springen können. Verwenden Sie niemals eine Unterstreichung, schon gar nicht eine farbige, um eine Textpassage hervorzuheben. Ihre Leser klicken sich sonst einen Wolf.
Das Sprungziel: Setzen Sie den Kursor auf die Stelle, die am Bildschirm oben erscheinen soll, klicken sie jetzt auf Ziel (target) in der Schaltleiste des Composer, geben Sie dann eine Bezeichnung für das Ziel ein (überlegen Sie sich eine Systematik zur Vergabe dieser Namen), z.B.: kap01-01, das wäre die erste Einsprungstelle im Kapitel1. Der Composer zeigt Ihnen später eine Markierung an dieser Stelle, so dass Sie diese Bezeichnungen einfach bearbeiten (ändern) können.
Die Verknüpfung: Nun stellen wir die Verknüpfung (LINK) zu dem Ziel her. Dazu heben wir mit dem Kursor die Textstelle (das Wort) hervor, von dem abgesprungen werden soll und klicken auf die Schaltfläche Verknüpfung (LINK). Wählen Sie jetzt das bereits festgelegte Sprungziel und ggf. auch die Datei, wenn in ein anderes Dokument gesprungen werden soll. Nicht vergessen, die gewählten Einstellungen zu speichern (übernehmen).
Sparen sie nicht mit diesen Navigationshilfen für den Leser, denn dieser möchte blättern können. Im Quellcode (HTML) können wir nun die entsprechend generierten Codierungen betrachten und damit zwei weitere Kommandos (und etwas mehr) kennenlernen:
<hr WIDTH="100%">
<a NAME="INHALT"></a>
<font size=-1><a href="#INHALT">Zur&uuml;ck zur Inhalts&uuml;bersicht</a>&nbsp;
<a href="index.htm#inhalt">Zur&uuml;ck zur Hauptseite</a>
<A HREF="http://home.t-online.de/home/Karl.Mustermann/">Karl's Heimseite</A>

<hr WIDTH="100%"> Diese Codierung wird generiert, wenn Sie eine Horizontale Linie einfügen (Schaltfläche im Composer)
<a NAME="INHALT"></a> Diese Stelle markiert das Sprungziel INHALT (am Anfang des Inhaltsverzeichnisses) in der Seite.
<a href="#INHALT">Zur&uuml;ck zur Inhalts&uuml;bersicht</a> Die Textstelle Zurück zur Inhaltsübersicht wird im Text als Verknüpfung markiert, man springt zum Inhaltsverzeichnis in der gleichen Seite. &nbsp;  Das ist ein Leerzeichen (Zwischenraum)
<a href="index.htm#inhalt">Zur&uuml;ck zur Hauptseite</a>  Diese Verknüpfung verzweigt zum Inhaltsverzeichnis in einer anderen Seite (Dateiname index im gleichen Verzeichnis)
<A HREF="http://home.t-online.de/home/Karl.Mustermann/">Karl's Heimseite</A>Das ist eine Verknüpfung zu einer externen (fremden) Seite, hier muss die vollständige URL eingegeben werden.
Zur Groß- und Kleinschreibung: Der Composer generiert den Code in Kleinschrift. Ich habe mir angewöhnt, die von mir mit dem Editor ergänzten Codezeilen in Großbuchstaben zu schreiben. Das erleichtert die Analyse bei auftretenden Unstimmigkeiten. Der Brauser macht keinen Unterschied zwischen Groß- und Kleinschreibung.
Schreibfeheler: Wer die Tastatur nicht perfekt beherrscht und schnell schreiben möchte, wird vermutlich viele Schreibfehler produzieren: Buchstabendreher, ausgelassene Buchstaben, und zu früh losgelassene Shift - Taste, um nur die häufigsten zu nennen. Ich bringe neu erstellte Texte trotzdem erst ins Netz und merze die Schreibfehler dann nach und nach aus. Meistens findet man diese erst auf dem Papierausdruck. Der COMPOSER bietet auch eine Rechtschreibprüfung, die die gröbsten Fehler finden kann.

Bilder einfügen wollen Sie sicher auch. Das wichtigste dabei ist, neben einer übersichtlichen Darstellung am Bildschirm, dass die Ladezeiten nicht zu groß werden und dass der Leser, während die Bilder geladen werden, schon einmal den Text lesen kann.
Wählen Sie die Bildgröße (den Speicherplatz) nicht zu groß. Reduzieren Sie die Auflösung oder machen Sie einen Bildausschnitt, um das Bild zu verkleinern (ich arbeite mit dem Bildbearbeitungsprogramm Micrografx Picture Publisher). Auch bei einer Großdarstellung reichen 1,5 MB Bildgröße, was dann im komprimierten JPG- Format ungefähr 40 KB erfordert. Sie werden feststellen, dass Sie in den meisten Fällen deutlich darunter bleiben können. Meine Bildgrössen liegen ungefähr zwischen 20 und 40 KB im JPG-Format. In Ausnahmefällen auch darüber, wenn z.B. eine große Glasskala eines Radios noch  lesbar sein soll, bei kleineren Bildern reichen auch 10 KB (jpg). Das Bild (Foto) rechts belegt nur 5 KB Speicherplatz (JPG-Format), Reserven für eine vergrösserte Darstellung sind aber nicht mehr vorhanden. Mimi dagegen (Bild links) macht sich auf 25 KB breit und bleibt auch mit 1,5-facher Vergrösserung noch scharf und wachsam. Die Komprimierung zum JPG-Format erfolgt aber auch in Abhängigkeit von der Art des Fotos, betrachten Sie bitte daher die hier angegebenen Zahlen als Richtwerte.
Zuerst müssen Ihre Bilder in dem Ordner gespeichert werden. Wählen sie nun mit dem Kursor (im Composer) die Stelle, an der das Bild erscheinen soll. Dann Klicken Sie auf die Schaltfläche Grafik (Image) und wählen die Bilddatei aus. "Übernehmen"  nicht vergessen. Weil das Bild jetzt vermutlich zu groß ist, können Sie die Grösse verändern. Dazu markieren Sie erst das Bild und klicken dann nochmals auf Grafik (Image). Die Bildgrösse wird nun durch Überschreiben nur einer Pixel-Angabe verändert, die andere Grössenangabe wird automatisch proportional angepasst (die Grösse der Bilddatei wird dabei nicht verändert, dazu benutzt man ein Bildbearbeitungsprogramm). In diesem Fenster (Grafik) können Sie auch die Anordnung des Bildes (z.B. rechts oder links gemäss obigem Beispiel) einstellen. Bei mehreren Bildern kann es zweckmässig sein, diese nur klein abzubilden und die Großdarstellung anzubieten (siehe meine Radioseite - Bildergalerie). Sie können auch das Bild selbst als Verknüpfung wählen (also anklickbar machen), dies müssen Sie dem Leser aber mitteilen. Es sei nochmals darauf hingewiesen, dass der Composer nicht die richtige Bildanordnung zeigt, also erst speichern und dann Vorschau (preview) anklicken. Man muss viel ausprobieren, kontrollieren Sie auch immer wieder den HTML-Code, fügen Sie evtl. die Kommandos <center> und </center> mit dem Editor ein, um die Bilder zu zentrieren.

Wie findet man meine neue Seite?
Sicher gut. Aber dazu müssen wir noch einige META - Einträge (im Kopfteil der Seite) erzeugen. Auch das überlassen wir dem Composer, indem wir über die Format Menüleiste die Seiteneigenschaften auswählen. Hier geben wir nun eine Kurzbeschreibung der Seite und einige Schlüsselwörter ein, die von den Suchmaschinen ausgewertet werden können. Im gleichen Fenster finden Sie auch die Möglichkeit zur Auswahl einer Hintergrundfarbe für Ihre neue Seite, weiss ist wenig angenehm für die Augen.
Wer Ihre Seite schließlich gefunden hat, möchte Ihnen evtl. etwas mitteilen, vergessen Sie daher nicht Ihre e-mail - Adresse anzugeben, oder benutzen Sie auch dafür eine Verknüpfung. Dazu benötigen Sie folgenden HTML - Code:

<a href="mailto:Karl.Mustermann@t-online.de">schreiben Sie mir eine e-mail</a>
Der Text "schreiben Sie mir eine e-mail" wird als Verknüpfung (LINK) markiert und verzweigt beim Anklicken auf das e-mail - Formular.
Lörning bei duing ist der Anfang. Nachdem Sie nun einen praxisbezogenen Einstieg gefunden haben, können Sie nach und nach die Möglichkeiten der HTML - Darstellung selbst erforschen. Der hier gezeigte Umfang reicht allerdings - im Rahmen der eingangs beschriebenen Voraussetzungen - aus.
Ob Ihre Seite nun tatsächlich gefunden wurde, können Sie durch den Einbau eines Zählers feststellen. Dieser wird entweder vom Netzanbieter zur Verfügung gestellt oder von anderen (z.B.:http://de.nedstat.net/) kostenlos angeboten. Die Installation ist einfach und immer umfassend beschrieben.
Was ist eine Seite?
Zum Schluss etwas Ideologie. Möglicherweise haben Sie meine Seite zum Thema Kauderwenglisch (spietschless) gefunden. Eine Seite ist bei mir eine Seite und keine päidsch. Es gibt eine Hauptseite (Leitseite), eine Übersichtsseite und Unterseiten (Kapitel). Sollten Sie sich für den Begriff ssait (site) entscheiden wollen, so denken Sie bitte daran, dass dies auf Deutsch keinesfalls Seite heißt. Wegen meines Misstrauens bzgl. der Übersetzungsbemühungen
benutze ich bei den Brausern ausschließlich die englischsprachigen Versionen, aber auch Goethes Faust hatte schon Probleme beim Übersetzen:
Hier stock ich schon! Wer hilft mir weiter fort? Ich kann das Wort so hoch unmöglich schätzen, Ich muß es anders übersetzen, Wenn ich vom Geiste recht erleuchtet bin.

Zur Übersichtsseite              Zum Seitenanfang                             Stand: 13.05.2000