• Dr. Web, dessen Kompaktkurs Sie hier laden können. Leider sind seine aktualisierten Seiten bei einem neuen Provider jetzt auch durch Werbung beeinträchtigt.

• natürlich wieder der Kurs von Stefan Münz, er steht hier ebenfalls zum Download zur Verfügung.

• Ein Style-Guide der Studentenvertretung der Hochschule für Druck und Medien Stuttgart (Download)

• Gold-HTML - die Goldenen Regeln für schlechtes HTML (Download)

Title-Tag

Bei der Wahl des Titels sollte man bedenken, daß er drei wichtige Aufgaben hat:

• er wird als Navigationshilfe in der obersten Browserzeile angezeigt
• er wird in dieser Schreibweise in die Bookmarks eingetragen und
• er wird durch Suchmaschinen erfaßt und als wichtiges Klassifikationmerkmal für den Eintrag in diese Datenbanken ausgewertet.

Seitenüberschrift

Auch im Textkörper (body) des HTML-Dokuments sollte stets eine Orientierungshilfe für den Surfer stehen, eine Seitenüberschrift oder eine inhaltskennzeichnende Grafik.

Die Mailadresse des Autors und Datum der letzten Änderung

Als Abschluß jeder Seite sollten der Autor, möglichst mit email-Adresse, und das Datum der letzten Aktualisierung vermerkt sein. Am einfachsten dürfte es sein, den Namen des Autors direkt mit einem Link zu versehen, damit bei der Auswahl sofort das Mailprogramm gestartet wird.
z.B.: <A HREF="mailto:frank@bics.be.schule.de">Jürgen Frank</A>

Hier ist auch die richtige Stelle für ein Impressum: Informationen rund um den Server, Autoren, Update- bzw. Aktualisierungsfrequenz, Adressen und Telefonnummern der Einrichtung. Auch dies könnte wieder ein Link zur jeweils gleichen Datei auf jeder Seite sein.
<A HREF="../impressum.html">Impressum/Adressen</A>

Navigation in den Webseiten

Besonders ärgerlich für den Besucher der Seiten ist es, wenn er vom Autor aufgefordert wird, irgendwo mit der Maus zu klicken, er aber weiß nicht, wohin ihn das führt. ("Klicken Sie doch mal hier!"). Links müssen eine Information enthalten über den Inhalt der Seite, zu der man mit gelangt.

Auf mehreren zusammenhängenden Seiten sollten stets möglichst gleiche Navigationslinks stehen:

• Link zum Seitenanfang
• Link zur vorherigen Seite
• Link zur folgenden Seite (falls es eine solche Reihenfolge gibt)
• Link zum Inhalt, zum Inhaltsverzeichnis
• Link zu ähnlichen Themen
• Link zu übergeordneten Seiten oder stets gleichbleibenden Informationen (Startseite, Impressum, Copyright, ...)

ein Beispiel:

Für alle Links gelten die selbstverständlichen Regeln:

• jeden Links sinnvoll plazieren
• keine Links ohne strukturellen und logischen Nutzen
• lieber einen sinnlosen Link zuwenig als zuviel
• keine Links auf Baustellenseiten, schade um die Zeit- und Kostenverschwendung

Alternativnamen bei Grafiken

Kann ein Besucher Ihrer Seiten hardware- oder leitungsabhängig Grafiken nur langsam laden oder hat als reiner Informationssammler das Laden der Grafiken im Browser ausgestellt, so sollten Sie ihm eine Information (oder Vorinformation) über die auf Ihren Seiten enthaltenen Grafiken geben. Nutzen Sie dazu immer die Möglichkeit im Grafiklink einen alternativen Namen zu jeder Grafik anzugeben. Das gilt insbesondere für verweissensitive Grafiken, also Bilder, die versteckte Links enthalten. Ein auftauchender Informationstext weckt mehr Aufmerksamkeit als die Änderung des Mauszeigers.
Bsp.: <img src="mail.gif" alt="email zum Autor" width="33" height="33" border=0>

Dokumentgröße

Die Möglichkeit in HTML-Dokumenten hin- und herspringen zu können, verleitet viele Autoren dazu, ein Inhaltsverzeichnis mit Links an den Anfang zu setzen, dann viele Kapitel in eine Datei zu zwängen. Die Größe eines HTML-Textes sollte zur Verringerung der Ladezeiten aber möglichst drei bis vier scrollbare Seiten auf einem Super-VGA-Bildschirm (800x600 Pixel) nicht übersteigen. Zerlegen Sie Ihre Texte in kleinere Dokumente, da Sie ohnehin in allen gleiche Navigationsgrafiken verwenden, werden diese nicht noch einmal geladen.

Größe von Grafiken

Grafiken sollten möglichst nicht größer als 50 kByte sein, Buttons, Navigationssymbole und Hintergrundgrafiken wenige kByte. Wie dieses Ziel zu erreichen ist, wird im Abschnitt Grafik beschrieben.

Schriftwahl und Textbreite

In der Regel sind die Browser in ihrer Grundeinstellung auf den Schrifttyp Courier als Nichtproportionalschrift und Times als Proportionalschrift eingestellt. Wählen Sie nun einen Schrifttyp völlig anderer Breite oder Dichte, kann das Ergebnis beim Betrachter ein erheblich verändertes Layout ergeben, falls Ihre Schriftart nicht zur Verfügung steht und eine Standardschrift als Ersatz benutzt wird. Falls Sie eine andere Schriftart wählen, geben Sie eine Alternative dazu an, in dieser Schrift müssen Sie allerdings Ihre Seiten mindestens einmal testen.
Bsp.: <FONT FACE="Verdana, Arial, Helvetica,Sansserif">

Legen Sie die Schriftgröße nicht absolut fest (SIZE=4), sondern immer nur im Verhältnis zur bisher benutzen Größe, der Betrachter Ihrer Seite könnte eine völlig andere Standardschriftgröße als Sie bevorzugen (FONT SIZE="+2").

Schriftattribute (fett, kursiv, unterstrichen, wechselnde Größe, ..) sollten Sie sparsam einsetzen, um das Layout nicht zu unruhig werden zu lassen. Verwenden Sie diese Schriftauszeichnungen nur zur Unterstreichung der Struktur und zur besseren Übersichtlichkeit.

Der Browser bricht normalerweise die Textbreite so um, daß der Text immer von gaaaaaanz links bis gaaaaaanz rechts im Bildschirmfenster läuft. Lassen Sie Ihren Text nicht nur durch die Fenstergröße begrenzen, sondern rücken Sie ihn links und rechts etwas ein, am besten in einer unsichtbaren Tabelle.
< TABLE SIZE="80%" ALIGN="CENTER">
Der Text wirkt freier - außerdem läßt er sich besser lesen.

Der URL-/Verzeichnisname

Der URL-Name kann dem Surfer ja eigentlich egal sein, bis zu dem Augenblick, in dem er ihn eintippen muß oder sich anhand des URL orientieren möchte. Je später man einen Namen ändern möchte desto umfangreicher die Arbeiten, schon mehrere Links können auf diese Seite weisen, also planen Sie die Namen vorher und wählen Sie möglichst selbstbeschreibende Begriffe.

Systemkompatibilität

Eigentlich hilft nur, sich seine Seiten in möglichst vielen Bildschirmauflösungen (640x480 bis 1280x1024) einmal anzusehen und dabei mindestens die beiden Standardbrowser Netscape Communicator und Internet Explorer (und nicht immer nur den neuesten) zu verwenden.

Stellen Sie auch mal die Farbtiefe des Bildschirms auf 256 Farben zurück, viele Ihrer Kollegen werden auf den Bildern zu Rothäuten.

Bildhintergründe

Jeder Text läßt sich nur dann lesen, wenn zwischen seiner Darstellungsfarbe und dem Hintergrund ein gewisser Kontrast herrscht. Diesen sehen die Seitenautoren beim Erstellen der Seiten auch, aber wie sieht es der Betrachter auf seinem Zielsystem? Stellen Sie auch hierzu die Farbtiefe Ihres Bildschirms einmal auf 256 Farben zurück und sehen sich Ihre Seiten an.

Gehen Sie sehr vorsichtig mit kontrastreichen Hintergrundbildern um, und denken Sie daran, daß man das Laden von Grafiken ausschalten kann. Im schlimmsten Fall hat der Betrachter weiße Schrift vor weißem Grund, denn das Laden des dunkelblauen Meereshintergrundes hat er untersagt.