Richtlinien für die HTML/CSS-Programmierung ------------------------------------------- (C) netEstate GmbH, www.netestate.de Stand: 28.05.2006 Dieses Dokument wird ständig aktualisiert. Der letzte Stand kann jederzeit von http://www.netestate.de/Download/html_programmierung.txt abgerufen werden. Das Datum der letzten Änderung ist immer am Anfang vermerkt. Ausnahmen von den hier dargestellten Richtlinien sind nur nach Absprache möglich. 1. HMTL/CSS-Konformität Jede HTML-Seite muß mit dem W3C-HTML-Validator unter http://validator.w3.org/ geprüft und für fehlerfrei befunden worden sein. Hierzu muß jede Seite eine DOCTYPE-Deklaration enthalten. Falls nicht anders vereinbart lautet diese Stylesheets müssen mit dem W3C-CSS-Validator unter http://jigsaw.w3.org/css-validator/ geprüft und für fehlerfrei befunden worden sein. 2. Trennung von Struktur und Layout HTML wurde geschaffen, um die Struktur von Dokumenten zu beschreiben. Zur Beschreibung des Layouts wurden Stylesheets geschaffen. Diese sind mittlerweile ausgereift genug, um die Trennung von Struktur und Layout konsequent durchzuführen. HTML-Tags und Attribute, die sich auf das Layout beziehen, dürfen nicht verwendet werden. Beispiele:
, , width, height, align, style. Achtung: Das style-Attribut darf nicht verwendet werden! Es ist nicht erlaubt, Abstände durch aufeinanderfolgende

oder
zu erzeugen. 3. Tabellen Zur Trennung von Struktur und Layout gehört auch der Verzicht auf das Layout mit Hilfe auf Tabellen. Tabellen dürfen nicht im Seitenrahmen - also zur Positionierung von Navigationselementen verwendet werden. Im Contentbereich dürfen Tabellen nur für Informationen verwendet werden, deren natürliche Struktur die Tabelle ist - die man also auch in einer Excel-Tabelle oder einer Datenbank speichern würde. Verdächtig sind alle Tabellen, die keine Zeilen- bzw. Spaltenüberschriften haben oder bei denen ein "border=1" zu unansehnlichen Ergebnissen führt. Informationen, bei denen die Realisierung des gewünschten Layouts mit Tabellen viel einfacher als mit Stylesheets ist, dürfen nach Absprache mit Tabellen realisiert werden. Text, der rechts oder links um ein Bild läuft, ist wie folgt zu realisieren (Das Stylesheet sollte allerdings in eine separate Datei ausgelagert werden):

Text, der rechts oder links um ein Bild läuft, ist wie folgt zu realisieren (Das Stylesheet sollte allerdings in eine separate Datei ausgelagert werden).
.floatleft und .floatright sollten um passende Ränder ergänzt und auf der gesamten Website für diesen Effekt verwendet werden. Mit clear kann man erreichen, daß die folgenden Inhalte unter und nicht neben das aktuelle Bild gesetzt werden. Zweispaltige Layouts sind wie folgt zu realisieren:
Text, der rechts oder links um ein Bild läuft, ist wie folgt zu realisieren (Das Stylesheet sollte allerdings in eine separate Datei ausgelagert werden).
Text, der rechts oder links um ein Bild läuft, ist wie folgt zu realisieren (Das Stylesheet sollte allerdings in eine separate Datei ausgelagert werden).
X
Y
4. Accessibility für Suchmaschinen, Textbrowser, Behinderte Jede Seite muß mit deaktivierten Stylesheets benutzbar sein. Dabei müssen die Inhalte in einer vernünftigen Art und Reihenfolge präsentiert werden. 5. Stylesheetdesign Wo möglich sollten relative (em, %) anstatt absoluter (pt,px) Längenangaben verwendet werden. Das Stylesheet sollte so konzipiert sein, daß zum Erzeugen einfacher Seiten keine unnötigen Verrenkungen (id="bla" class="fasel") nötig sind. Folgende Tags müssen im Content ohne id und class das auf der Website im Normalfall gewünschte Ergebnis funktionieren:

,

,

,,,,,