Web yourself!

(Überarbeitete Fassung des gleichnamigen Artikels im Mac MAGAZIN 9 / Juli 95, Seite 30-33)

Das World Wide Web (WWW) ist kein Mysterium. Hinter der grafischen Benutzeroberfläche stecken Textdokumente, verfaßt in der "Web-Sprache" HTML. Bernd Wendorf zeigt Ihnen, wie Sie zum Web-Autoren werden.

Welcome to the party! Alle, die bereits im Web unterwegs waren, werden meine Begeisterung für die grafische Aufbereitung der Daten in aller Welt nachvollziehen können. Der Benutzer flitzt per Mausklick um den Globus, die umständliche Eingabe von Befehlen und kryptischen Dokumentadressen entfällt ebenso wie die Monotonie, die auf Dauer schwarze Schrift auf weißem Untergrund auslöst.

Das Web, zu Beginn lediglich textbasiert und auf wenige Institutionen und Teilnehmer beschränkt, hat seit der Einführung des grafisch orientierten Web-Browsers Mosaic im Jahre 1993 enormen Zulauf bekommen. Sun Microsystems, seinerzeit einer der ersten kommerziellen Teilnehmer im Verbund des WWW, schätzt, daß sich die Zahl der Benutzer derzeit (Juni 95) innerhalb von acht Wochen verdoppelt. Die benutzerfreundliche Oberfläche, die in jüngster Zeit entwickelt wurde, hat zu diesem Boom entscheidend beigetragen.

Die erste Wahl beim Web-Browser ist der Netscape Navigator, den Sie sich - falls nicht bereits geschehen - schnellstens auf die Festplatte holen sollten ...! Die Einstellungsmöglichkeiten, inklusive der individuellen Gestaltung von Schrift und Farben, in den Preferences (Menü Options) sind sehr umfangreich, die Handhabung ist intuitiv und (bei Bedarf) über Icons steuerbar. Zudem ist dieser Web-Browser inoffizieller Standard, das heißt er wird schätzungsweise von drei Vierteln aller Web-Benutzer als Surfboard verwandt.

Form und Inhalt

Möglicherweise sehe ich es als passionierter Layouter mit besonderen Augen, aber für mich ist das WWW in erster Linie eine gestalterische Herausforderung. Natürlich sind die Inhalte, die via Web-Seiten verbreitet werden, wichtig. Wenn diese Inhalte in einer ansprechenden Darstellung präsentiert werden, schadet das der übermittelten Information oder Botschaft aber keineswegs. Vielmehr unterstreicht eine wohlgeratene Form die Bedeutung der Informationen, zieht das Interesse auf die jeweilige Seite und animiert zur Lektüre derselben.

Ein Beispiel für einen gelungenen "Eye Catcher" ist diese Grafik auf der (ehemaligen) Home Page des südafrikanischen Providers Internet Solution.

Die zahlreichen Eindrücke, die der einzelne Surfer von den unterschiedlichen Plätzen im Geflecht von Abertausenden Web-Seiten mitnimmt, bleiben nicht alle präsent. Um zu erreichen, daß der Besucher einen Bookmark von Ihrer Seite anlegt, sollte die Mischung aus Form und Inhalt stimmen; man kehrt gerne dahin zurück, wo es einem gefallen hat, und verweilt, wo es sich - auch optisch - lohnt! Doch nun genug der Vorrede, nehmen wir unsere erste Web-Seite in Angriff ...

Die Web-Seite ist Ihre Visitenkarte

Der erste Schritt ist die Idee, eine Vorstellung davon, was Sie der Online-Gemeinde wie präsentieren wollen. Wollen Sie eine thematisch beschränkte Informations-Seite schreiben oder möchten Sie Gleichgesinnte an Ihren Bookmarks, den Früchten Ihrer nächtelangen Surfabenteuer auf den Haupt- und Nebenstraßen des globalen Dorfes teilhaben lassen? Denkbar ist zum Beispiel auch das Abfassen der Seite in englischer Sprache; das erhöht die Zahl der potentiellen Besucher um ein Vielfaches.

Verbinden Sie die inhaltliche Konzeption von vornherein mit einem Layout-Scribble (grobe Skizze auf einem Blatt Papier). Wo wollen Sie welche grafischen Elemente plazieren? Wie soll der Text umbrochen sein, wie sieht es mit Zwischenüberschriften, Listen und der Einteilung in Kapitel aus? Ihrer gestalterisches Talent ist gefordert. In erster Linie, um dem Betrachter das Auffinden der Informationen zu erleichtern. Wenn der Besucher Ihrer Home Page erst lange herumklicken muß, um sich zurechtzufinden, verliert er schnell das Interesse. Viele private Anbieter im Web bemühen sich, möglichst viele Informationen und Links auf einer Seite unterzubringen; das geht zumeist auf Kosten der Übersichtlichkeit und der Lesefreude. Weniger ist mehr!

Klauen oder hacken

Prinzipiell gibt es zwei Möglichkeiten, sich an die Produktion eigener Web-Dokumente heranzuwagen: Entweder Sie übernehmen eine vorhandene Seite im WWW als Vorbild respektive Raster und passen sie durch das Einsetzen eigener Texte und Bilder Ihren Bedürfnissen und Vorstellungen an. Oder Sie erlernen die Grundlagen der Web-Sprache HTML und basteln sich im Do-It-Yourself - Verfahren eine Web-Seite zusammen, an deren Ende Sie dann guten Gewissens Ihren Namen setzen können.

In jedem Fall ist es empfehlenswert, sich beim Surfen im Web Anregungen zu holen. Unabhängig davon, ob Sie die betreffende Seite tatsächlich nachahmen wollen. Bei Seiten, die Ihnen gefallen, wählen Sie im File-Menü von Netscape den Punkt Safe As und speichern das Dokument als Source (Quelle) ab. Auf diese Weise laden Sie eine "nackte" Web-Seite auf Ihre Festplatte herunter: Das reine Textformat, versehen mit den HTML-Befehlen und -Steuerzeichen. Welche Anwendung Ihnen als "Leseprogramm" dient, legen Sie in den Preferences fest (Menü Options / General Preferences / Applications / View Source).
Anschließend können Sie sich diese Seite offline in Ruhe anschauen und dabei einen ersten Eindruck gewinnen, wie die Web-Weber arbeiten. Die Links zu anderen HTML-Dokumenten und den im Web-Browser sichtbaren Bildern, die diese Textdatei einbindet, sind ebenso wie die Formatierungsbefehle mit spitzen Klammern (< und >), den Tags, markiert. Aber bevor wir ans Eingemachte gehen: Surfen Sie einfach ein bißchen und holen Sie sich ein paar Quelldateien des weltumspannenden Spinnennetzes auf Ihren Mac, ich warte so lange ...
Auf dieser Site wurde und wird erstklassige Web-Arbeit geleistet: vh-1derland

Das Handwerkszeug eines Web-Webers

Sie haben sich inzwischen ein HTML-Dokument - eventuell dieses - näher betrachtet? Lassen Sie sich von dem kryptischen Kauderwelsch nicht ins Bockshorn jagen - HTML ist zwar eine Programmiersprache, aber die angewandten Steuerzeichen und Befehle haben Sie schnell intus.

HTML verwendet festgelegte Markierungen, die sogenannten Tags. Diese erzeugen bestimmte Effekte (einen Link zu einem anderen Web-Dokument, Textformatierung et cetera); die wichtigsten entnehmen Sie bitte der Übersicht "Das HTML-Alphabet".
Zum Verfassen dieser Dokumente reicht die einfachste Textbearbeitung (Simple Text) aus, aber die Arbeit mit einem speziellen HTML-Editor wie Web Weaver (u. a. auf der Mac MAGAZIN-CD 9) oder BBEdit ist wesentlich komfortabler. Sie können die Tags, inklusive der Einbindung von Bildern und Web-Adressen (Universal Resource Locator), über das Menü steuern. Ein weiterer Vorteil, der zur besseren Übersicht beim Schreiben umfangreicher Quelltexte beiträgt, ist die optionale Vergabe von Farben an die Text- bzw. HTML-Elemente. Parallel zum Web Weaver sollten Sie Netscape im Hintergrund geöffnet lassen; dies ermöglicht Ihnen die sekundenschnelle Vorschau auf das Ergebnis Ihrer Arbeit (Befehl+E generiert eine "Preview") auf der Basis des gerade bearbeiteten HTML-Dokuments.

HTML - eine simple Programmiersprache

Ich gehe davon aus, Sie wollen zum Verfassen von HTML-Dokumenten den schwierigeren, aber auch kreativeren und lehrreicheren Weg gehen, also nicht einfach nur eine Quelldatei ziehen und die Textelemente durch eigene Worte ersetzen.
In diesem Fall ist es anzuraten, zuerst den "Rohtext" zu schreiben, also das, was auf dem Bildschirm des Surfers erscheinen soll. Es spricht nichts dagegen, dies gleich im Web-Editor zu tun, jede andere Textverarbeitung tut es aber auch. Textformatierungen im "Rohtext" sind überflüssig - belassen Sie es bei einer Anmerkung in Klammern oder ähnlichem. Gleiches gilt für Links oder Bilder, die Sie einbinden wollen. Tabulatoren und Zeilenwechsel sind zum Zweck der Übersichtlichkeit sinnvoll, allerdings sind auch diese als Steuerzeichen in HTML gesondert definiert und werden in ihrer gebräuchlichen Form vom Web-Browser nicht erkannt.

Die Definition eines HTML-Befehls erfolgt durch spitze Klammern und Buchstaben/Schlüsselwörtern dazwischen. Es gibt eine Reihe von HTML-Steuerungselementen (siehe HTML-Alphabet), der Fundus an Formatierungsmerkmalen ist gegenüber der normalen Textverarbeitung allerdings wesentlich geringer. Der eigentliche Clou ist denn auch weniger das Erscheinungsbild der Schrift, sondern die Verankerung von Links und grafischen Elementen.

Das A und O im Web: Links und Bilder

In der "Rohfassung" notieren Sie zuerst einmal nur, daß Sie an einer bestimmten Stelle eine Verbindung herstellen wollen, zum Beispiel: "(LINK Mac MAGAZIN)". Im Web Weaver wählen Sie aus der Liste der Tags (das geht auch direkt über eine Iconleiste) den "Anker". In der folgenden Dialogbox geben Sie die Web-Adresse (zum Beispiel durch Kopieren und Einsetzen aus Ihrer Bookmark-Liste oder "Abschreiben" aus dem Mac MAGAZIN) und den Text ein, der auf der Oberfläche des Browsers, als Link unterstrichen, erscheinen soll. Diese Eintragungen werden nun automatisch mit den HTML-Elementen für einen Link versehen. Das Ganze sieht dann im HTML-Dokument (1) und im Web-Browser (2) so aus:
(1) <a href="http://www.maz.net/macmagazin/">Mac MAGAZIN Home Page</a>
(2) Mac MAGAZIN Home Page

Noch ein Wort zu der Einbindung von Bildern: Wählen Sie keine allzugroßen Ursprungsdateien aus. Das Laden einer 200K großen Grafik auf der Basis einer 14.400er-Modem-Verbindung erzeugt lediglich Frust auf der Seite des Betrachters! Das Bildformat, das der Web-Browser versteht, ist GIF (Graphik Interchange File); versehen Sie Ihr Bild in jedem Fall mit dieser Namensendung, abgetrennt durch einen Punkt. Die entsprechende Speicheroption ist in Photoshop 3.0 bereits enthalten, die Umwandlung mit Hilfe des Grafikkonverters oder dem Programm clip2gif (u.a. auf den Mac MAGAZIN CDs 9 bzw. 10) erzielt ebenfalls den gewünschten Effekt. Mehr zur Herstellung dieser "visuellen Akzente" können Sie im Mac MAGAZIN 10 / August '95, Seite 40f nachlesen (oder online).
In abgewandelter Form ziert es inzwischen wieder die Home Page von Silicon Graphics -- das (ladeintensive) Bildnis eines Surfers.

Mac MAGAZIN LeserForum

Die Einführung in das gar nicht so mysteriöse "Web-Authoring" geht hier zu Ende. Ich hoffe, Sie haben ein bißchen Lust bekommen, sich mit dem Weben am weltweiten Spinnennetz zu beschäftigen. Die Rubrik "Web yourself" möchte Ihnen mit einigen Links helfen, sich weitere Informationen sowie Tips und Tricks zum Schreiben von Web-Seiten zu besorgen.

Das Mac MAGAZIN geht davon aus, daß auch Sie der Gedanke, daß die Früchte Ihrer HTML-Hackerei theoretisch von 30 bis 40 Millionen Menschen gelesen werden, begeistert. Wenn dem so ist und Sie eine "schöne" Web Site anzubieten haben: Lassen Sie die Online-Gemeinde daran teilhaben, indem Sie dem Mac MAGAZIN per elektronischer Post oder Diskette Ihre Quelldateien (inklusive Bilder bitte maximal 300K!) oder die URL Ihrer Home Page zukommen lassen. Wir haben für diesen Zweck das Mac MAGAZIN LeserForum eingerichtet.

Be creative, web yourself!