DM Web Design - hs-fulda.deklingebiel/pub-www/webdesign.pdf · Teil 1 - Webdesign für Anfänger ' Olav Junker Kjær & KnowWare Verlag - Web Design - 16-05-01 - 16:08 5 speicher (RAM)

Web Design

Olav Junker Kjær

Nr. 144 KnowWare7,-DM

Homepages für alle

www.KnowWare.de

KnowWare

© Olav Junker Kjær & KnowWare Verlag - Web Design - 16-05-01 - 16:08

2

WebdesignOlav Junker Kjær1. Ausgabe, 1. Auflage, 1997-11ISBN 87-90027-74-4© Copyright 2001, Autor und KnowWare, Sövänget 1, DK-3100 Hornbäk,Michael Maardt, [email protected] - Karl Antz, [email protected]Übersetzung Karl Antz, Printed in Denmark by OTM, Published by KnowWare

Nachbestellung für Endverbraucher und Ver-trieb für den BuchhandelBonner Presse VertriebMöserstr. 2-3D-49074 OsnabrückTel.: +49 (0)541 33145-20Fax: +49 (0)541 [email protected] Bestellformular findest du online hier:www.knowware.de

Vertrieb für den Zeitschriftenhandel:IPV Inland Presse Vertrieb GmbHPostfach 10 32 46D-20022 HamburgTel.: (040) 23711-0Fax: (040) 23711-215

Worum es gehtHinter KnowWare steht der Gedanke, Wissenleichtverständlich zu vermitteln. Das Projekt starteteim April 1993 mit der Herausgabe des ersten Com-puterheftes in Dänemark. Seitdem sind in vielenLändern zahlreiche weitere Hefte mit Themen rundum den Computer erschienen.

www.knowware.deAuf unserer Homepage findest du Beschreibungenund Bilder aller Hefte, geplante Hefte, Online-Bestellung, Anmeldung für einen kostenlosen News-letter, Tipps & Tricks, Informationen über Sonder-druck für Firmen, neue Autoren, KnowWare in ande-ren Ländern, Autorenberatung, Händlerlisten usw.

Kostenlose DownloadAuf unserer Homepage kannst du kostenlos einigeSeiten aus jedem Heft im PDF Format downloaden.Ausverkaufte Hefte: das ganze Heft als PDF ist ko-stenlos.

Wo und wann sind die Hefte erhältlich?Die Hefte sind im allgemeinen zwei Monate im Han-del, und zwar bei Kiosken, im Bahnhofsbuchhandelund im Buchhandel � bei vielen Verkaufsstellen so-wie im Buchhandel auch länger. Alle beim Verlagvorrätigen Titel sind jederzeit nachbestellbar.

NachbestellungEs gibt 2 Möglichkeiten:• bei deinem KnowWarehändler - Bestellformular

am Ende des Heftes ausfüllen!• beim Bonner Presse Vertrieb, siehe links

www.knowware.de

Einleitung


3

EinleitungWebdesign ist die Kunst, eine Website zu erstellen �also eine Seite oder mehrere miteinander verbundeneSeiten, auf die man mit Hilfe eines Webbrowsers überdas Internet zugreifen kann. Das Heft will Anfängernwie Fortgeschrittenen etwas bringen � also jedem, derlernen möchte, wie man Webdesign praktiziert. Wirwollen unser Thema vom simplen HTML bis zukomplizierten Fragestellungen betrachten.

VoraussetzungenIch gehe davon aus,

• daß Du mit dem Web einigermaßen vertraut bist,weißt, wie Du hier Informationen findest, undAusdrücke wie Link, Browser und dergleichenkennst. Bist Du ein Neuling im Web, empfehleich Dir das Heft Auf ins World Wide Web.

• daß Du weißt, wie Du einen Computer benutztund ein Programm installierst oder was ein Be-triebssystem oder eine Bildschirmauflösung ist,und daß Du keine Scheu davor hast, zu experi-mentieren und in Programmen herumzuprobie-ren.

• daß Du Englisch verstehst, da ein großer Teil derSoftware, der Hilfestellungen und der Doku-mentation nur auf Englisch vorliegt.

• daß Du Zugang zum Internet hast. EinenWebserver benötigst Du allerdings nicht, um mitWebdesign zu experimentieren.

Wie Du dieses Heft benutztDu solltest das Heft am Computer lesen. Es wird Dirmehr bringen, wenn Du herumspielst und die Dingeausprobierst, die ich beschreibe.

Du kannst das Heft systematisch wie ein Lehrbuchlesen oder es als Nachschlagewerk nutzen. Ich gehenicht vom Aufbau bestimmter Programme aus, son-dern von den Möglichkeiten und Begrenzungen imWeb. Allerdings gehe ich darauf ein, wie Du ver-schiedene Editoren benutzt � vor allem Adobe Page-Mill, aber auch Claris Home Page, Netscape Compo-ser und Microsoft Front Page.

AufbauDas Heft besteht aus vier Teilen. Der erste fängt mitden Grundlagen an und erklärt, was für eine einfacheWebsite benötigt wird und wie Du sie zum Laufenbringst. Der zweite Teil befaßt sich näher mit ver-schiedenen Aspekten im Webdesign. Im dritten Teilsehen wir uns etwas kompliziertere Themen an wieMultimedia und Interaktivität � Themen, für die ver-mutlich nicht jedermann Zeit und Lust aufbringt.

Der vierte und vielleicht wichtigste Teil des Heftesbeschäftigt sich mit der übergeordneten Planung einerWebsite: Struktur, Navigation, Textaufbau, Seiten-layout und Typographie. Dieser Teil ist der letzte � ererfordert nämlich einen gewissen Überblick über dietechnischen Möglichkeiten.

Abschließend findest Du ein Sachwortregister undeinen Index. Das Inhaltsverzeichnis befindet sich aufdem hinteren Deckblatt.

Teil 1 - Webdesign für Anfänger


4

Erster Teil � Webdesign für AnfängerWas ist eigentlich Webdesign?Webdesign ist eine Kunst, die folgende Bereiche um-faßt:

Planung und Struktur � Sollen die Benutzer Dei-ner Website sich problemlos in ihr orientieren, mußtDu ihren Aufbau und ihre Struktur genauestens über-denken. Ein notwendiger Punkt ist eine�Benutzeroberfläche� für die Homepage, also Texte,Symbole und Schaltknöpfe, die dem Benutzer beimNavigieren helfen.

Herstellung der eigentlichen Seiten � Die Seitenerstellst Du in einem Webeditor, in dem der Text zu-sammengestellt und formatiert und Grafiken einge-fügt werden. Hier erstellst Du weiterhin die Links zuden anzusprechenden Seiten.

Veröffentlichung � Ist die Website fertig, muß sieim Internet publiziert werden, damit andere auf siezugreifen können.

Wartung und Aktualisierung � Eine Website istim allgemeinen kein endgültiges Produkt. Sie muß al-so ständig modifiziert und aktualisiert werden.

Wie schwierig ist das eigentlich?Bist Du mit der Arbeit in Textverarbeitungen ver-traut, sollte Dir ein Webeditor keine Schwierigkeitenmachen. An einige Dinge mußt Du Dich allerdingsgewöhnen:

Webseiten erlauben, zumindest bisher, nicht sovielKontrolle über Typographie und Layout wie Textver-arbeitungen. Also mußt Du Dich mit einfacherenMöglichkeiten begnügen.

Du mußt mit den unterschiedlichen technischenVoraussetzungen Deiner Leser rechnen. Im Internetgibt es viele verschiedene Computertypen mit unter-schiedlichen Bildschirmgrößen, Auflösungen, Zei-chensätzen und so weiter, wie ja auch die verschiede-nen Browser unterschiedliche Möglichkeiten haben.Es reicht also nicht, daß Deine Webseiten auf DeinerMaschine gut aussehen � sie müssen auch auf ande-ren Computern funktionieren.

Textverarbeitungen bieten keine Möglichkeiten fürLinks, also Verknüpfungen, zu anderen Seiten oderWebsites. Doch gerade das ist einer der spannendstenAspekte im Web.

Schließlich besitzen Textverarbeitungen ebenfallsnicht die Möglichkeit, eine Website zu publizieren.Das ist jedoch nicht weiter kompliziert.

Das Web bietet übrigens viele Möglichkeiten fürEffekte � Stichworte sind Multimedia und Inter-aktivität. Dafür solltest Du Dich aufs Programmierenverstehen und außerdem künstlerisches Talent in ir-

gendeiner Form mitbringen. Für die Erstellung einerprofessionellen und gut funktionierenden Websitesind diese Effekte allerdings nicht absolut notwendig.

Der schwierigste Punkt beim Webdesign ist wohl,seine Informationen in einer logischen und funktio-nellen Struktur zu organisieren und die einzelnenSeiten ansprechbar und lesefreundlich zu gestalten.Das erfordert Planung, Nachdenken und ein Ver-ständnis für die besonderen Möglichkeiten und Be-grenzungen des Mediums. Vergiß nicht � dies ist einneues Medium, das sich grundsätzlich von den bisherbekannten unterscheidet. Aber keine Angst � in die-sem Heft findest Du alle notwendigen Informationen.

Wie läuft das eigentlich ab?Sollen andere Leute über das Internet auf eine Web-site zugreifen, muß sie auf einem Webserver liegen �also einem unmittelbar an das Internet angeschlosse-nen Computer, der die erforderliche Kommunikati-onssoftware enthält. Im allgemeinen mietet man dennotwendigen Raum bei einem Internet-Provider(siehe ab Seite 20). Ist man bei einem der großen In-ternet-Provider wie Compuserve, AOL oder T-OnlineMitglied, kann man seine (private) Website ohne Zu-satzkosten auf deren Server veröffentlichen.

Normalerweise solltest Du allerdings Deine Web-site auf einem gewöhnlichen PC oder Mac testen undsie erst dann publizieren, also auf den Server überfüh-ren, wenn sie fertig ist. Also kannst Du so gut wiealles in diesem Heft ausprobieren, auch ohne Platzauf einem Server gemietet zu haben.

Was für einen Computer brauchst Du?Win95/NT-PCs oder der Macintosh eignen sich beidegut für Webdesign. Ich würde nicht empfehlen, dieSache unter Betriebssystemen wie Win3.1, DOS oderOS/2 auszuprobieren � nicht etwa daß diese Systemenicht in Ordnung wären, aber so gut wie alle neue In-ternet-Software wird für Win95/NT oder das Mac-OSgeschrieben. Im allgemeinen erscheinen neue Pro-gramm zuerst für Win95/NT und einige Monate spä-ter für den Mac � willst Du also unbedingt jederzeitdas Neueste haben, kommst Du nicht an Win95/NTvorbei. Wir gehen hier von Win95 aus, auf dem Maclaufen die meisten Dinge aber genauso ab (die rechteMaustaste auf dem PC entspricht auf dem Mac imallgemeinen einer gedrückten Maustaste).

Und wie stark sollte Deine Maschine sein? Dieunterschiedlichen Programme fürs Webdesign sindnicht besonders anspruchsvoll, aber vielfach benötigtman mehrere Programme gleichzeitig. Viel Arbeits-



5

speicher (RAM) ist also wichtiger als die Prozessor-geschwindigkeit und -kraft.

Ich habe selbst etwa ein Jahr lang professionellesWebdesign auf einem 486er mit 12 MB RAM erstellt.Das ist sicher etwas knapp, und weniger würde ichauf keinen Fall empfehlen � aber genau genommenbraucht man auch nicht mehr.

Ein guter Bildschirm (wenigstens 15 Zoll) und einesolide Tastatur sind im allgemeinen mehr wert alshohe Prozessorkraft.

Selbstverständlich benötigst Du eine Internet-Verbindung auf Deiner Maschine.

Welche Programme brauchst Du?Ein einziges Programm, das alle Bedürfnisse einesWebdesigners deckt, gibt es nicht. Du benötigst einenWerkzeugkasten mit verschiedenen Programmen, unddie Kunst liegt darin zu wissen, wann man welchesWerkzeug benutzt. Die wichtigsten Programme sind:Einige Browser: Netscape Navigator und MicrosoftInternet Explorer (MSIE).Ein Webeditor. Dieses Programm benutzt Du, um dieSeiten zu erstellen. Gute Webeditoren sind z.B.Adobe Pagemill, Netscape Composer, Claris HomePage oder Microsoft FrontPage.Eine Textverarbeitung, z.B. Microsoft Word, zurVorbehandlung umfangreicher Texte.Ein Grafikprogramm, z.B. Adobe Photoshop oderPaint Shop Pro, um Grafik vorzubehandeln.

HTMLWebseiten sind Dateien im DokumentenformatHTML. Das Kürzel steht für HyperText Markup Lan-guage � ein Dokumentenformat, das formatiertenText und Hyperlinks enthält und außerdem mit Bil-dern und anderen Elementen angereichert werdenkann.

Als Webdesigner solltest Du Dir den Unterschiedzwischen HTML-Dokumenten und den üblichenText- und Grafikdokumenten bewußt machen. EineTextverarbeitung hat die Aufgabe, Dokumente zuentwickeln, die im allgemeinen auf Papier ausge-druckt werden. HTML wurde speziell entwickelt, umInformationen in Netzwerken zu veröffentlichen � al-so Informationen, die vor allem auf Computern gele-sen werden.

Das Internet und offene StandardsDie Stärke des Internets ist, daß es auf offene undplattformunabhängige Standards baut.Der Ausdruck �offener Standard� ist zwar etwas un-genau. Im allgemeinen bedeutet er folgendes:

Der Standard ist niemandes Eigentum, niemand hatPatent- oder Urheberrechte an ihm.Der Standard wird von einer nicht-kommerziellenOrganisation koordiniert.Seine Spezifikationen stehen jedermann kostenlos zurVerfügung.Jeder darf Software herstellen, die zum Standardkompatibel ist � kommerzielle wie nicht-kommer-zielle.Plattformunabhängig bedeutet, daß man nicht an be-stimmte Hardware oder ein bestimmtes Be-triebssystem gebunden oder davon abhängig ist. DasInternet stützt sich auf plattformunabhängige Stan-dards und funktioniert dadurch unterschiedslos aufPlattformen wie PC, Mac, Amiga oder UNIX. ImUnterschied hierzu funktionieren die meisten Spiele,Programme, CD-ROMs und so weiter nur auf einerbestimmten Plattform, für die sie entwickelt wurden.Hier ist zu beachten, daß es die Standards sind, dieoffen und plattformunabhängig sind � nicht etwa dieeinzelnen Programme, die in Verbindung mit demInternet benutzt werden. Diese sind im allgemeinenkommerziell und an eine bestimmte Plattform gebun-den.

HTML ist plattformunabhängigWebseiten müssen auf Computern jeder Art lesbarsein � auf Systemen mit den unterschiedlichsten Be-triebssystemen, Bildschirmgrößen und grafischen Fä-higkeiten. Eben das ist die Stärke im Web � man istnicht mehr in einem Durcheinander inkompatiblerSysteme gefangen, sondern jedermann kann mit allenkommunizieren.

Das bedeutet aber auch, daß man nie genau vor-aussehen kann, wie ein anderer Computer eine Seitewiedergibt. Z.B. unterscheiden sich die verschiede-nen Systeme in Schriftgröße, Fensterumfang undBildschirmauflösung. Eine Webseite erlaubt einfachnie den gleichen Grad an Kontrolle wie eine ge-druckte Seite.

Der Formatierungscode in HTML gibt daher auchnicht das genaue Aussehen der Textteile an (�dieserSatz steht in 24 Pkt Helvetica�), sondern stützt sichauf übergeordnete Anweisungen (�dieser Satz ist eineÜberschrift 3. Grades�). Grundsätzlich bestimmt derEmpfängercomputer, wie diese Anweisungen wieder-gegeben werden. In der Praxis geben die üblichstenBrowser allerdings die HTML-Strukturen in etwaidentisch wieder. Man kann also durchaus ein Layoutin HTML herstellen, das die meisten Browser in etwawie geplant wiedergeben werden.



6

HTML ist ein offenes FormatHTML ist ein offenes Format.

Es gibt eine Organisation namens World Wide WebConsortium (W3C), die den HTML-Standard koordi-niert � sie gibt die offiziellen Spezifikationen herausund schlägt anzuwendende Standards vor. Die Durch-schlagskraft dieser Standards hängt aber ganz und gardavon ab, ob Webdesigner und Softwareproduzentendiese Empfehlungen befolgen oder nicht. Z.B. hatNetscape etliche selbstentwickelte Erweiterungen desHTML-Standards eingeführt, die später offiziell ak-zeptiert wurden.

Heute wird HTML vom sogenannten Browserkrieggeprägt � einem Kampf zwischen den führendenEntwicklern von Browsern, Netscape und Microsoft,um die Herstellung des �potentesten� Browsers. Soentstanden etliche neue, nicht standardisierte HTML-Erweiterungen, die vielfach nur auf einem einzelnenBrowser wirken, oder aber verschieden, je nach demBrowsertyp. Ein Webdesigner sollte also einen küh-len Kopf wahren, wenn er mit HTML-Erweiterungenexperimentiert.

HTML funktioniert jederzeitHTML ist degradable (aufwärtskompatibel), was be-deutet, daß man neuen Code in ein HTML-Dokumentsetzen kann, ohne die Funktionsfähigkeit ältererBrowser zu beeinträchtigen. Diese Browser ignorie-ren schlicht Code, der ihnen nicht bekannt ist, undverarbeiten das übrige Dokument wie gewohnt. Einälterer Browser kann also ohne weiteres ein Doku-ment darstellen, das neuere oder nicht standardisierteHTML-Erweiterungen enthält.

Der BrowserDer Browser ist sozusagen das Publikum des Webde-signers. Darum solltest Du gut Freund mit ihm sein:Navigator 2. Wird im Web nicht mehr angeboten, istaber immer noch recht verbreitet. Wäre wohl derkleinste gemeinsame Nenner.Navigator 3. Der meistbenutzte Browser.Navigator Gold 3. Navigator 3, um einen Webeditorerweitert.Netscape Communicator. Der Nachfolger von Na-vigator 3. Eigentlich eine �Suite� von Internet-Software, wobei der Browser Navigator 4 nur eineKomponente von mehreren ist. Eine weitere dieserKomponenten ist der Composer, ein mitgelieferterHTML-Editor. Dabei handelt es sich um eine Weiter-entwicklung des Editors von Navigator Gold 3.

Netscape Navigator wird oft einfach Netscape ge-nannt. Um Verwechslungen zu vermeiden, schreibeich aber Navigator, wenn ich den Browser meine,Composer, wenn es um den Editor geht, und Netsca-pe, wenn die Firma angesprochen ist.

Netscape-Software ist Shareware, die 90 Tage langkostenlos benutzt werden kann. Du findest sie unterwww.netscape.com.

Microsoft Internet Explorer (MSIE) ist der schärf-ste Konkurrent von Netscape. Er entspricht in etwaNetscape Navigator/Communicator. MSIE ist Free-ware � Du findest das Programm unterwww.microsoft.com/ie.Natürlich gibt es auch andere Webbrowser, wieApples CyberDog, die Textbrowser Lynx oder Ama-ya, den Browser für Individualisten Opera, den No-stalgiebrowser Mosaic und viele andere. Keiner die-ser letzteren Browser ist aber recht verbreitet. Es gibtauch noch ältere Versionen von Navigator und MSIE,die sind aber inzwischen recht selten.

Jeder Webdesigner sollte wenigstens MSIE 3 undNavigator 3 haben. Auch wenn Du einen neuerenBrowser wie Navigator 4 hast, solltest Du DeineSeiten möglichst in Navigator 3 und MSIE 3 testen.

Der WebeditorDas wichtigste Werkzeug des Webdesigners ist derWebeditor. Ein solches Programm, das auch HTML-Editor heißen kann, wirkt auf den ersten Blick wieein Zwischending zwischen einem Browser und einerTextverarbeitung: Du siehst Deine Webseiten in etwaso, wie sie in einem Browser erscheinen, kannst aberText in die Seiten einfügen und sie redigieren undformatieren.



7

Welcher Editor?Es gibt mehrere Editoren, die für verschiedene Be-dürfnisse geeignet sind:Adobe PageMill 2.0 ist meiner Meinung nach derbeste Editor für kleinere Websites. Zur Zeit läßt sicheine Probeversion unter der Adressewww.adobe.com downloaden.Claris Home Page ist nicht so unmittelbar ein-leuchtend wie PageMill, aber ebenfalls ein aus-gezeichnetes Programm. Eine Probeversion findestDu unter www.claris.com.Netscape Composer ist ein Bestandteil von NetscapeCommunicator (Netscape Navigator 4). Die vorheri-ge Version hieß Netscape Gold. Der Composer istShareware � Du kannst das Programm 90 Tage langkostenlos benutzen. Studenten können dieses Pro-gramm auch weiterhin kostenlos benutzen. Du findestes unter www.netscape.com. Das Programm hatnicht so viele Möglichkeiten wie PageMill, dafür istes aber praktisch, weil es so eng mit dem Browserverbunden ist.Microsoft FrontPage ist ein sehr guter Editor, dersich besonders für die Arbeit an größeren Homepagesmit zahlreichen Seiten eignet. Eine Probeversion er-hältst Du, indem Du Dich � kostenlos � beiMicrosofts Site Builder Network anmeldest:www.microsoft.com/sitebuilder.

Alle diese Webeditoren gibt es für PC und Mac.Editoren dieses Typs werden oft �WYSIWYG�-Editoren genannt. Die Abkürzung steht für �WhatYou See Is What You Get� � in diesen Editoren siehstDu Deine Webseite also in etwa so, wie sie von ei-nem Browser dargestellt wird. Das ist ein ziemlicherFortschritt gegenüber der vorherigen Generation vonEditoren, in denen man unmittelbar im HTML-Codearbeitete und die Formatierungscodes von Hand ein-setzte. Wenn man wissen wollte, wie die Seite ausse-hen würde, mußte man einen Browser starten.Das populärste Programm dieses älteren Typs ist HotDog (www.sausage.com). Ich würde seine Ver-wendung allerdings nur besonders technisch interes-sierten ober aber leicht masochistisch veranlagtenWebdesignern empfehlen.

Die neuesten Versionen von Word, WordPerfect undPageMaker können ein Dokument auch als HTML-Dokument speichern. Meiner Meinung nach wird esaber noch eine Weile dauern, bis sie sich mit den�echten� Webeditoren messen können. ZukünftigeVersionen dieser Programme mögen aber durchausfür die Produktion von Webseiten mittleren Niveausgeeignet sein. Für Webseiten von professionellemStandard wird man sicher immer spezielle Webedito-ren vorziehen. (Eine sehr lobenswerte Ausnahmestellt das deutsche Produkt StarOffice 4.0 dar, wel-ches weit über die Möglichkeiten von Word und Co.hinausgeht.)

Grundsätzlich beschreibe ich konkrete Ar-beitsaufgaben für Editoren in allen vier oben ge-nannten Hauptprogrammen. Es geht mir aber mehrdarum, die Möglichkeiten und Begrenzungen vonHTML im Web als solche zu beschreiben, und weni-ger um technische Finessen einzelner Programme.Also sollte Dir das Heft auch dann etwas bringen,wenn Du einen anderen Editor als die vier genanntenbenutzt.

Fangen wir an!Der WebordnerBevor Du mit Deiner ersten Webseite loslegst, soll-test Du einen Webordner erstellen. Hier speicherst Dualle Dateien, die zu Deiner Website gehören: HTML-Dateien, Grafikdateien und so weiter. Die Dateienkönnen problemlos in Unterordnern des Webordnersliegen � keinesfalls aber in anderen Ordnern auf Dei-ner Maschine. Da der Inhalt dieses Webordners aufDeinem Webserver gespeichert wird, sollte dieserOrdner auch ausschließlich Webdokumente enthalten.

Wie der Webordner heißt, das ist im Grundegleichgültig � Du kannst ihn also z.B. schlicht�Webordner� nennen. Es spielt auch keine Rolle, woauf der Maschine er gespeichert wird. Das einfachsteist wohl, wenn Du ihn auf dem Desktop oder imStamm des Laufwerks anbringst.

Änderst Du einen Dateinamen oder verschiebst ei-ne Datei in einen anderen Ordner, nachdem Du Linkszu dieser Datei oder aus ihr eingerichtet hast, funk-tionieren sie nicht mehr. Das solltest Du also mög-lichst bleiben lassen.



8

Regeln für DateinamenEs gibt bestimmte Regeln für die Benennung vonDateien und Ordnern im Web. Ein Dateiname darfnur englische Buchstaben, Zahlen, Bindestriche (-)und den sogenannten Unterstrich (_) enthalten. Zwi-schenraum, ä ö ü oder Sonderzeichen wie !�#? usw.sind also verboten.

Der Dateiname muß mit einer Endung abschließen,die den Dateityp angibt. Diese Endung wird durch ei-nen Punkt vom eigentlichen Namen getrennt. EinHTML-Dokument wird durch die Endung .html ge-kennzeichnet � wie z.B. meine_erste_web-seite.html . Die Endungen müssen unbedingt kor-rekt sein. Ordnerbezeichnungen haben keine Endung� und also auch keinen Punkt. Benutze ausschließlichKleinbuchstaben.

Die Regeln für Dateinamen unterscheiden sich jenach Server. Die hier angeführten Regeln gelten aberganz allgemein � benutzt Du sie, werden also ver-mutlich keine Probleme auftauchen. Die StartseiteDeiner Homepage sollte einen besonderen Dateina-men tragen. Im allgemeinen ist das index.html. Je-der Server hat aber seine eigenen Regeln, also solltestDu Deinen Provider fragen.

Ältere Server akzeptieren unter Umständen nur diealten 8.3-DOS-Dateinamen. In diesem Fall benutztDu die Endung .htm anstatt .html. Darauf wirst Duaber vermutlich aufmerksam gemacht.

Deine erste WebseiteWenn Du den Editor startest, stellt er eine leere Seitebereit. Du speicherst sie wie üblich mit File|Save(Datei|Speichern) � natürlich im Webordner oder ei-nem Unterordner - und mit der Endung .html.

Neue leere Seiten erstellst Du über File|New(Datei|Neu). In FrontPage und Composer kannst Dueine neue Seite auch nach einer Vorlage erstellen, wieetwa Standard-Seite, Standard-Homepage, Standard-Clubseite oder dergleichen, die Du an Deine Bedürf-nisse anpassen kannst. Allerdings sind diese Vorlagenim allgemeinen ziemlich geschmacklos und mißlun-gen.

Eine neue Seite zeigt sich zunächst einmal als leeregraue oder weiße Arbeitsfläche. Darüber schwebendie Menüleiste und ein paar Symbolleisten. Wie beieiner normalen Textverarbeitung kannst Du DeinenText unmittelbar in der Arbeitsfläche schreiben.

Eigenheiten von Microsoft FrontPageMicrosoft FrontPage funktioniert auf etwas spezielleWeise. Das Programm besteht aus zwei Komponen-ten: dem FrontPage Editor, einem Webeditor wie dieanderen hier beschriebenen, und dem FrontPage Ex-plorer, einem �Site-Editor�, der die gesamte Website,also den Webordner samt Inhalt, sozusagen einkap-selt. Die einzelnen Seiten der gesamten Website wer-den aus dem FrontPage Explorer heraus aktiviert undbearbeitet.

Der FrontPage Explorer erstellt einige Spe-zialordner im Webordner und führt eine etwas spezi-elle �doppelte Buchführung� mit zwei Ausgaben vonjeder Datei � der Benutzer merkt aber nichts von die-sen Spitzfindigkeiten. Dieses System gibt FrontPageeinige Möglichkeiten zur Verwaltung der gesamtenWebsite, die sich in den anderen Web-Editoren nichtfinden.

Damit muß man aber richtig umgehen:In diesem Programm erstellt man keinen Web-

ordner � statt dessen wählt man im FrontPage Ex-plorer File|New FrontPage Web (Datei|Neu - Front-Page Web).

Man kann auch nicht Dateien ohne weiteres in denWebordner kopieren � man muß File|Import(Datei|Importieren) aktivieren und so Dateien in dasSystem importieren.

Außerdem kopiert man auch nicht den Inhalt desWebordners auf den Server � über das Hilfs-programm FrontPage Publishing Wizard (FrontPageWeb publizieren) werden nur die notwendigen Datei-en überführt.



9

TextText schreibst Du genauso wie in einer Textverarbeitung. Der Umbruch erfolgt automatisch, wenn derSeitenrand erreicht wird. Neue Absätze erstellst Du mit der Return-Taste. Sie werden durch eine Leerzeilegetrennt. Jeder Abschnitt wird in seinem Erscheinungsbild durch einen bestimmten Typ (Stil, Vorlage) ge-kennzeichnet.

Diesen Absatztyp wählst Du in einem Rollmenü auf der Symbolleiste. Normalerweise erscheint hierParagraph (oder Standard bzw. Normal), also normaler Textkörper. Gehst Du das Rollmenü durch,siehst Du eine Reihe von weiteren integrierten Absatztypen. Zunächst wirst Du vermutlich in erster Liniedie sechs möglichen Überschriftstypen benutzen. Aktivierst Du ein neues Absatzformat, wird der gesamteaktuelle Absatz entsprechend formatiert.

AbsatzformateAbsatzformatierungen gelten für einen oder mehrere Absätze.Paragraph (Standard) ist ein Absatz mit normalem oder Körpertext (auch

normal genannt).Heading 1-6 (Überschrift 1-6) sind die integrierten Überschrift-Niveaus �

von der größten (1) bis zur kleinsten (6). Im allgemeinen erscheinen sie fettin graduierter Schriftgröße.

Listen sind Blöcke, die mehrere Absätze umschließen:Bulleted List (Aufzählung) ist eine Liste, deren einzelne Punkte durch einen

vorangestellten Punkt gekennzeichnet sind. Directory List(Verzeichnisliste) und Menu List (Menüliste) erscheinen wie BulletedList (Aufzählung).

Numbered List (Numerierung) ist eine Liste, deren Punkte numeriert sind.Term (definierter Begriff) wechselt mit Definition in Definitionslisten.

Term steht linksbündig und bezeichnet das zu definierende Wort. Der De-finition-Absatz gibt die Definition des Term und hat diesem gegenüber einen größeren Einzug.

Absätze bzw. Punkte in Listen werden normalerweise nur durch einen Zeilensprung getrennt.

Address (Adresse) bedeutet, daß dieser Absatz eine Adresse angibt. Erscheint normalerweise kursiv undmit Einzug.

Preformatted oder formatted (Vorformatiert oder formatiert) � ein spezielles Format, das zum Bei-spiel für Computercode und modernistische Poesie verwendet wird, also Texte, bei denen Einzug undZeilenwechsel inhaltlich wichtig sind. Im Gegensatz zu anderen Absatztypen erfolgt der Umbruch beipreformatted Text nicht nach der Breite des Browserfensters � willst Du die Zeile wechseln, mußt DuReturn drücken. Einen Einzug erstellst Du durch mehrmaliges Drücken der Leertaste � was in normalenAbsätzen nicht möglich ist. Preformatted Text wird mit Schreibmaschinenschrift dargestellt.

AbsatzformatierungPageMill Menü FormatComposer Menü Format oder Paragraph/List PropertiesFrontPage Format|Paragraph oder Paragraph Properties (Format|Absatz)Claris Menü Format

Auf der Symbolleiste findest Du außerdem die Ausrichtung (rechtsbündig, linksbündig,zentriert) und Einzug bzw. negativen Einzug. Diese Formatierungen gelten ebenfalls fürden gesamten aktuellen Absatz. Andere Formatierungen gelten nicht unbedingt füreinen gesamten Absatz � wie etwa I (kursiv) und B (fett).



10

ZeichenformatierungenFolgende Formatierungen gelten für ein Textstück innerhalb eines Absatzes:

Italic (I) KursivBold (B) FettTeletype (Schreibmaschine) (TT) Text erscheint in Schreibmaschinenschrift, also einer Schrift, deren Buchsta-

ben die gleiche Breite haben (meist Courier).Font Size (Schriftgrad) Schriftgröße � von 1 bis 7 graduiert, mit 3 als Normalgröße. Einige Editoren

verwenden die Bezeichnungen von -2 bis +4, das bedeutet aber dasselbe.Font Color Bezeichnet die Textfarbe

Andere Zeichenformate (seltener verwendet):

Big größerer Text; entspricht font size +1Small kleinerer Text; entspricht font size -1Subscript gesenkte Schrift (wie bei H20)Superscript gehobene Schrift (wie bei E=mc2)Strike durchgestrichener Text (wenn man denn unbedingt will)Underline unterstrichener Text (Vorsicht: � wird leicht mit Links verwechselt)

Es gibt auch Zeichenformate, die nicht genau angeben, wie ein Wort aussieht, sondern welche Funktion es imText hat. Man könnte das Sinnkodierungen nennen:

Bedeutung AussehenEmphasis Hervorhebung kursivStrong starke Hervorhebung fettCode für Computercode SchreibmaschinenschriftCitation (Zitat) Zitat oder Hinweis kursivSample Beispiel für Output vom Computer SchreibmaschinenschriftKeyboard (Tastatur) Benutzereingabe SchreibmaschinenschriftVariable Variabel oder Argument für Befehl kursiv im NavigatorDefinition eines Wortes, das am selben Ort definiert wird kursiv im MSIE

Schriftformat ändernPageMill Menü StyleNetscape Composer Format|Character Properties, Registerblatt CharacterFrontPage Format|Font oder Font Properties (Format|Zeichen)Claris Menü Style

Text


11

HTML � ein RückblickWie Du siehst, enthält HTML sowohl Kodierungen,die die Bedeutung eines Textes kennzeichnen(Überschrift, Adresse, Zitat und so weiter) als auchKodierungen, die sein Aussehen definieren(Schriftgröße, Farbe und so weiter). Die ursprüngli-chen Markierungen sind die Bedeutungscodes � inden ersten Ausgaben von HTML gab es nur solche.

Es hat zwei große Vorteile, ein Dokumentenformatauf Sinnkodierungen aufzubauen:Zum einen hängen solche Kodierungen nicht von ei-nem bestimmten Medium ab: eine�Schreibmaschinen�-Kodierung ist sinnlos auf einemTerminal, wo alles in dieser Schrift erscheint, undkursiv bedeutet nichts, wenn der Text jemandemvorgelesen wird, der blind ist. Typographische Ko-dierungen sind von dem Medium abhängig, in demsie erstellt wurden, während Sinnkodierungen in je-dem Medium verwendbar sind.

Zum andern können Such- und Index-Maschineneinen Text auf seine Sinnkodierungen analysieren,also auf der Basis von Überschriften, Wortdefinitio-nen, Listen und so weiter einen Index generieren. Soetwas ist für größere Websites äußerst nützlich, etwafür Universitäten. Und eben das ist einer der größtenVorzüge digitaler Information gegenüber bedrucktemPapier.

Als sich das Web allmählich weiter verbreitete,begann Netscapes Browser seinen Siegeszug, indemer die Formatierung des Erscheinungsbildes von Textunterstützte: Schriftgröße, Text- und Hintergrundfar-be und so weiter. Netscape erkannte früh, daß dasInteresse an grafischen und layoutmäßigen Möglich-keiten in HTML mit der Verbreitung des Web an-wachsen würde.

Das World Wide Web Consortium (W3C), das denHTML-Standard definiert, wollte zunächst nichts vonNetscapes Erweiterungen wissen und arbeitete an ei-nem eigenen Standard HTML 3.0. Die Öffentlichkeit,das heißt die Webdesigner und Browserbenutzer,wählte aber Netscapes Weg, wodurch W3C plötzlichdie Kontrolle über die Entwicklung von HTML ver-lor. Erst als man in den sauren Apfel biß, HTML 3.0aufgab und statt dessen HTML 3.2 vorschlug, einenStandard, der die populärsten und durchdachtestenErweiterungen von Netscape einschloß, erhielt W3Cwieder Bedeutung.

W3C versucht nun, durch die Einführung vonStyle-Sheets HTML wieder auf Kurs zu bringen. Dasist eine Erweiterung von HTML, die ohne doppelteArbeit die technischen Vorteile von Sinnkodierungenund erweiterter visuell-typografischer Kontrolle mit-

einander zu verbinden versucht. Style Sheets werdenaber noch nicht allgemein unterstützt.

Text und ZeichenHTML unterstützt alle Zeichen im ISO-8859-1-Zeichensatz, der alle Buchstaben der westeuro-päischen Sprachen enthält, also unter anderem Ñ, é,ÿ, Ç, und, nicht zu vergessen, ä, ö und ü.

Leider gibt es keine sichere Kodierung für einenGedankenstrich � man muß den normalen Trenn-strich benutzen. Typographische Anführungszeichenwerden ebenfalls nicht unterstützt � also benutzt mandas Zollzeichen " oder französische Anführungszei-chen (» «).

Mathematische Symbole oder Zeichen anderer Al-phabete lassen sich in HTML nicht unmittelbar be-nutzen.

ZeilenwechselEinen festen Zeilenwechsel ohne Absatzwechsel er-zielst Du mit Umschalt+Return. Ein solcher Zeilen-wechsel führt im Unterschied zum Absatzwechselkeine Leerzeile mit sich, und der Text vor und nachdem Zeilenwechsel gehört zum selben Absatz. Zei-lenwechsel zwischen Überschrift und Textkörper istzum Beispiel nicht möglich, da das verschiedene Ab-satztypen sind.

Übrigens hat Netscape Composer eine Be-sonderheit: Die Return-Taste setzt einen Zei-lenwechsel statt eines Absatzwechsels bei Kör-pertext-Absätzen, aber einen Absatzwechsel beimWechsel zu einem anderen Absatztyp.

LeertasteIn HTML läßt sich die Leertaste nicht für die Defini-tion des Textabstandes benutzen. HTML akzeptiertZwischenräume nur als Trennung von Wörtern ge-geneinander: mehrere Leerstellen nacheinander wer-den als eine einzige betrachtet, und Leerstellen vorund nach einem Absatz, also vor und nach seinemText, sowie leere Absätze werden ignoriert.

Willst Du dennoch Zwischenräume typographischbenutzen, etwa wenn Du die erste Zeile eines Absat-zes einrücken willst, machst Du das mit dem Sonder-zeichen nonbreaking space, also über Umschalt +Leertaste. FrontPage und Claris Home Page unter-stützen leider keinen nonbreaking space, also mußtDu ihn in diesen Programmen mit HTML einsetzen,siehe Seite 29. Tabulatoren werden in HTML nichtunterstützt.

ÜbungenNun solltest Du in der Lage sein, ein normales Text-dokument zu schreiben. Um Dich mit dem Editor

Text


12

vertraut zu machen, solltest Du eine Seite mit Über-schrift und Textkörper, ein paar Listen und eingezo-genen und zentrierten Text schreiben, möglichst mitein paar kursivierten oder fetten Wörtern und mitverschiedenen Schriftgrößen und -farben. Schreibeein paar mehrzeilige Textabsätze und sieh Dir an, wiesie je nach Fenstergröße umbrochen werden.

Elemente und EigenschaftenAlle Elemente einer Webseite haben bestimmte Ei-genschaften � ein Bild hat eine Größe, eine Seite eineHintergrundfarbe und so weiter. Jeder Editor hat sei-ne eigene Methode, um diese Eigenschaften der Ele-mente darzustellen und zu modifizieren. Hier zeigendie Editoren sozusagen Persönlichkeit.

FrontPage und Netscape Composer haben etlicheDialogfelder für die Eigenschaften der verschiedenenElemente, während PageMill und Claris HomePagemit einem �schwebenden� Feld arbeiten, dessen In-halt je nach den Eigenschaften des gewählten Ele-ments wechselt.

FrontPageWenn Du in FrontPage mit der rechten Maustasteein Element auf der Seite anklickst, erscheint einkleines Menü, in dem Du die Properties oder Eigen-schaften dieses Elements definierst. Normalerweisehast Du die Wahl zwischen mehreren. Page Proper-ties sind Eigenschaften der ganzen Seite, Font Pro-perties beziehen sich auf die Schrift (gegebenenfallsim markierten Bereich) und Paragraph Propertiesauf den gesamten aktuellen Absatz. Klickst Du einBild an, erscheinen die Image Properties , klickst Duauf eine Zelle in einer Tabelle, werden die TableProperties und Cell Properties aktiviert und so weiter.Wählst Du einen dieser Eigenschafts-Punkte (Proper-ties), erscheint ein Dialogfeld, in dem Du die Eigen-schaften des gewählten Elements sehen und modifi-zieren kannst.

Die Eigenschaften für das aktuelle Element � Bild,Formularfeld und so weiter � findest Du am Ende desEdit(Bearbeiten)-Menüs. Die Properties für Tabellenund Tabellenzellen findest Du im Table(Tabelle)-Menü.

Netscape ComposerKlickst Du im Netscape Composer mit der rechtenMaustaste die Seite oder ein Element auf ihr an, er-scheint ein kleines Menü, in dem Du die Propertiesdes aktuellen Elements festlegst. Im allgemeinen gibtes mehrere Wahlmöglichkeiten. Page Properties be-zeichnen die Eigenschaften der gesamten Seite. Cha-racter Properties gelten für die Schrift (gegebenen-

falls im markierten Bereich), Paragraph/List Proper-ties für ganze Absätze.

Klickst Du ein Bild an, sind die Image Propertieszugänglich, in einer Tabelle erscheinen die TableProperties und so weiter. Wählst Du einen dieserProperties-Punkte, erscheint ein Dialogfeld, in demDu die Eigenschaften des gewählten Elements sehenund modifizieren kannst.

Diese Properties-Wahlmöglichkeiten der rechtenMaustaste sind außerdem auch über das Menü For-mat zugänglich.

PageMillPageMill hat ein�schwebendes Fenster� na-mens Inspector. Ist diesesFenster nicht sichtbar, akti-vierst Du es über View|ShowInspector. Hier kannst Du dieEigenschaften des aktuellenElements sehen und modifi-zieren.

Der Inspector hat vier Re-gisterblätter: Frame zeigt dieEigenschaften für den aktuel-len Frame, ist also nur aktiv,wenn die Seite ein Framesetenthält. Page zeigt die Eigen-schaften, die für die gesamteSeite gelten � Hintergrundfar-be und dergleichen. Form bietet die Eigenschaftendes aktuellen Formulars an, ist also nur aktiv, wenndie Seite ein Formular enthält. Object endlich bietetdie Eigenschaften des aktuellen Objekts an: Grafik,Tabelle, Formularfeld oder dergleichen.

Ist kein Element markiert, öffnet sich der Inspectorim Feld Page. Markierst Du eine Grafik, eine Tabelleoder dergleichen, wird in das entsprechende Eigen-schaftsfeld gewechselt.

Claris Home PageDie Eigenschaften eines Elements werden in einem�schwebenden Feld� namens Object Editor festgelegt.Ist dieses Feld unsichtbar, aktivierst Du es mit Win-dow|Show Object Editor. Der Object Editor hat dreiRegisterblätter: Basic, das die normalen Eigenschaf-ten enthält, Advanced mit den eher speziellen, undBoth, das beide gleichzeitig zur Verfügung stellt �falls man also genügend Platz auf dem Bildschirmhat.

Farbe und Hintergrund


13

Farbe und HintergrundDies sind Eigenschaften der gesamten Seite. Background bezeichnet die Hintergrundfarbe, Body text die Text-farbe � außer dort, wo Du dem Text eine andere Farbe zuteilst. Normal links ist die Farbe für Links � im allge-meinen Blau, Visited Links bezeichnet die Farbe für Links, die auf bereits besuchte Seiten verweisen � im al l-gemeinen Lila, und Active Links gibt die Farbe von Links an, die gerade durch Anklick aktiviert sind.

�Default� bedeutet, daß die Farbe im Dokument nicht spezifiziert wird. In diesem Fall erscheint die Seite mitden Farbeinstellungen des benutzten Browsers � normalerweise mit schwarzem Text vor grauem Hintergrund,weil der Browser standardgemäß so eingestellt ist.

Seiteneigenschaften ändernAdobe PageMill Im Inspector, Registerblatt Page.Netscape Composer Format|Page Colors and Properties, oder Page PropertiesMicrosoft FrontPage File|Page Properties (Datei|Seiteneigenschaften) oder Format|Background (For-

mat|Hintergrund) oder Page Properties(Seiteneigenschaften)Claris Home Page Edit|Document Options

PageMill bietet über View|Show Color Panel eine Palette mit 16 Farben an, die Du auf die gewünschten Felderim Inspector oder auf markierten Text ziehen kannst.

TitelJedes HTML-Dokument hat einen Titel, der nicht mit dem Dateinamen identisch ist.Den Dateinamen sieht nur der Webdesigner, der Titel dagegen ist allgemein zugäng-lich: er steht in der Titelleiste des Browsers; wird ein Lesezeichen für diese Seite erstellt, erscheint dieser Titelim Lesezeichen-Menü. In PageMill gibst Du den Titel eines Dokuments im Feld Title: über dem Fenster an. Inden anderen Editoren setzt Du ihn am gleichen Ort ein wie die übrigen Eigenschaften der Seite (siehe oben).

Der Titel kann Zwischenräume und Sonderzeichen enthalten. Die Seite mit der Dateiname meine_erste_webseite.html mag den Titel Meine erste Webseite! haben. Ein Titel darf nicht mehrals 63 Zeichen enthalten. Achte darauf, daß der Titel informativ ist und für sich stehen kann � er wird nämlichvon Suchmaschinen, Indizes und Lesezeichen benutzt. �Seite 1� oder �Einführung� sagt wesentlich weniger ausals etwa �T.S. Eliot-Forum � Inhalt�. Die Wörter Website, Webseite oder Homepage solltest Du in einem Titelvermeiden.

LinksEin Link erfordert natürlich zwei Dateien: die Seite, von der der Link angerufen wird, und die Seite, die ihnenthält. Die letztere muß mit einem gültigen Dateinamen gespeichert sein. Zunächst markierst Du den Text, derzu einem Link werden soll.

Link zu einer lokalen DateiDu ziehst die Datei, auf die Du verweisen willst, aus ihrem Ordner oder dem Windows Explorer über den mar-kierten Text und läßt los. In FrontPage kannst Du eine solche Datei aus dem FrontPage Explorer ziehen.

PageMill File|PlaceComposer Insert|Link, dann Choose FileFrontPage Insert|Hyperlink (Einfügen|Hyperlink), dann den Knopf Browse (Durchsuchen), zur DateiwahlClaris Insert|Link To File

In PageMill kannst Du außerdem einen Link zu einer weiteren augenblicklich offenenSeite in diesem Programm erstellen, indem Du das Seitensymbol in der Titelleiste derZielseite auf den Text ziehst, von dem aus verwiesen werden soll, und losläßt.



14

Links zu anderen WebsitesNatürlich kannst Du auch Verknüpfungen zu Seiten einrichten, die sich draußen im Webbefinden, also sogenannte externe Links. Das ist am einfachsten, wenn die Zielseite, mitder verbunden werden soll, im Browser offensteht. In diesem Fall ziehst Du schlicht das Link-Symbol, dasheißt des kleine Kettenglied neben dem Location(Adresse)-Feld in der Leiste von Navigator, auf die Seite imWebeditor und läßt los. Du kannst auch einen Link aus dem Browserfenster in den Editor ziehen. Schließlichkannst Du auch ein Lesezeichen aus dem Lesezeichen-Fenster im Navigator, das Du mit Windows|Bookmark(Fenster|Lesezeichen) aktivierst, in den Editor ziehen.

Einen URL von Hand einsetzenSelbstverständlich kannst Du auch einen Link herstellen, indem Du seinen URL(die sogenannte Internet-Adresse) von Hand eingibst. Vergiß nicht � ein kompletterURL beginnt mit http://.

Den URL für ein Link einsetzenPageMill Du klickst im Feld Link to: im unteren Teil des Fensters, schreibst den URL und drückst ReturnComposer Insert|LinkFrontPage Insert|Hyperlink (Einfügen|Hyperlink)Claris Insert|Link to URL

Einen Link löschenPageMill Markiere den gesamten Text des Links, zum Beispiel indem Du den Link-Text dreifachklickst,

lösche den Inhalt im Link to-Feld und drücke ReturnComposer Link Properties und den Knopf Remove LinkFrontPage Hyperlink Properties (Hyperlink-Eigenschaften) und den Knopf Clear (Löschen)Claris Erfolgt im Link Editor, den Du mit Window|Show Link Editor aktivierst, über Remove Link

Relative und absolute URLsEin Link kann auf zwei verschiedene Arten auf ein anderes Dokument verweisen: Als absoluter URL, der diekomplette Adresse des Dokuments enthält, oder als relativer URL, der angibt, wo sich das Dokument im Ver-hältnis zur Verknüpfungsstelle befindet. Mit einem absoluten URL stellst Du die Verbindung zu einem Doku-ment auf einem anderen Server her � zum Beispiel http://www.server.de/hurra.html. Ein relativerURL verbindet Dokumente auf derselben Website miteinander, zum Beispiel nur gedichte/eliot.html.Absolute URLs enthalten �http:� und die Serverbezeichnung, relative dagegen nur den Dateinamen und, fallsdie Dokumente in verschiedenen Ordnern liegen, die entsprechenden Ordnerbezeichnungen. Weiteres zu Web-adressen findest Du im Heft Auf ins World Wide Web im Abschnitt Jedes Dokument hat seine Adresse. RichtestDu Links zwischen Dateien in Deinem Webordner ein, sorgt der Editor automatisch für relative Links.

Ankerpunkte � Links innerhalb einer WebsiteEin Link verknüpft normalerweise mit dem Anfang der angesprochenen Seite. Du kannst aber auch einen Linkerstellen, der mit einer bestimmten Stelle auf der Seite verknüpft. Das erfordert, daß Du einen sogenanntenVerankerungspunkt an die Stelle des Textes einsetzt, die angesprochen werden soll. Du setzt den Cursor aufdie gewünschte Stelle und gehst dann so vor:

Verankerungspunkt setzenPageMill Edit|Insert Invisible|AnchorComposer Insert|Target (Composer nennt einen Verankerungspunkt target)FrontPage Edit|Bookmark (Bearbeiten|Textmarke) (FrontPage - nur engl. Version - nennt einen Veranke-

rungspunkt bookmark, in der deutschen Version werden - wie in Word - Textmarken gesetzt.)Claris Insert|Anchor

Jeder Verankerungspunkt muß einen eigenen Namen haben. Diese Namen folgen denselben Regeln wie Date i-namen: keine Zwischenräume, Sonderzeichen oder dergleichen. Setzt Du einen Verankerungspunkt, generiertder Editor automatisch den jeweiligen Namen. Ist der Punkt markiert, kannst Du den Namen ändern.



15

Link mit Verankerungspunkt verbindenPageMill Ziehe den Anker auf den markierten Text und laß los.Composer Insert|Link, dann Target aus der Liste Select a named target�FrontPage Insert|Hyperlink (Einfügen|Hyperlink), Registerblatt Open Pages (Geöffnete Seiten), wähle aus

der Liste Bookmark (Textmarke).Claris Im Link Editor #Ankername im URL nach dem Dateinamen einsetzen � handelt es sich um einen

Punkt im selben Dokument, fällt der Dateiname weg.

E-mail-LinkVermutlich kennst Du die �Schreib an ��-Links, die den Browser auf Klick zur Öffnung des E-Mail-Fenstersmit einem Briefformular mit ausgefülltem Adressenfeld veranlassen. So einen Link erstellst Du schlicht, indemDu den URL so formulierst: �mailto:� und dann die E-Mail-Adresse eingibst, zum Beispielmailto:[email protected]. Achtung: hier gibt es keinen Schrägstrich vor der Adresse.Üblicherweise ist der Text des Links ebenfalls die E-Mail-Adresse � so sieht der Leser, worum es sich handelt.

Preview Mode (Vorschau-Modus) � einen Link testenDer Editor hat einen Preview-Modus. In diesem Zustand kannst Du die aktuelle Seite nicht bearbeiten� dafür wird sie aber korrekt dargestellt, und Du kannst Deine Links testen � klickst Du sie an, er-scheinen die entsprechenden Seiten (hoffentlich) auf dem Bildschirm (soweit es interne Links sind �externe werden nicht aktiviert), Hilfslinien in Tabellen verschwinden, und Zeilensprungsymbole undandere �unsichtbare� Zeichen werden verborgen.

Wechseln in den Preview-ModusPageMill Du wechselst zwischen Preview- und Edit-Modus über den großen Schaltknopf rechts in der

Symbolleiste.Composer File|Browse pageFrontPage hat keinen Preview-Modus, Du kannst Deine Links aber testen, indem Du die Strg-Taste hältst

und sie anklickst. Hilfslinien und dergleichen aktivierst oder deaktivierst Du über View|FormatMarks (Ansicht|Formatierungscode).

Claris Window|Preview Page

Test im BrowserIch würde Dir in jedem Fall empfehlen, die Seiten auch in einem Browser zu testen, um zu sehen, wie das Er-gebnis ausfällt. Eine HTML-Datei auf der eigenen Festplatte aktivierst Du im Browser über File|Open File(Datei|Öffnen bzw. Datei|Datei im Browser öffnen) oder aber, indem Du sie ins Browserfenster ziehst.

Wechselst Du zwischen Editor und Browser, darfst Du nicht vergessen, daß die Änderungen, die Du imEditor vornimmst, sich unmittelbar nicht im Browser zeigen � Du mußt die Datei zunächst im Editor speichernund sie dann im Browser erneut laden. Das geht beim PC am schnellsten mit der Funktionstaste F5!

Du kannst außerdem ein Dokument, das im Editor offensteht, unmittelbar an den Browser übergeben:

Eine Seite über einen Browser darstellenPageMill View|Switch To (allerdings mußt Du zunächst einmal über Edit|Preferences|Switch To einen oder

mehrere Browser definieren)Composer File|Browse pageFrontPage File|Preview in Browser (Datei|Vorschau in Browser)Claris File|Preview in Browser

ÜbungErstelle nun zwei Seiten, die durch Links miteinander verknüpft sind. Stelle außerdem einen Link zuwww.yahoo.com her. Teste diese Links zunächst im Editor und dann im Browser.

Grafiken


16

GrafikenWillst Du eine Grafik in Deine Seite integrieren, muß die entsprechende Datei1) in Deinem Webordner oder einem Unterordner liegen2) im Grafikformat GIF oder JPEG erstellt sein � hast Du ein Bild in einem anderen Format, mußt Du es

in einem Grafikprogramm save as/speichern als GIF oder JPEG. Später � auf Seite 21 � erfährst Dumehr zum Thema Grafik.

3) einen gültigen Dateinamen haben, der die Endung .gif oder .jpg (bzw. .jpeg) trägt � keineZwischenräume, Sonderzeichen oder dergleichen verwenden.

Wird eine Grafik in eine Webseite integriert, bedeutet das, daß die Bilddatei mit der HTML-Datei ver-knüpft wird, aber weiterhin wie auch die HTML-Datei als selbständige Datei existiert. Die Bilddatei darfalso keineswegs gelöscht werden, sondern muß neben der HTML-Datei vorhanden sein.

Eine Grafik integrierenAdobe PageMill File|PlaceComposer Insert|ImageFrontPage Insert|Image (Einfügen|Bild)Claris Insert|Image

(Achtung! Netscape Composer hat die schlechte Angewohnheit, Bilder, die in einem anderen Ordner lie-gen als das Hauptdokument, in den Ordner des Hauptdokuments zu kopieren. Das bringt viel Durcheinan-der, kann aber zum Glück deaktiviert werden � Du kreuzt in Image Properties den Punkt Leave image atoriginal location an.)

Du wirst schnell feststellen, daß Grafiken nicht beliebig auf der Seite angebracht werden kön-nen. In einem HTML-Dokument wird das Bild in den Text eingefügt und folgt seinem Verlauf.Soll Deine Grafik für sich stehen, muß sie einen eigenen Absatz haben, das heißt, drücke vorher undnachher Return. Anschließend kannst Du diesen Absatz rechts- oder linksbündig stellen oder ihn zentrie-ren.

Erscheint das Bild in einer Textzeile, kannst Du definieren, ob es im Verhältnis zum Text hochgestellt,herabgesetzt oder gleichgesetzt werden soll. Das macht vor allem bei kleinen Symbolen Sinn, die als zumText gehörig erscheinen, etwa ein Logo mit der Aufschrift �neu�. Du plazierst die Grafik, indem Du dieEigenschaft align auf top, middle oder bottom setzt.In PageMill kannst Du das mit den hier gezeigten Knöpfen in der Symbolleiste errei-chen.

Grafiken erhalten die Eigenschaft alternate text. Eine solche Textalternative erscheint in einem Text-browser oder in normalen Browsern bei deaktivierten Bildern. Dieser Text ist wichtig, besonders für Bil-der, die Links oder Überschriften sind. Mehr und mehr Leute schalten die Grafik beim Surfen ab, um Zeitzu sparen, und es gibt auch Leute, die nur Text browsen können, weil ihr Computer oder Terminal keinegrafische Oberfläche hat, oder weil sie blind sind und der Text verlesen oder in Blindenschrift konvertiertwird.

Alternativer Text wird außerdem in Suchmaschinen indiziert, was bei Überschriften, die nur als Grafikerscheinen, natürlich nicht der Fall ist.

FließtextEine Grafik kann an die rechte oder linke Fensterkante gesetzt und vom Text umflossen wer-den. Das erreichst Du, indem Du die Eigenschaft align auf left oder right setzt. In PageMillbenutzt Du dazu die beiden Schaltknöpfe in der Symbolleiste.

Nun gleitet die Grafik auf der Zeile, wo sie eingesetzt wird, an den Fensterrand. Es kann vorkommen,daß mehrere aufeinanderfolgende �fließende� Grafiken auf derselben Seite kollidieren. Das vermeidestDu, indem Du über Edit|Insert Invisible|Margin Break (in FrontPage Insert|Break, Einfügen|Wechsel) ei-nen margin break einsetzt, das heißt eine Unterbrechung, einen Zeilensprung.

Grafiken


17

Anschließend wird der Text erst unter dem unteren Rand einer rechts- oderlinksbündigen Grafik fortgesetzt. Enthält die Zeile mit dem margin break kei-ne Grafik, hat er dieselbe Wirkung wie ein normaler Zeilenwechsel.

Eine Grafik, die seitenbündig ist, ist dennoch in den Text integriert. Wirdder Text also verschoben oder gelöscht, wird auch die Grafik gelöscht oderverschoben.

SkalierenEine Grafik läßt sich unmittelbar im Editor skalieren � Du ziehst einfach an ih-rer Ecke. Tu das aber lieber nicht! Die Dateigröße wird dadurch nämlich nichtgeändert, und das bedeutet, daß Du ein körniges Bild oder eine viel zu großeBilddatei erhältst. Skaliere sie lieber in einem Grafikprogramm.

Eine Grafik als LinkEine Grafik kann mit einem Text oder für sich allein als Link funktionieren.Du machst ein Bild zu einem Link, indem Du es markierst und dann den Link genauso erstellst wie bei ei-nem markierten Text.Eine Grafik erhält einen blauen Rahmen, wenn sie zu einem Link gemacht wird. Dieser Rahmen ist nichtunbedingt schön � Du kannst aber die border-Eigenschaft der Grafik auf 0 (Null) setzen und ihn so ver-meiden. Allerdings fällt das Bild dann nicht unmittelbar als Link ins Auge. Seine Funktion wird nur deut-lich, wenn die Maus darüber geführt wird und der Cursor zu einer Hand wird. Darum sollte eine rahmen-lose Grafik als Link ihre Funktion auf irgendeine Weise signalisieren, etwa durch ihre Plazierung oder ihrMotiv.

ImagemapsEine Grafik kann in verschiedene Bereiche unterteilt werden, die jeweils einen Link beinhalten. Das nenntman eine Imagemap.

Eine Imagemap bearbeitenPageMill Du doppelklickst auf die Grafik und benutzt die in der Werkzeugleiste aktive Schaltknöpfe.Composer unterstützt Imagemaps nichtFrontPage Du klickst das Bild an, worauf eine zusätzliche Image(Bild)-Werkzeugleiste erscheint.Claris Im Object Editor wählst Du den Schaltknopf Client-Side Image Map: Edit

Mit diesen Schaltknöpfen kannst Du einen viereckigen, rundenoder vieleckigen Bereich der Grafik markieren und anschließendauf normale Weise einen Link herstellen: Bei FrontPage gehst Du jetzt folgendermaßen vor: Wähle diezweite Schaltfläche von rechts, in der deutschen Version Hotspots markieren. Klicke nun auf ein Werk-zeug (Rechteck, Kreis etc.) und �male� auf dem Bild bei gedrückter Maustaste dieses Rechteck. Jetzt öff-net sich automatisch eine Dialogbox, in die Du den Hyperlink für diesen eben definierten Bereich der Gra-fik eintragen kannst.

Imagemaps haben den Nachteil, daß ihre Links nicht erscheinen, wenn der Leser die Bilder im Browserdeaktiviert hat. Also solltest Du außerdem Links erstellen, die als Text-Links zum Bild gehören. Zwarunterstützt HTML 3.2 alternativen Text für einzelne Link-Bereiche � der Netscape Navigator unterstütztdas aber nicht, weswegen Text-Links weiterhin notwendig sind.

Überlege Dir genau, wie Deine Imagemap aussehen soll. Versteht der Benutzer unmittelbar, was dieeinzelnen Bereiche im Bild bedeuten und wohin die entsprechenden Links führen? Imagemaps sind fürden Benutzer oft schwer verständlich.

Wir haben hier eigentlich die sogenannten Client-side-Imagemaps beschrieben � es gibt aber auch eineältere Form, die Server-side-Imagemaps, die ein Programm auf dem Server erfordern, um zu funktionie-ren. Nach dem allgemeinen Erfolg der Client-side-Imagemaps sind Server-side-Imagemaps inzwischenbedeutungslos.

Grafiken


18

HintergrundgrafikDu kannst Deine Seite sozusagen mit einem Hintergrundbild �tapezieren�. Dieses Bild wird vertikal undhorizontal bis an den Fensterrand wiederholt. Ist es größer als das Fenster, wird es beschnitten. DiesesBild muß eine Grafik im Format GIF oder JPEG sein. Vielfach werden Texturen als Hintergrund ange-wendet.

Eine Hintergrundgrafik wird an der gleichen Stelle eingefügt wie die anderen Eigenschaften einer Seite.Sei vorsichtig, wenn Du Hintergrundtexturen oder Bilder benutzt. Vor einem solchen Hintergrund wird

der Text leicht unlesbar. Die Hintergrundgrafik sollte möglichst selbst kontrastarm sein, aber in großemKontrast zum Text stehen.

Wird eine Webseite geladen, erscheint sie zunächst einmal nur mit ihrer Hintergrundfarbe � die Hinter-grundgrafik erscheint erst nach einer Weile. Du machst den Einlesevorgang angenehmer für das Auge, in-dem Du der Seite eine Hintergrundfarbe gibst, die der dominierenden Farbe des Hintergrundbildes nahe-kommt. Ist das Hintergrundbild vollständig eingelesen, verschwindet die Hintergrundfarbe.

ÜbungenErstelle eine Seite mit Hintergrundbild und Vordergrundgrafiken. Hast Du keine Bilder, kannst Du sie imWeb leihen: Du findest eine Seite mit Bildern, klickst mit der rechten Maustaste ein Bild an und wählstSave Image As� (Bild speichern unter...).

Bist Du fertig, liest Du die Seite in Deinen Browser ein, um ihr Aussehen zu testen. Ändere Deine Mo-nitoreinstellungen, um die Wirkung bei unterschiedlichen Auflösungen (640 x 480, 1024 x 768 und soweiter) und verschiedenen Farbtiefen (256 Farben, 16 Bit (thousands of colors), 24 Bit (millions) zu te-sten.

TabellenTabellen wurden eigentlich eingeführt, um Zahlen und Daten in Schemata aufzustellen. Heutzutage wer-den sie aber vor allem benutzt, um ein spannenderes Layout zu erzielen.

Ohne Tabellen wird das Layout ziemlich eindimensional: die Absätze kommen brav nach-einander und untereinander. Tabellen ermöglichen Blöcke, die nebeneinander liegen.

Eine Tabelle ist ein Rahmen, der in waagerechte und senkrechte Zellen unterteiltist. Die einzelnen Zellen können Text, Grafik und so weiter enthalten. Du kannst zumBeispiel mit einer Tabelle, die die gesamte Bildschirmbreite füllt und drei Zellenrei-hen und -spalten enthält, ein dreispaltiges Layout erstellen.

Du setzt eine Tabelle über den entsprechenden Schaltknopf auf der Werkzeugleiste ein, worauf Du nachder Anzahl der Reihen und Spalten gefragt wirst.

Eigenschaften einer TabelleBorder (Rahmenstärke) gibt mit der Anzahl an Pixel an, wie breit der Rahmen um die Tabelle ist. Setzt

Du 0 (Null), ist der Rahmen unsichtbar.Cellspacing (Textabstand) gibt die Dicke der Balken zwischen den Zellen in Pixel an.Cellpadding (Zellabstand) gibt den Abstand in Pixel zwischen Inhalt (Text oder Grafik) und Zellenrand

an.

Setzt Du border auf 0, sind die Balken zwischen den Zellen ebenfalls unsichtbar� der Abstand ist aber der gleiche. Ob das so recht logisch ist, weiß ich nicht � aberso ist es nun einmal. Setzt Du border=1 und cellspacing=1, sind Rahmen und Bal-ken schwarze Striche. Erhöhst Du den Wert, erscheinen sie dreidimensional, was ei-gentlich nicht besonders gut aussieht.

Width (Breite) bezeichnet die Breite der Tabelle. Sie wird in Prozent des Bild-schirms oder in Pixel angegeben. Wählst Du das letztere, mußt Du natürlich damitrechnen, daß der Benutzer waagerecht scrollen muß, wenn sein Bildschirm

Grafiken


19

schmaler ist als die Tabelle.Die geringste allgemein übliche Bildschirmauflösung ist 640 x 480. Erstellst Du also Tabellen mit pi-xeldefinierter Breite, sollte sie nicht mehr als 600 Pixel betragen. Allerdings füllt eine solche Tabelle beieinem Bildschirm von 1200 Pixel Breite nur ein Drittel!

Height (Höhe) bezeichnet die Höhe der Tabelle � ebenfalls in Prozent oder in Pixel. Die Tabelle wirdaber in jedem Falle nach der Höhe des Inhalts formatiert. Height ist eine etwas problematische Eigen-schaft, da sie nur vom Netscape Navigator, nicht aber vom MSIE verstanden wird. Also würde ich Dirvon einer Definition der Height-Eigenschaft einer Tabelle abraten.

Eine Tabelle kann rechts- oder linksbündig oder zentriert auf der Seite angebracht werden. Außerdemkannst Du ohne weiteres eine �Unter�-Tabelle in eine Zelle integrieren.

ZelleAuch eine Zelle hat bestimmte Eigenschaften:

Width (Breite) bezeichnet die Breite der Zelle � in Pixel (abzuraten) oder in Prozent der Tabellenbreite.Enthält eine Zelle ein Element, zum Beispiel ein Bild, das breiter als die definierte Breite ist, wird sie inihrer Breite angepaßt.

Height (Höhe) definiert die Höhe der Zelle in Pixel oder Prozent der Fensterhöhe. Siehe auch Tableheight oben.

Align (Ausrichtung) definiert die horizontale Ausrichtung: rechts- oder linksbündig oder zentriert.VAlign (vertical align oder vertikale Ausrichtung) bestimmt die senkrechte Justierung des Inhalts:

oben, zentriert oder unten.Cellcolor (Farbe, Hintergrundfarbe): Jede Zelle kann eine eigene Hintergrundfarbe haben. Das wird

allerdings nur von den neuesten Browsern unterstützt, also Netscape Navigator 3.0 und MSIE 3.0 � Dusolltest also für eine Farbkombination sorgen, die den Text sowohl vor dem Zellenhintergrund als auchvor dem Seitenhintergrund lesbar macht.

In PageMill aktivierst Du eine Zelle, indem Du zunächst auf den Rand der Tabelle doppelklickst, so daßsie aktiv wird, und anschließend in der gewünschten Zelle klickst.

Du kannst Zellen waagerecht oder senkrecht miteinander verschmelzen (merge). Das ist praktisch beiÜberschriften, die sich über mehrere Zellen erstrecken. Hierzu setzt Du die Zelleneigenschaften Col Spanund Row Span auf die Anzahl an Spalten/Reihen, die miteinander verschmolzen werden � und zwar inder oberen bzw. linken der aktuellen Zellen:

Zellen verschmelzenPageMill Du wählst eine Zelle, drückst Umschalt und wählst die nächste Zelle. Dann wählst Du Join cells

in der Werkzeugleiste.Composer Table Properties, Registerblatt Cell: Du setzt die Cell spans row(s) and column(s)-Eigenschaften.FrontPage Cell Properties (Zelleneigenschaften): Du richtest die Spannweite der Zelle ein über Numbers of

rows/columns spanned (Spannweite der Zelle).Claris Im Object Editor, Registerblatt Advanced: Die Col Span- bzw. Row Span-Eigenschaften der

Zelle einstellen.

ÜbungenErstelle zwei Tabellen � eine mit fester Breite in Pixel und eine mit prozentualer Breite. Fülle ihre Zellen mitText und Grafik. Lese diese Seiten in Deinen Browser und teste, wie sie auf verschiedene Fenstergrößen undBildschirmauflösungen reagieren.


20

Test im BrowserDu solltest Deine Website unbedingt testen, bevorDu sie zum Server überführst.• Teste sie sowohl im Netscape Navigator als

auch im MSIE.• Teste sie ohne Grafik � im Navigator wählst Du

dazu Options|Auto Load Images Off (Optio-nen|Grafiken automatisch laden). Hast Du -wie empfohlen - für alle sinntragenden Grafikenund Text-Links Alternativtexte erstellt - bei-spielsweise für die �Hotspots� in eventuellenImagemaps - sollte die Website immer nochfunktionieren.

ÜbungErstelle eine Website mit Farben, Grafik und Ta-bellen. Teste die Seiten in beiden Browsern undstelle fest, ob es Unterschiede in der Darstellunggibt.

VeröffentlichungServerplatzEin Webhotel bietet Platz auf einer Festplatte in ei-nem sogenannten WebServer an, der permanent ansWWW angeschlossen ist. Als Kunde mietest Duein Verzeichnis, einen Ordner, für Deine Webdo-kumente auf dieser Festplatte.

Viele Internet-Anbieter (T-Online, Compuserve,AOL etc.) stellen außer dem Internet-Zugang undeiner E-Mail-Adresse einen gewissen Platz auf demServer zur Verfügung. Abgesehen davon gibt esWebhotels in jeder Preisklasse � je nach Bedarf: 1)für private bzw. kommerzielle Benutzer, 2) nachDeinem Platzbedarf, 3) nach der �Abruf-Frequenz�Deiner Website, 4) falls Du Zugang zu CGI-Pro-grammen benötigst (über CGI erfährst Du mehr inden entsprechenden Abschnitten ab Seite 47),5) nach Servicebedarf und so weiter. Unterwww.geocities.com besteht die Möglichkeiteiner kostenlosen Homepage.

Es gibt ziemliche Unterschiede zwischen derBandbreite von Webhotels. Der Anbieter spart un-ter Umständen Geld, indem er eine größere Anzahlan Homepages zuläßt, als die Kapazität seines Ser-vers eigentlich erlaubt. Du kannst probeweise einpaar Seiten im Webhotel aktivieren, um zu testen,wie schnell sie eingelesen werden.

UploadDu �uploadest�, das heißt überführst Deine Websi-te, indem Du den Inhalt des Webordners von Dei-ner eigenen Festplatte in Deinen Ordner auf demWebserver überführst. Mehrere Editoren verfügenüber eine integrierte Upload-Funktion. Andernfallsbenutzt Du ein sogenanntes FTP-Programm, dasDateien auf Deinem eigenen Computer und einemWebserver verwalten, also sie auch von dem einenzum anderen Computer überführen kann.

Die vier hier besprochenen Editoren haben alle eineUpload-Funktion. Allerdings ist ihre Qualität un-terschiedlich � PageMill und FrontPage arbeitensehr gut, während Composer und Claris Home Pa-ge in diesem Punkt Schwächen zeigen.

Benutzt Du eines der letzteren Programme, emp-fiehlt sich ein spezielles FTP-Programm. PageMillhat in der Macintosh-Version merkwürdigerweisekeine Upload-Funktion, weswegen Du hier eben-falls ein spezielles FTP-Programm benutzen mußt.Auch wenn Dein Editor eine integrierte Upload-Funktion hat, empfiehlt sich ein FTP-Programm,um Deine Dateien im Server aufzuräumen. MancheDienstleister bzw. Webhotels bieten solche Pro-gramme kostenlos an, so können Mitglieder vonCompuServe ihre Website mit dem HomePage Pu-blishing Wizard veröffentlichen.

Notwendige Informationen für das Uploaden

Willst Du uploaden, benötigst Du folgende In-formationen von Deinem Webhotel-Anbieter:Username. Im allgemeinen bestimmst Du diesenselbst. Oft lautet er so wie Deine E-Mail-Adresse �also sofie, wenn Deine E-Mail [email protected] lautet.


21

Paßwort. Der geheime Code, der sichert, daß nurDu Deine Webseiten modifizieren kannst.Den Namen des Servers, zu dem Du einen FTP-Zugang benötigst, zum Beispielftp.hyperweb.de. Der Servername für FTP istnicht unbedingt derselbe wie der Servername derWebadresse � zum Beispiel kann er mit ftp be-ginnen statt mit www.Den Namen des Ordners, in dem Deine Websitegespeichert wird. Dieser Ordner liegt in DeinemBenutzerordner und heißt meist public_html.Nur Du hast Zugang zu diesem Benutzerordner, daer etliche private Dinge enthält, wie etwa DeinenBriefkasten. Der Ordner public_html dagegenkann, wie sein Name andeutet, die Dokumente ent-halten, die über das Web öffentlich zugänglichsind. Selbstverständlich kann dieser Ordner weitereOrdner enthalten.Die Webadresse Deines Ordners. Das wäre zumBeispiel www.webastoria.de/~sofie/.Webadressen starten nicht unbedingt mit www, ob-wohl das meistens der Fall ist.

Die Tilde ~ wird vielfach in Webadressen benutzt.Sie deutet an, daß der Ordner einem Benutzer aufdem Server gehört. Eigentlich weiß man nicht, woin der internen Dateistruktur des Servers sich derBenutzerordner befindet � das macht aber nichts.Der Benutzername verbindet den Benutzer auto-matisch mit dem richtigen Ordner. Übrigensbrauchst Du nicht zu befürchten, Du könntest dieDateien anderer Leute oder die Festplatte des Ser-vers löschen: Benutzername und Paßwort erlaubenDir nur den Zugang zu Deinem eigenen Benut-zerordner.

Uploaden mit PageMillDu wählst File|Upload Page. Im Upload-Dialogerstellst Du ein �Site Mapping�, das die Upload-Spezifikationen für eine Website enthält. (Site-Mapping bedeutet Zuordnen der Site.) Arbeitest Dumit mehreren Websites, kannst Du für jede ein ei-genes Site Mapping erstellen. Erstellst oder modifi-zierst Du ein Site Mapping, gibst Du sowohl Dei-nen lokalen Webordner an als auch die Upload-Adresse einschließlich Paßwort und so weiter.

Außerdem wählst Du Upload Basis und legstfest, ob der gesamte Inhalt des Webordners, be-stimmte Dateien oder kürzlich geänderte Dateienüberführt werden sollen. Schließlich wählst DuUpload, wonach die Dateien nach den von Dir ge-machten Angaben überführt werden.

Uploaden mit FrontPageIn FrontPage heißt das Hilfsprogramm MicrosoftWeb Publishing Wizard � Du startest es über denMenüpunkt File|Publish FrontPage Web(Datei|FrontPage Web publizieren). Wenn Duzum ersten Mal �veröffentlichst�, leitet Dich derWizard durch die notwendigen Konfigurationen.Benutzt Du das Programm später erneut, mußt Dunur noch wählen, was Du überführen willst: 1) al-les, 2) ausgewählte Dateien oder 3) nur seit derletzten Überführung geänderte Dateien.

Uploaden mit ComposerDer Composer kann leider nur Dateien jeweils ei-nes Ordners überführen, nicht aber die Dateieneventueller Unterordner. Willst Du die aktuelleSeite uploaden, wählst Du File|Publish (Da-tei|Veröffentlichen). Gewählt wird automatischdie Seite, die im Editor offensteht. Außerdemkannst Du andere Seiten in demselben Ordnerwählen, indem Du All files in page�s folder (AlleDateien im Dokumentenordner) anklickst unddie zu überführenden Seiten markierst.

Uploaden mit Claris Home PageClaris Home Pages integrierter Uploader kann nurjeweils eine Seite einschließlich Grafik überführen� hier empfiehlt sich also wirklich ein FTP-Pro-gramm. Willst Du die aktuelle Seite uploaden,wählst Du File|Remote|Remote.


22

Upload mit einem FTP-ProgrammGute FTP-Programme sind zum Beispiel:

CuteFTP für Windows www.cuteftp.com/Fetch für Macwww.dartmouth.edu/pages/softdev/fetch.html

Wenn Du ein solches Programm startest, richtestDu zunächst eine �Connection� (Verbindung) ein.Du solltest ihr einen Namen geben, damit Du sievon anderen Verbindungen unterscheidest. Daskönnte zum Beispiel �Meine Website bei WebHil-ton� sein.

Du wählst nun die bereits angeführten not-wendigen Angaben für die FTP-Verbindung. DasFTP-Programm richtet sie ein, und nun erscheintein Dateistruktur-Fenster mit dem Inhalt DeinesOrdners. Nun kannst Du von Hand den Inhalt Dei-nes lokalen Webordners in Deinen Webordner aufdem Server ziehen.

Manche FTP-Programme wollen wissen, ob dieDateien als Text (ASCII) oder binär (auch RawData genannt) gespeichert werden sollen. Grafikund andere Daten müssen binär überführt werden.HTML dagegen funktioniert unter beiden Formen.Bist Du Dir nicht sicher, wählst Du binär. Wählekeinesfalls merkwürdige Formate wie uuencodingoder MacBinary.

Manche FTP-Programme bieten außerdem an,ein .bin oder .txt nach dem Dateinamen hin-zuzufügen. Das lehnst Du natürlich ab. Fetch zumBeispiel möchte Deine Dateien gern als MacBinarykodieren und ihrem Namen ein .bin hinzufügen.Das deaktivierst Du in den Preferences. Übrigenserlaubt Dir das FTP-Programm auch die Dateien-verwaltung Deiner Benutzermappe auf dem Server.

KontrolleWenn Du mit dem Überführen fertig bist, solltestDu im Browser, also unter der WWW-Adresse undnicht unter der FTP-Adresse, sicherheitshalber te-sten, ob alles wie geplant funktioniert. Fehlersym-ptome:

Statt Deiner Eingangsseite erscheint ein Überblicküber die Dateien im Webordner. Sieh nach, ob dieEingangsseite den rechten Namen hat � in-dex.html, default.html oder was immerDein Webserver fordert. Vergiß nicht den Unter-schied zwischen Groß- und Kleinbuchstaben undden zwischen .htm und .html.

Links funktionieren nicht, und statt Bildern er-scheint ein Grafiksymbol mit einem Fragezeichen.Sieh nach, ob die Dateien überführt wurden, ob dieNamen unverändert blieben und ob die Links rela-tiv sind und keine Hinweise auf Deine eigene Fest-platte enthalten. Stelle außerdem sicher, daß es kei-ne Links zu Dateien oder Ordnern gibt, die nichtüberführt wurden � zum Beispiel indem Du irrtüm-lich einen Link zu einem Dokument erstellt hast,das auf Deiner eigenen Festplatte nicht im We-bordner, sondern in einem anderen Ordner liegt.

Statt der Bilder erscheint ein zerbrochenes Gra-fiksymbol. Die Bilder wurden nicht korrekt über-führt. Sichere Dich, daß sie binär und nicht etwaals Text überführt wurden.

Sind die Dateien Deines Webordners überführt undwerden von Deinem Browser über die Webadressekorrekt überführt (nicht vergessen: RELOAD!), istDein Website online.

Bildbehandlung


23

Zweiter Teil � Alles über WebdesignInzwischen solltest Du imstande sein, eine einfacheWebsite zu erstellen und zu überführen. Wir wollenuns nun die verschiedenen Aspekte im Webdesigngenauer ansehen. Es ist durchaus möglich, die folgen-den Abschnitte in beliebiger Reihenfolge zu lesen.

Grafikbehandlung

GrafikformateGIF und JPEG sind die Grafikformate, die im Webbenutzt werden. Der Grund: sie komprimieren effek-tiv, reduzieren also die Dateiengröße anderer typi-scher Grafikformate. Jedes dieser beiden Formate hatseine Vorteile:

GIF eignet sich vor allem für Zeichnungen, Logos undandere Bilder mit wenigen Farben, monochrome, alsoeinfarbige Bilder und einfache Formen. Leider ent-halten GIF-Bilder höchstens 256 Farben. Ein GIF-Bild kann transparente Bereiche enthalten. Das istnützlich bei irregulären Bildern, die vor verschiedenenHintergrundfarben oder Hintergrundbildern erschei-nen.

JPEG eignet sich im Gegensatz zu GIF vor allem fürFotografien, Malereien und andere Bilder mit zahlrei-chen Nuancen und gleitenden Farbübergängen. JPEG-Grafiken stehen im 24-Bit-Modus, enthalten also Mil-lionen von Farben. Andererseits ist ihre Komprimie-rung nicht echt � konvertiert man ein Bild zu JPEG,geht etwas von seiner Qualität verloren. Die JPEG-Komprimierung ist äußerst stark und ergibt ziemlichdramatische Reduzierungen in der Dateigröße.

Grafik von anderen QuellenBilder, die Du von anderen erhältst, stehen nor-malerweise im TIFF-Format. Vielleicht bietet derLieferant Dir eine Konvertierung zu JPEG oder GIFan. Das solltest Du dankend ablehnen. Es ist besser,wenn Du das selbst tust. Eine Grafik sollte nämlicherst nach der Skalierung in die für die Website ge-wünschte Größe konvertiert werden. Im allgemeinenempfiehlt sich das TIFF-Format für Bilderaustausch.Bestelle das Bild lieber zu groß als zu klein � Dukannst es jederzeit verkleinern, vergrößern kannst Dues aber nicht, ohne daß die Qualität darunter leidet.ScannenDu solltest das Bild größer scannen als Du es benö-tigst � dann kannst Du es im Grafikprogramm skalie-ren. Gib beim Scannen an, wie viele DPI Duwünschst. DPI steht für dots (Pixel) per inch. ScannstDu also ein Bild von 5x5 Zoll (inch) in 150 DPI, er-hältst Du eine Grafikdatei von 750x750 Pixel.

Text, Illustrationen und Anti-AliasImportierst Du Illustrationen aus einem Zei-chenprogramm wie etwa Illustrator odererstellst Du Text in einer Bildverarbeitung,vergiß nicht, die Kanten mit Anti-Alias zubehandeln. Das ist eine Technik, die unre-gelmäßige Kanten mit Hilfe von Farbtönenausgleicht. Dadurch sieht ein Bild natürli-cher aus und vermittelt die Illusion einer besserenBildschirmauflösung. Allerdings kann Text in kleine-rer Schriftgröße durch Anti-Aliasing schwerer lesbarwerden.TransparenzEs ist möglich, Bereiche in einem GIF-Bild transpa-rent zu machen. Dazu gibst Du allen gewünschtenBereichen im Bild dieselbe Farbe und definierst dieseFarbe beim Speichern als GIF-transparent. Leiderkann man keine graduiert-durchsichtigen Pixel her-stellen � entweder sie sind durchsichtig oder nicht.Du kannst die Kanten eines Bildes vor durchsichti-gem Hintergrund also nicht �faden� (abschwächen)oder mit Anti-Alias behandeln. Du erreichst diesenEffekt nur, indem Du das in der Farbe der Grafikdateimachst und dafür sorgst, daß der Seitenhintergrunddieselbe Farbe hat.SkalierungSkaliere Deine Bilder auf die richtige Größe. WillstDu sie retuschieren, solltest Du das vor dem Skalie-ren tun. Vergiß nicht � was zählt, ist die Größe derBilder in Pixel. Die Größe in Zoll oder Zentimeterspielt nur für Bilder eine Rolle, die gedruckt werden.

Ich empfehle Dir, vor dem Skalieren eine Si-cherheitskopie der Grafikdatei zu erstellen. Willst Dusie später modifizieren oder skalieren, kannst Du dasin der Backupdatei tun und dann diese konvertieren.Konvertierung zu JPEGBevor Du eine Grafik in JPEG konvertierst, stellefest, ob sie im RGB-Modus steht. Bilder, die Du vonanderen erhältst, sind vielleicht in einem Format na-mens CMYK gespeichert, einem Format, das für Bil-der benutzt wird, die gedruckt werden sollen. Ist dasder Fall, mußt Du die Datei nach RGB konvertieren.

Die Konvertierung erfolgt, wenn Du Save As(Sichern als bzw. Speichern unter): JPEG wählst. Duentscheidest selbst, wieviel Qualität Du opfern willst� von �sehr wenig� bis �ziemlich viel�. Je größer derQualitätsverlust, desto kleiner die Dateigröße. Esempfiehlt sich, die Datei in mehreren Qualitäten zuspeichern, um sie auf Qualität und Dateigröße mitein-ander zu vergleichen. Der Qualitätsverlust ist seltensichtbar, allerdings werden größere gleichfarbige Flä-

Bildbehandlung


24

chen leicht verfärbt, und Kanten verlieren ihre Schär-fe. Je weniger Details ein Bild enthält, desto mehrkann man opfern. Ein Bild eines Sonnenuntergangsläßt sich stark komprimieren, ein Portrait dagegenweniger stark.

Achtung: Eigentlich heißt das JPEG-DateiformatJFIF � JPEG ist nämlich nicht der Name des Datei-formats, sondern der der Kompressionsmethode.Normalerweise benutzt man dennoch JPEG, manch-mal nennt man das Format aber auch JPEG/JFIF.

Progressive JPEGEs gibt eine Variante von JPEG namens progressiveJPEG. In einer solchen Datei liegen die Bildinforma-tionen in einer anderen Reihenfolge, die dazu führt,daß das Bild beim Einlesen zunächst in einer un-scharfen Version erscheint, um dann allmählichschärfer zu werden. Die Datei nimmt ebensovielRaum ein wie eine übliche JPEG-Datei und benötigtebensoviel Zeit zum Laden, der Leser erhält aber ei-nen früheren Eindruck des Bildes. Nicht alle Pro-gramme können als progressive JPEG speichern.Photoshop 3.x erfordert hierzu ein Plug-In, zum Bei-spiel Pro JPEG.

Achtung! PageMill unterstützt kein ProgressiveJPEG � Du kannst progressive Bilder zwar mit placeeinfügen, PageMill zeigt sie aber nicht.

Konvertierung zu GIFSoll ein Bild in das GIF-Format konvertiert werden,muß seine Farbtiefe auf �8 Bit� reduziert werden, al-so auf maximal 256 Farben.

In Paint Shop Pro erreichst Du das über Co-lors|Decrease Color Depth|256 Colors (8 Bit)(Farben|Farbtiefe verringern|256 Farben). (InPhotoshop: Image|Mode|Indexed Color.)

Anschließend mußt Du festlegen, wie die Farbtiefereduziert wird. In Paint Shop Pro wählst Du Palette:Optimized (Palette: Optimierung) (in Photoshop: Pa-lette: Adaptive), um eine Palette zu generieren, die die256 wichtigsten Farben des Bildes enthält. Enthältdas Bild mehr als 256 Farben, mußt Du außerdementscheiden, was mit den Farben geschieht, für die inder Palette kein Raum ist:

Reduction Method: Nearest Color (Redukt-ionsmethode: nächstliegende Farbe) (Dither: None inPhotoshop) bedeutet, daß nicht in der Palette enthal-tene Farben auf die nächstgelegene Farbe der Palettegesetzt werden.

Reduction Method: Error Diffusion (Reduktions-methode: Fehlerstreuung) (Dither: Diffusion inPhotoshop) bedeutet, daß das Programm die fehlendeFarbe durch ein Muster von �Körnern� in nahegele-

genen Farben der Palette nachzuahmen versucht � dasBild wird also gepunktet.

Es hängt ganz von der Art des Bildes ab, welcheMethode sich jeweils empfiehlt. Diffusion bewahrtdie Farben genauer, dafür wird das Bild aber körnig.Probiere die Sache mit mehreren Bildern aus, um denUnterschied festzustellen.

Enthält das Bild ohnehin nur 256 oder wenigerFarben, treten derartige Probleme natürlich gar nichterst auf. Photoshop deutet das mit der Wahlmöglich-keit palette: exact an, die bedeutet, daß alle Farbendes Bildes bewahrt werden. Die Dither-Möglichkeitist deaktiviert, da es ja keine �fehlenden� Farben gibt.

In Paint Shop Pro teilt Dir der Dialog nicht mit, obdas Bild mehr bzw. weniger als die 256 möglichenFarben enthält. Bevor Du aber die Farbtiefe redu-zierst, kannst Du den Punkt Colors|Count ColorsUsed (Farben|Farbenanzahl) wählen und so feststel-len, ob das Bild mehr als 256 Farben enthält. Ist dasnicht der Fall, ist die Reduction Method (Reduktions-methode) irrelevant.

Die Möglichkeit der Farbreduzierung in einemBild birgt eine Gefahr: die meistbenutzten Farbenwerden verstärkt, während nur geringfügig vorkom-mende Farben des Bildes möglicherweise völlig ver-schwinden. Da diese Kontrastfarben aber vielfachdem Bild seinen eigentlichen Charakter geben, soll-test Du sie vielleicht von Hand verstärken.

Hat das Bild eine Farbtiefe von 8 Bit, kannst Du esüber File|Save As als GIF speichern.

Interlaced GIFGIF-Bilder lassen sich auch auf spezielle Weise alsinterlaced speichern. Das bedeutet, daß die Informa-tionen der Grafikdatei in einer anderen Reihenfolgegespeichert werden � das Bild wird nun nicht vonoben an bis unten eingelesen, sondern erscheint zu-nächst in grober Auflösung, um dann allmählichweitere Einzelheiten zu zeigen. Ein �interlaced� Bildnimmt den selben Raum ein und braucht dieselbeZeit, um eingelesen zu werden.

In Photoshop bestimmst Du im Dialogfeld des Be-fehls Save As� GIF, ob die Datei interlaced gespei-chert werden soll.

In Paint Shop Pro erhältst Du im Dialog Save As(Sichern als) eine Wahlmöglichkeit namens Sub type(Sub-Format). Hier hast Du die Wahl zwischen denGIF-Versionen 87a und 89a, interlaced oder nicht-interlaced. Wähle 89a, die modernste Form des GIF-Formats.

Bildbehandlung


25

256-Farben-Bildschirm und die �sichereWebpalette�Manche Computer können nur 256 Farben auf demBildschirm darstellen. Auf diesen Maschinen benutztder Browser eine feste Palette mit 216 Farben. DiesePalette ist bei allen Browsern und auf allen 256-Farben-Plattformen dieselbe. Daß sie nur 216 Farbenenthält, liegt daran, daß einige Farben vom Systemfür Fenster, Schaltknöpfe und so weiter reserviertwerden.

Die Farben dieser 216-Farben-Palette werden kor-rekt wiedergegeben, während die anderen Farbenvom Computer durch Dithern oder Änderung derFarbe in eine Palettenfarbe erstellt werden.

Oft möchte man solche unvorhersehbaren Ände-rungen vermeiden, so etwa in Symbolen, Logos,Überschriften, die als Grafik erstellt wurden, anderenMotiven, die aus reinen Farben bestehen, oder größe-ren einfarbigen Flächen. Stell Dir etwa vor, daß sichein einfarbiges Logo auf einem 256-Farben-Bildschirm in Nadelstreifen oder kleinkarierte Flek-ken verwandelt. Willst Du das vermeiden, mußt DuDeine Bilder so modifizieren, daß sie nur Farben der216-Farben-Palette enthalten.

Neuere Bildverarbeitungen wie Photoshop 4 habendie 216-Farben-Palette, die sogenannte �sichere Web-Palette�, integriert. In Photoshop 4 kannst Du zumBeispiel Palette: Web wählen, um die Farbtiefe zu re-duzieren.

In Paint Shop Pro ist die Sache komplizierter, weilDu zunächst einmal die Palette erstellen mußt. Dasmachst Du so:• Du gehst zu einer Website, der diese Palette an-

bietet, zum Beispiel www.dsie-gel.com/tips/wonk10/images.html

• Downloade das Bild der Palette, das heißt rechts-klicke es und wähle Save Image As... (Bild spei-chern unter...).

• Öffne das Bild in Deinem Grafikprogramm• Wähle Colors|Save Palette (Farben|Sichere Pa-

lette), um die Palette zum Beispiel unter demNamen Webpalette zu speichern

Möchtest Du nun in Deinem Grafikprogramm einBild an die Webpalette anpassen, wählst Du Co-lors|Load Palette (Farben|Lade Palette) und aktivierstdie Webpalette.

In jedem Fall mußt Du entscheiden, was mit denFarben geschehen soll, die nicht in der Webpaletteenthalten sind. Wähle Nearest Color (nächstliegendeFarbe) (in Photoshop: Dither: None) � geht es docheben darum, das Dithern zu vermeiden. Das Bild wird

nun an die �sichere Palette� angepaßt, worauf Du esals GIF speichern kannst.

Nuancen, die nur auf besseren Bildschirmen wie-dergegeben werden, gehen verloren, wenn Du dasBild an die strenge 216-Farben-Palette anpaßt. Darumsolltest Du sie nur verwenden, wenn Du unbedingtDithern vermeiden mußt. Bilder mit vielen Nuancenund Farbtönen � wie etwa Malereien oder Fotografien� dürfen nicht an die Webpalette angepaßt werden,sondern sollten statt dessen als JPEG gespeichertwerden. Bist Du Dir nicht sicher, ob ein Bild auf ei-nem 256-Farben-Bildschirm ordentlich aussieht,kannst Deine Bildauflösung auf 8 Bit (256 Farben)reduzieren.

Übrigens gibt es auch einen Unterschied in der'Lichtstärke' der verschiedenen Plattformen - auf ei-nem Macintosh sieht ein Bild im allgemeinen helleraus als auf einem PC. Erstellst Du z.B. ein Bild aufeinem Macintosh, darf es nicht zu dunkel ausfallen,da es auf einem PC noch dunkler wiedergegebenwird.

Bildbehandlung in PageMillPageMill enthält einen simplen Bildeditor, der akti-viert wird, wenn Du eine Grafikdatei über File|Openöffnest. Hier kannst Du die Datei interlaced machenund ausgewählte Bereiche als transparent setzen. Dasist angenehm und ebenso leicht durchführbar wie ineinem Grafikprogramm. Du kannst auch die Bildgrö-ße skalieren, und das ist gar nicht gut! Der Editor än-dert nämlich nicht die eigentliche Datei, sondern nurdie Maße, die im Dokument angegeben werden, unddas bedeutet, daß das Bild entweder zu körnig wirdoder die Datei größer als notwendig und dadurchbeim Laden mehr Zeit beansprucht als nötig.

Bildbehandlung


26

URLsURL ist die technische Bezeichnung für eine Internetadresse. Als normaler Surfer hat man nur bei der Angabeeiner Adresse mit einem solchen URL zu tun. Tatsächlich enthält ein HTML-Dokument aber intern jedes Malden entsprechenden URL, wenn ein Link, eine Grafikdatei oder etwas entsprechendes angesprochen werdensoll. Ein URL besteht aus vier Teilen: dem Protokoll, der Serverbezeichnung, dem Path (Pfad) und demDateinamen. Ein Beispiel:http://www.inferno.de/pandaemonium/limbus/elysium.html

Das Protokoll definiert die Methode, mit der die Datei aktiviert wird. Bist Du im Web, ist das http. Nach derProtokollbezeichnung folgen ein Doppelpunkt und zwei Schrägstriche mit der nachfolgenden Serverbezeich-nung. In den führenden Browsern kannst Du http:// fortlassen, wenn Du das Adreßfeld ausfüllst, weil dieBrowser das automatisch hinzufügen. In der HTML-Datei dagegen mußt Du http:// vor die Adresseschreiben.Der Path gibt den Ort der Datei auf dem Server an. In unserem Beispiel handelt es sich um eine Dateiim Ordner limbus im Ordner pandaemonium, der im Stammverzeichnis des Servers liegt. Bist Du an DOSgewöhnt, mußt Du darauf achten, daß der Schrägstrich in einem URL nicht der Backslash ist. Die kürzestemögliche Path-Angabe ist �/� � sie bezeichnet eine Plazierung im Web-Stammverzeichnis. Eine Serverbezeich-nung macht keinen Unterschied zwischen Groß- und Kleinbuchstaben. www.lego.com ist dasselbe wieWWW.LeGo.Com . Im Path - und im Dateinamen spielt die Groß- und Kleinschreibung dagegen eine Rolle: ex-empel.HTML ist nicht dasselbe wie Exempel.html Das beachten etliche Benutzer nicht � sie schreiben jedenURL mit Kleinbuchstaben. Darum empfiehlt es sich, Dateinamen nur mit Kleinbuchstaben zu erstellen.

Dateiname der StartseiteEin URL muß nicht unbedingt einen Dateinamen enthalten. Fehlt dieser, sucht der Server im angegebenenOrdner nach einer Datei mit einem bestimmten Namen, den er aufgrund seiner Einstellung dort vermutet. Meistsucht er nach der Bezeichnung index.html, es kann aber auch default.html, welcome.html oder ähnli-ches sein. Dein Provider kann Dir sagen, wie der richtige Name lautet. Findet der Server eine Datei mit demerwarteten Namen, schickt er diese. Andernfalls schickt er einen Überblick über den Inhalt des Ordners.Mit anderen Worten ist http://www.olav.dk/einordner/ dasselbe wie http://www.olav.dk/einordner/index.html

Darum solltest Du die Eingangsseite in Deiner Website als index.html bezeichnen, damit der URL so kurzwie möglich wird. Übrigens kannst Du den abschließenden Schrägstrich auch weglassen, so daß der URLlautet: http://www.olav.dk/einordner

Relative URLsVerweist ein Link auf eine Datei im selben Computer, muß der URL nicht inkompletter Form mit Protokoll- und Servernamen erscheinen. Du kannst Dichdamit begnügen, die Position der Datei in der Dateistruktur im Verhältnis zu demDokument zu beschreiben, von dem aus verknüpft wird. Das nennt man einenrelativen URL.Am einfachsten erklären wir die Sache mit ein paar Beispielen. Unser Bild zeigteine Dateistruktur mit Webseiten, die in einander untergeordneten Ordnern ge-speichert sind.Auf ein Dokument in demselben Ordner verweist Du schlicht mit demDateinamen. Soll busch.html mit gras.html verknüpft werden, ist der URLeinfach gras.html.Eine Datei tiefer im Dateisystem wird durch ihren Suchpfad angesprochen, also mit den Namen der Ordner,durch die man zur gewünschten Datei gelangt. Jedem Ordnernamen folgt ein Schrägstrich:• busch.html verknüpft mit gurke.html über kuechengarten/gurke.html• gurke.html verknüpft mit fliegenpilz.html über krautgarten/fliegenpilz.html• busch.html verknüpft mit fliegenpilz.html über kuechengarten/krautgarten/

fliegenpilz.html

Bildbehandlung


27

Ein �Aufwärts�-Verweis, also ein Verweis auf den Ordner, der den aktuellen Ordner enthält, erfolgt mit zweiPunktzeichen anstelle des Ordnernamens:• gurke.html verknüpft mit gras.html über ../gras.html• fliegenpilz.html verknüpft mit gras.html über ../../gras.html

Schließlich kann man auch auf Dateien in anderen Verzweigungen verweisen, indem man �aufwärts und wie-der abwärts� geht:• gurke.html verknüpft mit nachtschatten.html über ../

blumenbeet/nachtschatten.html• nachtschatten.html verknüpft mit fliegenpilz.html über

../kuechengarten/krautgarten/fliegenpilz.html

Relative URLs sind praktisch, weil sie auch dann funktionieren, wenn der Inhalt Deines Webordners von Dei-nem eigenen Computer auf den Webserver überführt wird.

Beginnt ein URL mit einem Schrägstrich, bedeutet das, daß sein Suchpfad vom Stamm des Servers ausgeht,wie auch bei einem absoluten URL. Auf dem Server www.danhave.dk verweist der URL /index.html aufdasselbe Dokument wie der absolute URL: http://www.danhave.dk/index.html, und der URL/bilder/ko.gif verweist auf http://www.danhave.dk/bilder/ko.gif

So kann man auf einfache Weise auf einen festen Ort der Dateistruktur verweisen, ohne den komplettenServernamen zu benutzen. Leider funktioniert das nur auf dem Server selbst, nicht aber, wenn man HTML-Dokumente unmittelbar von der eigenen Festplatte einliest.

AnkerpunkteEin URL kann durch Zufügung eines �#� und des Ankernamens auf einen Ankerpunkt in einem Dokumentverweisen: �pudrbaer.html#kapitel2�. Ein solcher Ankerpunkt kann in absoluten und in relativen URLsbenutzt werden. Verweist ein Link auf einen Ankerpunkt im selben Dokument, reicht es, wenn Du den Punktangibst: #kapitel2.

FramesFrames (Rahmen) ermöglichen die Einteilung des Browserfensters in mehrere Teilfenster. Jeder dieser Teilbe-reiche enthält sein eigenes Dokument, das Du unabhängig von den anderen scrollen (rollen) kannst.www.microsoft.com/workshop/prog/ie4 ist ein gutes Beispiel dafür, was man mit Frames machenkann. Die Sache funktioniert folgendermaßen: Du erstellst ein �Mutterdokument�, das sogenannte Frameset,das das Hauptfenster unterteilt und angibt, welche Dokumente in den einzelnen Frames erscheinen. Der Inhaltder einzelnen Frames besteht aus separaten Dokumenten (mit den eventuellen weiteren Dateien), die auch wienormale Ganzfenster-Dokumente geladen werden könnten.

Die Funktionalität eines Links wird hier erweitert. Auf einer normalen Webseite aktiviert ein Link stets eineneue Seite (oder einen anderen Bereich der ursprünglichen Seite) auf dem Bildschirm. Ein Link in einem Do-kument eines Frames kann eine neue Seite in diesen Frame laden, sie in einen anderen Frame des Framesetssetzen oder in ein Ganzfenster. Zu diesem Zweck erhalten die Links einen neue Eigenschaft namens target, diebezeichnet, wo das vom Link angesprochene Dokument erscheinen soll. Jeder Frame hat einen eigenen Namen,der nicht zu verwechseln ist mit dem Namen des Dokuments, das in diesem Frame erscheint.

Framesets können mehrere Ebenen enthalten. Eine Seite kann mit einem einzelnen Frameset in vier Framesunterteilt werden, sie kann aber auch aus zwei Frames bestehen, die jeder wiederum ein Frameset mit zweiFrames enthalten. Es läßt sich nicht unmittelbar aus einer Seite mit zahlreichen Frames ablesen, wie viele Fra-mes-Ebenen sie enthält.

Unter den von mir getesteten Editoren erlaubt meiner Meinung nach nur PageMill einen akzeptablen Um-gang mit Frames. Der Netscape Composer unterstützt Frames gar nicht erst, und FrontPage und Claris Home-Page gehen damit ziemlich umständlich um.

In PageMill kannst Du ein Dokument relativ einfach in Frames unterteilen. Du wählst Edit|Split Frame Hori-zontally oder Edit|Split Frame Vertically. Anschließend hast Du drei Dokumente: das eigentliche Frameset sowieein Dokument für jeden Frame. Du speicherst einen Frame, indem Du ihn durch Klicken markierst und dann

Bildbehandlung


28

File|Save frame wählst. Das Frameset speicherst Du über File|Save Frameset. Ein Frame hat folgende Eigen-schaften:

• Name � der Name des Frames• Width/height � Breite/Höhe in Pixel oder Prozent des Fensters• Margin � Abstand zwischen dem Frame-Rand und seinem Inhalt an Text oder Grafik• Scrollbars gibt an, ob Laufleisten erscheinen sollen. Ist der Wert auto, erscheinen sie nur, wenn das Dokument

größer ist als der Frame.• Resize gibt an, ob der Frame eine andere Größe haben kann, zum Beispiel wenn der Benutzer die Fenstergröße

ändert.

Diese Eigenschaften werden im Inspector über das Registerblatt Frame eingestellt. Außerdem enthält der In-spector für jeden Frame das normale Page-Registerblatt, in dem Du Hintergrundfarbe und so weiter für dasDokument im Frame einstellst.

TargetsHast Du einen Link in einem Frame markiert, wird das �Ziel�-Symbol in der rechten Seite der Link-to-Leiste sichtbar. Klickst Du es an, kannst Du festlegen, in welchen Frame oder welches Fensterdas angesprochene Dokument eingelesen wird. Du siehst eine Darstellung der im Fenster enthalte-nen Frames und kannst außerdem Parent Window wählen, was bedeutet, daß die neue Seite das Gesamtfensterfüllt statt des Framesets.

• Same Window (_top): Die Seite wird anstelle des oberen Frameset-Dokumentseingelesen. So erstellst Du einen Link, der das Frameset verläßt.

• Parent Window (_parent): Die Seite wird anstelle des Frameset-Dokumentseingelesen, das den Frame enthält, von dem aus verknüpft wird � dasselbe wie_top, wenn das Frameset nur einen Level enthält.

• Same Frame (_self): Die Seite erscheint im selben Frame. Das ist üblicherweiseder Fall, wenn Base Target nicht definiert wurde.

• New Window (_blank): Die Seite wird in ein neues, für sie eingerichtetes Fenstereingelesen.

In FrontPage und Claris Home Page mußt Du ein Link-Target (Link-Ziel) von Hand in den Link-Dialog einfü-gen. Hier schreibst Du den Namen des Frames, der den Link ansprechen soll, oder einen der speziellen Frame-Namen, die mit einem Unterstrich _ beginnen. Gibst Du als Target einen Namen an, der nicht zu einem existie-renden Frame oder Fenster gehört, erstellt der Browser ein neues Browserfenster mit dem angegebenen Namen,wenn Du den Link anklickst. Das angesprochene Dokument wird in dieses Fenster eingelesen.

Eine Seite hat die Eigenschaft base target, die das Target für alle Links auf der Seite angibt, die nicht beson-ders definiert wurden. So kannst Du auf einen Schlag das Target für alle Links zu einem anderen Frame für et-wa ein Inhaltsverzeichnis setzen.

Vorsicht!Paß auf, wenn Du Frames durch Links miteinander verbindest! Enthält Dein Frame einen Link zu einem weite-ren Frameset, wird dieses Set in den einzelnen Frame geholt, es sei denn das Target des Link ist _parent oder_top. Entsprechend mußt Du, wenn Du von einem Frame aus einen Link aus Deiner Website hinaus setzt, seinZiel als _top angeben � sonst findet der Benutzer nie den Weg aus Deinem Frameset.

Unsichtbare RahmenDie Rahmen zwischen den einzelnen Frames sind nicht gerade schön. Netscape Navigator 3 und MSIE könnenunsichtbare Rahmen wiedergeben. Das wird aber bisher von den WYSIWYG-Editoren nicht unterstützt. Alsomußt Du den notwendigen Code selbst einsetzen � siehe den Abschnitt über die manuelle Ände rung vonHTML-Codes auf Seite 39. Du machst das, indem Du dem frameset-Tag oder -Code, der im Frameset-Dokument auftritt, eine Eigenschaft zuweist. Netscape Navigator und MSIE benutzen dafür jeweils verschie-denen Code, die Kombination der drei folgenden Eigenschaften funktioniert aber in beiden Progra mmen:

Bildbehandlung


29

<FRAMESET BORDER=0 FRAMEBORDER=0 FRAMESPACING=0>

In PageMill kann man dummerweise den Code eines Frameset-Dokuments nicht einfach ändern, was man jabei anderen Dokumenten kann. Du mußt das Frameset-Dokument also in einem Texteditor öffnen, etwa inWordpad. Einfachheitshalber solltest Du also Wordpad ins switch to-Menü einfügen � über den MenüpunktEdit|Preferences|Switch to (Notepad.exe findest Du im Windows-Ordner). Anschließend kannst Du, wenndas Frameset im Editor offensteht, den Menüpunkt Edit|Switch to|Notepad.exe aktivieren.

Links, die den Inhalt mehrerer Frames gleichzeitig ändernEin Gedankenexperiment: Du hast ein Frameset, das das Fenster in drei Frames aufteilt. Einer der Frames ent-hält ein Dokument mit einem Link, der bei Aktivierung den Inhalt von zwei Frames gleichzeitig ändert. Einnormaler Link hilft Dir hier leider nicht weiter. Es gibt aber mehrere Auswege:

1. Erstelle ein neues Frameset mit der gleichen Unterteilung, das eine neue Kombination von Dokumenten inden Frames enthält, und verknüpfe es mit dem Link - (Das target setzt Du auf same window).

2. Liegen die beiden Frames, deren Inhalt gewechselt werden soll, nebeneinander, kannst Du einen Unter-Frameset mit den beiden Dokumenten erstellen, der durch ein neues Frameset mit den erwünschten Doku-menten ersetzt wird.

3. Mit JavaScript kannst Du einen �Doppellink� erstellen. Du erstellst einen Link, der den einen Frame aus-wechselt, und fügst dem Link-Code die folgende JavaScript-Eigenschaft hinzu:

onClick="top.framename.location=�dateiname.html�"(Siehe im übrigen den Abschnitt JavaScript, Seite 46, und den Abschnitt Eigenschaften im WYSIWYG-Zustand einfügen, Seite 40). Beispiel für den HTML-Code für den Link:<A HREF="seite1.html" TARGET=frameNr1 on-Click="top.frameNr2.location=�seite2.html�">

Im Grunde würde ich Dir aber empfehlen, Links, die gleichzeitig zwei Frames ändern, zu vermeiden.Überlege lieber, ob Du nicht dasselbe mit weniger Frames erreichst.

NoframesKann der Browser nicht mit Frames umgehen, kann er natürlich nichts mit den Definitionen im Frameset-Dokument anfangen. Also sollte das Dokument für diesen Browsertyp auch einen konventionellen Webseiten-Inhalt enthalten. Hier hilft Dir der Menüpunkt Edit|No Frames Message. Es gibt Leute, die hier schlichtschreiben �Besorg Dir einen ordentlichen Browser� und einen Link zu Netscapes Website einfügen � empfeh-len würde ich das nicht gerade. Da ist es schon etwas klüger, wenn die NoFrames-Seite eine ungefähre Kopieder Eingangsseite oder des Inhaltsverzeichnisses enthält, so daß die Website auch über eine frame-lose Versionverfügt.

Frames und ihre ProblemeWillst Du Frames anwenden, solltest Du die folgenden Nachteile bedenken:• Nur die ursprüngliche Frame-Aufstellung hat einen URL. Wird der Inhalt der einzelnen Frames durch An-

klicken von Links gewechselt, kann man keine Lesezeichen machen und nicht mit diesem Frame verknüp-fen.

• Ein Frameset läßt sich nicht drucken � das geht nur mit einzelnen Seiten.• Es ist unpraktisch, daß man seine Website sozusagen in zwei Versionen erstellen muß, damit sie mit und

ohne Frames funktioniert.• Im Netscape Navigator 2.0 funktionieren die Vor- und Zurück-Schalter nicht auf Frames. Willst Du inner-

halb eines Frames zurück, mußt Du die rechte Maustaste benutzen, was die Navigation in Framesets ziem-lich erschwert. Im Navigator 3.0 funktionieren Vor- und Zurück-Schalter auch in Frames.

Bildbehandlung


30

So �mißbrauchst� Du HTML für ansprechendes Layout und gute Typographie Vermutlich hast Du bereits festgestellt, daß HTMLunmittelbar kein besonders flottes Layout anbietet:Doppelter Zeilenabstand zwischen Absätzen, Über-schriften grundsätzlich fett und so weiter. Das liegtnicht an den HTML-Spezifikationen, sondern ist ehereine Konvention der Browser. Außerdem hat HTMLnur recht primitive Möglichkeiten zur Kontrolle vonTypographie und Layout � jedenfalls bis die StyleSheets sich durchsetzen, siehe Seite 41. Dabei han-delt es sich im großen und ganzen um Tricks, die dieMöglichkeiten von Netscape Navigator und MSIEzur Formatierung von Webseiten ausnutzen � wirwollen sie hier ohne Garantie für ihre Funktionalitätin anderen Browsern vorstellen.

Text als GrafikGestaltest Du Deinen Text als Grafik, hast Du per-fekte Kontrolle über Dinge wie Schriftsatz, Engstel-lung und dergleichen. Mit dieser Methode umgehstDu alle typographischen Einschränkungen in HTML.Das ist besonders praktisch bei Titeln für die Ein-gangsseite und bei Firmenbezeichnungen, da hier dasAussehen eine große Rolle spielt. Text ergibt als Gra-fik meist recht kleine GIF-Dateien, da er wenige Far-ben und einfache Formen enthält. Vergiß nicht, seineRänder mit Anti-Aliasing zu behandeln und einen al-ternativen Text für die Grafik einzufügen.

KAPITÄLCHENDu schreibst mit großen Buchstaben und vergrößerstden ersten Buchstaben über font-size (Schriftgrad).

Gesperrter DruckDu setzt nach jedem Buchstaben einen Zwi-schenraum und steuerst seine Größe über font-size(Schriftgrad).

Kompaktere AbsätzeDer Browser setzt grundsätzlich eine Leerzeile zwi-schen zwei Absätze. Dadurch wird das Schriftbildaber unrein. Du kannst das vermeiden mit einem fe-sten Zeilenwechsel (Umschalt + Return) statt einesAbsatzwechsels (Return). Einen neuen Absatz mar-kierst Du, indem Du seine erste Zeile um eine odermehrere feste Leerstellen einrückst (Strg + Leerta-ste). Dadurch wird allerdings der gesamte Text tech-nisch zu einem einzigen Absatz, also kannst Du auchnicht etwa eine Absatzformatierung nur für die Über-schrift benutzen. Statt dessen kannst die Überschriftmit Schriftformatierungen wie Schriftgröße undSchriftfarbe hervorheben.

Größerer ZeilenabstandEinen doppelten Zeilenabstand erreichst Du mit ei-nem Absatzwechsel nach jeder Zeile. GenauereKontrolle über den Zeilenabstand erreichst Du so: Dusetzt einen festen Zeilenwechsel (Umschalt + Return)nach jeder Zeile, beendest jede Zeile mit einem soge-nannten Nonbreaking Space (feste Leerstelle)(Umschalt + Leertaste) und machst die Schriftgrößeder Leerstelle größer als die des Textes.

SeitenränderSeitenränder lassen sich auch mit einem Einzug er-stellen, genauer geht das aber über Tabellen. In einerTabelle stellst Du einen Seitenrand mit einer Spalteher, die nur die passende Anzahl fester Leerstellenenthält.

LuftLuft und Abstand gehören zu den wichtigsten Hilfs-mitteln beim Layout. Leerfelder von kontrollierterGröße erreichst Du mit einem 1 x 1 Pixel großentransparenten GIF. Das ergibt ein unsichtbares Bild,um das Du mit Hilfe der Bildeigenschaften vspaceund hspace den Seitenrand steuern kannst. DieseMethode ist genauer als die Änderung der Schrift-größe einer festen Leerstelle, funktioniert aber nicht,wenn die Bildfunktion im Browser deaktiviert wurde.

Netscape Navigator 3 verfügt übrigens über einneues Element namens Spacer, mit dem Du Leerfel-der einfacher erstellen kannst � da das aber bisher nurvom Navigator 3 unterstützt wird, würde ich seineAnwendung nicht empfehlen.

Mehrere ZeichensätzeHTML 3.2 erlaubt eigentlich nur zwei Zeichensätze �eine Standardschrift, meist Times, und eine �Schreib-maschinenschrift�, meist Courier.

Netscape Navigator 3 und MSIE 2 und später un-terstützen das Tag font face, mit dem man angibt,welcher Zeichensatz für den Text benutzt wird. Dashört sich praktisch an � nur muß der Endbenutzerdann auch den angegebenen Zeichensatz auf seinerMaschine haben, sonst funktioniert das nicht, undnicht alle Leute haben dieselben Schriften. Glückli-cherweise erlaubt die Eigenschaft für dieses Tag dieAngabe mehrerer Zeichensätze, die durch Kommatavoneinander getrennt werden. Der Browser wählt nunden ersten Zeichensatz in dieser Liste, den der End-benutzer in seinem System hat.

Bildbehandlung


31

Ein Beispiel: FONT FACE=�Optima, Futura,Helvetica, Arial�. Systeme, die den ZeichensatzOptima installiert haben, zeigen diese Schrift. Ist sienicht vorhanden, wird Futura gewählt, dann Helveti-ca und so weiter. Ist keine der angegebenen Schriftenvorhanden, wird die Standardschrift benutzt.

Eigentlich gibt es nur drei Schriften, die man beijedermann voraussetzen kann. Im PC werden sie an-ders bezeichnet als im Mac, also müssen beide Na-men mit einem Komma dazwischen angegeben wer-den:

• Times, Times New Roman � die Standardschrift, inder auch dieses Heft geschrieben wird. Experten be-zeichnen diesen Zeichensatz - gerade für lange Texte- als den lesefreundlichsten.

• Arial, Helvetica � eine Groteskschrift, das heißt eineSchrift ohne �Füßchen�. Wird oft für Überschriftenbenutzt � so auch in diesem Heft.

• Courier, Courier New � die klassische Schreibma-schinenschrift.

Achtung! Mit dem Tag font face darfst Du niemals,ich wiederhole, niemals mathematische Symbole,griechische Schriftzeichen oder so etwas formatieren.In Browsern, die dieses Tag nicht verstehen, führtdas zu Unsinn � aber damit nicht genug, sind die Er-gebnisse auch noch je nach Plattform recht verschie-den.

Tricks mit HintergrundgrafikEin Hintergrundbild wird senkrecht und waagerechtüber das gesamte Fensterareal wiederholt. Willst Dudiese Wiederholung vermeiden, machst Du das Bildentsprechend groß. Bei einer Größe von 1600 x 1200Pixel entfällt die Wiederholung selbst auf den größ-ten Bildschirmen � es sei denn die Seite ist länger.Das eigentliche Motiv muß nicht unbedingt die ganzeBildfläche füllen � im Grunde sollte es höchstens640 x 400 Pixel einnehmen. Der Rest der Bildflächeist einfarbig.

Es gibt zahlreiche Seiten, die in mehrere senk-rechte Hintergrundfarben aufgeteilt sind, zum Bei-spiel im ersten Drittel rot und für den Rest der Breiteweiß. Das erreicht man mit einer einzelnen langenund schmalen Grafik, deren erster Teil rot und derRest weiß ist. In der Höhe reicht für diese Grafik einPixel, die Breite muß aber mindestens 1600 Pixelbetragen.

Bist Du neugierig, wie eine bestimmte Grafik er-stellt wurde, klickst Du mit der rechten Maustastedarauf, wählst Save Background As (Hintergrundspeichern unter) und speicherst die Hintergrundgrafik

auf Deinem Desktop. Anschließend kannst Du siewieder in den Browser einlesen.

Der Netscape Navigator erlaubt nicht, daß Text oderGrafik bis an den Rand des Fensters reicht. Außer-dem gibt es je nach System leichte Unterschiede inder Größe des Abstands vom Fensterrand zum Fen-sterinhalt. Es ist also nicht möglich, Vorder- undHintergrund gänzlich zu synchronisieren. Allerdingskann man in einem Frame die Randgröße zwischender Frame-Kante und dem Inhalt angeben. Soll eineVordergrundgrafik bis zum Fensterrand reichen, mußdas also in einem Frame erstellt werden. Im MSIEkannst Du den oberen und linken Seitenrand mit denEigenschaften body margintop und marginleft an-geben, aber das funktioniert leider nicht im Naviga-tor.

ZeilenlängeDie Zeilenlänge/Spaltenbreite eines Textes kannstDu kontrollieren, indem Du diesen Text in eine Zelleeinsetzt, deren Breite in Pixel definiert ist. Vollstän-dige Kontrolle über Zeilenlänge und Umbruch er-hältst Du so wohlgemerkt nicht, da die Größe eines�Normaltexts� etwa bei PC und Macintosh nichtgleich ist, Du hast aber wesentlich mehr Einfluß aufden Text in Tabellen als auf den auf einer Normal-seite, wo die Zeilenlänge grundsätzlich an die Fen-sterbreite angepaßt wird.

SpaltenEin Spalten-Layout erstellst Du, indem Du DeinenText in kleinere Bruchstücke aufteilst, die Du dann inmehrere waagerechte Zellen einer Tabelle verteilst.Eine Spalte sollte möglichst nicht mehr als 300 Pixelhoch sein, da man sonst durch den Bildschirm scrol-len muß, um vom Ende der ersten Spalte zum Anfangder nächsten zu kommen.

Der Nachteil dabei ist, daß Du Deinen Text vonHand so aufteilen mußt, daß Deine Zellen korrektausgefüllt werden. Aber so ist das eben�

LeerzellenZellen ohne Inhalt sind nützlich für das Layout � al-lerdings befolgen sie nicht unbedingt die Pixel-größen, mit denen Du sie definierst. Zellen, die Textenthalten, können zum Beispiel �leere� Zellen durchihre Breite �wegdrücken�. Setzt Du eine Zeile mit ei-ner Reihe von nonbreaking spaces in eine leere Zel-le, zwingst Du sie dazu, mindestens die entsprechen-de Breite einzunehmen.

Bildbehandlung


32

Merkwürdige Einteilungen

Die Balken zwischen den Zellen ziehen sich waage-recht wie senkrecht durch die gesamte Tabelle. Un-mittelbar ist es nicht möglich, eine breitere Zelle un-ter eine schmalere zu setzen. Das kannst Du aberumgehen, indem Du Zellen miteinander verschmilzt.

In unserem Beispiel habe ich ein Layout erstellt,das zunächst lauter Zellen von 4 x 5 enthält. An-schließend habe ich Zellen auf verschiedene Weisewaagerecht miteinander verschmolzen und dannmeine Textteile in diese Zellen eingesetzt. Um dieBreite der Säule zu sichern, habe ich in die unterelinke Zelle eine Reihe von festen Leerstellen gesetzt.

Die Artikel in www.hotwired.com/synapse/sind ein gutes Beispiel für die Benutzung von Tabel-len im Layout.

Vom Textdokument zu HTMLDie perfekte Methode, um Text aus einer Text-verarbeitung in HTML zu verwandeln, gibt es nicht.Zum einen sind die Unterschiede zwischen demWeb- und dem Papiermedium (für das Textverarbei-tungen entwickelt wurden) groß, zum andern sind dietypographischen und layoutmäßigen Möglichkeitenvon HTML immer noch recht primitiv, verglichenmit denen einer normalen Textverarbeitung. Layout,also Seitengestaltung, Seitenränder, Textfelder, Gra-fikplazierung, Spalten, lassen sich nicht ohne weite-res in HTML überführen.

Nur wenige typographische Formatierungen wiefett, kursiv, Schriftgröße (wenige Stufen), Einzugund Justierung sind anwendbar. Formatierungen wieZeilenabstand, Einzug der ersten Zeile in einem Ab-satz, Tabulatoren, Seitenränder, Abstand zwischenAbsätzen und so weiter werden in HTML nicht un-terstützt.

Viele Spezialzeichen und mathematische Symbolewerden von HTML nicht unterstützt.

Bilder können von Textverarbeitungen in HTMLüberführt werden, meist ist es aber einfacher, die ur-sprüngliche Bilddatei in GIF oder JPEG zu konver-tieren und dann über den Webeditor in die Seite ein-

zufügen. Überschriften, Listen und Tabellen lassensich dagegen ohne weiteres in HTML übersetzen.

Im Endergebnis kann also nur der Text mit seinerfunktionellen Struktur, also Überschriften, fett, kur-siv, Listen und Tabellen, in einer Textverarbeitungerstellt und in HTML überführt werden. Die visuelleSeite der Sache, als da wären Layout, Farben, Grafikund so weiter, muß nach dem Import des Textes imWebeditor erstellt werden. Auch die Links � undeventuelle Multimedia- oder interaktive Elemente �müssen selbstverständlich im Webeditor eingefügtwerden, da sie eng mit dem HTML-Format verbun-den sind.

Text läßt sich auf zwei Arten von einer Text-verarbeitung in HTML überführen: Du kannst dasDokument von der Textverarbeitung in HTML kon-vertieren lassen oder aber das Dokument der Text-verarbeitung in den Webeditor einlesen und dort dienotwendige Konvertierung vornehmen. In jedem Fallwird nur die grundlegende Struktur überführt � allesandere muß im Webeditor überarbeitet und mit Lay-out versehen werden.

PageMill und FrontPage können Dokumente derüblichsten Textverarbeitungen lesen wie auch Do-kumente im Format RTF, einer Art�Austauschformat� für Textdokumente. Alle Textver-arbeitungen können Text als RTF speichern.

Netscape Composer und Claris Home Page kön-nen keine Textverarbeitungsformate lesen, sondernnur HTML, oder reinen, nichtformatierten Text. Hiermußt Du Deinen Text also entweder bereits in derTextverarbeitung als HTML speichern oder aber alsreinen Text, wodurch natürlich alle Formatierungenverloren gehen.

Die neuesten Versionen von Word und WordPer-fect können ein Dokument unmittelbar als HTMLspeichern. Etwas ältere Versionen können über Ma-kros oder Hilfsprogramme um die Möglichkeit derSpeicherung als HTML erweitert werden, zum Bei-spiel mit Microsofts Word Internet Assistant.

QuarkXPress, Pagemaker etc.Es ist möglich, Dokumente aus Layoutprogrammenwie QuarkXPress und Pagemaker in HTML zu über-führen, wie bei Textverarbeitungen geht unterwegsaber ein Großteil an Formatierung und Layout verlo-ren. Es lohnt sich also nicht, Webseiten in diesenProgrammen zu erstellen und sie dann in HTML zukonvertieren. Normalerweise wird ein solches Lay-out-Dokument mit Text aus einer Textverarbeitungerstellt. Also ist es sicher einfacher, den Text derTextverarbeitung und die gewünschten Bilder imWebeditor zu sammeln.

Welcher Browser unterstützt was?


33

Welcher Browser unterstützt was?Man muß wissen, welche Browser welche Mög-lichkeiten unterstützen.

Bekanntlich wird HTML regelmäßig um neue Ide-en der führenden Browserentwickler Netscape undMicrosoft bereichert. W3C, Entwickler und�Wächter� des HTML-Standards, denkt im allgemei-nen länger und gründlicher über alles nach, weswe-gen der von dort empfohlene Standard meist der re-ellen Situation im Netz ein Jahr hinterherhinkt. Dasbedeutet, daß experimentelle Erweiterungen auspro-biert werden können, bevor sie akzeptiert werden.Zum Beispiel waren viele Webdesigner begeistertvon Frames, als sie von Netscape eingeführt wurden,inzwischen haben sie sich aber als etwas pro-blematisch erwiesen, weswegen sie vermutlich nie inden empfohlenen Standard integriert werden. W3Cund die Browserproduzenten experimentieren nunmit einem Frame-Modell, das über Style Sheets er-stellt wird, was die Sache hoffentlich besser macht.Andererseits benutzen viele Leute natürlich Frames,bis eine Alternative mit entsprechender Funktionali-tät erscheint, ohne Rücksicht auf die Meinung vonW3C.

Heute heißt die empfohlene Version HTML 3.2,die den Großteil der aktuellen Möglichkeiten enthält.Hältst Du Dich an die Tags von HTML 3.2, kannstDu davon ausgehen, daß alle durchschnittlichenBrowser Deine Dokumente darstellen. Es folgt nuneine Liste der Erweiterungen, die nicht zum Standardgehören, sowie die Angabe der Browser, die sie un-terstützen.

Navigator 2.0 und MSIE 2.xFolgende Tags sind nicht HTML-Standard, werdenaber so gut wie allgemein unterstützt:• Frames (frameset, frame, target, base target)• Einsatz von Plug-Ins (embed)• Animierte GIFs

Navigator 3.0 und MSIE 3.0Folgende werden weitgehend, aber nicht allgemeinunterstützt:• Farbige Framekanten oder unsichtbare Frames

(allerdings mit verschiedenen Tags!).• Angabe des Zeichensatzes (font face).• Hintergrundfarbe in Tabellenzellen. (td/tr/th

bgcolor)

Nur NavigatorFolgende Tags werden vom meistbenutzten Browserunterstützt, es ist aber fraglich, ob sie anderswo ak-zeptiert werden:

• Blinkender Text (blink, ab Navigator 1.1) Esgibt komplette Websites, die sich dem Hohn undSpott dieses für viele offensichtlich irritierendenTags widmen. Netscapes Rechtfertigung findestDu, wenn Du in Netscapes Adressenfeldabout:mozilla schreibst.

• Spalten (multicol, ab Navigator 3) DieselbeWirkung erreichst Du mit Tabellen.

• Leere Felder (spacer, ab Navigator 3) Eigentlichein recht praktisches Tag, mit dem Du Leerfeldererstellen kannst. Mit Style Sheets erreichst Duaber dasselbe.

• Den Inhalt eines Formulars an eine E-Mail-Adresse anstelle eines CGI-Programms zu sen-den. Das ist eigentlich sehr praktisch � schade,daß MSIE das nicht unterstützt.

Nur MSIEDiese Tags genießen keine breitere Unterstützungund werden das vermutlich nie erreichen:• Hintergrundmusik (body bgsound) Mit Plug-Ins

kannst Du dasselbe auf allgemein unterstützteWeise erreichen.

• Wasserzeichen (body bgproperties=fixed), einHintergrundbild, das nicht mit dem Textgescrollt wird. Dasselbe erreichst Du mit StyleSheets (obwohl ich nicht weiß, was das eigent-lich soll �).

• Seitenrand (body leftmargin/topmargin) Gibtden Abstand von der Fensterkante zum Inhalt derSeite an. Eigentlich sehr praktisch! In StyleSheets kannst Du dies ebenfalls angeben.

• Erweiterungen zu img, um Filme darzustellen(img dynsrc). Mit Plug-Ins erreichst Du dasselbeauf allgemein unterstützte Weise.

• Schwebende Frames (iframes). Das ist eineWebseite, die als Fenster über eine andereWebseite gelegt wird. Das Fenster scrollt mit derWebseite.

• Waagerecht rollender Text (marquee). DerGrund dafür, daß ich Navigator vorziehe. Mit derActiveX-Technik kannst Du auch senkrecht rol-lenden Text erstellen.

• Erweiterungen zum Aussehen von Tabellen, zumBeispiel farbige Schatten und Hintergrundbilderin Zellen.

Folgende Tags werden noch nicht allgemein unter-stützt, das kommt aber sicher:• W3C-entwickelte Erweiterungen zu Tabellen.• Object-Tag• Style Sheets

Welcher Browser unterstützt was?


34

Plug-Ins, Java, JavaScript, ActiveXIm Teil 4 erfährst Du mehr darüber, wie diese Tech-niken funktionieren und in wieweit sie unterstütztwerden. Im allgemeinen kann man nicht unbedingtdamit rechnen, daß sie benutzt werden � der Browserunterstützt sie zwar, sie können aber deaktiviert wer-den.

CGIFormulare und CGI werden von allen Browsern un-terstützt.

Für welche Browser soll man planen?Solltest Du die neuesten Erweiterungen benutzen undDeine Besucher auffordern, den neuesten Browserdownzuloaden? Oder solltest Du Deine Seiten soentwerfen, daß selbst die ältesten Browser sie dar-stellen können?

Das ist eine vieldiskutierte Frage. Und dabeikannst Du ohne weiteres Seiten erstellen, die dieneuesten Möglichkeiten ausnutzen und dennoch auchauf älteren Browsern zufriedenstellend dargestelltwerden.

Allgemein würde ich sagen, daß Du für die Be-dürfnisse Deines Publikums entwerfen solltest. Undman hat nun einmal den Browser, den man hat � Duwirst vermutlich niemanden zum Downloaden einesneuen Browsers veranlassen, wenn Du schreibst:�diese Seite wirkt am besten mit ��

Browser und ihre VerbreitungDrei Browser sind weitverbreitet: Netscape Na-vigator 2.0, Netscape Navigator 3.0 und MSIE 3.0.Zusammen beherrschen sie vermutlich etwa 95 Pro-zent des Marktes. Netscape ist entschieden der größ-te. MSIE hat vermutlich etwa 25 Prozent und Navi-gator den Rest. Diese Zahlen sind aber recht grob ge-schätzt und ändern sich konstant. Die 4.0-Browserwerden sich vermutlich im kommenden Herbst ziem-lich weit verbreiten, der Navigator 2.0 bleibt aberwohl noch lange der kleinste gemeinsame Nenner.

Den Navigator gibt es für viele Plattformen, ein-schließlich VMS und OS/2. MSIE gibt es fürWin95/NT, Windows 3.11 und Macintosh, das Pro-gramm hat aber nur für Win95/NT größere Bedeu-tung.

RückversicherungBenutzt Du Tags, die nicht von allen Browsern ver-standen oder angewendet werden, solltest Du das sotun, daß kein Fehler oder Informationsverlust ent-steht.

• Farben: Die Definition von Text- und Doku-mentfarben wird zwar von allen neueren Brow-sern unterstützt, der Benutzer kann aber eigeneFarben definieren, die gegenüber den von Dir imDokument (über Options|General Preferen-ces|Color (Optionen|Allgemeine Einstellun-gen|Farben) im Navigator) definierten Farbenden Vorrang haben. Du solltest also keinesfallssinngebende Markierungen ausschließlich überFarben definieren � etwa rot statt fett benutzen.

• Zeichensätze: das Font face-Tag wird nicht all-gemein unterstützt. Darum solltest Du es nicht alseinzige sinngebende Markierung benutzen.Font face darf niemals für Zeichen außerhalb desnormalen Zeichensatzes benutzt werden � also fürgriechische Schriftzeichen, Symbole oder�Wingdings�. Das funktioniert weder in unter-schiedlichen Browsern noch auf verschiedenenPlattformen!

• Grafiken � Viele Leute deaktivieren Grafikenbeim Surfen (Options|Auto Load Images(Optionen|Grafiken automatisch laden) imNavigator). Darum solltest Du grundsätzlich al-ternativen Text angeben, es sei denn das Bild hatausschließlich dekorative Bedeutung.

• Clientside Imagemaps � Manche ältere Browserunterstützen dieses Imagemap-Format nicht. Au-ßerdem nützen Imagemaps wenig, wenn die Gra-fik deaktiviert wurde. Darum solltest Du die ent-sprechenden Links immer auch als Text-Linkssetzen.

• Frames � Frames sind ganz besonders vertrackt.Hast Du nicht eine komplette alternative Seite fürden Frameset erstellt, sehen Leute, deren BrowserFrames nicht unterstützt, schlicht eine leere Seite!Frames werden heute allerdings von den meistenBrowsern unterstützt.

• Zellenfarbe � ist gefährlich! Hast Du weißenText auf schwarzem Zellenhintergrund auf einerweißen Seite, wird der Text in allen Browsern, diefarbigen Zellenhintergrund nicht unterstützen, un-sichtbar.

Andere Dokumentenformate


35

Andere DokumentenformateAlle möglichen Dateiformate lassen sich über dasWeb überführen. Ein Link kann sich an ein downzu-loadendes Programm richten, an einen Videofilm, einWordPerfect 4.1-Dokument� Das einzige Problemist, ob der Browser weiß, was er mit derempfangenen Datei anfangen soll.Einen Link zu einer Nicht-HTML-Datei erstellst Dugenauso wie einen Link zu einer HTML-Datei. Dereinzige Unterschied ist, daß der Dateiname eineandere Endung hat als .html .Sendet der Server eine Datei an den Browser, teilt erzunächst mit, zu welchem MIME-Typ die Dateigehört. MIME-Typen sind eine standardisierteAngabeweise für Datenformate. Sie enthalten denNamen einer Hauptgruppe und einer Untergruppe,getrennt durch einen Schrägstrich, zum Beispieltext/html, image/jpeg oder world/vrml.Woher weiß der Server aber, welchen MIME-Typeine Datei hat? Ist er nicht speziell konfiguriert, stellter aufgrund der Dateiendung im Namen eine Vermu-tung auf � wie übrigens auch der Browser, wenn ereine Datei von der Festplatte öffnet. Darum solltestDu darauf achten, daß Dateien die richtigen Endun-gen haben.Aufgrund des MIME-Typs entscheidet der Browser,wie die Datei zu behandeln ist.HTML-Seiten und GIF/JPEG-Grafik werden unmit-telbar im Browserfenster dargestellt. Dateien, die voneinem installierten Plug-In verarbeitet werden kön-nen, werden von diesem im Browserfenster wieder-gegeben. Manche Dateitypen werden an externeProgramme weitergegeben � wie zum Beispiel kom-primierte Dateien an ein Auspacker-Programm.Andere Dateien werden auf der Festplatte gespeich-ert, zum Beispiel Programme. Kennt der Browser dasempfangene Datenformat nicht, fragt er, was er mitder Datei machen soll. Weiteres findest Du im HeftAuf ins Word Wide Web im Abschnitt Hilfsprogram-me für Spezialformate.Willst Du vermeiden, daß die Datei von einem exter-nen Programm auf dem Client-Computer geöffnetwird, kannst Du sie komprimieren � dann wird sienämlich in jedem Fall auf der Festplatte gespeichert.

Welche Dokumentenformate sind an-wendbar?Im Internet geht es grundsätzlich um den Austauschvon Informationen in Formaten, die von Absenderund Empfänger verstanden werden. Es ist nämlichdurchaus möglich, Text im Format Wordstar 2.5.1 bfür Atari ins Web zu legen � ob der Empfänger die-ses Dokument versteht, ist aber nicht unbedingt si-cher�

Verläßt Du HTML, solltest Du Dich an die allge-mein anerkannten Dokumentenformate halten:

Textverarbeitungsdokumente: RTFRTF ist ein Austauschformat für Textverarbeitungs-dokumente. Die meisten modernen Textverarbei-tungen können in diesem Format öffnen und spei-chern. RTF empfiehlt sich, wenn man ein Textverar-beitungsdokument ins Web legen will. Das Formatbewahrt die meisten der Formatierungen, die in einerTextverarbeitung möglich sind, sowie Sonderzeichenwie ä, ö und ü. RTF wurde von Microsoft entwickelt.

Dokumente mit Layout: PDFPDF, ein Format, das von der Firma Adobe entwik-kelt wurde, ermöglicht den Austausch von Doku-menten mit fertigem Layout.

PDF kann Layout von professionellem Standardebenso präzise wiedergeben, wie man es in Layout-Programmen wie Quark XPress oder Pagemaker er-stellen kann. PDF eignet sich vor allem für die Über-führung von Dokumenten, die ausgedruckt werdensollen, und wird besonders auch für die Veröffentli-chung von Handbüchern, Büchern, Broschüren undso weiter benutzt.

PDF erfordert kein Layoutprogramm, um eineDatei zu öffnen. Adobe hat ein kleines kostenlosesProgramm namens Acrobat Reader entwickelt, mitdem man PDF-Dokumente öffnen, lesen und aus-drucken kann.

Den Acrobat Reader findest Du beiwww.adobe.com.

Und dahinter: die HTML-Codes


36

Und dahinter: die HTML-CodesBisher haben wir uns an das freundliche WYSIWYG-Interface gehalten, um die Arbeit an Websites zu be-schreiben. Nun geht es darum, wie man mit dem eigentlichen HTML-Code arbeitet.

In den Webeditoren kann man sich dafür entscheiden, im Hauptfenster den hinter dem Dokument verborge-nen HTML-Code zu zeigen. Hier kann man diesen Code modifizieren oder ihn gänzlich neu schreiben.

Hinein in den HTML-CodePageMill Edit|HTML SourceComposer Edit|HTML Source (allerdings wird der Code an ein externes Programm gegeben, z.B. Notepad.)FrontPage View|HTML (Ansicht|HTML)Claris Window|Edit HTML Source

Warum sollte man aber im Grunde im HTML-Code arbeiten, wenn man seine Seiten mit WYSIWYG erstellenkann? Normalerweise ist das auch nicht nötig, ein Super-Webdesigner kommt aber aus mehreren Gründennicht daran vorbei:• Ein Webeditor hinkt immer einen Schritt hinter einem Browser her. Wird eine neue Erweiterung in einen

Browser integriert, kommt ein Webeditor mit dieser Funktion meist erst ein halbes Jahr später heraus. Willman ganz vorne sein, muß man daher vermutlich direkt in HTML schreiben.

• Kein Webeditor ist perfekt. Soll etwas optimal funktionieren, muß man unter Umständen selbst im HTML-Code feinjustieren.

HTML � von Anfang anHTML ist Text mit Tags. Ein Tag ist ein Formatierungscode, der ein Stück Text markiert und Angaben dazumacht, zum Beispiel wie es aussehen soll. Ein Tag besteht aus einem Code, der von < und > eingeschlossenwird. Die Markierung, an deren Eingang ein Tag steht, wird von einem weiteren Tag mit demselben Namenund mit einem / vor dem Namen abgeschlossen. Hier folgt ein Beispiel für HTML:Standard Das ist eine fette Sache! Standard

B ist das Tag für fette Schrift (Bold). Ein Tag wird grundsätzlich mit einem einzelnen Wort ohne Zwischen-raum oder Sonderzeichen bezeichnet, wie es auch keinen Zwischenraum zwischen den Spitzklammern und derTagbezeichnung gibt.

Tags können ineinander verschachtelt werden:Baden im Regen macht nicht fett.

I ist das Tag für kursive Schrift (Italic). Absätze werden ebenfalls durch Tages gekennzeichnet: <H1>Baden im Regen</H1>Regenschirme sind irrelevant. Aber Vorsicht bei Gewittern!

P ist das Tag für einen Standardabsatz (Paragraph), H1 bezeichnet eine Headline 1 (Überschrift 1). Also sindes die Tags und nicht etwa die Zeilenwechsel, die einen Absatz definieren. Zeilenwechsel (also der Druck aufReturn) spielen im HTML-Code keine Rolle für das Aussehen der Webseite.

Die meisten Tags bestehen aus einem Anfangs- und einem End-Tag, es gibt aber auch alleinstehende Tags:Nie wieder will ich sehen

Das BR-Tag bezeichnet einen Zeilenwechsel, was Umschalt + Return entspricht, und muß nicht geschlossenwerden.

Ich schreibe hier alle Tag-Bezeichnungen mit Großbuchstaben. Das ist allgemein üblich und außerdem übe r-sichtlich, es ist aber nicht notwendig � HTML-Tags kennen keinen Unterschied zwischen Groß- und Klein-buchstaben.



37

AttributeDie meisten Tags lassen sich durch Attribute erweitern � genauere Angaben zur Funktion dieses Tags. Ein At-tribut besteht im allgemeinen aus einem Namen und einer Wertangabe, die durch ein Gleichheitszeichen mi t-einander verbunden werden. Ein Link kann zum Beispiel folgendermaßen aussehen: <A HREF="anderswo.html">Hier nicht klicken!</A>

A bedeutet Anchor (Anker, Ziel), das Attribut HREF bedeutet Hyper Reference (Zielverweis), und sein Wertist ein URL � in diesem Falle ein relativer.

Eine Grafik wird über das IMG-Tag folgendermaßen eingefügt: <IMG SRC="/imgs/ente.gif" WIDTH=100 HEIGHT=150 ALT="Ente">

Die Attribute eines Tags entsprechen in etwa den Eigenschaften, die man in PageMills Inspector oder imProperties(Eigenschaften)-Dialog in FrontPage und Composer einfügen kann, wenn das entsprechende Ele-ment im Editor gewählt ist.

Der Name eines Attributs besteht wie ein Tagname aus einem einzelnen Wort ohne Zwischenraum oderSonderzeichen. Attributwerte dagegen können alle möglichen Zeichen enthal ten, solange sie in Anführungs-zeichen stehen. Enthält der Wert nur Buchstaben, Zahlen oder Bindestriche, sind die Anführung szeichen über-flüssig.

Ein Attribut kann auch als alleinstehendes Wort erscheinen � wie in . Tagname und Attribut müssen durch einen Zwischenraum getrennt werden, wie auch mehrere aufeinander

folgende Attribute. Zwischen Attributnamen, Gleichheitszeichen und Attributwert dagegen entfällt der Zwi-schenraum.

Bei mehreren Attributen spielt ihre Reihenfolge keine Rolle. Attribute werden nicht in den End-Tags wiederholt: Diese Schrift ist groesser

Syntaxregeln Tags dürfen sich nicht überschneiden: Falsch: normalfettfett normal Richtig: normalfettfettnormal

StrukturEin HTML-Dokument enthält grundsätzlich zwei Blöcke: den HEAD- und den BODY-Block. Der HEAD-Block enthält Informationen, die nicht direkt im Fenster erscheinen, wie zum Beispiel den Titel. Der BODY-Block enthält den sichtbaren Inhalt, das heißt alle Textbereiche, Grafiken und so weiter. Das Gesamtdokumentist logischerweise ein HTML-Block:<HTML> <HEAD> <TITLE>Dokumenttitel</TITLE> �weitere Meta-Information Meta-Information� </HEAD> <BODY> �der sichtbare Inhalt der Seite� </BODY></HTML>

KommentarEin Kommentar ist ein Text, der von Browser und Editor ignoriert wird. Er steht zwischen , wie zum Beispiel Ein Kommentar darf weder -- noch > enthalten, also auch keine Tags. In PageMill wird ein Kommentar durchdas abgebildete Symbol gekennzeichnet.

In PageMill fügst Du einen Kommentar über Edit|Insert Invisible|Comment ein.



38

ZwischenraumHTML �minimiert Zwischenräume� � gibt es mehr als eine Leerstelle zwischen zwei Wörtern, werden dieüberzähligen ignoriert, ebenso wie Leerstellen vor oder nach einem Absatz.

Ein Zeilenwechsel wird in HTML wie ein Zwischenraum behandelt � er trennt zwei Wörter, und mehrereZeilenwechsel hintereinander werden genau wie mehrere Leerstellen nur als normale Leerstelle zwischen zweiWörtern wiedergegeben.

Mit anderen Worten kann man im HTML-Code etliche Zeilenwechsel und Leerstellen einsetzen, ohne daßdas irgendeinen Effekt auf die Darstellung der Seite im Browser hat.

SonderzeichenDie Zeichen des US-ASCII-Zeichensatzes werden in einer HTML-Datei ganz normal geschrieben. Ä, Ö, Ü undandere europäische Sonderzeichen, werden mit speziellen Codes eingesetzt, die mit einem &-Zeichen beginnenund mit einem Semikolon enden, etwa ä für ä, ö für ö und ü für ü.

Der Text �Nüsse und Äpfel sind etwas Schönes� sieht in HTML so aus: Nüsse und Äpfelsind etwas Schönes. Wie Du siehst, entfallen bei diesen Zeichencodes < und >.

Im ISO-8859-1-Zeichensatz gibt es einen Code, eine sogenannte Character Entity Reference, jedes Zeichen,das nicht zum US-ASCII-Zeichensatz gehört. Außerdem gibt es die Codes < für <, > für >, " fürAnführungsstriche und & für &. Die letzteren werden benutzt, wenn diese Zeichen nicht als Teile desHTML-Codes dienen, sondern vom Leser gesehen werden sollen.

Man kann sich auch mit einer Codenummer statt eines Namens auf ein Zeichen beziehen, zum BeispielÀ für das Zeichen Nr. 192 im Zeichensatz ISO-8859-1 � das verstehen aber nicht alle Browser korrekt.

Übersicht über alle HTML-Tags und -AttributeWillst Du Dich tiefer in HTML vergraben, brauchst Du eine Übersicht über alle HTML-Tags, ihre Syntax undihre Attribute. Eine solche Übersicht findest Du vielerorts im Web. Die Web Design Group hat eine ausge-zeichnete und gut geschriebene Übersicht über Wilbur, wie der Spitzname von HTML 3.2 lautet, unter derAdresse www.htmlhelp.com. Diese Übersicht gibt es auch als Windows-Hilfedatei, was eigentlich ziemlichpraktisch ist.

Die offiziellen Spezifikationen findest Du selbstverständlich beim W3C unter www.w3.org. Eine Übersicht über HTML-Tags und Attribute findest Du im Online-Supplement des Heftes.

The NCSA Beginner's Guide to HTML ist ein guter Ausgangspunkt für weitere Experimente.www.ncsa.uiuc.edu/General/ Internet/WWW/HTMLPrimer.html

HTML im Editor einfügen

Tags einfügenIn manchen Editoren kann man vom Editor aus Tags einfügen.

Tag einfügenPageMill Über Edit|Insert Placeholder kannst Du willkürliches HTML einfügen.Composer Über Insert|HTML Tag kannst Du ein einzelnes Tag einfügen.FrontPage Über Insert|HTML Markup (Einfügen|HTML-Code) kannst Du �handgeschriebenes� HTML einfü-

gen.Claris Läßt sich nicht machen � BUH!

Setzt Du ein Tag ein, das PageMill nicht versteht, deutet der Editor das mit einem kleinen Symbol mitFragezeichen an. Markierst Du das Fragezeichen, kannst Du das entsprechende Tag im Inspector sehenund modifizieren.

Über Edit|Insert Placeholder kannst Du eigenen HTML-Code in PageMill einfügen. Es erscheint einSymbol, das einen Kegel zeigt, und wird dieses Symbol markiert, kannst Du den Inhalt im Inspector



39

ändern. Du kannst sogar ein Bild einfügen, das anstelle des Kegelsymbols im Editor erscheint. Wozu das gutsein soll, weiß ich eigentlich nicht � findest Du eine Erklärung, würde ich mich über eine E-Mail freuen.

Ein Attribut im WYSIWYG-Zustand einfügenManche Editoren erlauben das Einfügen eines Attributs zu einem Tag, auch wenn der Editor im WYSIWYG-Zustand steht. Das Dialogfeld für die Änderung der Eigenschaften eines Elements, das Du mit der rechtenMaustaste aktivierst, enthält einen Schaltknopf, mit dem Du weitere Attribute einfügst. Diese werden in dasTag eingesetzt, das dem Element entspricht, dessen Eigenschaften Du ändern willst.

Attribut im Editor einfügenPageMill Läßt sich nicht machen � BUH!Composer Extra HTML in PropertiesFrontPage Advanced (Erweitert) in Properties (Eigenschaften)Claris Extra HTML auf dem Advanced-Registerblatt im Object Editor

Meta-Information zu einem DokumentMit dem meta-Tag kannst Du Metainformationen in ein Dokument einfügen, das heißt Informationen, die die-ses Dokument beschreiben. Zum Beispiel kannst Du einige Kernbegriffe zum Dokument angeben, die dannvon Such- und Indexierungsmaschinen benutzt werden können.

Das Meta-Tag gehört in den Kopf des Dokuments und kann folgendermaßen aussehen: <META NAME="keywords" CONTENT="sex, lügen, video">

Im Name gibst Du an, was Du beschreibst, und Content ist der eigentliche Inhalt/die Beschreibung.

Ein Meta-Tag einfügenPageMill Ein Meta-Tag muß von Hand über Edit|HTML source eingegeben werden. Vergiß nicht, es in die

Head-Markierung zu setzen.Composer Page Properties, Registerblatt META TagsFrontPage File|Page Properties (Datei|Seiteneigenschaften), Registerblatt Custom (Benutzerdefiniert)Claris Das komplette Meta-Tag wird eingesetzt mit Edit|Document Options, Registerblatt HTML Extras,

Feld Text in Head Section

Die HTML-Spezifikationen legen nicht fest, welche Name-Werte benutzbar sind, jeder muß also selbernützliche Metabeschreibungen finden.

Die üblichsten Meta-Namen sind Keywords und Description, die von mehreren Suchmaschinen benutztwerden, wie zum Beispiel AltaVista und Infoseek. Description ist eine kurze Beschreibung der Seite: <META NAME=�Description� CONTENT=�T. S. Eliot Forum. Gesammelte Gedichte, Biographie, Bibliographie,Analysen sowie ein Statusleisten-Fliesstext�>

AltaVista zeigt nun diese Beschreibung an, statt, wie sonst üblich, die ersten Textzeilen. Die meisten Editorensetzen automatisch eine �Signatur� in ein Dokument, zum Beispiel: <META NAME="Generator" CONTENT="Adobe PageMill 2.0 Win">

Es ist durchaus denkbar, daß irgend jemand irgendwo diese Signatur indexiert � Du kannst auch selbst dieSeiten signieren, die Du erstellst: <META NAME="Author" CONTENT="Matthias Claudius">



40

Style SheetsÜber Style Sheets kannst Du die typographische Gestaltung einer Webseite beeinflussen. Du hast vermut-lich bereits festgestellt, daß HTML nur eine geringe Variierung des Layouts erlaubt � eigentlich muß mansozusagen mogeln, um in HTML etwas hinzukriegen, das gut aussieht. Neuerdings hat W3C aber dieStandard Style Sheets entwickelt, mit deren Hilfe man Punktgröße, Zeilenhöhe, Seitenrand, Zeichensatz,Schriftschnitt, Einzug und so weiter einrichten kann. Nun kann man tatsächlich flotte Webseiten machen!

Dieser Standard ist allerdings so neu, daß er bisher nur vom Navigator 4 unterstützt wird, und in einge-schränkter Form vom MSIE 3. MSIE 4 wird diesen Standard ebenfalls unterstützen, also wird er sich si-cher durchsetzen und mit der Zeit zur geltenden Richtschnur für das Layout von Webseiten werden. Dar-um will ich diesem Phänomen auch etwas Platz einräumen.

Style Sheets bauen auf einem einfachen Prinzip auf: Der Kopf eines Dokuments enthält einen Block,der die Regeln oder Deklarationen dafür enthält, wie die Markierungen in HTML typographisch wieder-zugeben sind. Man kann zum Beispiel festlegen, daß alle Überschriften mit Helvetica 30 Punkt gezeigtwerden. So trennt man Form und Inhalt: im eigentlichen HTML wird die Struktur des Textes und dieFunktion seiner Elemente definiert, im Style Sheet dagegen sein typographisches Erscheinungsbild.

Das Style Sheet kann in den Kopf eines Dokuments gesetzt werden � es kann aber auch ein selbständi-ges Dokument sein, das mit dieser Seite und außerdem auch mit anderen Seiten verknüpft wird.

Style Sheets sind aus mehreren Gründen genial:• Die Änderung einer einzelnen typographischen Spezifikation beeinflußt das Layout einer ganzen Seite

oder gar mehrerer Seiten.• Da typographische Tags überflüssig werden, wird das eigentliche HTML einfacher.• Weil ihre Regeln ein Überbau über den existierenden Tags sind, kann man Style Sheets mit existieren-

den Seiten verknüpfen, indem man nur eine einzelne Zeile hinzufügt.• Man kann die sinntragenden Markierungen benutzen, die für Such- und Indexierungsmaschinen wich-

tig sind, und dennoch ein flottes Layout erreichen.

Soweit ich weiß, werden Style Sheets bisher von keinem Editor unterstützt. Es ist aber relativ einfach, mitihnen zu arbeiten: Du öffnest die entsprechende Seite in einem Texteditor und hast gleichzeitig ein Doku-ment in Deinen Browser geladen, das das Style Sheet implementiert. Jede Änderung im Style Sheet kannstDu unmittelbar testen, indem Du das Dokument speicherst und es im Browser neu lädst.

Style Sheets werden in einer simplen typographischen Sprache namens CSS (Cascading Style Sheets) ge-schrieben. Das sieht zum Beispiel so aus:H1 { font-family: Helvetica }

bedeutet, daß alle Absätze im H1-Format, also die größten Überschriften, im Zeichensatz Helvetica darge-stellt werden. Ein Style Sheet ist schlicht ein Regelsatz dieses Typs.

Style Sheets einfügenEin Style Sheet wird in den Dokumentenkopf mit einem neuen Tag namens Style eingefügt:<HEAD> <TITLE>Beispiel eines Style Sheets im Dokumentenkopf</TITLE> <STYLE>  </STYLE></HEAD>



41

Das Style Sheet steht in einem Kommentar-Tag, was bedeutet, daß Browser und Editoren, die auf StyleSheets nicht vorbereitet sind, sich hierdurch nicht verwirren lassen. Unterstützt ein Browser Style Sheets,ignoriert er die Kommentarzeichen im Style-Tag und liest das Style Sheet aus.

Ist das Style Sheet ein selbständiges Dokument, mußt Du über ein Link-Tag im Dokumentenkopf aufdieses Dokument verweisen:<LINK REL=StyleSheet HREF=�derneuestil.css� TYPE=�text/css�>

Das Style Sheet wird wie eine normale Textdatei in einem Texteditor wie zum Beispiel Wordpad ge-schrieben.. Die Datei mit dem Style Sheet muß die Endung .css haben.

SyntaxEin Style Sheet besteht aus einer Anzahl von Regeln. Jede Regel setzt sich zusammen aus einem Selector� einem oder mehreren Tags, für die die Regel gilt � und einer Schweifklammer, die eine oder mehrereDeklarationen enthält:P { color: blue; font-size: 12pt }H1 { font-size: 24pt }

P und H1 sind hier Selectors. Jede Deklaration besteht aus dem Namen einer Eigenschaft (Property), ei-nem Doppelpunkt und einem Wert, auf den die Eigenschaft gesetzt wird. Gibt es mehrere Deklarationen,werden sie durch ein Semikolon getrennt.

Spezifikationen für CSSEs gibt zahlreiche Möglichkeiten in CSS, zum Beispiel Schriftschnitt, Schriftgröße, Kapitälchen, Durch-schuß, Zwischenraum, Einzug, Textgröße und -farbe, Seitenränder, Rahmentyp und Hintergrundfarbe oder-bild für alle Elemente.

Die kompletten Spezifikationen sowie eine gute Gebrauchsanweisung findest Du bei der bereits er-wähnten Web Design Group unter der Adresse www.htmlhelp.com.

Layers und Absolute PlacementDer nächste Schritt für CSS heißt Layers and absolute placement. Layers bedeutet, daß man mehrere Ebe-nen von Grafik und Text übereinander legen kann, und Absolute Placement besagt, daß Du genau defi-nierst, wo ein Text- oder Grafikelement auf dem Bildschirm angebracht wird. Die Kombination dieserMöglichkeiten versieht HTML mit ziemlich weitreichenden Layoutfähigkeiten.

Die Spezifikationen für diese Punkte findest Du unter www.w3.org/TR/WD-positioning. Naviga-tor 4 und MSIE 4 unterstützen beide diese Spezifikationen.

Style Sheets � die ZukunftDer Mechanismus der Style Sheets ist so flexibel, daß viele verschiedene Ausformungen mit HTML-Dokumenten verknüpft werden können. Zur Zeit plant man Mechanismen, mit denen man verschiedeneStyle Sheets an verschiedene Situationen binden kann, zum Beispiel ein Style Sheet für die Darstellungeiner Seite auf einem Taschencomputer und ein anderes für ihre Darstellung auf einem großen Farbbild-schirm.

Style Sheets werden natürlich erst dann wirklich interessant, wenn sie allgemein in Browsern unter-stützt werden. Das dauert aber mindestens noch ein halbes Jahr. Und dann gibt es sicher auch neuere Ver-sionen der Editoren, die die WYSIWYG-Arbeit an Style Sheets unterstützen. Mehr zu diesem Punkt er-fährst Du im Online-Supplement.

Web Style Sheets alles über Style Sheets: www.w3.org/StyleCSS Gallery Beispiele für Style Sheets: www.microsoft.com/truetype/css/

Mach Deinen Seiten Beine!


42

Mach Deinen Seiten Beine!Ein routinierter Websurfer hat eine Geduldsspannevon etwa 10 Sekunden � ist die Seite dann noch nichtim Browser, geht er einfach weiter. Anfänger habenetwas mehr Geduld, das ändert sich aber schnell.

Ein normales Modem für den Hausgebrauchschafft ungefähr 28.800 Bits pro Sekunde. Das sindetwa dreieinhalb Kilobyte pro Sekunde oder 35 Kilo-byte in 10 Sekunden � nicht gerade viel!

Willst Du wissen, wie viel eine Seite ein-schließlich Grafik füllt und wie lange es dauert, siedownzuloaden, schlägst Du das in PageMill unterEdit|Download Statistics und in Claris Home Pageunter Edit|Document Statistics nach.

Das eigentliche HTML-Dokument nimmt nichtviel Raum ein, besteht es doch nur aus Text. Grafikendagegen sind zeitraubend.• Umfangreiche Grafiken zu Beginn einer Ein-

gangsseite sind gefährlich. Was die Geduld desLesers auf die Folter spannt, ist nämlich die Zeit,die vergeht, bis der sichtbare Teil eines Doku-ments eingelesen ist. Füllt das Dokument mehrals eine Fensterhöhe, dauert es etwas, bis derBenutzer scrollt, und inzwischen können Textund Grafik am unteren Ende der Seite eingelesenwerden.

• Tabellen werden erst dann gezeichnet, wenn siekomplett eingelesen sind. Liegt der gesamte In-halt einer Seite in einer Tabelle, bleibt die Seiteleer, bis alles eingelesen wurde. Je nachdemkannst Du eine Tabelle in kleinere Bruchstückeaufteilen.

• Bei Grafik empfiehlt sich mehrmalige Ver-wendung. Ist ein Bild erst in den Browsercacheeingelesen, wird es von dort geholt, wenn es aufeiner anderen Seite wieder benötigt wird. HastDu zum Beispiel eine Leiste auf jeder Seite, de-ren erster Teil je nach dem Seiteninhalt andersaussieht � etwa als Überschrift � während derRest � etwa einige Symbole � immer gleichbleibt, solltest Du diese Leistengrafik in zweiDateien teilen, von denen nur die erste gewech-selt wird.

Die Größe einer Grafik in Kilobyte hat wenig mit ih-ren Ausmaßen zu tun � sie hängt eher von der Effek-tivität der Komprimierung ab:• JPEG-Grafiken speicherst Du mit einem Quali-

tätsverlust, den Du für ästhetisch noch akzepta-bel hältst.

• Einfarbige Flächen füllen in der GIF-Kom-primierung so gut wie nichts � hier sind es dieÜbergänge, die Raum einnehmen. Je einfacher

eine Grafik ist, desto weniger Kilobyte nimmt sieein � je weniger Farben, desto weniger KB. Re-duzierst Du Farben in GIF-Bildern, solltest Dudas Dithern vermeiden. Gepunktete Bereichefüllen wesentlich mehr als einfarbige.

SicherheitEine Website muß nicht unbedingt für jedermann zu-gänglich sein. Du kannst auch Seiten erstellen, fürdie der Benutzer ein Paßwort benötigt. Das kannstDu allerdings nicht über HTML erledigen � es mußauf dem Server konfiguriert werden, und die Vor-gangsweise ist bei jedem Server verschieden. Dafürist es aber nicht besonders kompliziert. Rede also mitDeinem Provider. Paßwort-Schutz ist allerdings kei-ne hundertprozentige Sache � ein gewiefter Hackerkann die Seiten immer noch auffangen, indem er je-manden �abhört�, der Zugang hat.

Eine wirklich sichere Kommunikation erfolgt übereinen sogenannten SSL-Server. SSL steht für SecureSocket Layer, was bedeutet, daß alle Kommunikationzwischen Server und Benutzer in kodierter Form er-folgt. SSL wird unter anderem für Geldüberführun-gen und andere Transaktionen benutzt, die hohe Si-cherheit erfordern. Auch hier entscheidet die örtlicheTechnik, ob der Server SSL unterstützt, also solltestDu mit Deinem Provider reden.

www.ich.deDie Adresse www.etwebhotel.de/~sofie ist et-was kompliziert. Einfacher und cooler wäre es, wennDu die Adresse www.sofie.de hättest. Dann siehtman nämlich nicht, daß Du in einem Webhotelwohnst. Allerdings benötigst Du dafür den Domä-nennamen sofie unter der deutschen Oberdomänede. Für einen erklecklichen Preis kann Dein Providerdie Sache für Dich erledigen. Übrigens kannst Duauch unter den internationalen Topdomänen com,org und so weiter einen Domänennamen registrieren.

Eigentlich gibt es keinen technischen Grund füreinen eigenen Domänennamen, man erhält eben nureine einfachere Adresse, die obendrein professionellaussieht. Ob eine Website nun einen eigenen Domä-nennamen hat oder nicht, über Suchmaschinen wieYahoo oder DINO wird sie auf die gleiche Weise ge-funden.

Übrigens läuft ein FTP-Transfer auch bei eigenemDomänennamen gleich ab.


43

Dritter Teil: Interaktivität und MultimediaObjekteNeben reinem Text sind Objekte wie Animationen, Java-Applets, Film(e), Musik und so weiter, gut ge-eignet, der Website den letzten Schliff zu geben. Grafiken sind - im technischen Sinne -ebenfalls Objekte,obwohl man sie im allgemeinen nicht so auffaßt. Objekte haben eine Reihe von Gemeinsamkeiten:• Ein Objekt ist nicht Bestandteil der eigentlichen HTML-Datei. Es besteht vielmehr aus Daten in einer

oder mehreren Dateien, auf die im HTML-Code mit einem speziellen Tag verwiesen wird.• Ein Objekt nimmt auf der Webseite einen viereckigen Raum ein � abgesehen von Objekten für das

Musik-Plug-In, die unsichtbar sein können.• Ein Objekt erfordert, daß der Browser damit umgehen kann. Manche Objekttypen, wie zum Beispiel

GIF- und JPEG-Grafiken, werden von allen Browsern unterstützt, andere wie Java oder ActiveX vonmanchen, und wieder andere, wie die Plug-In-Objekte, erfordern die Erweiterung des Browsers mit ei-nem Plug-In, einem Hilfsprogramm, das die Daten verarbeiten kann.

• Die meisten Objekte reagieren auf Parameter, die zusammen mit dem Tag ins HTML eingesetzt wer-den, der das Objekt einfügt. Zum Beispiel versteht ein Ton-Plug-In den Parameter loop=true. Es hängtvon dem einzelnen Objekt ab, auf welche Parameter es reagiert.

Objekte werden mit verschiedenen Tags eingefügt: img für Grafik, applet für Java, embed für Plug-Ins.Alle haben in etwa dieselben Eigenschaften � den URL zur Datei, Breite, Höhe und so weiter � und wer-den genau wie Grafiken ins Layout eingefügt: sie folgen dem Textfluß, können rechts- oder linksbündigstehen, in Tabellen eingefügt werden und so weiter.

W3C hat ein object-Tag entwickelt, das die Funktionalität von img, applet, embed in sich vereint undaußerdem für andere Zwecke benutzt werden kann. Bisher unterstützen allerdings nur die neuestenBrowser dieses Tag. ActiveX-Komponenten werden mit dem object-Tag eingesetzt.

Ein Objekt einfügenPageMill File|Place. PageMill erkennt die Art des Objekts an seiner Dateiendung.Composer unterstützt abgesehen von Grafik nicht den Einsatz von Objekten.FrontPage Insert|Other Component|Plug-in / Java Applet / ActiveX Component (Einfügen|Andere

Komponenten|Plug-In / Java-Applet / ActiveX Steuerelement)Claris Insert Plug-in, Insert Applet

GIF-AnimationenDie meisten Animationen auf Webseiten sind GIF-Animationen. Hier handelt es sich um eine Erweiterungdes GIF-Grafikformats, die es ermöglicht, mehrere Bilder in einer einzelnen GIF-Datei zu sammeln unddie Wiedergabegeschwindigkeit und andere Parameter festzulegen. Eine GIF-Animation hat wie andereGIF-Dateien die Endung .gif und wird wie ein normales Bild in die Webseite eingefügt. Die Wieder-gabe von GIF-Animationen erfordert kein Plug-In oder Hilfsprogramm. Ältere Browser können die Ani-mation nicht wiedergeben, sondern zeigen nur das erste Bild � genau wie vermutlich auch der Editor,wenn Du eine Animation einsetzt.

Eine GIF-Animation kann in mehreren Programmen erstellt werden, zum Beispiel GifBuilder fürMacintosh (iawww.epfl.ch/Staff/Yves.Piguet/clip2gif-home/GifBuilder.html )oderGif Construction Set für PC (www.mindworkshop.com/alchemy/ gifcon.html).

Diese Programme arbeiten so, daß mehrere einzelne Bilder gesammelt und in einer GIF-Animations-datei vereint werden. Man kann festlegen, wie schnell die Bilder wechseln, ob die Animation ein einzigesMal läuft oder immer wieder, und dergleichen mehr.

Der Browser aktiviert eine GIF-Animation schon während des Einlesens, die Wiedergabegeschwindig-keit beruht also auf der Einlesegeschwindigkeit. Wiederholt sich die Animation, laufen die Wiederholun-gen schneller, weil jetzt die gesamte Datei eingelesen ist.


44

Plug-InsPlug-Ins sind Hilfsprogramme, die dem Browser die Verarbeitung neuer Dokument- oder Medienformateermöglichen. In Start ins Internet im Abschnitt Plug-Ins erfährst Du mehr über die Installation und Benut-zung von Plug-Ins.

Du integrierst ein Plug-In-Objekt, das heißt eine Datei, die von einem Plug-In wiedergegeben wird, aufähnliche Weise wie eine Grafik in Deine Seite. Das Dateiformat legt fest, mit welchem Plug-In derBrowser das Objekt wiedergibt. Es ist also nicht notwendig, speziell ein anzuwendendes Plug-In-Programm zu benennen.

Natürlich kannst Du nie sicher sein, ob der Benutzer das Plug-In tatsächlich downloadet und installiert.Außerdem stehen nicht alle Plug-Ins für alle Betriebssysteme zur Verfügung.

Plug-ins für Ton in den Formaten MIDI, WAV und AIFF und für Film im QuickTime- oder AVI-Format werden standardgemäß mit dem Navigator geliefert. Darüber hinaus gibt es zahllose Plug-Ins fürein Unzahl an Dateiformaten. Die populärsten sind VRML (3D-Welten), Shockwave (Animation undMultimedia) und Realaudio (Realtime-Ton, also Internet-Radio).

Das Schwierige an der Sache ist natürlich die Erstellung der Datei, die vom Plug-In wiedergegebenwerden soll. Standardformate wie MIDI, VRML und Quicktime lassen sich in vielen verschiedenen Pro-grammen erstellen. Andere Formate wie etwa Shockwave Flash müssen in einem speziellen Programmentwickelt werden, das ebenfalls vom Hersteller des Plug-Ins vertrieben wird. Wieder andere Plug-Ins,wie zum Beispiel Realaudio, erfordern eine Erweiterung auf dem Server, um Ton flüssig, also �streaming�zu überführen. Im allgemeinen sind die Plug-Ins kostenlos erhältlich, während die Produzenten ihr Geldan den Entwicklungsprogrammen oder den Servererweiterungen verdienen.

Was Plug-Ins angeht, habe ich folgende Ratschläge:• Benutze sie nur mit gutem Grund. Besteht tatsächlich ein vernünftiger Grund, Information in einem

Plug-In-Format zu präsentieren, macht sich die Zielgruppe vermutlich auch die Mühe, das entspre-chende Plug-In downzuloaden und zu installieren.

• Setze einen Link zu dem Ort, wo das Plug-In erhältlich ist.• Benutze die üblichsten Plug-In-Formate und vermeide ungewöhnliche oder seltene Formate, die viel-

leicht nur für eine Plattform existieren.

Weiteres über Plug-Ins erfährst Du im Online-Supplement dieses Heftes.

Java-AppletsApplets sind kleine Programme in der Programmiersprache Java, die in eine Webseite integriert sind. DieProgrammiersprache Java wurde speziell für Programme entwickelt, die über ein Netzwerk heruntergela-den werden. Solche Programme zeichnen sich durch ihre Plattformunabhängigkeit aus: ein und dasselbeJava-Programm kann unmodifiziert unter Windows, Mac, UNIX, OS/2, Amiga und so weiter laufen.

Java hat mehrere Sicherheitsmaßnahmen integriert, dank derer ein Applet keinen Virus plazieren, keineInformationen aus dem Computer beziehen oder andere gefährliche Dinge tun kann, es sei denn, Du läßtdas selber ausdrücklich zu. Java wurde von Sun Microsystems entwickelt.

Applets werden vor allem für kleinere Dinge wie Animationen, kleine Spiele und dergleichen benutzt �oder aber als Benutzeroberfläche für ein Programm auf einem Server. Java läßt sich aber auch für eigentli-che Programme verwenden � so setzt man zum Beispiel augenblicklich die Textverarbeitung Wordperfectin Java um, das neue StarOffice wurde ebenfalls tlw. im Java-Code geschrieben.

Willst Du Java-Applets erstellen, erfordert das Programmierer-Kenntnisse. Die Plazierung eines ferti-gen Java-Applets auf einer Webseite ist dagegen keine besonders schwierige Sache.

Java Javas offizielle Website: java.sun.comTutorial Suns Java-Lehrbuch: java.sun.com/docs/books/tutorialJavaWorld Magazin für die Java-Gemeinde: www.javaworld.com


45

ActiveX-KomponentenActiveX-Komponenten sind kleine Programme, die ebenso wie Java-Applets in Webseiten integriert wer-den können. Eine ActiveX-Komponente muß allerdings speziell für die jeweilige Computerplattform wieetwa Win95 geschrieben werden, im Gegensatz zu den plattformunabhängigen Java-Applets. Dafür wer-den ActiveX-Komponenten direkter ins System integriert, was erweiterte Möglichkeiten � und ein ent-sprechend größeres Sicherheitsrisiko bedeutet.

Die ActiveX-Technologie ist im Internet nicht allzu vielseitig verwendbar, da das System nur unterWin95/NT funktioniert � und selbst dann nur, wenn man den MSIE 3 benutzt. In kleineren internen Netz-werken, etwa in einem Unternehmen, wo jedermann einen Win95-Computer benutzt, können sie aber einleistungsfähiges Hilfsmittel sein.

ActiveX wurde von Microsoft entwickelt � im Rahmen der Strategie der Firma für die Erschaffung ei-nes Internets, das �unter Win95/NT am besten aussieht�.

Mehr über ActiveX erfährst Du im Online-Supplement des Heftes.

JavaScriptJavaScript ist eine simple Programmiersprache, die in HTML-Dokumenten benutzt werden kann. Mit ihrerHilfe kannst Du Deine Webseiten interaktiver gestalten. Du kannst zum Beispiel• kontrollieren, ob ein Formular ausgefüllt wurde, bevor es gesendet wird• in der Statuszeile Lauftexte oder Mitteilungen zeigen, zum Beispiel wenn die Maus über einen Link ge-

führt wird• ein Bild bei Mausberührung auswechseln• komplizierte Framesets kontrollieren, in denen Du zum Beispiel mehrere Frames gleichzeitig wechseln

willst• neue Fenster mit spezifischer Größe und gegebenenfalls ohne Menü- und Werkzeugleiste öffnen.Außerdem kann JavaScript Mitteilungen von und zu Objekten in der Seite wie etwa Java-Applets, Plug-Ins oder dergleichen senden und empfangen.

Trotz des Namens ist JavaScript nicht mit Java verwandt. Beide Programmiersprachen wurden speziellfür das Web entwickelt � in ihrer Funktion sind sie aber ziemlich unterschiedlich. Java-Applets sind Pro-grammdateien eigenen Formats. Sie können zwar in Webseiten erscheinen, haben ansonsten aber nichtsmit HTML zu tun und können auch ohne einen Webbrowser laufen. JavaScript dagegen ist Code, der un-mittelbar in einer HTML-Datei erscheint und die unterschiedlichen Elemente einer Webseite manipuliert.

JavaScript ist außerdem einfacher und weniger kompliziert als Java und leichter zu erlernen.Unmittelbar ist JavaScript eine vielversprechende Technologie � sie hat aber gewisse Probleme. Ur-

sprünglich wurde sie von Netscape entwickelt und kontrolliert und hat sich nicht zu einem eigentlichenStandard entwickelt. Microsoft hat eine Kopie von Java namens JScript entwickelt. Der �kleinste gemein-same Nenner�, also der Teil der Sprache, der sowohl auf dem MSIE 3 als auch auf dem Navigator funk-tioniert, ist aber ziemlich begrenzt, und es gibt Kompatibilitätsprobleme zwischen den beiden Versionen.Mehr über JavaScript erfährst Du im Online-Supplement des Heftes.

JavaScript 1.0 Das vollständigste Material zu JavaScript findest Du bei Netscape:www.netscape.com/eng/mozilla/Gold/handbook/javascript

JavaScript 1.1 ebenfalls bei Netscape:www.netscape.com/eng/mozilla/3.0/handbook/javascript

Lehrbuch über JavaScript: www.webconn.com/java/javascript/intro/Inkompatiblitäten: ein wichtiger Überblick über die Unterschiede zwischen Netscapes JavaScript undMicrosofts JScript: www.webcoder.com/browsersupport


46

CGI & FormulareCGI ermöglicht ein Zusammenspiel zwischen einerWebseite und einem Programm auf dem Server.Dank dieser Technik kann der Leser einer Webseiteunmittelbar Informationen an den Server senden, derseinerseits wiederum auf der Basis dieser Informa-tionen eine neue Webseite generieren kann. CGI wirdzum Beispiel für Suchen und Anmeldungen benutztoder für Webseiten, die im Bedarfsfall generiertwerden.CGI unterscheidet sich grundsätzlich von �mobilemCode� wie etwa Java, JavaScript und ActiveX, der anden Computer des Benutzers geschickt und dortausgeführt wird. Ein CGI-Programm wird auf demServer betrieben, und das Resultat wird an denBenutzer geschickt. Im Gegensatz zu Java, ActiveXund JavaScript benötigt der Benutzer also nicht eineganz bestimmte Browserversion oder dergleichen.Außerdem kann ein CGI-Programm mit anderenProgrammen auf dem Server, zum Beispiel Daten-banken, kombiniert werden.Ein CGI-Programm wird über einen Link aktiviert,oder aber, indem man einen Schaltknopf in einem

Formular anklickt. Das Programm generiert auf demServer eine neue Webseite, die an den Benutzergeschickt wird. Der Benutzer selbst erlebt diesenVorgang wie einen normalen Link.Ein Beispiel: Du suchst etwas bei Yahoo, schreibstalso einige Worte ins Suchfeld und drückst dann denSchaltknopf 'search'. Deine Suchworte werden an dasCGI-Script übermittelt, das seine Datenbank durch-sieht und eine HTML-Seite mit den gefundenenInformationen generiert, die wiederum Dir übermit-telt wird.Meist wird das eigentliche CGI-Programm von einemProgrammierer erstellt, während der Webdesigner fürdie Überführung der Information von HTML in CGIund umgekehrt sorgt. Leider erlauben nicht alle Web-Hotels die Möglichkeit, mit CGI-Programmen zuarbeiten. Die CGI-Technik kann ein Risiko für denServer bedeuten und belastet ihn mehr als normaleWebseiten. Manche Provider testen CGI-Programmeauf ihre Sicherheit hin, bevor sie freigegeben werden.

FormulareDer Benutzer sendet seine Informationen über ein Formular, englisch form, an das CGI-Programm. Einsolches Formular besteht aus mehreren Feldern, also Textfeldern, Feldern zum Ankreuzen oder derglei-chen, und einem Submit-Schaltknopf. Wird dieser angeklickt, werden die in diese Felder eingetragenen In-formationen an das CGI-Programm übermittelt.

Alle Felder haben die Eigenschaft Name. Der Name eines Feldes ist wichtig � er erlaubt dem CGI-Programm die Identifikation der zugesandten Werte.

Schaltknöpfe zum Einfügen von FormularfeldernPageMill Knöpfe auf der unteren Symbolleiste.Composer unterstützt Formulare nichtFrontPage View|Forms Toolbar (Ansicht|Formular-Symbolleiste)Claris Window|Show Forms Palette

Es gibt folgende Formularfelder:

Textbox � Texteingabefeld, das eine einzelne Zeile erlaubt. Seine Eigen-schaften sind Size, das heißt Breite des Feldes in Anzahl Zeichen, und Ma-xlength, maximale einsetzbare Zeichenanzahl.

Password � siehe Textbox, nur werden die eingesetzten Zeichen als Stern-chen dargestellt. Wird für die Eingabe eines Passwortes benutzt. Achtung!Möglichst nicht für wichtige Passworte benutzen � das Wort wird nämlichals Klartext verschickt, kann also mit etwas bösem Willen durchaus aufge-fangen werden.

Textarea � Texteingabefeld, das mehrere Zeilen enthalten und über Scroll-bars, also Laufleisten, gesteuert werden kann.

Checkbox � Feld zum Ankreuzen. Die Eigenschaft Checked bedeutet, daß esunmittelbar als angekreuzt dargestellt wird.


47

Radio � ein runder Schaltknopf, der ebenso wie ein Ankreuzfeld markiert wird. Gehört ein Radiobuttonzu einer Gruppe, kann jeweils nur einer dieser Knöpfe markiert werden. Wird ein anderer gedrückt, wirdder erste deaktiviert � genau wie bei einem Transistorradio, wo auch jeweils nur ein Schalter einge-drückt ist. Radiobuttons, die derselben Gruppe angehören, haben den gleichen Namen. Checked gibt an,ob der Button unmittelbar aktiviert wird.

Select � eine Aufstellung von wählbaren Elementen. Es gibt zwei Typen � beim einen ist nur jeweils einElement wählbar, der andere erlaubt mehrere Möglichkeiten. Für jede Möglichkeit der Aufstellung müs-sen die Eigenschaften Name und Value angegeben werden.

Hidden � ein Feld, das für den Benutzer unsichtbar ist, aber dennoch Informationen enthält, die dem Ser-ver übermittelt werden. In PageMill wird ein solches verstecktes Feld über Edit|Insert Invisible|HiddenField eingefügt.

Submit � der Schaltknopf, der das Formular versendet. Muß in jedem Formular erscheinen.Reset-Schaltknopf � löscht sämtliche Eingaben im Formular.

Ein Formular als Ganzes hat zwei Eigenschaften: einmal Action, also den URL des CGI-Programms, andas die Information geschickt wird, zum anderen Method, das heißt die Methode, nach der die Informati-on übermittelt wird � und hier handelt es sich um Get oder Post. Diese Werte werden beide vom Pro-grammierer festgelegt.

Eigenschaften eines FormularsPageMill im Inspector, Registerblatt FormComposer unterstützt Formulare nichtFrontPage Form Properties (Formulareigenschaften), Schaltknopf Settings (Einstellungen)Claris Edit|Document Options|Advanced

PageMill und Claris Home Page gehen der Einfachheit halber davon aus, daß jede Seite höchstens einFormular enthält, obwohl die HTML-Spezifikationen eigentlich mehrere erlauben.

E-Mail-FormulareHast Du keinen Zugang zu CGI-Programmen, kannst Du ein Formular erstellen, dessen Inhalt unverändertan eine E-Mail-Adresse übermittelt wird, statt an ein CGI-Programm. Dazu schreibst Du mail-to:[email protected] ins Action-Feld. Die Method ist in diesem Falle post. Das funktioniert aller-dings nur im Netscape Navigator, nicht aber im MSIE.

GGI-ProgrammierungCGI steht für Common Gateway Interface. Eigentlich handelt es sich hier um Angaben dazu, wie das an-gesprochene Programm seinen Input erhält und wie der Output aussehen soll.

Das eigentliche Programm auf dem Server kann in jeder beliebigen Programmiersprache verfaßt sein �zum Beispiel C/C++, Perl, Java oder Basic. Außerdem gibt es Systeme, über die Du auf dem ServerHTML-Seiten mit JavaScript oder ähnlichen Sprachen kombinieren und dort verarbeiten kannst, bevor dasErgebnis, also die modifizierte HTML-Seite, an den Benutzer geschickt wird. Über die Scripts erhältst Duaußerdem Zugang zu Standardobjekten auf dem Server wie Datenbanken. Netscapes LiveWire, MicrosoftsActive Server Pages und NeXTs Webobjects sind solche Systeme.

Teil 4 - Planung und Design für eine Website


48

Vierter Teil: Planung und Design für eine WebsiteEinfacher Zugriff auf Informationen ist nicht das-selbe wie Wissen.

Terry PratchetOnline-Hypertext ist nicht gerade ein ideales Me-dium. Auf einem Computerbildschirm ist ein Textnicht so leicht lesbar wie auf Papier � und je mehrman sich konzentrieren muß, um etwas zu lesen,desto weniger bringt es einem. Auf dem Bild-schirm fehlt außerdem das Gefühl dafür, �wo maneigentlich ist und wieviel noch fehlt�, das man hat,wenn man ein Buch oder eine Zeitschrift direkt inder Hand hält. Und die dezentrale, chaotischeStruktur im Web mit Hyperlinks in allen Richtun-gen macht die Sache auch nicht leichter.

Für eine Website sind daher Lesbarkeit, struktu-relle Deutlichkeit und klare Kommunikation wich-tiger als smartes Design, Corporate Identity und soweiter � anders als im gedruckten Medium, wo einweniger lesefreundliches Layout durchaus akzep-tabel ist, wenn es die Sache spannender macht.

Das heißt natürlich keinesfalls, daß man für eineWebsite auf flottes Layout und spannende Typo-graphie verzichten sollte � nur, daß das wenigerwichtig ist als der Inhalt, der vermittelt werdensoll, es sei denn, das Design ist Deine Botschaft.Für die Eingangsseite in Deine Website ist dasspannende Design und/oder die deutliche Corpo-rate Identity natürlich ein wichtiger Bestandteil der�Botschaft�.

Das Medium hat also seine Grenzen. Um so wich-tiger ist die gründliche Planung, bevor Du Dich andie eigentlichen Seiten machst. Fängst Du mit ih-nen an, verfängst Du Dich leicht in technischenMöglichkeiten und Begrenzungen und verlierst denklaren Blick auf Deine Absichten in der Website.

ArbeitsplanEs gibt einen natürlichen Arbeitsweg für die Ent-wicklung einer Website:1) Definiere Zweck, Zielgruppe und Inhalt.2) Plane Struktur und Organisation des Inhalts

und definiere eine einfache Art zu navigieren.3) Erstelle Vorlagen für Seitenlayout und Ty-

pographie.4) Erstelle die einzelnen Webseiten im Webe-

ditor.5) Teste Deine Website.

Nach meiner Erfahrung ist es nicht empfehlens-wert, die einzelnen Schritte miteinander zu mi-schen. Liegt die Hauptstruktur noch nicht fest, istes unpraktisch, mit dem Layout anzufangen, und

bist Du Dir nicht über den Zweck Deiner Site im kla-ren, solltest Du nicht mit der Arbeit an den einzelnenSeiten im Editor anfangen.

Hältst Du Dich an die übergeordnete Struktur, kannstDu laufend bestehende Seiten modifizieren und neuehinzufügen. Willst Du aber das Grunddesign oder denZweck Deiner Site ändern, solltest Du das gründlichplanen und alle drei Punkte durchdenken, bevor DuDich an die eigentlichen Änderungen in den Seitenmachst. Je besser Deine Vorbereitungen sind, desto ein-facher wird letztlich die Arbeit an den eigentlichenSeiten und die Aktualisierung der gesamten Site.Glaub�s mir � ich spreche aus Erfahrung.

Und bevor Du den Start Deiner Website ausposaunst,solltest Du an Hofstadters Gesetz denken: Es dauertimmer länger als man glaubt � auch wenn man mitHofstadters Gesetz rechnet. (Douglas R. Hofstadter)

Während des Planens mußt Du alles über die techni-schen Finessen in Deiner Website vergessen und nur aneines denken: Was willst Du mit Deiner Site?

Immer mit der RuheHast Du noch keine Website gemacht, braucht Dich dasnicht in Panik zu versetzen. Viele Leute und besondersUnternehmen glauben, daß Informationstechnologiewie ein Zug ist, den man nicht verpassen darf � nurschnell einsteigen, bevor er losfährt! In Wirklichkeit istInformationstechnologie natürlich ein Produkt, mit demviele Leute Geld verdienen. So lange jemand also daraninteressiert ist, wird es auch erhältlich sein.

Im Grunde ist das Internet ein Ort, wo es wenigbringt, ganz vorne dabei zu sein. Die Dinge ändern sichhier so schnell, daß es nach einem Jahr gar keine Rollespielt, ob Du dabei warst � alles ist ohnehin ganz an-ders.

Definiere Deinen ZweckDu mußt wissen, was Du eigentlich mit Deiner Websitewillst. Es kann Dir zum Beispiel um folgende Dingegehen:• Image � Freunden oder Geschäftspartnern die Exi-

stenz der Website mitteilen, den URL auf die Visi-tenkarte schreiben und so weiter.

• Online-Visitenkarte � über die Website finden dieLeute schnell Deinen Namen oder den Deiner Fir-ma, die Adresse, Telefonnummer, E-Mail-Adresseund so weiter.

• Feedback � über die Website ist es einfach, mit DirVerbindung aufzunehmen und Dir etwas mitzutei-len.



49

• Kommunikation � eine Gruppe von Leutenkann Deine Website als Forum für den Aus-tausch über ein Thema benutzen.

• Information � Du hast Informationen, die Duvermitteln willst und die für andere interessantsind. Das kann zum Beispiel ein Newsletter fürDeine Organisation sein oder eine wissen-schaftliche Arbeit, die für andere interessantist. Diese Form von Websites ist vielleicht diemeistverbreitete.

• Reklame � Verkauf eines Produkts. Dieser Typvon Websites ist wohl der schwierigste, wasdas Funktionieren angeht.

• Spaß an der Freud� � es macht Dir einfachSpaß, eine Website herzustellen.

Die Vorschläge in den folgenden Abschnitten ge-hen davon aus, daß es Dir bei Deiner Website umKommunikation geht.

ZielgruppeWelche Leute werden sich für Deine Website in-teressieren? Und was kannst Du tun, damit dierichtigen Leute kommen? Vergiß nicht, daß es �denLeuten� im allgemeinen ziemlich egal ist, was Duihnen erzählen oder verkaufen oder von ihnen ha-ben willst � es interessiert sie viel mehr, ob Du et-was hast, das sie selber gerne hätten. Kannst Duihnen nichts bieten, lohnt sich das Web nicht. Re-klamebroschüren, Zeitungsannoncen, Fernsehre-klamen und so weiter sind lauter Möglichkeiten,den Leuten von Dingen zu erzählen, von denen sie�eigentlich nichts wissen wollen� � das Web dage-gen erfordert, daß die Leute sich bewußt dafür ent-scheiden, Deine Seite zu besuchen.

Je genauer und spezieller Deine Zielgruppe ist,desto größer Deine Möglichkeit, sie anzusprechen.Baust Du eine Website auf, die alle und jeden an-sprechen soll, kämpfst Du gegen Disney, MTV,Louvre, Playboy und so weiter. Richtest Du sie andie Fabrikanten von Dosenöffnern oder Sammlervon zweifarbigen Fünf-Pfennig-Briefmarken undbietest ihnen etwas an, das sie brauchen können, istDein Erfolg sicher.

Information kontra InformationenDenke daran, daß wenig Information mehr bringtals viele Informationen. Je mehr Informationen,desto längere Zeit vergeht, bis der Leser sie sortiertund die wichtigen Punkte gefunden hat. Je besserDu Deine Informationen im voraus filterst, destowertvoller sind sie für den Benutzer.

Online lesen oder drucken?Denke darüber nach, ob Deine Leser die angebotenenInformationen eigentlich online lesen. Größere zusam-menhängende Texte wie etwa ein Lehrbuch oder einenEssay werden die meisten Leute downloaden und offli-ne lesen oder ausdrucken. Vielleicht wäre RTF oderPDF ein besseres Format für Deine Arbeit. Auch in die-sem Fall solltest Du allerdings Dein Material online be-schreiben � immerhin soll das Interesse des Lesers ge-weckt werden, und nicht jedermann downloadet einengrößeren Text. Dafür liest man aber einen Offline-Textoder ein gedrucktes Exemplar intensiver und mit größe-rem Gewinn.

Das GrundbildDer Inhalt in Deiner Site muß eine Struktur haben.Dank Hypertext kann man zwar Texte und Dokumentein einem großen Spinngewebe kreuz und quer mitein-ander verbinden � das heißt aber keineswegs, daß manjetzt nicht mehr an Gliederung und Reihenfolge der In-formationen zu denken braucht. Ganz im Gegenteil wares noch nie so wichtig, Informationen klar, logisch undfunktionell zu strukturieren.

Der Benutzer muß sich in Deiner Website orientierenund das finden können, wonach er sucht. Die Site mußaufgrund eines klaren Fundaments oder einer Idee auf-gebaut werden, die der Benutzer unmittelbar begreift �muß er zuerst minutenlang überlegen, wie die Site ei-gentlich aufgebaut ist, geht sein Interesse schnell flöten.Das einfachste ist, die Website nach einem allgemeinbekannten Grundbild zu strukturieren. Ein paar Bei-spiele:

Zeitung: Die Site besteht aus einer Reihe von Arti-keln, die nicht in bestimmter Reihenfolge gelesen wer-den müssen � einmal abgesehen davon, daß Artikelüber ein bestimmtes Thema sich teilweise auf frühereArtikel zum selben Thema stützen. Die Artikel werdennach Wichtigkeit und Aktualität angeordnet � neuereArtikel im oberen Teil � größere Überschriften weitervorne.

Lexikon: Die Site enthält Faktenwissen in kleinerenBruchstücken. Die Artikel sind nicht in bestimmterReihenfolge miteinander verbunden, sondern verweisengegenseitig aufeinander.

Buch: Die Site ist ein Buch, dessen Seiten der Reihenach hintereinander gelesen werden sollen. Gegebenen-falls können ein Inhaltsverzeichnis und ein Index denEinstieg an verschiedenen Stellen des Textes ermögli-chen.

Wie Du siehst, stützen sich diese drei Grundbilderauf die fundamentale Vorstellung, daß Webseiten wiePapierseiten funktionieren. Diese Vorstellung durch-dringt unsere gesamte Auffassung vom aktuellen Web �



50

weswegen sie kein schlechter Ausgangspunkt ist.Vor diesem Hintergrund werden Begriffe wie�letzte Seite�, �nächste Seite� und �Homepage� un-mittelbar einleuchten. Diese Grundvorstellung eig-net sich vor allem dafür, Text zu organisieren. Jemehr Interaktivität und Kommunikation DeineWebsite enthält, desto schiefer wird sie aber.

Die Grundvorstellung vom Raum ist ebensoumfassend wie die der Papierseiten. Die Websitekann wie ein Haus mit mehreren Räumen sein,durch die man sich bewegt, ein Geschäft, an dessenRegalen man entlangschlendert, eine Stadt, derenOrte und Häuser man besucht.

Du kannst auch an eine Baumstruktur denken� hier bewegt man sich durch mehrere Ebenen vonMenüs und Untermenüs und zielt immer genauer,bis man endlich findet, was man sucht. Die Baum-struktur ist unter Computerbenutzern ziemlich be-liebt, macht sie es doch möglich, große Informati-onsmengen zu strukturieren und zu überblicken,wenn man nur systematisch denkt.

Dabei besteht aber die Gefahr, daß der Benutzerdie Struktur des Inhalts nicht unbedingt genau soauffaßt oder begreift wie der Designer. So ist eszum Beispiel riskant, eine Website an der internenStruktur eines Unternehmens zu orientieren oderein Lehrbuch nach der inneren Logik des Themaszu strukturieren � einer Logik, die die Zielgruppedes Lehrbuchs vermutlich noch nicht überschauenkann.

Je mehr Überblick der Leser zu einem Themahat, desto weniger linear sucht er sich seine In-formationen. Ein Anfänger liest ein Lehrbuch vonAnfang bis Ende, der Experte dagegen bohrt ingrößeren Informationsmengen nach genau defi-nierten Informationen.

In einem ungenauen Material oder einem Mate-rial, zu dem der Überblick fehlt, findet man viel-fach die gesuchten Informationen in einer spinn-webhaften Struktur � jeder Abschnitt enthält zahl-reiche assoziative Links zu verwandten Abschnit-ten. Hier sucht der Benutzer seine Informationeneher �intuitiv�.

Andere StrukturenAllmählich verbreiten sich im Internet neueStrukturen für die Organisation von Informationen.In einer FAQ werden Informationen in der Formvon Frage und Antwort geboten, was sich gut fürBereiche eignet, wo Kommunikation und Mei-nungsaustausch herrschen.

Threading eignet sich sehr gut für Diskussionen� die Mitteilungen ordnen sich nach einer flachen

verzweigten Struktur, nach ihrem inneren Zusammen-hang. Das ist eine sehr lebendige, aber auch ziemlichchaotische Organisationsform für Informationen. Rich-tig nützlich wird sie, wenn es außerdem eine Übersichtdazu gibt, welche Themen wo angesprochen werden.

Chronologisch/�what�s new� � viele Sites enthalteneine Liste über Änderungen und Ergänzungen zu einerWebsite in umgekehrter chronologischer Reihenfolge.So stellt der Besucher schnell fest, was hier neu ist.

BeispieleMan kann mehrere Grundbilder miteinander kombinie-ren. Microsofts Sitebuilder Workshop(www.microsoft.com/workshop) benutzt dasgrundlegende Bild eines Planeten für jede der sechsHauptgruppen. Das verdeutlicht, daß es hier um ver-schiedene Welten geht, die nicht in bestimmter Reihen-folge zueinander gehören. Der einzelne �Planet� bautsich dann wie ein Magazin auf, mit Artikeln, Inter-views, Nachrichten und so weiter. Die Kombinationvon mehreren Grundbildern oder Strukturen erlaubtweitere Organisierungsmöglichkeiten � andererseits istsie für Außenstehende nicht so unmittelbar einleuch-tend.

Ein Grundbild kann sehr subtil und dennoch wirkungs-voll sein. Yahoo (www.yahoo.com) stellt sich unmit-telbar schlicht als eine Reihe von Seiten mit Links dar.Jede Seite gibt aber zuoberst den Suchpfad zur aktuel-len Seite an, zum Beispiel �Top|Computers and Inter-net|World Wide Web|Page Design and Layout�. JedeÜberschrift ist ein Link auf die entsprechende Seite. Sowird ein Weg mit allen seinen Phasen angedeutet. Das@-Zeichen verdeutlicht in Links die Tatsache, daß manvon hier aus eine Gruppe in einer anderen Verzweigungder Baumstruktur anspricht.

Du wirst feststellen, daß die Bilder �Baum� und�Suchpfad� nicht ausdrücklich dargestellt werden, dieStruktur veranlaßt mich aber dennoch, eine Site nachdiesem Grundbild zu verstehen, und dadurch fällt mirdie Orientierung leichter.

Grundbilder und ihre GrenzenEin Grundbild ist nicht nur ein Haken, an dem man eineStruktur aufhängt � es ist auch ein Werkzeug, mit demman das Material aus neuem Blickwinkel sieht. StellDir Dein Material aus dem Blickwinkel verschiedenerGrundbilder vor � Dir kommen sicher viele neue Ideen.

Vermeide Grundbilder, die sich nicht mit allgemeinanerkannten Bildern vertragen. Zum Beispiel wäre es ineinem Buch ziemlich logisch, �abwärts� in den nächstenArtikel zu gehen und �nach oben� zum vorigen, man hataber allgemein akzeptiert, daß der nächste Artikel



51

�vorwärts� steht, also nach rechts, und der vorige�rückwärts�, also nach links.

Ein Grundbild darf natürlich nicht so bindendwerden, daß es die Orientierung und Navigierungin der Website erschwert. Baut sich die Site zumBeispiel aus �Räumen� in einem �Haus� auf, müßteman logischerweise durch einen weiteren Raum,den Korridor, gehen, um von einem Raum zum an-deren zu kommen. Das ist aber komplizierter alsnötig. Statt dessen könnte man ein Menü einrich-ten, mit dem man von Raum zu Raum springt. Soeine �Fernbedienung� wäre �Zauberei�, weil sie imVerhältnis zum Grundbild unrealistisch erscheint.

Entsprechend ist auch eine Suchfunktion in ei-nem Buch �reine Magie�, wenn man sie am Grund-bild mißt � es sei denn, das Buch ist ein Lexikon.

Vielfach sind es jedoch gerade diese �magischenEffekte�, die die neuen Seiten im Webmedium nut-zen. Da sie aber nicht unmittelbar einleuchten,wenn man sie am Grundbild mißt, erfordern siemeist eine Erläuterung. Eine Website, die auf demIllustrierten-Grundbild aufbaut und ganz auf magi-sche Effekte verzichtet, könnte genauso gut alsrichtige Illustrierte herausgegeben werden.

SucheEin Suchmechanismus, der einzelne Worte in derWebsite nachschlagen kann, setzt den Zugang zueinem CGI-Programm voraus. Eine Alternativewäre ein umständlich selbst hergestellter Indexoder ein Index, der von einem Hilfsprogramm ge-neriert wird.

InhaltsverzeichnisEin Inhaltsverzeichnis ist unbedingt notwendig.Bei kleineren Websites kann es auf der Ein-gangsseite erscheinen, andernfalls ist es eine selb-ständige Seite, deren Hauptüberschriften auf derEingangsseite wiederholt werden.

Eine kurze Beschreibung des Inhalts einer Seiteunter ihrer Überschrift kann sehr hilfreich sein.

Das Inhaltsverzeichnis muß nicht unbedingttextlich aufgebaut werden � es kann auch grafischals Karte oder Baumstruktur dargestellt werden,wenn das einen besseren Überblick über die Sitevermittelt.

KommunikationKommunikation in mehreren Richtungen gehört zu denspannendsten Möglichkeiten im Internet � im Gegen-satz zu der einfachen Mitteilung, die eine normaleWebsite ist. Kommunikation läßt sich aufteilen in Echt-zeit-Kommunikation (Chat, Telefonie, Videokonferen-zen) und verspätete Kommunikation (E-Mail, News-groups).

Echtzeitkommunikation (Real-Time-Commu-nication) ist ziemlich kompliziert und stellt große An-forderungen an Server und Client, weswegen ich nichtnäher darauf eingehen will. �Verspätete Kommunikati-on� dagegen liegt durchaus im Möglichen für die mei-sten Websites und ist außerdem vielfach wesentlich in-teressanter.

Die einfachste Art der Diskussion ist hier, daß dieLeser E-Mails an die Website schicken, die derWebmaster empfängt, sortiert und auf die Seiten legt.Für den Webmaster ist das ziemlich viel Arbeit, beson-ders wenn viele Briefe kommen, dafür erfordert es aberkeinen CGI-Zugang.

Andererseits gibt es CGI-Programme, die E-Mailautomatisch sortieren und die einzelnen Briefe inWebseiten integrieren. Manche Websites haben eineSeite mit einem praktischen Formular, in das man sei-nen Schriebs einfügt. Die meisten ziehen aber vermut-lich normale E-Mail vor, da man die ohnehin kennt.

Ein gutes Beispiel für ein lebendiges Diskus-sionsmilieu im Web ist Hotwireds Threads:threads.hotwired.com/threads/

Browserwatch/news ist ein Beispiel für eine andereWeise, eine kommunikationsorientierte Website zu be-treiben. Hier bearbeitet und kommentiert der Webre-dakteur alle Beiträge. browser-watch.internet.com/news.html

Die Länge einer SeiteWie lang darf eine Seite sein? Nun, sie muß eine�Informationseinheit� enthalten, also so viel In-formation, wie der Leser Deiner Meinung nach verdau-en kann, ohne abzuspringen. Hast Du einen durch unddurch linearen Text von 86 Seiten, kann der durchausauf einer Webseite stehen � nur wäre es vielleicht bes-ser, ihn als RTF zu formatieren, so daß der Leser ihndownloaden kann.

Artikel, Rezensionen und dergleichen sind vielfachInformationseinheiten � man liest den einzelnen Artikellinear, es steht aber nicht fest, in welcher Reihenfolgedie Artikel zu lesen sind.



52

Navigation und OberflächeEine Webseite muß dem Benutzer klarmachen, woer sich befindet, sie muß aber auch Schaltknöpfeoder Links enthalten, die ihn weiterbringen. Diese�Benutzeroberfläche� ist nicht etwa nur eine�Schale� um die Website � sie sollte eine unmittel-bare Funktion ihrer Struktur sein und sich an dem-selben Grundbild ausrichten wie sie.

Gebundene LinksGebundene Links sind Links zu bestimmten festenSeiten � zum Beispiel zur Eingangsseite, zu einerSuchseite oder zu einer Feedback-Seite. Jede Seitesollte einen Link zur Startseite enthalten, falls derBenutzer mitten in die Struktur hereinplatzt, etwadurch einen Sprung von einem Suchmechanismus.

Relative LinksHier geht es um Links mit einem Titel, der sich ausder Position der Seite in der Struktur versteht, zumBeispiel vorwärts, rückwärts oder aufwärts. Das istpraktisch, weil es sich an ein wohlbekanntes Bildhält, sollte aber niemals für sich stehen. FolgendePunkte sind unumgänglich:• die Angabe der relativen Position. Beim

Schaltknopf �aufwärts� sollte man wissen, wietief man in die Struktur eingedrungen ist.

• die Angabe des eigentlichen Zielorts, zumBeispiel �letzte Seite: Ezra Pound- Verbin-dung | nächste Seite: Kommentare zu TheWaste Land�

Relative Links solltest Du nur benutzen, wenn estatsächlich einen eindeutigen Verlauf oder eineReihenfolge im Inhalt der einzelnen Seiten gibt. Ineiner Artikelsammlung oder einem Nachschlage-werk können Ausdrücke wie Vor und Zurück nurverwirren.

ParallelnavigationVielfach baut sich eine Website als eine Reihe vonnebengeordneten Seiten oder Hauptgruppen auf. Insolchen Fällen stellt man Links zu den einzelnenHauptpunkten als waagerechte Leiste zuoberst aufder Seite, als Registerblätter in einer Kartei oderals �Sidebar� am Rand des Bildschirms dar. Achtedarauf, daß der Leser immer weiß, in welcherGruppe oder Seite er steht � und daß er weiß, ob erauf dem markierten Punkt steht oder auf einemUnterpunkt zu diesem.

Gleichgeordnete Punkte müssen nicht unbedingtreihenweise nebeneinander stehen.www.naestvednet.dk, die Site der dänischen

Stadt Næstved, benutzt zum Beispiel eine kleine Zeich-nung der Stadt aus der Vogelperspektive, auf der wich-tige Gebäude als Links zur entsprechenden Hauptgrup-pe in der Website dienen.

Kontextbestimmte LinksIn einer eher ungenauen nonlinearen Struktur wie zumBeispiel einem Nachrichtendienst enthält jeder Artikelim allgemeinen einige Links zu Artikeln über dasselbeThema oder verwandte Themen. Solche Seiten könneneine im Verhältnis zur Artikellänge große Anzahl vonLinks enthalten. Auf solchen Sites wird man auch vielZeit auf das Suchen und Klicken verwenden � wie manin einer Zeitung ja auch viel Zeit damit verbringt, dieÜberschriften zu durchfliegen.www.news.com ist ein Beispiel dafür. Zu jedem

Artikel gehören drei Navigationsfelder: eins nach rechtsmit allen festen Rubriken des Nachrichtendienstes, einsnach links zu den neuesten Überschriften und eins nachunten zu Artikeln, die sich mit diesem Thema befassen.Außerdem können Links zu relevanten Artikeln im ei-gentlichen Artikel als symbolhaftes Bild mit einerÜberschrift und dem Text Related Story auftauchen.

SymboleEin Symbol sollte grundsätzlich mit einem erklärendenText versehen werden. Meist verrät das Motiv einesSymbols wenig von seiner Funktion � erst wenn manseine Bedeutung kennt, kann man es leichter �lesen� alsText.

Sei vorsichtig mit undeutlichen oder obskuren Sym-bolen oder Namen. Es gibt oft Symbole mit Titeln wie�Pavillon, �Zentrum�, �Extra� oder andere undurchsich-tige Begriffe, die für den Designer vielleicht sinnvollsind, dem Benutzer aber nichts verraten.

Navigationswerkzeuge müssen in der gesamtenWebsite gleich funktionieren. Verweist ein Symbol aufeine bestimmte Seite, muß es natürlich auch im Kopfdieser Seite erscheinen.

Beispielewww.adobe.com ist ein Beispiel für eine Na-vigationsleiste mit viel zu viel Design, bei der man denÜberblick verliert: Zu jedem Produkt gibt esMenüpunkte wie Overview, Details, At work, Gettinghelp � aber was heißt At work eigentlich in diesem Zu-sammenhang? Und was ist der Unterschied zwischenSupport und Getting help? Oder der zwischen Soluti-ons, Services und Products? Wohin führt Up, wenn dieLeiste den Eindruck einer flachen Struktur vermittelt?Und was bedeutet Studio?

Außerdem deutet die Leiste nirgendwo an, wo mansich eigentlich befindet.



53

Natürlich ist diese Struktur durchaus durchdachtund logisch, nur vermittelt die Navigationsleistedas nicht. Außerdem hat man proble-matischerweise eine sehr strenge Struktur gewählt,in die alle Produkte eingepaßt werden müssen.

Sei vorsichtig mit allzu strengen Strukturen!Belaste eine Vorlage nicht stärker, als sie es tragenkann.

HypertextLinks, die unmittelbar im Text erscheinen, müssenals Leseweg verständlich sein. Der Leser muß denLink verfolgen und an der neuen Stelle weiterlesenund -blättern können. Der Link darf also nichtmitten in einen Zusammenhang springen, der nichtzu verstehen ist, ohne daß man in der neuenStruktur rückwärts geht. Natürlich sollte man auchnicht etwa einen Link zu Informationen erstellen,die nicht verständlich sind, wenn man nicht im Ur-sprungstext weiterliest. Vergiß nicht, daß jederLink den Besucher so weit entführen kann, daß ervielleicht nie auf Deine Site zurückkehrt.

Links müssen in den natürlichen Verlauf desTextes integriert sein und sollten keine Sonder-behandlung genießen � sie werden ohnehin ziem-lich hervorgehoben. Schreibe also nicht �Hier klik-ken, um dorthin zu kommen��. Verweise niemalsauf einen Link mit �unten auf der Seite gibt es ei-nen Link zu�� oder dergleichen.

HinweiseLinks, die relevant sind, aber nicht unmittelbar inden Text integriert werden können, solltest Du amunteren Ende der Seite oder wie eine Literaturlisteauf einer eigenen Seite anbringen.

Unter jedem Link solltest Du kurz beschreiben,wohin er führt.

Listen von �interessanten Orten im Web� sindnur sinnvoll, wenn sie das Ergebnis einer längerenkritischen Sortierung sind und wenn Du angibst,warum der jeweilige Link interessant ist und wozuer nutzt.

TextbearbeitungDie wichtigsten Navigationswerkzeuge in größerenTexten � ob das nun Hypertext ist oder nicht � sindnicht etwa Sidebars oder Symbole, sondern Über-schriften.

Definiere die Anzahl der Überschriftsebenen,mit denen Du arbeiten willst. Selten brauchst Dumehr als zwei oder drei. Manche Texte verlangen

natürlich eine �tiefe� Struktur mit vielen Ebenen. In ei-nem Hypertext verwirrt das aber eher, als daß es dieSache verdeutlicht, weil man ohnehin Sprünge vor-nimmt.

Je inhaltsreicher eine Überschrift ist, desto schnellerfindet der Leser, was er sucht. Kapitel 2 oder §4.2.1sind keine besonders guten Überschriften.�Unterhaltsame� Überschriften, die eher danach streben,das Interesse des Lesers zu fangen, statt den Inhalt ei-nes Abschnitts zu verdeutlichen, nutzen leider wenig,wenn man den Text nicht linear liest.

Sei ziemlich konsequent in der Länge Deiner Ab-schnitte und der Menge der Abschnitte unter jederÜberschrift. Unterrubriken, das heißt kurze Beschrei-bungen des Inhalts eines Artikels unter seiner Über-schrift, sind aus Zeitungen und Illustrierten vertraut undkönnen sehr hilfreich sein.

Wo es den Text übersichtlicher macht, sollest Du Li-sten und Punktaufstellungen benutzen.

Sage nichts über das MediumIn einem Zeitungsartikel wirst Du kaum lesen: �Dies istein Zeitungsartikel�. Genauso überflüssig ist es, in einerWebsite zu sagen, daß es sich um eine Website handelt.Das kann unter Umständen sogar ziemlich irritieren.

Schreibe also nicht Narnias Website, Willkommenbei Narnia Online! oder so ähnlich. Eine Überschrift ála Narnia und eventuell ein Willkommen! reichen völligaus � der Benutzer weiß ohnehin, daß er online ist.

Schreibe auch nicht: diese Website enthält � begnügeDich mit dem Inhalt. Statt �Links zu relevanten Websi-tes� reicht ein �siehe auch��.

Rede nicht von der Technik, die hinter den Seitensteckt � das interessiert nur Webdesigner, während dieBenutzer eher am Inhalt interessiert sind. Mußt Du aus-drücklich erklären, wie man technisch durch Deine Sitenavigiert oder sie zum Laufen bringt, etwa mit einem�Bildschirmeinstellung auf mindestens die und dieBreite setzen�, stimmt offensichtlich etwas nicht anDeinem Design.

Unter Umständen kommst Du natürlich nicht daranvorbei, von der Technik zu reden � zum Beispiel wennDu Plug-Ins benutzt und angibst, welches denn nun nö-tig ist und wo man es findet. Damit versperrst Du aberauch vielen Leuten den Zugang zu Deiner Website. Nurwenige Benutzer im Web verstehen sich darauf, Soft-ware downzuloaden oder sie gar zu installieren. Vergißnicht, daß das Publikum im Web ziemlich unterschied-liche Voraussetzungen hat.

SpracheAchte darauf, schnell und deutlich klarzumachen, wasman eigentlich mit Deiner Website anfangen kann. Im



54

allgemeinen haben Webbenutzer wenig Geduld mitWebsites, deren Zweck nicht unmittelbar ein-leuchtet.

Hast Du erst Deine Zielgruppe �eingefangen�,darf der Inhalt gerne kompliziert werden. Die mei-sten Webbenutzer wenden gerne viel Geduld undEnergie darauf, ein Thema gründlich und tiefge-hend zu verstehen. Oft benutzt man das Web fürInformationen, die so gründlich oder spezialisiertnicht in der Stadtbücherei zu finden sind.

Bei Websites muß Deine Korrekturlesung eben-so gründlich und sorgfältig sein wie bei einer ge-druckten Ausgabe.

Sei vorsichtig mit englischen Redewendungen.Da Englisch im Internet so sehr dominiert, rutschtman leicht aus mit einer �anglifizierten� Sprache.

SeitenlayoutDer Sinn des Seitenlayouts ist es, eine Seite durch-schaubarer zu machen, indem man sie in Blöckeoder Bereiche aufteilt. Große Informationsmengenwerden übersichtlicher, wenn sie durch das Layoutin Gruppen und Untergruppen aufgeteilt werden.Als Beispiel solltest Du Dir www.news.com an-sehen. Ein Text ohne Überschriften oder Eintei-lungen oder ein Text mit doppeltem Zeilenabstandnach jeder zweiten Zeile wird leicht zu einer un-übersichtlichen grauen Masse.

Betrachtest Du eine Seite aus einem gewissenAbstand, stellst Du fest, daß jedes Feld seine ei-gene Farbe und Schwere hat. Der Text ist grau.Überschriften wirken schwerer als Text, was demAuge hilft, die Seite in Überschrift und Textkörperaufzuteilen. Senkrechter Abstand zwischen Text-blöcken teilt die gesamte Textmenge deutlicherauf, und mit dem richtigen Abstand ergeben sichTextabsätze.

Blöcke, die außerhalb der Texthierarchie stehen,wie etwa Kopfzeile, Navigationsleiste, Links zuanderen Seiten, können durch ihre Farbe oderSchwere vom Textkörper und voneinander ge-trennt werden.

Der Abstand ist das wichtigste Werkzeug beider Aufteilung einer Seite. Je mehr Raum um einElement, desto deutlicher steht es da und desto les-barer wird der Inhalt.

Will das Auge eine Seite überblicken, bewegt essich von oben links nach unten rechts schräg überden Bildschirm. Die wichtigsten Informationensolltest Du auf dieser Linie anbringen � zum Bei-spiel die Überschrift der Seite in der oberen linkenEcke und darunter die Unterrubrik/das Inhaltsver-

zeichnis. Setzt Du die Überschrift oder das Logo derSite links und die Überschrift der Seite rechts, dauert esetwas, bis sich der Leser orientiert.

Sei konsequent beim Seitenlayout! Alle Seiten soll-ten möglichst denselben Aufbau und in etwa dieselbenNavigationswerkzeuge an denselben Stellen haben. Dashilft dem Leser.

Es lohnt sich, eine Skizze vom Seitenlayout auf Pa-pier aufzuzeichnen, bevor Du es auf dem Bildschirmerstellst. Deine Skizze sollte die einzelnen Felder inverschiedenen Grautönen darstellen, um ein gutesGleichgewicht zu finden. Mache Deine Skizze so ab-strakt wie möglich, mit wenigen Strichen oder Formen.Ergeben sich klare Linien oder Formen in der Kompo-sition, die das Auge sieht?

Funktionelle BlöckeDie meisten Websites bauen auf funktionellen Blöckenauf: oben steht eine Kopfzeile mit einer Identifikationder Site, also Logo und Namen, und der Über-schrift/dem Thema der Seite. Dazu kommen einige fe-ste Schaltknöpfe namens �Home�, �Suche�, �Feedback�,�Inhalt� und so weiter, eine Navigationsleiste mit denHauptgruppen in der Site oder im Thema und vielleicht�vorwärts� und �zurück�.

Die Navigationsknöpfe sitzen am besten oben rechts,weil man sie meist erst dann benötigt, wenn man einenÜberblick über den Inhalt der Seite hat.

Längere Seiten erfordern außerdem eine Fußzeile,die die wichtigsten Navigationshilfen wiederholt � zu-mindest einen Link zum Seitenkopf. Außerdem findensich in der Fußzeile meist ein E-Mail-Link zumWebmaster sowie eventuelle Meta-Informationen wieCopyright, Datum, URL, falls der Leser die Seite aus-drucken will. Der �natürliche� Navigationsknopf � jenach der Struktur der Site vorwärts zur nächsten Seiteoder zurück zur Eingangsseite � sollte unten rechtswiederholt werden.

Design am sichtbaren Bereich ausrichtenNur die wenigsten Webseiten werden je gescrollt. Mansieht sich an, was sichtbar ist, und springt dann weiter.Darum solltest Du oben auf jeder Seite mitteilen, wassie enthält. Deckt die Überschrift nicht den ganzen In-halt der Seite ab, solltest Du oben ein kleines Inhalts-verzeichnis mit allen Unterpunkten erstellen.

640 x 480 ist die kleinste allgemein benutzte Bild-schirmauflösung. Füllt der Navigator den gesamtenBildschirm bei aktivierten Werkzeugleisten, der Sta-tusleiste und der Win95-Leiste, enthält das Browserfen-ster 620 x 290 Pixel. Deaktiviert man die überflüssigenLeisten, steigt die Höhe auf 350 Pixel � das tun aber



55

nicht alle Leute, vielleicht, weil sie gar nicht wis-sen, wie.

Kopfzeile, Inhaltsangabe der Seite und diehauptsächlichen Navigationsknöpfe sollten alle in-nerhalb dieses �Minimalbildschirms� liegen. Bildersollten ebenfalls diesen Bereich nicht übersteigen.

Auf einem Macintosh füllt das Browserfensterim allgemeinen nicht die gesamte Breite des Bild-schirms � rechts bleibt ein Streifen frei, in dem derDesktop erscheint. In diesem Fall füllt dasBrowserfenster 480 Pixel in der Breite.

Nichts übertreibenJe mehr Schaltknöpfe, Symbole, Leisten und Son-derspalten es auf einer Seite gibt, desto un-übersichtlicher und weniger lesefreundlich wirdsie. Begnüge Dich also mit dem notwendigsten.

Bilder, die keine selbständige Funktion haben,solltest Du vermeiden. �Bullets�, das heißt Stern-chen, Kugeln und andere grafische Elemente vorListenpunkten, machen weniger auf den eigentli-chen Inhalt als auf sich selber aufmerksam � eben-so Rahmen und Ränder um Tabellen und derglei-chen. Bunte oder blinkende Striche zwischen Tex-tabsätzen überschreien den Text.

TypographieUnter Typographie verstehen wir � zumindest imfolgenden � die Kombination von Zeichensatz,Schriftschnitt, Schriftgröße und Farbe, die dem Le-ser die Bedeutung eines Textabsatzes verdeutlicht.Damit solltest Du vorsichtig umgehen! Viele ver-schiedene Typographien wirken verwirrend. Ichwürde eine Typographie für den Textkörper undhöchstens zwei weitere für Überschriften empfeh-len. Je weniger Text es gibt, desto geringer seineAnforderungen an Lesefreundlichkeit. DerTextkörper muß so lesbar wie möglich gestaltetwerden, die Typographie für den Titel der Ein-gangsseite dagegen soll vor allem gut aussehen.

SchriftgrößeHalte Dich an eine Schriftgröße für den Textkör-per. Allzu große Überschriften stören beim Lesen.Markierst Du eine Überschrift mit fetter oder kur-siver Schrift oder dergleichen, braucht sie nichtgrößer als der Textkörper zu sein, und außerdemist das oft lesefreundlicher.

SchriftschnittGROSSBUCHSTABEN UND KAPITÄLCHEN sindnicht besonderes lesefreundlich, weil hier alle

Buchstaben die gleiche Höhe haben. Du solltest sie nurfür Titel und ähnliche einmalig erscheinende Dinge be-nutzen.

Kursiv ist auf einem Bildschirm ebenfalls wenig le-sefreundlich, weil die schrägen Linien gegen die Pixelauf dem Bildschirm stehen. Kursiv sollte also nur füreinzelne Wörter benutzt werden, nicht aber für kom-plette Absätze oder Überschriften. Willst Du einen Ab-satz hervorheben, zum Beispiel als Zitat, machst Du dasmit einem Einzug. Fett liest sich leichter als kursiv,stört aber andererseits das Schriftbild mehr � es eignetsich also vor allem für Text, der nur durchflogen undnicht gründlich gelesen wird, wie Wörter in einer Liste.

Im allgemeinen empfiehlt es sich nicht, fett und kur-siv im selben Textkörper zu benutzen � das ergibt einziemlich unsauberes Schriftbild.

Unterstreichung darf niemals zur Hervorhebung ei-nes Textes benutzt werden � der Leser faßt das als Linkauf.

ZeichensatzAuf einer Seite solltest Du nur zwei Zeichensätze be-nutzen � den einen für Überschriften, den anderen fürTextkörper. Benutzt Du mehr, wirkt das verwirrend undchaotisch. Manche Zeichensätze eignen sich besondersfür den Bildschirm, so zum Beispiel Times, Ari-al/Helvetica und Courier. Andere Schriften sind hierweniger lesbar � die meisten Zeichensätze sind nuneinmal für den Druck auf Papier bestimmt.

FarbenSchwarzer Text ist für die Augen unmittelbar das ange-nehmste. Weißer Hintergrund ergibt hier den größtenKontrast zum Text, auf vielen Bildschirmen wird dasaber zu leuchtkräftig und so allzu anstrengend für dieAugen. Eine diskrete helle Hintergrundfarbe ist ange-nehmer.

Mit Farben kannst Du eine Typographie hervorheben� zum Beispiel ergibt eine Sonderfarbe für Überschrif-ten mehr Leben und Kontrast im Verhältnis zumTextkörper. Wie bei Zeichensätzen würde ich auch hierhöchstens zwei empfehlen: eine für Überschriften undeine für den Textkörper.



56

AbstandUnmittelbar setzt ein Browser eine leere Zeile zwi-schen zwei Absätze. Das ist aber nicht besonderslesefreundlich. Ein Abstand zwischen Textblöckensollte eigentlich Zusammenhänge und Einteilungenim Text verdeutlichen. Also sollte es möglichstkeinen Abstand zwischen Überschrift undTextkörper oder zwischen einzelnen Absätzen imTextkörper geben. Der sollte nur über Überschrif-ten oder für größere Pausen im Text benutzt wer-den.

Balken und SchnörkelIn Situationen, wo eine Überschrift fehl am Platzewäre, kannst Du eine Vignette oder ein Symbolbenutzen. Das könnte zum Beispiel für eine Pausegelten, einen Bruch oder eine Stimmungsänderungin einer Novelle oder einem Essay, der nicht durchÜberschriften unterteilt wird.

HTML verfügt für diesen Zweck über ein in-tegriertes Symbol: den waagerechten Balken. Al-lerdings ist so ein Balken nicht besonders schön �auch dann nicht, wenn er regenbogenbunt ist oderblinkt oder was viele Websites sich nun einfallenlassen. Meist erfüllen ein Sternchen oder eine Gra-fik mit einem einfachen Schnörkel diesen Zweckviel besser.

Seitenränder und ZeilenlängeJe mehr Freiraum es um den Text gibt, desto einfa-cher ist er zu lesen. Die optimale Zeilenlänge liegtlaut Experten bei 40-60 Zeichen. Was das in Pixelbedeutet, ist nicht einfach zu sagen � es hängt vomZeichensatz und der Textgröße ab. 12 Punkt TimesNew Roman, Netscape Navigators normale Ein-stellung, ergibt bei einer Spaltenbreite von 400 Pi-xel 50-60 Zeichen. Auf einem Macintosh, dessenBildschirmschriften etwas kleiner sind, ergibt dasetwas mehr Zeichen.

Sei vorsichtig, wenn es um die Justierung vonÜberschriften oder Bildern geht � eine Zentrierungbricht mit der lesefreundlicheren Linksjustierung.

Farben für LinksNormalerweise werden Links blau dargestellt undbereits besuchte Links violett. Experten im Inter-face-Design machten frühzeitig darauf auf-merksam, daß das nicht gerade klug ist: Linksmüssen natürlich auffallen und sollten daher dieauffälligste Farbe haben, zum Beispiel rot. Bereitsbesuchte Links dagegen sollten in den Hintergrund

treten und also in einer etwas dezenteren Farbe erschei-nen, etwa blau.

Das hielten etliche Webdesigner für vernünftig,weswegen sie sich daran hielten. Und allmählich wurdedie Bedeutung der Farben ziemlich unverständlich, weiljeder seine eigenen Regeln benutzte.

Darum würde ich Dir, was Farben angeht, folgendesraten: Halte Dich an den vorgegebenen Standard. WillstDu ihn unbedingt ändern, mußt Du eindeutig festlegen,was jede Farbe bedeutet. Gib neuen Links eine klare,reine Farbe, etwa rot, blau oder grün, und bereits be-suchten Links eine weniger klare, dunklere oder grautö-nigere Version derselben Farbe. Enthält Dein Textkör-per zahlreiche Links, sollte die Link-Farbe allerdingsnicht zu kräftig ausfallen, weil das das Lesen erschwert.

EingangsseiteDas Design der Startseite für Deine Website ist natür-lich ziemlich wichtig. Folgende Informationen solltestDu im oberen Teil dieser Seite anbringen, also in demTeil, der ohne Scrollen sichtbar ist:• WAS: welchen Zweck hat diese Website, was ent-

hält sie und wozu dient sie?• WER: wer zeichnet für die Site verantwortlich?

Die meisten Websurfer entwickeln rasch einen ge-sunden kritischen Sinn gegenüber ihren Quellenund haben wenig Vertrauen zu Sites, deren Urhebernicht erkennbar sind.

Außerdem sollte die Eingangsseite möglichst einen E-Mail-Link zum Webmaster enthalten, so kann ein Be-sucher nämlich auf eventuelle Fehler aufmerksam ma-chen.

Hat die Organisation hinter der Site eine Adresse undeine Telefonnummer in der �Nicht-Cyber-Welt�, solltendiese auf der Eingangsseite stehen � entweder als sol-che oder aber mit einem eindeutigen Link.

LiteraturEin paar empfehlenswerte Websites zum Thema Web-design vom Designgesichtspunkt her:Web Pages That Suck �Learn Good Web Page Design by

Looking at Bad Web Pages�www.webpagesthatsuck.com

Yale Web Style Guide Gründliche, seriöse Behandlungaller Aspekte im Webdesigninfo.med.yale.edu/caim/manual/

Web Page Design for Designers � Hauptgewicht aufLayout und Typographieds.dial.pipex.com/pixelp/ wpdesign/

Guide to Web Style Suns Führer für Webdesign, Haupt-gewicht auf Funktionalität und Navigationwww.sun.com/styleguide/



57

TestenAm besten setzt Du eine Person, die selber nochkeine Website gemacht hat, an Deinen Computerund bittest sie, die Site zu testen. Sie soll Dir allesmitteilen, was ihr auffällt � wie sieht die Sache alsGanzes aus, wie funktioniert die Navigation und soweiter. Antworte nicht auf ihre Fragen, sondernnotiere ihre Reaktionen. Hinterher kannst Du siezwar fragen, ob die Site wie geplant funktioniert �aber meistens sagen die unmittelbaren Reaktionenmehr über die Schwächen einer Site: �Hoppla, wobin ich denn jetzt gelandet? � wie komme ich zu-rück? �wo finde ich wohl�?�

Wartung einer WebsiteEs muß jemanden geben, der für die Website ver-antwortlich ist � einen Webmaster. Seine Aufgabeist, die notwendigen Berichtigungen und Aktuali-sierungen in der Site zu erledigen. Der Webmasterist nicht unbedingt mit dem Webdesigner iden-tisch. Viele Unternehmen lassen ihre Website voneinem externen Büro entwerfen und sie dann voneinem internen Webmaster warten. Der Webdesi-gner ist sozusagen der Architekt und der Webma-ster der Hausmeister.

Der Webmaster sollte eine Kopie der Websiteauf seinem eigenen PC installieren. Hier kann erBerichtigungen und Änderungen vornehmen undsie testen, bevor die Seiten auf den Server über-führt werden � auch dann, wenn der Server ansLokalnetz angeschlossen ist.

Es gibt einige Grundvorgänge, die unbedingt indie Organisation eingearbeitet werden müssen:• Die Website muß in den �Informationsfluß�

des Unternehmens integriert werden � welcheInformationen sollen laufend im Web veröf-fentlicht werden: Pressemitteilungen, Kalen-der, wichtige Begebenheiten, Produkte und soweiter.

• Jeder, der Beiträge liefert, muß wissen, welcheFormate der Webmaster vorzieht � RTF oderHTML, TIFF oder GIF und so weiter.

• Alle fertiggestellten Webseiten, egal von wem,werden an den Webmaster gegeben � nur erhat das Recht zum Uploaden.

• Das Webmaterial muß einer ebenso sorgfäl-tigen Korrektur unterzogen werden wie ge-drucktes Material. Merkwürdigerweise sindSchreibfehler in einem Browser sehr vieldeutlicher als in einer Textverarbeitung.

• E-Mail an die Website muß gelesen und ge-gebenenfalls beantwortet werden. Vielleicht

entdeckt jemand einen Fehler, den Du selber nichtbemerkt hast, und eine �dumme� Frage zeigt Dirvielleicht, daß Deine Website doch nicht so logischund einleuchtend aufgebaut ist, wie Du Dir dasvorstellst.

• Du mußt unbedingt darauf achten, daß Deine Web-site keine veralteten Informationen enthält. Haltesie auf dem aktuellen Stand und lösche veralteteSeiten.

Wie viele Leute haben Deine Site besucht?Willst Du wissen, wie viele Leute Deine Site besuchen,analysiere das Logbuch des Servers. Besitzt Du keineneigenen Server, kannst Du das natürlich nicht ohneweiteres, also mußt Du mit Deinem Provider reden. Aufdie sogenannten �Counters�, also Zähler, die es aufvielen Websites gibt, ist nicht unbedingt Verlaß.

Webdesign für ein IntranetEin Intranet ist ein internes Netzwerk in einem Unter-nehmen, das dieselben Komponenten benutzt wie dasInternet: Browser, HTTP, HTML, E-Mail. Früher be-nutzten die Unternehmen viele verschiedene, zueinan-der mehr oder weniger inkompatible Netzwerktypen,allmählich erkennt man aber, daß es einfacher und bil-liger ist, sich an die Internetstandards zu halten.

Webdesign für ein Intranet ist nicht wesentlich an-ders als Webdesign fürs Internet. Die drei Hauptunter-schiede sind:

1. Normalerweise hat man ein äußeres Web, das füralle zugänglich ist, und ein inneres Web, das nur denBetriebsangehörigen offensteht. Die beiden Webs kön-nen mehr oder weniger integriert sein.

2. Man hat wirklichen Überblick und Kontrolle überdie Software der Clients: Betriebssysteme, Browserver-sionen und so weiter. Das erleichtert es, die Funktiona-lität auf Plug-Ins, JavaScript, ActiveX und dergleichenaufzubauen, weil man sichern kann, daß alle Benutzerdasselbe Programm haben.

3. Die Bandbreite in einem Intranet kann das Vielfa-che der Bandbreite im Internet betragen. Das ermög-licht eine ausgedehntere Anwendung von Multimediaund anderen spannenden, aber platzintensiven Effekten.



58

So veröffentlichst Du Deine Website

Wie findet man Deine Adresse?Zunächst einmal kannst Du Leuten davon erzählenoder die Adresse auf Deine Karte setzen und der-gleichen mehr. Schreibe den URL so kurz wiemöglich � kannst Du Dich mit www.ozymandias.debegnügen, brauchst Du nichthttp://www.ozymandias.de/ index.htmlzu schreiben.

Wie kommt Deine Website in Yahoo, Di-no, AltaVista etc.?Du meldest Deine Website an. Viele Leute inDeutschland benutzen DINO, um deutsche Web-sites zu finden. Du solltest Dich also vor allem hieranmelden. Du aktivierst die Eingangsseite vonDINO über www.dino-online.de, klickst aufden DINO-Katalog und dann auf �Seite anmel-den�. Anschließend kannst Du die Kategorie Dei-ner Seite bestimmen und die Seite anmelden.

Was Dein internationales Publikum betrifft, gibtes Websites, die Deine Seiten auf einen Schlag beivielen internationalen Indizes und Katalogen wieYahoo und AltaVista anmelden können. Versuchees zum Beispiel mitwww.liquidimaging.com/liqimg/ sub-mit/

Vergiß nicht, meta-Tags zu erstellen, damitDeine Seiten nach Wunsch indexiert werden.

Achte auch auf sinnvolle Titel, die selbständigverständlich sind.

Die sicherste Weise, entdeckt zu werden, istaber, andere Sites dazu zu bringen, daß sie einenLink auf Deine Site einrichten. Du kannst E-Mailsan artverwandte Sites schicken und Deine Ankunftim Web melden � und eventuell schreiben, daß Duzu ihnen linkst, wenn sie zu Dir linken. Ist DeineWebsite spannend, tun sie das sicher. Das gilt al-lerdings nicht für kommerzielle Sites. Es gibt auchNewsgroups, in denen Du neue, relevante Sitesmitteilen kannst. Allerdings solltest Du zuerst denFAQ der Newsgroup lesen � nicht überall wird dieAnnoncierung von Websites akzeptiert, vor allemwenn sie kommerziell sind. Über Newsgroups er-fährst Du mehr in Wie startet man ins Internet imAbschnitt USENET.

Urheberrecht im Internet?Gerade hier gibt es viele Mißverständnisse. Doch esgelten dieselben Regeln wie sonst auch:! Der Urheber hat automatisch das Urheberrecht (oder

Copyright) für alles originale �geistige Eigentum�,also Originaltext, Grafik, Musik, Programmcodeund so weiter. Es ist nicht notwendig, ausdrücklich�©� oder �Copyright by�� im Material anzuführenoder das Material irgendwo zu registrieren, um dasCopyright zu beanspruchen.

! Es ist verboten, Material anzuwenden oder zu ko-pieren, dessen Urheberrecht von jemandem bean-sprucht wird � es sei denn man hat eine ausdrückli-che Genehmigung. Man darf allerdings �in ange-messenem Maß� zitieren oder dergleichen.

! Das Copyright entfällt automatisch nach einer ge-wissen Zeit. Bei Literatur sind das 70 Jahre nachdem Tod des Urhebers. Danach kann das Materialfrei benutzt werden.

Das Web erhebt auch neue Fragen zum Urheberrecht,die noch nicht ganz geklärt sind. Die Regeln scheinenetwa so auszusehen:! Es ist keine Genehmigung nötig, um einen Link

zum Material anderer zu erstellen.! Es ist nicht erlaubt, Material auf anderen Servern so

�einzukapseln�, daß es wie eigenes Material aus-sieht � etwa durch Einsetzen eines Bildes, dessenQuelldatei auf einem anderen Server liegt, oderdurch das �Framen� eines Dokuments auf einem an-deren Server, um es als Teil des eigenen Materialserscheinen zu lassen.

Mehr über Urheberrechts-Regeln erfährst Du unter10 Big Myths about copyright explained:www.clarinet.com/brad/ copymyths.html

Die Zukunft im WebHTML entwickelt sich ständig weiter. Zur Zeit bereitetW3C die endgültigen Spezifikationen für HTML 4.0vor, die einerseits Frames, Scripting und andere allge-mein akzeptierte Punkte enthalten, andererseits HTMLden Umgang mit mehreren Schriftsprachen wie z.B.Chinesisch oder Japanisch, mit wechselnden Schrift-richtungen und anderem mehr ermöglichen. Die vorläu-figen Spezifikationen findest Du unterhttp://www.w3.org/TR/WD-html40/.

Es gibt noch weitere spannende Entwicklungen wiePush, PNG, XML, Desktop integration, DynamicHTML, Document Object Model, CORBA/IIOP. Mehrzu diesen Punkten findest Du im Online-Supplement.



59

Davon solltest Du die Finger lassen!Natürlich macht Dich das Lesen eines solchenHeftes nicht zum Profi � hier folgen aber einigebeachtenswerte Punkte, wenn Du nicht den Ein-druck eines Amateurs erwecken willst:• Keine Hintergrundbilder.• Halte Dich an die vorausdefinierten Farben für

Links und besuchte Links. Mußt Du sie ändern,mache deutlich, wofür sie stehen.

• Verwende keine unnötigen und irritierendenSpezialeffekte wie animierte GIFs und Ja-vaScript-Lauftexte.

• Halte Dich an wenige verschiedene Typo-graphien auf ein und derselben Seite � zwei,höchstens drei Kombinationen von Zeichensatz,Schriftgröße und -farbe.

• Sei konsequent bei Deiner Schriftwahl.Machekeine inhaltslosen Seiten, etwa Seiten, die nurein Logo oder einen Titel oder zwei bis dreiLinks zu Unter-Seiten enthalten.

• Benutze keine Tabellen mit dreidimensionalemRahmen. Vermeide dreidimensionale waage-rechte Striche. Das macht einen schlechtenEindruck.

• Beziehe Dich nicht auf das Medium. Schreibenicht �diese Website ��. Keine Links mit demText ��hier klicken�� oder ��dieser Linkführt zu��. Schreibe lieber den Inhalt desLinks. Verweise nicht auf Links: �unten findestDu einen Link zu ��.

• Stelle keine Seiten her, die nur von einem ein-zelnen Browser richtig dargestellt werden. Esist gar nicht schwer, Seiten zu erstellen, mit de-nen alle Browser umgehen können, außerdemwird sich sicher niemand einen Browserdownloaden, nur um Deine Seite zu sehen.Schreibe nicht �Diese Seite erscheint am bestenin dem und dem Browser�.

• Vermeide Reklame für einen Browser auf Dei-ner Seite, das macht einen schlechten Eindruck.Andere tun das oft, weil sie Schmiergeld erhal-ten. Microsoft bietet Webdesignern, die dasMSIE-Logo auf ihre Webseiten setzen, ko-stenlose Software, Pizzas und anderes mehr an.

• Schreibe nicht �Im Bau� bzw. �Hier gibt esbald mehr Inhalt�. Webseiten sind grund-sätzlich im Bau. Nimm nur fertige Seiten.

• Benutze keine Plug-Ins ohne guten Grund.• Setze Deinen Textkörper nicht größer als nor-

mal � und gib ihm keine Textfarbe.• Vermeide Ausdrücke wie �Cyber-�,

�Cyberspace� oder �Infoautobahn�.

• Sorge für die Aktualität. Aktualisiere Deine Seitenoder lösche sie, wenn sie veraltet sind.

• Achte auf gute Sprache. Sei vorsichtig mit der�Anglifizierung� der Sprache. Ist Dein Publikumdeutsch, schreibe auf Deutsch.

Begriffserläuterungen


60

ActiveX Microsofts Antwort auf Java, Plug-Ins usw.,Windows-zentriert.

Alta Vista eine der stärksten Suchmaschinen;www.altavista.digital.com

Animation eine Sequenz zusammenhängender Bildern,etwa ein Zeichentrickfilm.

Anker Punkt in einem HTML-Dokument, der eine Link-Verknüpfung dorthin ermöglicht.

Anti-alias ein grafischer Trick, der durch Farbabstufungrauhe Kanten ausgleicht.

Applet in Webseite integriertes Java-Programm.ASCII Zeichensatz, der die üblichsten Zeichen enthält,

unter anderem das englische Alphabet.Attribut Erweiterung zu einem Tag.Bandbreite Kapazität der Datenüberführung einer Ver-

bindung. Je größer desto schneller.Browser Client-Programm, das Webseiten darstellt und

die Navigierung durch sie ermöglicht.Browserkrieg malerischer Ausdruck für den Wettstreit

zwischen den führenden Browserproduzenten Netsca-pe und Microsoft.

Cache beim Browser die kürzlich eingelesenen Dateien,die noch im Speicher liegen.

CGI Common Gateway Interface System, das über eineWebseite ein Server-Programm aktiviert.

Client Programm auf der Benutzerseite im Netzwerk,z.B. Webbrowser oder Mailprogramm.

cookie Informations-�Fetzen�, den ein Server imBrowser speichert, so daß er diesen (damit Dich) beimnächsten Besuch wiedererkennt.

CSS Cascading Style Sheets typographische Sprache,die in Style Sheets benutzt wird.

Cyber- siehe Cyberspace. Stammt eigentlich von demBegriff Cybernetics.

Cyberspace Begriff stammt aus dem Science-Fiction-Roman Neuromancer (1984) von William Gibson, bez.ein Virtual-Reality-Computernetzwerk. C. und Cyber-werden kritiklos für alles benutzt, was Computer, In-ternet, Informationstechnologie und andere coole Din-ge angeht.

dither Simulation einer Farbe in einem Bild durch Mi-schung von Punkten anderer Farben.

Domänen-Name Teil eines ServernamensDownload eine Datei aus dem Internet holen, um sie auf

dem eigenen Computer zu speichern.Editor Programm, in dem man eine Datei bearbeitet,

wie etwa ein Webeditor für Webseiten oder ein Texte-ditor für Textdateien.

FAQ Frequently Asked Questions � Liste üblicher Fra-gen und Antworten zu einem Thema.

fließende Bilder Bilder auf Webseite, die rechts- oderlinksjustiert und vom Text umflossen werden.

Formular Ansammlung von Feldern, in die Infor-mationen eingefügt werden, die an ein CGI-Programmweitergegeben werden.

Frame Bestandteil eines Framesets.Frameset Dokument, das das Browserfenster in mehrere

getrennte Dokumente unterteilt.

Freeware kostenlose Software.FTP File Transfer Protocol � Protokoll, durch das im Inter-

net Dateien überführt und die Dateistrukturen auf einemServer manipuliert werden � Ordner erstellen, Dateien lö-schen, ändern usw.

FTP-Programm Programm zur Übertragung und Manipula-tion von Dateien über das Internet.

GIF im Web vielbenutztes Grafikformat, das sich vor allemfür einfache Grafiken eignet.

GIF-Animation Variation des GIF-Formates, die Animatio-nen enthält.

Header Meta-Information zu einem Dokument, z.B. MIME-Type, der bei einer HTTP-Überführung vor dem eigentli-chen Dokument übermittelt wird.

Homepage 1. die Eingangsseite, Startseite einer Website. 2.die Seite, mit der der Browser startet. 3. umgangssprachlichfür eine Website.

HTML HyperText Markup Language. Kodierungssprache fürWebseiten. Ein HTML-Dokument enthält Text, Bilder,Links zu anderen Web-Objekten.

HTTP HyperText Transfer Protocol. Wird benutzt, umWebseiten von einem Server zu übermitteln.

Hyperlink aktiver Verweis in Hypertext o. -medium.Hypermedia siehe Hypertext, kann desweiteren Bilder, Ton

und dergleichen enthalten.Hypertext Text, der vielfache Verweise enthält, die man un-

mittelbar verfolgen kann, was zu einem nonlinearen Lesendes Textes führt.

Imagemap Bild, dessen einzelne Bereiche Links zu verschie-denen Stellen sind.

Infoautobahn (nach dem englischen the information super-highway) (umg.) die informationstechnische Infrastruktur,hierunter das Internet.

Interaktivität wenn ein Programm auf einen Input seitensdes Benutzers reagiert. Die einfachste Form von Interakti-vität im Web sind Links.

Internetanbieter Firma, die Dienste wie Internetanschluß,Server, Webhotel etc. anbietet.

Intranet internes Netzwerk in einem Unternehmen, das mitdem Internet kompatibel ist.

ISDN spezielle digitale Telefonverbindung mit wesentlichgrößerer Bandbreite als eine normale Modemverbindung.

ISO-8859-1 Zeichensatz, Erweiterung von ASCII mit allenSonderzeichen der westeuropäischen Sprachen wie ä, ö, ü.

Java Programmiersprache, speziell für den Netzgebrauchentwickelt, plattformunabhängig, entwickelt von SunMicrosystems

JavaScript rudimentäre Programmiersprache, die in Verbin-dung mit HTML Webseiten interaktiver machen kann, ent-wickelt von Netscape.

JPEG Web-Grafikformat, gut für Photos.JScript Microsofts Ausgabe von JavaScript.Komprimierung Methode, dank derer eine Datei weniger

Raum einnimmt als ursprünglich.Link Hyperlink.Microsoft weltweit führender Softwareproduzent, auch im

Internet (MSIE, FrontPage)

Begriffserläuterungen


61

MIME Multipurpose Internet Mail Extension Standard,nach dem Server im Internet das Format für versen-dete Dateien angeben.

MSIE Microsoft Internet Explorer populärer Browser,Nr. 2 nach Netscape Navigator.

Multimedia meist Kombinationen von interaktiven,nicht-textbasierten Medien wie Ton oder Film auf ei-nem Computer, oft auf CD-ROM.

Netscape Softwarefirma; lange führend in Internet-software (Netscape Navigator) und Servern, sehrwichtig für die Entwicklung des Web.

Newsgroups Diskussionsgruppen im Internet.Objekt 1. in HTML: externe Datei, die als Feld in eine

Webseite integriert wird, (Grafik, Applet, Plug-In.) 2.beim Programmieren: Ansammlung von Funktionenund Daten; ein Element mit Eigenschaften und Funk-tionen; ein Programmmodul, das mit anderen Modulenkommuniziert.

objektorientiert beim Programmieren: auf Objektenaufgebaut.

offen bei Datenformaten, Standards, Protokollen ver-wendet, Bezeichnung für �im allgemeinen �nicht voneinem kommerziellen Unternehmen kontrolliert, Spe-zifikationen zugänglich für alle, kann von jedermannbenutzt werden�.

Palette die Farben, die zu einem Bild gehören.PDF Portable Document Format Format für die Über-

führung von fertiggestalteten Dokumenten, die ausge-druckt werden sollen.

Pixel Bildpunkt auf einem Bildschirm.Plattform Kombination von Hardware und Betriebssy-

stem.plattformunabhängig Software oder Daten, die von

Computern verschiedener Hardware- und Betriebs-systeme verarbeitet werden können.

Plug-In Erweiterungsmodul für einen Browser, das die-sen zum Umgang mit einem neuen Datenformat befä-higt, etwa Film, Ton, VRML usw.

Protokoll Regelsatz für die Kommunikation über einNetzwerk, z.B. HTTP für die Überführung vonWebseiten und SMTP für E-Mail.

relativer URL Adresse, die im Verhältnis zur Adressedes Dokuments interpretiert wird, in dem er auftaucht.

RFC Request For Comments Dokumente, die die imInternet benutzten Standards beschreiben. Der Namebesagt, daß solche Standards grundsätzlich veränder-lich sind und diskutiert werden.

RTF Rich Text Format plattformunabhängiges Datei-format für den Austausch von Textdokumenten zwi-schen verschiedenen Programmen.

Server Programm bzw. Computer, der über ein Netz-werk Dienstleistungen an Clients bietet. Ein Web-server liefert z.B. Webseiten und andere Dokumentean einen Client mit einem Webbrowser.

SGML Standardized General Markup Language�Metasprache� zur Entwicklung von Datenformaten.HTML entstand auf Basis von SGML.

Shareware Programme, die man vor dem Kauf (oft 30 Tage)kostenlos ausprobieren kann.

Site kurz für WebsiteStyle Sheets Vorschrift, die HTML mit erweiterten Layout-

und Typographiebeschreibungen versieht.Tabelle Rahmenstruktur auf einer Webseite, die für Tabel-

lenaufstellungen und Layoutzwecke dient.Tag Markierung o. Formatierungscode in HTML.Texteditor Editor für die Bearbeitung von reinem ASCII-

oder ISO-8859-1-Text, etwa Wordpad unter Windows oderSimple Text auf dem Mac.

Upload eine Datei vom eigenen Computer auf einen anderenComputer im Internet überführen.

URL Uniform Resource Locator Adresse für ein Objekt imInternet, z.B. eine Webseite.

VRML Virtual Reality Markup Language Standardformat zurBeschreibung von 3D-Modellen oder -Welten. Kontrolliertvon W3C.

W3C Kürzel für World Wide Web ConsortiumWeb (2) umgangssprachl. Bez. des World Wide WebWeb integrierte Struktur von Hypertext- oder Hypermediado-

kumenten.Webdesign die hohe Kunst, Webseiten und Websites zu er-

stellen.Webeditor Programm zum Erstellen von WebseitenWebhotel Mietraum auf dem Server eines Internetanbieters,

der die eigene Website aufnimmt.Webseite Dokument in HTML, das über HTTP aus dem In-

ternet überführt wird.Website Ort bzw. Stelle im Web; zusammenhängende Grup-

pe von Webseiten im Internet.World Wide Web Consortium unabhängige Organisation,

die Richtlinien und Empfehlungen für Standards im Weberstellt, z.B. HTML und HTTP.

World Wide Web gigantische Ansammlung von Hyperme-diadokumenten im Internet, basiert auf der Dokumentbe-schreibungssprache HTML und dem Übertragungs-Protokoll HTTP. Das Besondere sind die Links, mit derenHilfe man weltweit von einem Dokument zum anderen�springt�.

WWW Kürzel für World Wide WebWYSIWYG What You See Is What You Get beschreibt unter

anderem Webeditoren, die ein einigermaßen realistischesBild vom endgültigen Aussehen einer Webseite vermitteln� im Gegensatz zu älteren Editoren, die nur den Formatie-rungscode zeigten.

Yahoo unentbehrlicher umfassender Katalog über Websites �www.yahoo.com

Sachwortregister


62

216-Farben-Palette, 25Absolute Placement, 41ActiveX, 45Adobe PageMill, 7alternate text, 16Anti-Alias, 23Applets, 44Attribute, 37Claris Home Page, 7Client-side-Imagemaps, 17Communicator, 6copyright, 58CSS, 40Dateinamen, 8Definitionslisten, 9Deklaration, 40Domänennamen, 42Eigenschaften, 12externe Links, 14Farbe, 13Form, 46Frames, 27Frameset, 27FTP-Programm, 20GIF, 23GIF-Animation, 43Grafik integrieren, 16Grafikformate, 23Hintergrundbild, 31HTML 4.0, 58HTML-Editor, 6HyperText Markup Language, 5index.html, 26Inspector, 12interlaced, 24Intranet, 57ISO-8859-1, 11Java, 44JavaScript, 45JPEG, 23JScript, 45Kapitälchen, 30Kontrolle, 22Layers, 41Leertaste, 11Link, 13Listen, 9mailto, 15margin break, 16Microsoft FrontPage, 8Microsoft Internet Explorer, 6MIME, 35MSIE, 6Navigator, 6Navigator Gold, 6

Netscape, 6Netscape Communicator, 6Netscape Composer, 7nonbreaking space, 11Pagemaker, 32Plattformunabhängig, 5Plug-In, 43Plug-ins, 44Preview-Modus, 15Progressive JPEG, 24Properties, 12push, 58QuarkXPress, 32relative URLs, 26Secure Socket Layer, 42Seitenränder, 30Selector, 41Server-side-Imagemaps, 17Spalte, 31SSL, 42Style Sheet, 40Submit, 46Tabellen, 18Tabulator, 11Tags, 36Teletype, 10testen, 20Textverarbeitung, 32Titel, 13transparent, 23upload, 20URL, 26Verankerungspunkt, 14W3C, 6Webdesign, 3Webeditor, 6Webhotel, 20Webordner, 7Webpalette, sichere, 25WebServer, 20Wilbur, 38Word, 32Wordperfect, 32World Wide Web Consortium, 6WYSIWYG, 7Überschrift, 9Zeichensätze, 30Zeilenabstand, 30Zeilenlänge, 31Zeilenwechsel, 11Zelle, 19

Inhalt


63

Erster Teil � Webdesign fürAnfänger ..................................................4

HTML ........................................................ 5Der Browser............................................... 6Der Webeditor............................................ 6Fangen wir an! ........................................... 7Text ............................................................ 9Elemente und Eigenschaften.................... 12Farbe und Hintergrund............................. 13Titel.......................................................... 13Links ........................................................ 13Test im Browser....................................... 15Grafiken ................................................... 16Tabellen ................................................... 18Test im Browser....................................... 20Veröffentlichung...................................... 20Zweiter Teil � Alles über Webdesign.....23Grafikbehandlung .................................... 23URLs........................................................ 26Frames...................................................... 27So �mißbrauchst� Du HTML für

ansprechendes Layout und guteTypographie........................................... 30

Vom Textdokument zu HTML................ 32Welcher Browser unterstützt was? .......... 33Andere Dokumentenformate.................... 35Und dahinter: die HTML-Codes.............. 36HTML im Editor einfügen....................... 38Meta-Information zu einem

Dokument .............................................. 39Style Sheets.............................................. 40Mach Deinen Seiten Beine! ..................... 42Sicherheit ................................................. 42www.ich.de .............................................. 42

Dritter Teil: Interaktivität undMultimedia ............................................ 43

Objekte .................................................... 43GIF-Animationen .................................... 43Plug-Ins ................................................... 44Java-Applets ............................................ 44ActiveX-Komponenten............................ 45JavaScript ................................................ 45CGI & Formulare .................................... 46GGI-Programmierung.............................. 47Vierter Teil: Planung und Design

für eine Website .................................... 48Das Grundbild ......................................... 49Navigation und Oberfläche ..................... 52Textbearbeitung....................................... 53Seitenlayout ............................................. 54Typographie............................................. 55Eingangsseite........................................... 56Testen ...................................................... 57Wartung einer Website ............................ 57Webdesign für ein Intranet ...................... 57So veröffentlichst Du Deine Website ...... 58Urheberrecht im Internet? ....................... 58Die Zukunft im Web................................ 58Davon solltest Du die Finger lassen!....... 59

www.KnowWare.de

Documents

DM Web Design - hs-fulda.deklingebiel/pub-www/webdesign.pdf · Teil 1 - Webdesign für Anfänger ' Olav Junker Kjær & KnowWare Verlag - Web Design - 16-05-01 - 16:08 5 speicher (RAM)