home of de.comp.os.unix.linux.*
 
 

HTML Guidelines

Dieses Dokument beschreibt worauf bei der Gestaltung von Seiten fuer dcoul.de zu achten ist.

Valid HTML

Eine bunte Seite mit HTML gestalten kann mittlerweile schon fast jeder, aber echtes, valides HTML zu schreiben bedarf schon etwas mehr Aufwand.

Aber warum sollte man diesen Aufwand auf sich nehmen, wenn die Browser auch mit nicht validem HTML klar kommen?

Weil die meisten Browser nur so tun als kämen sie mit dem Code zurecht. Wenn der Code nicht validiert (also auch kein wirkliches HTML im Sinne der HTML DTD ist) muss der Browser Annahmen treffen. Wie diese aussehen unterscheidet sich von Browser zu Browser und so kommt es, dass die gleiche Seite in unterschiedlichen Browsern unterschiedlich dargestellt wird (wenn man von Browserbugs absieht die das Rendering zusätzlich beeinflussen). Der Microsoft Internet Explorer nimmt zum Beispiel irgendwann das Ende einer Tabelle an, wenn das abschliessende <table> Tag fehlt, der Netscape Navigator zeigt eine solche Tabelle gar nicht an. Das sollte man allerdings dem Navigator zu Gute halten, denn dadurch, dass viele Browser "gute" Annahmen treffen werden Webdesigner dazu verleitet invaliden Code zu produzieren.

Grundlage fuer valides HTML sind die DTDs (Document Type Definition) des W3C. Dokumentationen un Bücher wie zum Beispiel Selfhtml sind als Einstieg und Nachschlagewerk zwar sehr brauchbar, aber leider nicht fehlerfrei.

Zum testen des HTML Codes bietet das W3C den HTML Validator unter http://validator.w3.org/ an. Ab und an sollte man damit seine Seiten prüfen.

Valid CSS

Hier gilt das gleiche wie für den HTML Code: Nur valides CSS kann von unterschiedlichen Browsern gleich angezeigt werden.

Auch für CSS bietet das W3C eine Validator unter dem URL http://jigsaw.w3.org/css-validator/. an.

Bilder

Bilder sollten so sparsam wie möglich eingesetzt werden, da sie in ihrer Aussagekraft meist nicht besonders stark sind, aber unnötig lange Ladezeiten verursachen.

Wenn Bilder eingesetzt werden, ist darauf zu achten, dass der Text des alt Attributes sinnvoll gewählt wird. Dieser Text wird von Textbrowsern angezeigt und von Sprachbrowsern vorgelesen, der Dateiname des nicht angezeigten Bildes dürfte in den meisten Fällen also absolut uninteressant sein. Wenn das Bild keine Information trägt (ist es wegzulassen) ist das auch im alt Attribut festzuhalten: alt="" veranlasst Text- und Sprachbrowser dazu das Bild zu vernachlässigen (mehr dazu unter http://www.bjoernsworld.de/html/alt-text.html).

Nicht unbedingt notwendig, aber sinnvoll sind die Attribute height und width. Wenn sie angegeben werden, weiss der Browser schon wieviel Platz er für das Bild reservieren muss bevor er es geladen hat.

Überschriften

Überschriften sind mit den dazu vorgesehenen HTML Tags zu definieren. Eine Überschrift ersten Grades (die Seitenüberschrift) kommt nur einmal pro Seite vor und wird mit <h1> definiert. Darunter folgen evtl. weitere Absatzüberschriften, die je nach Absatztiefe mit <h2>, <h3> bis <h6> definiert werden.

Stylesheets und Styleangaben

In der Datei /dcoul-de.css sind alle Styleangaben fuer dcoul.de festgehalten. Alle Seiten sollten sich möglichst an dieses Layout halten, damit der Leser sich nicht unnötig an verschiedene Layouts anpassen muss.

Ausserhalb dieser Definition kann das Universalattribut style sparsam verwendet werden um Styleangaben die keine Klasse von Elementen betreffen zu definieren.

Farbe

dcoul.de geht mit Farben sehr sparsam um, ein zu buntes Layout lenkt den Leser vom Inhalt ab und wirkt unruhig.

Es gibt nur drei Grundfarben:

  • #990000
  • #000099
  • #ffffee

Der Rest sind Variationen dieser Farben, schwarz, weiss, verschiedene Grautöne und #ffa500 für den Hovereffekt bei Links.