Eine empfehlende Einführung in das World-Wide-Web

Dieses Dokument soll einführen und Gestaltungsrichtlinien geben. Die fett gedruckten Absätze enthalten zusammengefasste Empfehlungen, die kursiven Absätze Beispiele.
Ausführlichere Literatur findet sich unter:

Inhalt:

  1. WWW und HTML
  2. Bilder im WWW
  3. Struktur des Dokumentenbaums
  4. Struktur der einzelnen HTML-Seite

1. WWW und HTML

Das World-Wide-Web(WWW) wird durch die als WWW-Server bezeichneten Rechner gebildet. Diese halten Informationen bereit und tauschen diese auf der Grundlage des Internet-Protokolls über das Internet aus. Die Informationen auf den WWW-Servern befindet sich in sogenannten Hypertext-Dokumenten. Der Inhalt dieser Dokumentenseiten gehorcht der Grammatik einer Seitenbeschreibungssprache, der  Hypertext-Markup-Language(HTML). Je neue die verwendete Version der HTML ist, um so umfangreicher ist die Grammatik, um so mehr Formatierungsmöglichkeiten sind gegeben. Aber es gilt die Faustregel für Software schlechthin:

Verwende nicht die neueste, sondern die gängigsteVersion, damit du verstanden wirst!

Die "Seiten" bestehen aus seriell aufeinanderfolgenden Elementen. Elemente können Textpassagen, Bilder und anderes sein. Die Grammatik dieser Sprache legt fest, daß vor und nach einem Element Formatierungszeichen, sogenannte Markups, gesetzt werden. Die Markups sind in spitze Klammern gefasste Abkürzungen, die das Aussehen des eingeklammerten Elements bestimmen. Man kann HTML-Dokumente mit jeder normalen Textverarbeitung öffnen, ansehen und editieren. Öffnet man das Dokument allerdings mit einem HTML-Ansichtsprogramm, einem sogenannten Browser, werden die Formatierungsmerkmale umgesetzt.
Beispiel:
 
Im HTML-Dokument sieht man beim Öffnen mit einer Textverarbeitung "<B>Ueberschrift</B>" - Im Browser sieht man nur das Wort "Ueberschrift" fett (B für engl.:bold) dargestellt.

Elemente, die auf andere Seiten verweisen, indem ihnen die Adresse einer anderen Seite unterlegt ist, heissen Links. Der Anfangs-Markup für einen Link lautet <A> und wird um die Adresse nach der Abkürzung "HREF" (HTML-Referenz) ergänzt. Die Adresse einer Seite beginnt mit der Abkürzung "HTTP://" (Hypertext-Transfer-Protokoll) und wird um dem Namen eines WWW-Servers und der dort befindlichen Seite ergänzt.
Beispiel:
 
<A HREF http://www.uni-freiburg.de/index.html> Uni Freiburg </A> im Editor sichtbar -  Beim "Anklicken " des Wortes "Uni Freiburg" im Browser "landet" man auf der Einstiegseite "index.html" des WWW-Server "www.uni-freiburg.de" der Universität, d.h. der Browser lädt die unten sichtbare Seite...

Die Unterlegung einer Adresse ist im Browser durch farbliche Hervorhebung und Unterstreichung gekennzeichnet.

2. Bilder im WWW

Selbstverständlich kann auch ein nicht-textliches Element markiert werden. Ein Bild z.B. ist dann farblich umrahmt. Auch kann eine Bilddatei als Adresse angegeben werden. Allerdings beschränkt sich das "Verstehen" von Bildern für die Browser in der zur Zeit gängigen HTML-Version nur auf die Pixel-Formate *.gif (Graphics Interchange Format) und *.jpg (Joint Picture Expert Group Format):
 
 
(200Bytes)		 Das *.gif-Format komprimiert die Bildinformation, indem benachbarte Pixel mit gleichem Farbwert zusammengefasst werden. Somit verringert es besonders für Bilder mit wenig Farbdifferenzen (z.B. Schwarzweiss- und Schemazeichnungen) Dateigröße und damit Übertragungsdauer auf dem Internet.
 
 
(9Kilobyte)		 Das *.jpg-Format komprimiert die Bildinformation, indem nur der mittlere Farbwert benachbarter Pixel festgehalten wird. Bei Wiedereinlesen des *.jpg-Bildes ist dann Information verloren gegangen und das Bild wirkt etwas verschwommen. Für Bilder mit viel Farbinformation (z.B. Fotos) ist das aber die beste Methode, um Dateigröße und damit Übertragungsdauer auf dem Internet zu minimieren.

3. Struktur des Dokumentenbaums

Bei der Verknüpfen der Seiten ("Linken") werden oftmals die Möglichkeiten der Seitenvernetzung zu sehr ausgenutzt.

Eine einfache und saubere Baumstruktur ist anzustreben. Dies vereinfacht die Seitenpflege und erleichtert dem Informationsuchenden die Orientierung.

Bemühe dich um eine flache Herarchie - Pflege möglichst nur zwei Ebenen!


Querverweise können zwar das Auffinden der Information beschleunigen, verschlechtern aber die Orientierung und vervielfachen den Pflegeaufwand.

Vermeide Querverweise!

Entsprechend sparsam ist natürlich auch mit Links nach draussen umzugehen, auch hier droht Orientierungsverlust...
Des weiteren soll vermieden werden, Informationen mehrfach aufzuführen. Dies vermehrt den Pflegeaufwand. Das Bemühen um eine flache Seiten-Hierachie führt dazu, dass die einzelnen Seiten einer Ebene gleichberechtigt nebeneinander stehen. Werden darüberhinaus noch Querverweise vermieden, werden die jeweiligen Informationsinhalte stärker untereinander differenziert. Dies vermeidet automatisch Informationsverdopplung,

4. Struktur der einzelnen HTML-Seite

Der Zweck der HTML-Seiten bestimmt ihre Struktur. Hier wird davon ausgegangen, dass die primäre Aufgabe der Seiten die Informationsvermittlung ist. Auch Ansprechbarkeit und grafische Gestaltung sind unter dieser Prämisse zu sehen.
Informationsvermittlung wird durch Informationsverfügbarkeit und Informationsinhalte bestimmt.
Informationsverfügbarkeit läßt sich durch "äussere" und "innere" Parameter kennzeichnen. Äussere Verfügbarkeit wird durch die Netzübertragungsmöglichkeiten bestimmt. Unabhängig von den Übertragungskapazitäten ist die "Datenmasse" des einzelnen Dokuments für die Übertragungsgeschwindigkeit ausschlaggebend. Um die Übertragung zu beschleunigen, ist der Datenumfang möglichst gering zu halten. Ein Farbbild hat zwar einen hohen Informationsgehalt, bedarf aber auch je Quadratzentimeter einiger Kilobyte Speicherplatz. Eine DIN-A4-Seite Text benötigt dagegen nur auf 2Kilobyte.

Damit deine Informationen möglichst effektiv sind, achte auf eine möglichst hohe Informationsdichte, nicht auf Umfang! Verwende Bilder sparsam - Text braucht viel weniger Speicherplatz!

Die "inneren" Verfügbarkeitsparameter sind durch die innere Struktur des Dokumentes bestimmt. HTML baut auf einen seriellen Datenfluß der einzelnen Elemente auf ("Alles kommt nacheinander..."). Auch Tabellenelemente sind möglich. Diese erschliessen an ihrem Platz im Dokument die zweite Dimension tabellarisch strukturiert.
Die in den neueren Version der HTML-Grammatik mögliche Rahmentechnik wird hier nicht berücksichtigt, da dieses Strukturmerkmal auch Einfluss auf andere verknüpfte Dokumente nimmt und damit dessen Wirkung nicht singulär für ein Dokument alleine betrachtet werden kann.

Zunächst noch keine Frames benutzen! Nicht alle mögen diese Einschränkung....

Die Vorgabe des seriellen Datenflusses der HTML-Grammatik führt zwangsläufig zur Aufzählung. Und entsprechend logisch ist es, dass HTML Aufzählungs-Formatmarken anbietet. Dabei lassen sich sehr einfach Untergruppen bilden.
Beispiel:
Doch mehr wie zwei Ebenen werden unübersichtlich, speziell bei langen Listen.

Verwende die Strukturform der Aufzählung wegen der Übersichtlichkeit in maximal zwei Ebenen!

Die Reihenfolge der Aufzählung kann bei kurzen Listen (max.10 Punkten) noch beliebig sein. Bei grösseren Listen sind "Sortierkriterien" wichtig. Je nach Anforderung können das historische (first come-first serve), alphabetische, logische (verwaltungstechnische Organisationsvorgaben) oder andere sein. Aber durchgehalten werden müssen sie...
Notwendigerweise führt das Prinzip der flachen Hierarchie zu Listen, die nicht immer auf eine ausgedruckte DINA4-Seite passen. Doch das ist weniger schlimm als unübersichtliche oder unleserliche Dokumente.
Unleserlich werden HTML-Dokumente, beispielsweise bei Präsentionen mit Bildschirmprojektion, wenn die Schrift kleiner als 12Punkt ist.

Verwende keinen Schriftgrad kleiner 12 Punkt, es sei denn, der Inhalt ist nebensächlich!

Dies ist eine Standard-Vorgabe. Viele Browser erlauben ein Abänderung der Standard-Vorgaben bei der Seitenansicht. Aber aus Arbeitsersparnis werden diese meist unverändert übernommen. Deshalb ist es ratsam, sich auch bei der Seitenerstellung an den Standard zu orientieren.

Benutze die Standard-Vorgaben bei der Seitenerstellung, alles andere macht zusätzliche Arbeit!

Die oben angeführten Informations-Strukturempfehlungen sind grundsätzlich auf alle Dokumente anwendbar. Allgemeine Empfehlungen für die Informationsinhalte dagegen lassen sich nicht geben, da diese zielgruppenorientiert sind. Und jede Zielgruppe fragt andere Inhalte ab. Um nicht unnötige Arbeit in Form von mehrfacher Seitenerstellung für jede einzelne Zielgruppe zu haben, ist da manchmal ein Kompromiß unausweichlich...

Zum Schluß ist noch zu beachten:

Kein Brief ohne Absender und Poststempel! Vermerke Name (möglichst mit "mailto:"-Link) und  Datum am Dokumentenende!

Volker Krieger, 28.03.98 10:00