Diese Layoutrichtlinien wurden im September 2006 durch 
neue Richtlinien ersetzt und sind daher veraltet. Bitte orientieren Sie sich an den neuen Vorgaben.
Die vorliegende Seite beschreibt, was zu beachten ist, um "SELFHTML-typische" Seiten für das Online-Angebot von SELFHTML zu erstellen oder vorhandene Seiten so zu optimieren, dass diese "SELFHTML-typisch" genannt werden können. Auf dieser Seite geht es dabei vor allem um HTML-technische Aspekte. Die beschriebenen Maßnahmen zur Vereinheitlichung können z.B. für redaktionelles Arbeiten an statischen Seiten als Checkliste dienen. Sie können als Vorlage für Template-Entwicklungen, XML-Transformationen, CMS-Entwicklung usw. im SELFHTML-Raum dienen.
Egal, ob es sich um statische HTML-Dateien oder um Templates dynamischer Scriptausgaben handelt: Namensschema, HTML-Struktur und Layout von SELFHTML-Seiten sollten so einheitlich wie möglich sein. Einheitlichkeit erleichtert jede Art von automatischer Datenverarbeitung, egal ob es sich um eine spätere Umstellung auf XHTML handelt oder um einen Such-Indexer.
Besonders wichtig sind die hier genannten Vorgaben für das Online-Angebot auf SELFHTML aktuell, sowie für Anwendungen im öffentlichen SELFHTML-Raum.
Einige der auf dieser Seiten beschriebenen Regeln zur Vereinheitlichung mögen penibel oder auch willkürlich erscheinen (z.B. Endung .htm für HTML-Dateien). Dazu ist zu sagen, dass niemals alle Regeln argumentativ begründbar sind - einige Regeln existieren einfach nur, damit es eine Regel gibt und Uneinheitlichkeiten vermieden werden.
Musterseiten
Für neu zu erstellende Seiten, Templates und für andere Zwecke, sowie zum Einarbeiten vorhandener, schlecht formatierter Seiten in eine korrekt aufgebaute Grundseite stehen die folgenden Musterseiten zur Verfügung:
normale-informationsseite.zip
normale-kapitelseite.zip
Arbeitsumgebung und Hinweise zum Coding
Als lokale Arbeitsumgebung zur Bearbeitung statischer Dateien von SELFHTML aktuell empfiehlt es sich, einen Apache-Webserver, Perl und PHP zu installieren, um z.B. SSI-Dateien, CGI-Scripts oder PHP-Seiten lokal ebenfalls austesten zu können. Ideal, wenn auch nicht zwingend, ist dabei die Einrichtung eines virtual hosts, z.B. mit dem Namen selfaktuell, mit eigener document-root, eigenem cgi-bin-Verzeichnis usw. Hilfreich sind dabei folgende Informationsquellen:
Mehrere virtuelle Hosts mit OmniHTTPd von Rolf Rost
httpd.conf in deutscher Sprache von Christoph Schnauß
SELFHTML Server Konfiguration von Christian Kruse
Zum Bearbeiten wird vorausgesetzt, dass auf Code-Ebene gearbeitet wird. Vollautomatische oder halbautomatische Wysiwyg-Editoren sind unerwünscht. Der Quelltext soll jedoch nicht nur sauber, sondern auch gut lesbar sein. Dazu gehört, dass z.B. zwischen zwei Blockelementen eine Leerzeile notiert wird. Fließtext innerhalb eines Absatzes sollte ohne erzwungene Zeilenumbrüche notiert werden - schließlich beherrscht praktisch jeder Texteditor den automatischen Zeilenumbruch bei der Anzeige des Quelltextes.
Im SELFHTML-Layout gibt es folgende Seitentyplen:
- Portalseiten:
Dies sind die Subdomain-Einstiegsseiten, wie z.B. die Einstiegsseite von 
SELFHTML aktuell. Solche Seiten bauen zwar vom Typ her auf Kapitelseiten auf, haben jedoch links in der grauen Leiste eine schmale Linkleiste mit Direktsuchfeld, Direktlinks, News-Link usw. SELFHTML-konforme Links auf solche Seiten verwenden die Symbole ((sub)-domain-intern) bzw. 
((sub)-domain-übergreifend).
- Startseiten:
Darunter sind lokale Einstiegsseiten zu verstehen, die zwar vom Grundtyp her Kapitelseiten sind, defacto aber eine Mischung zwischen Kapitelseiten und Informationsseiten darstellen. So ist beispielsweise die Einstiegsseite zum Linkverzeichnis eine typische Startseite, da sie zwar zunächst Links auf Unterseiten enthält, aber auf der gleichen Seite weiter unten auch eigene Unterabschnitte. Auch die Seite Linux für Webworker, die einen Feature-Artikel einleitet, ist so ein Zwittertyp und wird daher als Startseite bezeichnet (wobei diese Seite allerdings auch als typisches Beispiel dafür dienen kann, wie das SELFHTML-Layout "verwässert" werden kann - das ist wohl Ansichtssache). SELFHTML-konforme Links auf solche Seiten verwenden die Symbole ((sub)-domain-intern) bzw. ((sub)-domain-übergreifend).
- Kapitelseiten:
Dies sind reine Navigationsseiten, die zwischen Portalseiten und Informationsseiten stehen. Sie bestehen in erster Linie aus Links zu Unterseiten oder Unterkapiteln und enthalten allenfalls einen kurzen Text, der den ganzen Bereich näher beschreibt. Eine klassische Kapitelseite im SELFHTML-Stil ist etwa die Seite Archiv. Links dürfen dabei wenn sinnvoll auch einzeln mit Kurzbeschreibungen versehen sein, wie etwa in der typischen Artikelübersichtsseite Serverkonfiguration. Bei vielen Links sind Zwischenüberschriften in der Form erlaubt, wie es etwa auf der Seite SELFHTML inTalk gemacht ist. Auch zweispaltige Lösungen, wie bei der Einstiegsseite zu den Feature-Artikeln, sind möglich und fallen unter die Kategorie "Kapitelseiten". SELFHTML-konforme Links auf solche Seiten verwenden die Symbole ((sub)-domain-intern) bzw. ((sub)-domain-übergreifend).
- Informationsseiten:
Dies sind die eigentlichen Seiten für die Nutzdaten. Die hier angezeigte Seite ist ein Beispiel einer solchen Informationsseite. Informationsseiten enthalten im Seitenkopf 1 bis n Links zu den Unterkapiteln/Unterabschnitten der Seite. Alle Unterabschnitte erhalten entsprechende Überschriften und einen Anker zum Adressieren für Links. Zwischen jedem Unterabschnitt fungiert eine Navigationsleiste mit Sprungmöglichkeit zum Seitenanfang und Seitenende als Trenner. Informationsseiten enthalen sowohl am Anfang als auch am Ende Navigationsleisten. Oberhalb der unteren Navigationsleiste können bei mehrseitigen Inhalten Blätterlinks notiert in der Form werden wie in SELFHTML 8.0, beispielsweise unten auf der Seite mit den 
Arbeitshinweisen zu SELFHTML. SELFHTML-konforme Links auf solche Seiten verwenden die Symbole ((sub)-domain-intern) bzw. ((sub)-domain-übergreifend).
- Popup-Seiten:
Dies sind Seiten, die in kleinen JavaScript-Fenstern mit definierter Größe angezeigt werden. Derzeit nur in Form von News-Anzeigen in Gebrauch. Es sollte auch kein allzu intensiver Gebrauch davon gemacht werden, da Popup-Fenster nicht unbedingt bei allen Usern auf so große Gegenliebe stoßen. Was das Layout solcher Seiten betrifft, so kann der SELFHTML Newsticker als Vorbild dienen.
Derzeit wird bei SELFHTML-Seiten folgende DOCTYPE-Angabe verwendet:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Die gegenwärtigen Layout-Angaben z.B. bei Tabellen erlauben noch keinen anderen DOCTYPE. Auch die URI-Angabe der verwendeten HTML-DTD erscheint aus momentaner Sicht nicht wirklich wichtig. Sollten im Einzelfall Gründe für die Verwendung des URIs sprechen (z.B. wegen Compliant-Modus von Browsern), kann der URI http://www.w3.org/TR/html4/loose.dtd angegeben werden. Das SELFHTML-Layout befindet sich im Umbruch. Wichtig ist gegenwärtig eine ordentliche, möglichst konsistente Praxis beim Markup. Eine Umstellung auf HTML Strict und gegebenenfalls auf XHTML steht für die nächsten ein, zwei Jahre an.
Der Inhalt des title-Elements soll stets identisch sein mit der h1-Seitenüberschrift im hellgrauen Kopfbereich (betrifft alle Portalseiten, Kapitelseiten und Informationsseiten). Der Titel soll primär den Inhalt der Seite enthalten. Nur bei sehr eng zusammengehörigen Seiten wie den Einzelseiten eines mehrseitigen Feature-Artikels kann der Titel auch den allgemeinen Titel des Artikels plus die Überschrift der aktuellen Seite enthalten. Autorennamen sollen nicht im Titel erscheinen. Bei Fremdbeiträgen in den Bereichen Feature-Artikel und Tipps & Tricks gibt es dazu stattdessen ein Autorenimpressum.
Zum Aufbau von SELFHTML-Seiten gehört ein Set von Meta-Daten, das aus Standard-Angaben, Dublin-Core-Angaben und SELFHTML-eigenen Angaben besteht. Als Beispiel soll der Meta-Bereich der Seite dienen, die hier gerade angezeigt wird:
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="description" content="welche HTML-technischen Vorgaben beim Arbeiten mit Seiten im SELFHTML-Layout zu beachten sind">
<meta name="keywords" content="SELFHTML Layout, SELFHTML-Layout, Layout">
<meta name="author" content="Stefan Münz, stefan.muenz@selfhtml.org">
<meta name="DC.Publisher" content="Stefan Münz, stefan.muenz@selfhtml.org">
<meta name="DC.Date" content="2003-02-08T15:00+01:00">
<meta name="DC.Identifier" content="http://aktuell.de.selfhtml.org/sonst/layoutvorgaben.htm">
<meta name="DC.Language" content="de">
<meta name="DC.Rights" content="">
<meta name="SELF.Firstdate" content="2003-02-08T15:00+01:00">
<meta name="SELF.Version" content="1">
<meta name="SELF.Pagetype" content="page">
Die folgende Übersicht zeigt, welche dieser Daten in welchem Seitentyp enthalten sein sollten, und wie die Inhalte der content-Attribute korrekt versorgt werden:
<meta http-equiv="content-type" content="">
Verwendung bei allen Seitentypen immer. Angabe für Deutsch und andere westeuropäische Sprachen: content="text/html; charset=ISO-8859-1".<meta name="description" content="...">
Verwendung bei statischen Startseiten, Kapitelseiten und Informationsseiten immer, bei dynamisch generierten Seiten und bei Popup-Seiten nur bei Bedarf. Relevanz und Trefferkurzbeschreibung bei Suchmaschinen. Lesbare Halbsätze oder vollständige Sätze mit einer treffenden Kurzbeschreibung der wesentlichen Seiteninhalte. Beispiel: Artikel, der eine JavaScript-Lösung vorstellt, um in Netscape 6 und Internet Explorer 5 CSS-Eigenschaften dynamisch zu ändern.<meta name="keywords" content="...">
Verwendung bei statischen Startseiten, Kapitelseiten und Informationsseiten immer, bei dynamisch generierten Seiten und bei Popup-Seiten nur bei Bedarf. Relevanz und Trefferkurzbeschreibung bei Suchmaschinen. Wenige, wirklich zentrale Stichwörter Auch mehrere Schreibweisen eines Begriffs sind sinnvoll. Beispiel: JavaScript, CSS-Eigenschaften, Netscape 6, Internet Explorer 5. Auch mehrere Schreibweisen ein und des selben Begriffs sind hier sinnvoll, da es der einzige Ort ist, um die Intelligenz eigener Suchmaschinen diesbezüglich zu füttern.<meta name="author" content="...">
Verwendung bei allen Seitentypen immer. Relevanz und Nennung in Trefferkurzbeschreibung bei Suchmaschinen, juristisch relevant. Schema: Vorname Name, E-Mailadresse. Bei mehreren Autoren sollte das gleiche Schema angewendet werden, Autoren sind dann durch Semikolon zu trennen.<meta name="DC.Publisher" content="...">
Verwendung bei allen Seitentypen immer. Information für Suchmaschinen und eigene Auswertungen, juristisch relevant. Gibt Auskunft, wer die Seite im Netz öffentlich zugängich gemacht hat. Dies ist diejenige Person, welche die Seite hochgeladen hat - auch, wenn das Hochladen nur aufgrund einer kleinen Änderung zustande kam. Der Name sollte nach dem Schema Vorname Name, E-Mailadresse angegeben werden. Hat ein CGI/PHP-Script die Seite verfügbar gemacht, wird die URL des Scripts angegeben. Hat ein System-Script oder Programm die Seite verfügbar gemacht, wird der Name des Scripts/Programms angegeben.<meta name="DC.Contributor" content="...">
Verwendung bei allen Seitentypen nur dann, wenn es neben dem genannten Autor noch weitere Personen gibt, die Inhalte oder Teile davon beigesteuert haben, z.B. Programmierer, die beschriebene Scripts beigesteuert haben. Relevanz und Nennung in Trefferkurzbeschreibung bei Suchmaschinen, juristisch relevant. Schema: Vorname Name, E-Mailadresse. Bei mehreren Personen sollte das gleiche Schema angewendet werden, die Personen sind dann durch Semikolon zu trennen.<meta name="DC.Date" content="">
Verwendung bei allen Seitentypen immer. Angabe nach Dublin-Core-Schema. Information für Suchmaschinen und eigene Auswertungen, juristisch relevant. Gibt den Zeitpunkt der Veröffentlichung des aktuellen Stands an. Muß also nach jeder Änderung und Neuveröffentlichung aktualisiert werden. Die Angabe erfolgt nach dem UTC-Schema, also z.B. 2001-03-16T21:00+01:00 (16. März 2001, 21 Uhr mitteleuropäischer Zeit). Bei der Uhrzeit reicht bei persönlicher Veröffentlichung in den meisten Fällen die Angabe der Stunde, die Minuten können auf 00 bleiben. Wird die Seite von einem CGI/PHP-Script, einem Shellscript oder Programm verfügbar gemacht, ist dagegen die Angabe der Minuten und Sekunden sinnvoll. Eine Beispielangabe mit Sekunden ist 2001-03-16T19:20:33.45+01:00.<meta name="DC.Identifier" content="">
Verwendung bei allen Seitentypen mit ermittelbarem URI immer. Angabe nach Dublin-Core-Schema. Information für Suchmaschinen und eigene Auswertungen, juristisch relevant. Vollständigen URI der Seite angeben. Gibt die maßgebliche URL an, unter der die Seite im Internet zu finden ist und die in jedem Fall als Original der entsprechenden Seite zu gelten hat.<meta name="DC.Language" content="">
Verwendung bei allen Seitentypen mit natürlichsprachigem Inhalt immer. Angabe nach Dublin-Core-Schema. Information für Suchmaschinen und eigene Auswertungen. Sprache nach RFC 1766 angeben. Bei deutschsprachigen Seiten wird de angegeben. Bei mehrsprachigen Seiten die Sprachen durch Kommata trennen.<meta name="DC.Rights" content="">
Verwendung bei allen Seitentypen immer. Angabe nach Dublin-Core-Schema. Information für Suchmaschinen und eigene Auswertungen, juristisch relevant. Momentan noch einen Leerstring angeben. Später wird der URI einer SELFHTML-Seite einzusetzen sein, wo juristische Erklärungen zu Urheberschutz, Inhaltshaftung usw. getroffen werden.<meta name="SELF.Firstdate" content="">
Verwendung bei allen statischen Seitentypen immer, bei dynamisch generierten Seiten nie. Information für eigene Auswertungen, z.B. eigene Suchmaschinen. Gibt den Zeitpunkt der Erst-Veröffentlichung (im Gegensatz zu DC.Date) an. Ab der ersten Änderung an einer veröffentlichten Seite unterscheiden sich beide Zeitpunkte. Die Angabe erfolgt nach dem UTC-Schema, also z.B. 2001-03-16T21:00+01:00 (16. März 2001, 21 Uhr mitteleuropäischer Zeit). Bei der Uhrzeit reicht bei persönlicher Veröffentlichung in den meisten Fällen die Angabe der Stunde, die Minuten können auf 00 bleiben.<meta name="SELF.Version" content="">
Verwendung bei allen statischen Seitentypen immer, bei dynamisch generierten Seiten nie. Information für eigene Auswertungen, z.B. für eigene Suchmaschinen. Versionsnummer der Seite als einfache Ganzzahl angeben. Gibt die Versionsnummer der Seite in Form einer einfachen Ganzzahl an. Bei der Erstveröffentlichung ist dies die 1. Bei jeder Änderung an der Seite wird die Zahl um 1 inkrementiert, auch bei Kleinständerungen.<meta name="SELF.Pagetype" content="">
Verwendung bei allen Seitentypen immer. Information für eigene Auswertungen, z.B. für eigene Suchmaschinen. Gibt den Seitentyp an. Folgende Angaben sind möglich:
portal | start | chapter | page | popup-page
Im Sinne der Einheitlichkeit wird empfohlen, Meta-Tags in der hier vorgestellten Reihenfolge zu verwenden, und innerhalb der Meta-Tags die Attribute in der hier genannten Reihenfolge zu notieren.
Sonderzeichenmaskierung trotz Content-Type-Angabe
Obwohl alle HTML-Dateien eine Meta-Auszeichnung mit der Angabe des zu verwendenden Zeichensatzes erhalten, werden bei SELFHTML-Seiten für alle Zeichen beim Zeichensatz ISO-8859-1 mit Werten von 160 bis 255 die HTML-typischen Entities verwendet. Dies ist eine Sicherheitsmaßnahme. Höherwertige Zeichen werden Unicode-gerecht, jedoch wenn möglich mit ihrem in HTML definierten Entity-Namen notiert, z.B. €.
Seitdem mehr und mehr Browser link-Angaben interpretieren, sollten die SELFHTML-Seiten vorbildhaft diesen zusätzlichen Kanal zur Navigation und zur logischen Standortbestimmung nutzen. Neben den link-Angaben, die zur Navigation dienen, gibt es auch noch zwei allgemeine, nämlich zum Einbinden des zentralen Stylesheets und zum Einbinden des SELFHTML-Icons. Als Beispiel sollen die link-Elemente der Seite, die hier gerade angezeigt wird, dienen:
<link rel="stylesheet" title="SELFHTML-Stylesheet" type="text/css" href="http://src.selfhtml.org/selfhtml.css">
<link rel="shortcut icon" title="SELFHTML-Icon" type="image/x-icon" href="http://src.selfhtml.org/favicon.ico">
<link rel="up" title="Sonstiges" href="/sonst/">
<link rel="top" title="SELFHTML aktuell" href="/">
<link rel="search" title="SELFHTML-Suche" href="http://suche.de.selfhtml.org/">
<link rel="bookmark" href="/artikel/" title="Feature-Artikel">
<link rel="bookmark" href="/links/" title="Linkverzeichnis">
<link rel="bookmark" href="/tippstricks/" title="Tipps & Tricks">
Die gezeigte Liste ist nicht vollständig. Je nach Seitenumgebung können weitere link-Elemente sinnvoll sein. Die Übersicht weiter unten zeigt, welche link-Elemente auf SELFHTML-Seiten eingesetzt werden können, und wann.
Allgemeine Regeln
- Alle
link-Elemente, deren href-Wertzuweisung keine HTML-Ausgabe ist, erhalten ein type-Attribut mit der Angabe des Mime-Types.
href-Wertzuweisungen zu Zielen innerhalb der gleichen Subdomain sollten in den meisten Fällen durch absolute Pfadangaben erfolgen, also z.B. href="/index.htm" oder href="http://src.selfhtml.org/selfhtml.css".- Alle
link-Elemente, auch solche, bei denen die Angabe derzeit noch keinen tieferen Sinn zu ergeben scheint, erhalten ein title-Attribut.
- Derzeit kommen im SELFHTML-Raum nur link-Elemente mit dem Attribut
rel= vor, keine mit dem Typ rev=.
Übersicht der verwendbaren logischen Beziehungen
<link rel="stylesheet" ...>
Verwendung bei allen Seitentypen immer. Gibt das zentrale SELFHTML-Stylesheet an. Referenziert werden sollte die selfhtml.css aus dem src-Verzeichnis der Subdomain, in der sich die Seite befindet.<link rel="shortcut icon" ...>
Verwendung bei allen Seitentypen immer. Gibt das zentrale SELFHTML-Icon für Bookmarks, URL-Zeile usw. an. Referenziert werden sollte die selfhtml.ico aus dem src-Verzeichnis der Subdomain, in der sich die Seite befindet.<link rel="top" ...>
Verwendung bei allen Seitentypen immer. Führt einen Sprung zur zugehörigen Portalseite aus, bei Seiten innerhalb von SELFHTML aktuell also beispielsweise zur Startseite von SELFHTML aktuell. Nach reiflichen Überlegungen erscheint diese Verwendung von rel="top" sinnvoller als der Sprung zum Seitenanfang, da dieser erstens häufiger auf den Seiten selbst verlinkt ist (Navigationsbalken zwischen Unterkapiteln einer Seite) und außerdem einfacher mit einem Tastendruck oder einer Tastenkombination im Browser zu bewerkstelligen ist. Die href-Angabe lautet in diesem Fall standardmäßig / (Verweis zum Index des Subdomain-Wurzelverzeichnisses).<link rel="up" ...>
Verwendung bei allen Seitentypen, sofern es eine Hierarchie-Ebene oberhalb gibt. Führt einen Sprung zur logisch nächsthöhreren index-Seite aus. Da es in diesem Fall am einfachsten ist, mit relativen Angaben zu arbeiten, sind diese hier erlaubt. Eine typische URI-Angabe beim href-Attribut ist also etwa index.htm oder ../index.htm.<link rel="next" ...>
Verwendung bei allen Seitentypen, sofern es eine logische Seitenfolge gibt, beispielsweise innerhalb von mehrseitigen Feature-Artikeln. Führt einen Sprung zur logisch nächsten Seite aus. Da es in diesem Fall am einfachsten ist, mit relativen Angaben zu arbeiten, sind diese hier erlaubt. <link rel="prev" ...>
Verwendung bei allen Seitentypen, sofern es eine logische Seitenfolge gibt, beispielsweise innerhalb von mehrseitigen Feature-Artikeln. Führt einen Sprung zur logisch vorhergehenden Seite aus. Da es in diesem Fall am einfachsten ist, mit relativen Angaben zu arbeiten, sind diese hier erlaubt. <link rel="first" ...>
Verwendung bei allen Seitentypen, sofern es eine logische Seitenfolge gibt, beispielsweise innerhalb von mehrseitigen Feature-Artikeln. Führt einen Sprung zur logisch ersten Seite aus. Da es in diesem Fall am einfachsten ist, mit relativen Angaben zu arbeiten, sind diese hier erlaubt. <link rel="last" ...>
Verwendung bei allen Seitentypen, sofern es eine logische Seitenfolge gibt, beispielsweise innerhalb von mehrseitigen Feature-Artikeln. Führt einen Sprung zur logisch letzten Seite aus. Da es in diesem Fall am einfachsten ist, mit relativen Angaben zu arbeiten, sind diese hier erlaubt. <link rel="search" ...>
Verwendung bei allen Seitentypen immer. Führt einen Sprung zur SELFHTML-Suche aus. Diese sollte mit absoluter URL (http://suche.de.selfhtml.org/) adressiert werden.<link rel="alternate" ...>
Verwendung bei allen Seitentypen, sofern es anderssprachige Übersetzungen dieset Seite gibt. Führt einen Sprung zu der gleichen Seite in der anderen Sprache aus. Diese sollte mit absoluter URL (http://selfhtml.com.fr/articles/) adressiert werden.<link rel="bookmark" ...>
Verwendung bei allen Seitentypen, sofern sich sinnvolle Querverweise oder Standardverweise anbieten. Standardverweise führen z.B. aufs Forum oder auf die Einstiegsseite der Doku SELFHTML. Sinnvolle Querverweise können beispielsweise zu thematisch verwandten Feature-Artikeln, Ergebnissen der SELFHTML-Suche oder zu Stellen innerhalb von SELFHTML führen.
Logische Beziehungen der "Dokument"-Kategorie, also index, appendix, glossary sollten dann verwendet werden, wenn es entsprechende Inhalte gibt, also etwa bei größeren Einführungen, längeren, mehrseitigen Feature-Artikeln usw.
Im Sinne der Einheitlichkeit wird empfohlen, Link-Tags in der hier vorgestellten Reihenfolge zu verwenden, und innerhalb der Link-Tags die Attribute in der hier genannten Reihenfolge zu notieren.
Vor allem in Fremdbeiträgen im Bereich der Feature-Artikel gibt es noch zahlreiche Abweichungen von dem in SELFHTML 8.0 verwendeten Standard bei Textauszeichnungen. Ziel ist hier vor allem, eine stärker logische und standardkonforme Textauszeichnung zu erreichen. Die folgende Übersicht fasst zusammen, welche Textstellen wie auszuzeichnen sind:
HTML-Code im Fließtext
Dafüer wird das code-Element verwendet. Wenn also beispielsweise vom code-Element die Rede ist, oder etwas über document.getElementById() erzählt wird, dann ist diese Auszeichnung anzuwenden.
URIs, Dateinamen, Verzeichnisnamen im Fließtext
Dafür wird das var-Element verwendet. Wenn also beispielsweise von http://localhost/, oder von der Datei formate.css die Rede ist, dann ist diese Auszeichnung anzuwenden.
Anwendereingaben im Fließtext
Dafür wird das kbd-Element verwendet. Wenn also beispielsweise davon die Rede ist, dass der Anwender als Standard-Usernamen standarduser eingeben soll, dann ist diese Auszeichnung anzuwenden.
Allgemeine Hervorhebungen im Text
Allgemeine Hervorhebungen werden künftig mit dem strong-Element ausgezeichnet. Das betrifft z.B. fachlich wichtige Schlüsselwörter im Text, oder Wörter, die hervorgehoben werden sollen, damit ein Satz die richtige Betonung erhält.
Sprachliche Erklärungen im Text
Solche Hervorhebungen sollen künftig durch das dem dfn-Element ausgezeichnet werden.
Zitate
Für Zitate im Text ohne Quellenangabe ist das cite-Element zu verwenden, für Zitate mit URI-Quellenangabe das q-Element. Beide Elemente sollten zusätzlich ein title-Attribut erhalten, sofern es eine URI-Quellenangabe gibt, und den URI im Wert des title-Attributs zusätzlich nennen. Für Zitate, die einen eigenen Absatz darstellen, ist das blockquote-Element zu verwenden.
Blockformatierung allgemein
In SELFHTML-Seiten sollen alle Inhalte innerhalb des body-Elements in Blockelementen stehen, auch wenn die derzeit verwendete Transitional-Variante von HTML direkten Text erlaubt. Wenn keine begründeten Ausnahmen dagegen sprechen, können derzeit eigentlich nur die folgenden Elemente unmittelbar innerhalb vom body-Element vorkommen: h1, h2, h3, h4, p, ul, ol, dl und table. Es wird darum gebeten, keine Überschriftenebenen 5 und 6 zu verwenden, und keine div-Elemente für Absätze, sondern immer p-Elemente. Alle Navigationsleisten, Kopf- und Fußlayoutbereiche, Beispielkästen usw. sind derzeit noch in table-Elemente nach dem Vorbild von SELFHTML 8.0 zu packen. Bei einer späteren Layoutumstellung wird dies geändert.
Überschriften
Seitenüberschriften werden künftig mit <h1 class="ph1"> ausgezeichnet (ph1 = page heading 1 = Seitenüberschrift 1. Ordnung). Die CSS-Datei wurde so geändert, dass solche Überschriften genau so groß erscheinen wie Unterkapitelüberschriften. Denn beide Unterschriftentypen sollen sich zwar logisch unterscheiden, jedoch optisch symbolisieren, dass sie beide mögliche Verweisziele sein können.
Unterkapitelüberschriften innerhalb einer Seite werden mit <h2 class="sh2"> ausgezeichnet (sh2 = section heading 2 = Bereichsüberschrift 2. Ordnung).
Zwischenüberschriften innerhalb eines Unterkapitels auf einer Seite werden als h3-Überschriften ausgezeichnet. Allgemeine Zwischenüberschriften erhalten keine zusätzliche Klassenangaben. Es gibt jedoch drei Zwischenüberschriftarten, die zusätzliche Klassen erhalten:
- Zwischenüberschriften über Beispielkästen, meist mit dem Überschriftentext Beispiel: versehen, erhalten die Angabe
class="xmp".
- Zwischenüberschriften für Erläuterungen zu Beispielkästen, meist mit dem Überschriftentext Erläuterung: versehen, erhalten die Angabe
class="xpl".
- Zwischenüberschriften für wichtige Hinweise, meist mit dem Überschriftentext Beachten Sie: versehen, erhalten die Angabe
class="inf".
Überschriften können je nach Kontext auch code-, var- oder kbd-Elemente enthalten.
Formatierung von Quelltext in Beispielkästen
Die Inhalte solcher pre-Bereiche sollten kein besonderes Syntax-Highlighting aufweisen. Zwei optische Auszeichnungen sollen jedoch erlaubt sein: beispielrelevante Befehle können mit strong hervorgehoben werden (bitte jedoch sparsam damit umgehen - es hat keinen Sinn, wenn mehr als die Hälfte des Quelltextes fett dargestellt wird, dabei geht der Nutzen wieder verloren), und Kommentare im Quelltext können mit <span class="gray">...</span> ausgezeichnet werden. Dazu muss die selfhtml.css noch um die Angabe .gray { color:#999999; } erweitert werden.
Gemeint sind hiermit sichtbare Tabellen für tabellarische Daten. Die folgende Mustertabelle kann als Grundlage für den Einsatz von Tabellen dienen. Sie muss den jeweiligen Erfordernissen entsprechend angepasst werden:
| Kopfzelle |
Kopfzelle |
Zelle mit Quelltext |
Zelle für Erläuterungstext |
HTML-Code dieser Tabelle
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#C0C0C0"><tr><td><table cellpadding="3"
cellspacing="1" border="0">
<tr>
<th bgcolor="#EEEEEE" class="doc" align="left">Kopfzelle</th>
<th bgcolor="#EEEEEE" class="doc" align="left">Kopfzelle</th>
</tr>
<tr>
<td class="code" bgcolor="#FFFFE0" valign="top" nowrap><code>Zelle mit Quelltext</code></td>
<td class="tabxpl" bgcolor="#E4EEFF" valign="top">Zelle für Erläuterungstext</td>
</tr>
</table></td></tr></table>
Erläuterung:
Derzeit wird der gewünschte Tabellenrahmen aus Gründen der Rückwärtskompatibilität mit Hilfe einer verschachtelten Tabelle erzielt. Bis zu einer grundsätzlichen Layoutumstellung soll dies auch so bleiben. Wichtig sind ansonsten die unterschiedlichen class-Auszeichnungen für Kopfzellen, Zellen mit Quelltext und Zellen mit erläuterndem Text.
Gemeint sind hier alle Grafiken, die nicht im src-Verzeichnis stehen, sondern individuell zu einer Seite gehören. Das können z.B. Screenshots sein, Illustrationen, auch animierte.
Allgemeine Vorgaben zum Aussehen solcher Grafiken zu machen ist schwer. Folgende Punkte sollten jedoch berücksichtigt werden:
- Alle Grafiken sollten farblich und formal mit dem SELFHTML-Layout harmonieren. Für Screenshots bedeutet das beispielsweise, dass gegebenenfalls SELFHTML-harmonischere Systemfarben eingestellt werden sollten, bevor Screenshots gezogen werden. SELFHTML-harmonische Farben sind in erster Linie Schwarz, Weiß, Grau, Beige, Braun und Dunkelblau. In zweiter Linie sind noch Violett und Grün als Farbton geeignet. Nicht so geeignet sind Rot-, Orange-Töne und Rosa-Töne, da diese sich mit den Link- und Navigationsfarben des SELFHTML-Layouts beißen. Ausnahme sind natürlich Fotos, deren dominierende Farben sich nicht ändern lassen, ohne die Abbildung zu manipulieren.
- Rahmen um Grafiken sollten entweder dicke, hellgraue Rahmen haben (so wie Beispielkästen), oder dünne, mittelgraue Rahmen (wie Datentabellen). Ob eine Grafik einen Rahmen erhalten soll oder nicht, ist freigestellt.
- Screenshots sollten wenn irgend möglich als GIF mit möglichst wenig Farben abgespeichert werden. Bei Dialogfenstern etwa ist es kein Problem, die Farbtiefe auf 16 zu reduzieren und dann als GIF abzuspeichern. Um das zu erreichen, ist es sinnvoll, Verlaufsfarben in der Titelleiste, wie es z.B. unter Windows seit Win98 möglich und verbreitet ist, vorher auszuschalten (dazu Erst- und Zweitfarbe der Titelleiste auf den gleichen Wert setzen).
- Screenshots sollten nicht in der Bildgröße verändert werden.
- Animationen zum Zweck von Illustration ist erlaubt, sollte aber so dezent wie möglich eingesetzt werden.
- Wenn Formate eingesetzt werden, deren Verfügbarkeit nicht allgemein vorausgesetzt werden kann (z.B. SVG), dann sollte in der Umgebung der Grafik explizit darauf hingewiesen werden.
- Grafiken im Fließtext sollten nicht zu groß sein. Screenshots müssen beispielsweise nicht unbedingt ein Fenster im Vollbild bei 1024er-Auflösung zeigen, wenn der Fensterinhalt auch bei einem verkleinerten Fenster ebensogut sichtbar ist.
Alle Links sind SELFHTML-typisiert, sprich, sie bekommen eine Icon-Grafik vorangestellt, die das Verweisziel grob charakterisiert. Die Grafik selbst steht nicht innerhalb des Links, sondern davor. Zwischen dem img-Element der Icon-Grafik und dem a-Element des eigentlichen Links wird ein erzwungenes Leerzeichen ( ) notiert.
Der Linktext ist stets fett. Derzeit wird dies noch über b-Elemente innerhalb der a-Elemente gelöst - bei einer späteren Layoutumstellung werden die b-Elemente entfallen und durch CSS ersetzt.
Links zu proprietären Formaten wie MS-Office-Dateien oder auch zu PDF werden derzeit ebensowenig gesondert symbolisiert wie Links zu Newsgroups, um einen Overkill an grafischen Symbolen zu vermeiden. Links zu Newsgroups sollten wenn möglich als Web-Links zu den Google-Groups realisiert werden. Bei Links zu Fremdformaten sollte im umgebenden Fließtext explizit auf das Format hingewiesen werden.
Links innerhalb einer Seite
Links zu anderen Stellen innerhalb der aktuellen Seite verwenden die folgenden Symbolgrafiken:
- Links zu Stellen weiter oben im Text: (Datei up.gif aus dem src-Verzeichnis, Alt-Text:
nach oben)
- Links zu Stellen weiter unten im Text: (Datei down.gif aus dem src-Verzeichnis, Alt-Text:
nach unten)
Links innerhalb der Subdomain aktuell.de.selfhtml.org
Links zu anderen Seiten innerhalb der Subdomain verwenden die folgenden Symbolgrafiken:
- Links zu Informationsseiten: (Datei dok.gif aus dem src-Verzeichnis, Alt-Text:
Seite)
- Links zu Kapitelübersichtsseiten oder Einstiegsseiten: (Datei kap.gif aus dem src-Verzeichnis, Alt-Text:
Kapitel)
- Links zu Popupseiten:
(Datei dokf.gif aus dem src-Verzeichnis, Alt-Text: Popup-Seite)
Bitte korrekt zwischen "Seite" und "Kapitel" unterscheiden! So sind alle Übersichtsseiten, etwa Rubrik "Tipps & Tricks", Bereich "DHTML", Kapitelseiten. Auch Startseiten (index.htm) von mehrseitigen Feature-Artikeln sind Kapitelseiten. Einseitige Feature-Artikel sind dagegen trotz eigener index.htm Informationsseiten! Links auf den Newsticker und auf den SELFHTML-Chat sind Popup-Links.
Links zu anderen Subdomains
Links zu Seiten in anderen Subdomains von *.selfhtml.org verwenden die folgenden Symbolgrafiken:
- Links zu Informationsseiten: (Datei serverdok.gif aus dem src-Verzeichnis, Alt-Text:
bereichsübergreifende Seite)
- Links zu Kapitelübersichtsseiten oder Einstiegsseiten: (Datei serverkap.gif aus dem src-Verzeichnis, Alt-Text:
bereichsübergreifendes Kapitel)
Auch hier sind die gleichen Dinge bezüglich Kapitelseiten und Informationsseiten zu beachten wie im Abschnitt zuvor angesprochen. Links zum Forum werden als bereichsübergreifende Informationsseite ausgezeichnet, ebenso Links zur Suche. Alle Links zu Stellen innerhalb der SELFHTML-Doku sind ebenfalls bereichsübergreifende Links.
Links zu fremdsprachigen SELFHTML-Adressen
Links zu Seiten im französischen, spanischen oder japanischen SELFHTML-Raum verwenden die folgenden Symbolgrafiken:
- Links zu französischen Informationsseiten:
(Dateien fr.gif und serverdok.gif aus dem src-Verzeichnis, Alt-Texte: französischsprachige Seite bzw. bereichsübergreifende Seite)
- Links zu französischen Kapitelübersichtsseiten oder Einstiegsseiten: (Dateien fr.gif und serverkap.gif aus dem src-Verzeichnis, Alt-Texte:
französischsprachige Seite bzw. bereichsübergreifendes Kapitel)
- Links zu spanischen Informationsseiten:
(Dateien es.gif und serverdok.gif aus dem src-Verzeichnis, Alt-Texte: spanischsprachige Seite bzw. bereichsübergreifende Seite)
- Links zu spanischen Kapitelübersichtsseiten oder Einstiegsseiten: (Dateien es.gif und serverkap.gif aus dem src-Verzeichnis, Alt-Texte:
spanischsprachige Seite bzw. bereichsübergreifendes Kapitel)
- Links zu japanischen Informationsseiten:
(Dateien jp.gif und serverdok.gif aus dem src-Verzeichnis, Alt-Texte: japanischsprachige Seite bzw. bereichsübergreifende Seite)
- Links zu japanischen Kapitelübersichtsseiten oder Einstiegsseiten: (Dateien jp.gif und serverkap.gif aus dem src-Verzeichnis, Alt-Texte:
japanischsprachige Seite bzw. bereichsübergreifendes Kapitel)
Links zu fremden Web-Angeboten
Solche Links werden stets mit dem Sprachensymbol des Web-Angebots ausgezeichnet. Ist ein Angebot mehrsprachig, werden die entsprechenden Sprachensymbole aneinandergehängt, z.B. 
. Folgende Auszeichnungen sind derzeit in Gebrauch:
- Links zu deutschsprachigen Web-Angeboten: (Datei de.gif aus dem src-Verzeichnis, Alt-Text:
deutschsprachige Seite)
- Links zu englischsprachigen Web-Angeboten: (Datei en.gif aus dem src-Verzeichnis, Alt-Text:
englischsprachige Seite)
- Links zu französischsprachigen Web-Angeboten: (Datei fr.gif aus dem src-Verzeichnis, Alt-Text:
französischsprachige Seite)
- Links zu spanischsprachigen Web-Angeboten: (Datei es.gif aus dem src-Verzeichnis, Alt-Text:
spanischsprachige Seite)
- Links zu japanischsprachigen Web-Angeboten: (Datei jp.gif aus dem src-Verzeichnis, Alt-Text:
japanischsprachige Seite)
Falls Links zu anderssprachigen Seiten gesetzt werden sollen, ist eine GIF-Grafik mit den Pixel-Ausmaßen 16x10 zu erstellen, welche die Flagge des Landes darstellt, mit dem die betreffende Sprache gemeinhin verbunden wird. Die Grafik ist im src-Verzeichnis zu hinterlegen. Bitte jedoch keine Schweiz- und Österreich-Grafiken! Es handelt sich um Symbolgrafiken für die Sprache, nicht für das Herkunftsland des Beitragsautors!
Links zu Mailadressen
Alle mailto-Verweise erhalten das Symbol 
aus dem src-Verzeichnis vorangestellt. Alt-Text ist E-Mail. Der Linktext ist auch hier wie bei den übrigen Links fett, mit einer Ausnahme: am Seitenende, beim Copyright, ist der Linktext nicht fett! Zu beachten ist, dass im Linktext die Mailadresse selber noch mal genannt werden sollte. Erlaubte Linktextformate sind entweder Vorname Name, name@irgendwo.xy, oder nur name@irgendwo.xy.
Download-Links
Alle eindeutigen Download-Verweise (also Links auf gepackte Dateien) erhalten das Symbol vorangestellt. Der Alt-Text lautet ZIP-Datei (oder entsprechend anders, wenn es sich um eine andersformatige Datei handelt). Als Linktext sollte normalerweise der URI angegeben werden.
Ziel hierbei ist, lesbare, ansprechende und selbstredende URL-Adressen bei allen redaktionellen, dauerhaften Angeboten im gesamten SELFHTML-Raum zu haben. Folgende Regeln sollen angewendet werden:
- Alle Verzeichnisnamen, Dateinamen und Ankernamen werden klein geschrieben.
- Alle Verzeichnisnamen, Dateinamen und Ankernamen sollen, wenn kein besonderer Grund dagegen spricht, "sprechend" sein. Es geht nicht darum, möglichst kurze URIs zu erzielen, sondern möglichst transparente. Bei Inhalten, die sich um ein Thema kreisen, wird ein thematischer Name gewählt. Bei Inhalten, die sich ausschließlich um einen Sprachbefehl drehen, wird der Sprachbefehl zum Namen.
- Jeder einzelne Feature-Artikel, jeder einzelne Tipptrick-Beitrag erhält ein eigenes Verzeichnis, dessen Namen das Thema des Artikels/Beitrags reflektiert. Handelt es sich um einen "einseitigen" Beitrag, erhält die eine Seite den Namen index.htm. Handelt es sich um mehrseitige Inhalte, muss es eine Seite vom SELFHTML-Seitentyp "Kapitel" geben, die als Startseite gilt. Diese erhält den Namen index.htm. Die übrigen Seiten können ihrem Inhalt entsprechende Namen erhalten.
- Es gelten folgende Regeln für Dateinamenendungen:
.htm für HTML-Dateien (bitte dran halten und kein .html mehr - damit das endlich mal einheitlich ist!)
.shtml für HTML-SSI-Dateien
.php für PHP-Dateien
.gif für GIF-Dateien
.jpg für JPEG-Dateien
.cgi oder .pl für CGI-Scripts (in Perl)
- Trennerzeichen bei mehrwortigen Namen ist das einfache Hyphen-Zeichen (Bindestrich). Bitte keine Unterstriche mehr - das ist Programmiererslang, bei Namen liest es sich nicht so gut. Dies sollte auch bei allen vorhandenen Inhalten im Selfaktuell-Raum angepasst werden. Damit bisherige URIs nicht ungültig werden, bieten sich zumindest bei Verzeichnis- und Dateinamen symbolische Links im entsprechenden Verzeichnis an.
- Ankernamen aus SELFHTML-7-Zeiten, also a1, a2 usw., werden durch sprechende Namen ersetzt.
- Alle Ankernamen erhalten zusätzlich das Attribut
class="an". Dies ist eine Maßnahme zur Rückwärtskompatibilität zu Netscape 4.x, der andernfalls Textinhalte von Ankern unterstrichen darstellen würde.
Kapitelseiten enthalten eine Navigationsleiste oben, jedoch keine unten. Informationsseiten enthalten sowohl oben als auch unten eine Navigationsleiste. Beide Navigationsleisten befinden sich in einer Tabellenzelle, die mit class="nav" ausgezeichnet ist. Lediglich Portalseiten (also die Startseiten einer Subdomain) enthalten keine Navigationsleisten, da sie die obersten Hierarchie-Ebene darstellen.
Die Navigationsleisten zeigen systematisch von links her den logischen Hierarchie-Pfad zur aktuellen Seite. Die aktuelle Seite selbst ist nicht Teil der verlinkten Oberseiten (dies nur als Hinweis, da es immer mal wieder verkehrt gemacht wird). Ein paar Beispiele sollen dies verdeutlichen:
Beispiel eines Feature-Artikels, bestehend aus einer Seite
SELFHTML aktuell Feature-Artikel DHTML
HTML-Code dieser Navigationszeile
<tr><td bgcolor="#FFEEDD" class="nav"><a class="an"
name="top"><img src="http://src.selfhtml.org/refkap.gif" width="16" height="13"
border="0" alt="Teil von"></a> <a
href="../../../index.htm"><b>SELFHTML aktuell</b></a> <img
alt="Teil von" border="0" height="13" src="http://src.selfhtml.org/refkap.gif"
width="16"> <a
href="../../index.htm"><b>Feature-Artikel</b></a> <img alt="Teil
von" border="0" height="13" src="http://src.selfhtml.org/refkap.gif"
width="16"> <a
href="../index.htm"><b>DHTML</b></a></td></tr>
Erläuterung:
Die Zeilenumbrüche im obigen Beispielcode sind wegzudenken. Dargestellt ist die Tabellenzeile, welche die Zelle mit der Navigationsleiste enthält. Wichtig zu beachten sind folgende Regeln:
- Alle Symbolgrafiken vor den Links sind geöffnete Ordner. Die Grafik ist , Alt-Text ist
Teil von.
- Die erste der Symbolgrafiken wird in ein
a-Element eingeschlossen, das einen Anker definiert. In der oberen Navigationsleiste wird ein Anker mit dem Namen top definiert, in der unteren einer mit dem Namen bottom.
- Alle Leerzeichen in der gesamten Navigationszeile werden durch erzwungene Leerzeichen (
) ausgedrückt.
- Der am weitesten rechts stehende Link in der Navigationszeile führt zur nächsthöheren Ebene. Die aktuelle Seite selbst wird in der Navigationsleiste nicht verlinkt (dies sollte zwar selbstverständlich sein, wird aber von Fremdautoren immer mal wieder verkehrt gemacht). Bei mehrseitigen Feature-Artikeln ist aus Sicht der Startseite eines solchen Artikels die Artikelrubrik die nächsthöhere Ebene, während aus Sicht der Unterseiten des Artikels die Startseite die nächsthöhere Ebene ist.
Obwohl das ©-Zeichen im deutschen Rechtsraum keine wirklich juristische Bedeutung hat, wird es auf den SELFHTML-Seiten verwendet, um einen allgemeinen "Einschüchterungseffekt" zu erzielen und daran zu erinnern, dass alle publizierten Texte dem geistigen Urheberrecht unterliegen.
Die Copyright-Angabe steht unterhalb der unteren Navigationsleiste in einem eigenen Textabsatz und bildet den letzten Inhalt vor dem schließenden </body>-Tag.
Die Copyright-Angabe beginnt mit dem ©-Zeichen, gefolgt von einem Leerzeichen. Anschließend folgt ein mailto-Verweis auf stefan.muenz@selfhtml.org. Der Linktext besteht in der Mailadresse und ist nicht fett. Wenn die Seite von einem anderen Autor als von Stefan Münz ist (maßgeblich ist die Meta-Angabe zu author), folgt, durch ein Komma getrennt, die Angabe für diese Seite:, gefolgt von einem mailto-Verweis auf die Mail-Adresse des Autors. Auch bei diesem mailto-Verweis ist der Linktext nicht fett.
SELFHTML aktuell Sonstiges
© 2007 Impressum
