SELFHTML aktuell  Sonstiges
	Neue Layoutvorgaben (2006-09-05)
	Allgemeines  Musterseiten  Hinweise zum Coding  Aufbau des SELFHTML-Layouts  Grundlegende Seitentypen  Variationen der Seitentypen  Dokumenttyp  Seitentitel  Meta-Angaben  Logischen Beziehungen  Textauszeichnung  Tabellen  Grafiken  Hyperlink-Auszeichnungen (Symbolgrafiken)  Verzeichnis-, Datei- und Ankernamen  Navigationsleisten oben und unten  Urheberangaben

Allgemeines

Die vorliegende Seite beschreibt, was zu beachten ist, um "SELFHTML-typische" Seiten für das Online-Angebot von SELFHTML zu erstellen. 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.

Die Regeln entstanden infolge einer Vereinheitlichung des gesamten SELFHTML-Aktuell-Codes im August 2006. Die neuen Regeln sind nicht ein Stein gemeißelt. Es ging bei der Codeüberarbeitung lediglich darum, dass alle Bereiche einer Seite sinnvoll ausgezeichnet werden, sodass der Code später automatisiert verändert werden kann. Ziel ist es, die Inhalte irgendwann in ein CMS oder eine eigene XML-Sprache migrieren zu können.

Für Autoren und Redakteure, die mit dem alten SELFHTML-Code bereits vertraut sind, sind in einem Leitfaden für Umsteiger die wichtigsten  Neuerungen der Layout-Richtlinien kurz aufgelistet. Bitte lesen Sie sich dennoch die folgenden Richtlinien aufmerksam durch, die Kurzübersicht ist nicht vollständig.

Musterseiten

Für neu zu erstellende Seiten, für Templates sowie das Überarbeiten vorhandener, schlecht formatierter Seiten stehen die folgenden Musterseiten zur Verfügung:

 normale-informationsseite.htm
 normale-informationsseite.zip

 normale-kapitelseite.htm
 normale-kapitelseite.zip

 artikel-vorlage.htm
 artikel-vorlage.zip

Hinweise zum Coding

Zum Bearbeiten wird vorausgesetzt, dass auf Code-Ebene gearbeitet wird. WYSIWYG-Editoren, die übermäßig in den vorgegebenen Quelltext eingreifen, 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.

Bei der Formatierung des Quellcodes sollten Sie folgende Konventionen beachten: Verschachtelte Tags werden für gewöhnlich nicht eingerückt, sondern gegebenenfalls durch einen Zeilenumbruch voneinander getrennt. Bitte benutzen Sie keine Editoren, die automatisch das gesamte Aussehen des Quellcodes ändern und z.B. für jede Tagverschachtelung eine Einrückebene mit Tabulatoren.

Die konkrete Formatierung der Tags ist genauso festgelegt wie der allgemeine Dokumenttyp (HTML 4.01 Transitional). Bitte übernehmen sie die Codeschnipsel für die verschiedenen Funktionsbereiche der Seite möglichst unverändert und halten Sie sich an die Auszeichnungsmuster.

Aufbau des SELFHTML-Layouts

Jede Seite im SELFHTML-Layout hat einen grundlegenden charakteristischen Aufbau. Nicht bei allen Seitentypen (siehe folgender Abschnitt) entspricht die Seitenstruktur exakt diesem Schema, manche Bereiche können auch leer sein oder alternativ gefüllt sein.

Der schematische Aufbau ist folgender:

1. Seitenkopf (Layout-Tabelle)

   1. Obere Navigationsleiste (Brotkrumen-Pfad; ID kopf-navigation)
   2. SELFHTML-Logo (ID kopf-logo)
   3. Dokumenttitel (ID kopf-titel, h1-Element)
   4. Seitentyp-Icon (ID kopf-links)
   5. Optional: Sidebar (ID sidebar)
   6. Dokumentinternes Inhaltsverzeichnis und/oder Liste mit Links zu Unterseiten (ID kopf-haupt)
   7. Sprunglink zum Seitenfuß (ID kopf-down-link)

2. Seitenkörper

   Hauptinhalt bestehend aus mehreren Abschnitte, wiederum bestehend aus:

   1. einer Abschnittsüberschrift (h2-Element)
   2. einer beliebigen Anzahl weiteren Zwischenüberschriften (h3, h4), Absätzen, Listen, Tabellen, Codebereichen usw.
   3. einem Abschnitttrenner (nur zwischen zwei Abschnitten, nicht an den Kopf oder Fuß angrenzend; Klasse abschnitttrenner)

3. Seitenfuß

   1. Sprunglink zum Seitenkopf (ID fuss-up-link)
   2. Optional: Sequenznavigation mit Links zum nächsten und zum vorigen Dokument, sofern das Dokument Teil einer Seitenfolge ist (ID sequenznavigation)
   3. Untere Navigationsleiste (Brotkrumen-Pfad; ID fuss-navigation)
   4. Urheberangabe mit Link zum Impressum und Verantwortlichem für die jeweilige Seite

Die wichtigsten Funktionsbereiche haben eindeutige IDs oder Klassen, um sie im Stylesheet, in Scripten usw. eindeutig zu adressieren. Diese Bezeichner sind in der obigen Liste jeweils aufgeführt.

Grundlegende Seitentypen

Im SELFHTML-Layout gibt es folgende grundlegende Seitentypen:

Kapitelseiten

Kapitelseiten bestehen in erster Linie aus Links zu Unterkapiteln und Unterseiten. Sie enthalten allenfalls einen kurzen Text, der den ganzen Bereich näher beschreibt. Alle Links sind im Seitenkopf untergebracht, zwischen dem Seitenkopf und dem Seitenfuß befindet sich kein Inhalt, sie schließen direkt aneinander an.

Eine klassische Kapitelseite im SELFHTML-Stil ist etwa das  Archiv. Links dürfen dabei wenn sinnvoll auch einzeln mit Kurzbeschreibungen versehen sein, wie etwa in der typischen Artikelübersichtsseite  Serverkonfiguration. Bei vielen Links werden Zwischenüberschriften zur Strukturierung verwendet, wie es etwa  Sonstiges vormacht. Auch zweispaltige Lösungen, wie bei der Einstiegsseite zu den  Artikeln, sind möglich.

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 ein Inhaltsverzeichnis mit Links zu den Unterabschnitten der Seite. Zwischen Seitenkopf und Seitenfuß befindet sich dann der eigentliche Inhalt.

SELFHTML-konforme Links auf solche Seiten verwenden die Symbole (sub-)domain-intern bzw. (sub-)domain-übergreifend.

Variationen der Seitentypen

Neben den beiden Grundtypen sind Mischformen in Gebrauch:

Portalseiten

Dies sind die Subdomain-Einstiegsseiten, wie z.B.  SELFHTML aktuell. Solche Seiten bauen vom Typ her auf Kapitelseiten auf, haben jedoch zusätzlich im Seitenkopf eine rötlich gefärbte Sidebar mit Suchfeld, Direktlinks usw.

Startseiten

Dies sind vom Grundtyp her Kapitelseiten, stellen aber defacto eine Mischung zwischen Kapitelseiten und Informationsseiten dar. Startseiten enthalten einerseits im Seitenkopf Links zu Unterseiten, aber auch Links zu Unterabschnitten, die sich im Seitenkörper derselben Seite befinden.

So ist beispielsweise das  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 mehrseitigen Artikel einleitet, ist so ein Zwittertyp und wird daher als Startseite bezeichnet.

Dokumenttyp

Derzeit wird bei SELFHTML-Seiten folgende Dokumenttyp-Angabe verwendet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Das Grundlayout ist zwar nicht weit von Strict entfernt, allerdings gibt es gegenwärtig noch einige veraltete Auszeichnungen, die keinen Strict-Dokumenttyp erlauben. Diese sollen allerdings schrittweise entfernt und durch CSS-Formatierungen ersetzt werden.

Dieser DOCTYPE löst den sogenannten Quirks-Modus der Browser aus. Die URI-Angabe der verwendeten HTML-DTD fehlt, da sie den standardkonformen Modus bewirken würde. Die Auswirkungen des standardkonformen Modus wurden bisher noch nicht ausreichend getestet.

Seitentitel

Der Inhalt des title-Elements soll stets identisch sein mit der h1-Überschrift im Seitenkopf. Der Titel soll primär den Inhalt der Seite enthalten. Bei 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 Fremdartikeln gibt es dazu stattdessen ein Autorenimpressum.

Meta-Angaben

Zum Aufbau von SELFHTML-Seiten gehört ein Satz 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-Vorgaben beim Arbeiten mit Seiten im SELFHTML-Layout zu beachten sind">
<meta name="keywords" content="SELFHTML Layout, SELFHTML-Layout, Layout">
<meta name="author" content="Mathias Schäfer, molily@selfhtml.org">
<meta name="DC.Publisher" content="Mathias Schäfer, molily@selfhtml.org">
<meta name="DC.Contributor" content="Stefan Münz, stefan.muenz@selfhtml.org">
<meta name="DC.Date" content="2006-09-05T18:53+01:00">
<meta name="DC.Identifier" content="http://aktuell.de.selfhtml.org/sonst/layoutvorgaben-2006-09-05.htm">
<meta name="DC.Language" content="de">
<meta name="DC.Rights" content="">
<meta name="SELF.Firstdate" content="2006-09-05T18:53+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:

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.

Logischen Beziehungen

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" type="text/css" href="http://src.selfhtml.org/selfhtml-aktuell-2006-09-05.css" title="SELFHTML-Stylesheet">
<link rel="shortcut icon" type="image/x-icon" href="http://src.selfhtml.org/favicon.ico">
<link rel="up" href="./" title="Sonstiges" >
<link rel="top" href="/" title="SELFHTML aktuell" >
<link rel="search" href="http://suche.de.selfhtml.org/" title="SELFHTML-Suche">
<link rel="bookmark" href="/artikel/" title="Artikel">
<link rel="bookmark" href="http://forum.de.selfhtml.org/" title="SELFHTML-Forum">

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 Linkziel keine HTML-Dokument ist, erhalten ein type-Attribut mit der Angabe des MIME-Types.
• Verweise zu Zielen innerhalb der gleichen Subdomain sollten in den meisten Fällen durch absolute Pfadangaben erfolgen, also z.B. href="/".
• Alle link-Elemente, sollten wenn möglich ein title-Attribut enthalten, welches das Linkziel betitelt.
• Derzeit kommen im SELFHTML-Raum nur link-Elemente mit dem Attribut rel vor, keine mit dem Typ rev.

Übersicht der möglichen logischen Beziehungen

<link rel="stylesheet" ...>

Verwendung bei allen Seitentypen immer. Gibt das zentrale SELFHTML-Stylesheet auf dem Server src.selfhtml.org an.

<link rel="shortcut icon" ...>

Verwendung bei allen Seitentypen immer. Gibt das zentrale SELFHTML-Icon für Bookmarks, die Adressleiste usw. auf dem Server src.selfhtml.org an.

<link rel="top" ...>

Verwendung bei allen Seitentypen immer. Führt einen Sprung zur zugehörigen Portalseite aus. Die href-Angabe lautet /.

<link rel="up" ...>

Verwendung bei allen Seitentypen, sofern es eine Hierarchie-Ebene oberhalb gibt. Führt einen Sprung zur logisch nächsthöheren Ebene aus. Die href-Angabe lautet ./ oder ../.

<link rel="next" ...>

Verwendung bei allen Seitentypen, sofern es eine logische Seitenfolge gibt, beispielsweise innerhalb von mehrseitigen Artikeln. Führt einen Sprung zur logisch nächsten Seite aus. Üblicherweise eine relative URI wie seite.htm.

<link rel="prev" ...>

Verwendung bei allen Seitentypen, sofern es eine logische Seitenfolge gibt, beispielsweise innerhalb von mehrseitigen Artikeln. Führt einen Sprung zur logisch vorhergehenden Seite aus. Üblicherweise eine relative URI wie seite.htm.

<link rel="first" ...>

Verwendung bei allen Seitentypen, sofern es eine logische Seitenfolge gibt, beispielsweise innerhalb von mehrseitigen Artikeln. Führt einen Sprung zur logisch ersten Seite aus. Üblicherweise eine relative URI wie seite.htm.

<link rel="last" ...>

Verwendung bei allen Seitentypen, sofern es eine logische Seitenfolge gibt, beispielsweise innerhalb von mehrseitigen Artikeln. Führt einen Sprung zur logisch letzten Seite aus. Üblicherweise eine relative URI wie seite.htm.

<link rel="search" ...>

Verwendung bei allen Seitentypen immer. Führt einen Sprung zur zentralen SELFHTML-Suche aus. Diese sollte mit absoluter URI (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 URI adressiert werden.

<link rel="bookmark" ...>

Verwendung bei allen Seitentypen, sofern sich sinnvolle Querverweise oder Standardverweise anbieten. Standardverweise führen z.B. auf die SELFHTML-Dokumentation, das Forum, die Artikel oder das Linkverzeichnis. Sinnvolle Querverweise können beispielsweise zu thematisch verwandten Feature-Artikeln, Ergebnissen der SELFHTML-Suche oder zu Stellen innerhalb der SELFHTML-Dokumentation 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 Artikeln usw.

Im Sinne der Einheitlichkeit wird empfohlen, die link-Elemente in der hier vorgestellten Reihenfolge zu verwenden, und innerhalb der link-Tags die Attribute in der hier genannten Reihenfolge zu notieren.

Textauszeichnung

Das Ziel ist, eine stark logische und standardkonforme Textauszeichnung zu erreichen. Die folgende Übersicht fasst zusammen, welche Textstellen wie auszuzeichnen sind:

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. In der Regel können 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. div-Elemente können in Ausnahmefällen zur Gruppierung von Blockelementen sinnvoll sein.

Überschriften

Seitenüberschriften werden mit dem h1-Elemente ausgezeichnet.

Abschnittüberschriften im Dokumentkörper und auch Überschriften im Dokumentkopf werden mit dem h2-Element ausgezeichnet.

Zwischenüberschriften innerhalb eines Abschnitts werden als h3-Überschriften ausgezeichnet. Allgemeine Zwischenüberschriften erhalten keine zusätzliche Klassenangaben. Es gibt jedoch drei Arten von Zwischenüberschriften, 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.

Quelltext-Beispiele, Datei-Listings, Programmausgaben usw.

Solche Bereiche werden mit dem pre-Element ausgezeichnet. Die Inhalte sollten kein besonderes Syntax-Highlighting aufweisen. Beispielrelevante Befehle können jedoch mit strong hervorgehoben werden (bitte sparsam damit umgehen).

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 und Verzeichnisnamen im Fließtext

Dafür wird momentan 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 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.

Erklärungen von Fachtermina im Text

Beim ersten Vorkommen eines Fachterminus sollte eine Definition im Kontext erfolgen. Dieses erste, erklärende Vorkommen eines Terminus Technicus sollte mit dem dfn-Element ausgezeichnet werden.

Zitate

Für kurze Zitate im Fließtext ist das q-Element zu verwenden. Sofern es eine URI-Quellenangabe gibt, sollte diese im cite-Attribut angegeben werden. Für längere Zitate, die einen eigenen Absatz darstellen, ist das blockquote-Element zu verwenden, ebenfalls mit cite-Angabe, sofern möglich.

Tabellen

Gemeint sind hiermit 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:

HTML-Code dieser Tabelle

<table class="reftable" cellpadding="3" cellspacing="0" border="1">
<tr>
<th>Kopfzelle</th>
<th>Kopfzelle</th>
</tr>
<tr>
<td class="code"><code>Zelle mit Quelltext</code></td>
<td class="tabxpl">Zelle für Erläuterungstext</td>
</tr>
</table>

Erläuterung:

Wichtig sind die Unterscheidung zwischen Kopfzellen (th) und Datenzellen (td) sowie die unterschiedlichen class-Auszeichnungen für Zellen mit Quelltext und Zellen mit erläuterndem Text.

Grafiken

Gemeint sind hier alle Grafiken, die nicht zentral auf src.selfhtml.org-gelagert werden, sondern individuell zu einer Seite gehören. Das können z.B. Screenshots sein, Illustrationen, auch animierte. Folgende Punkte sollten jedoch berücksichtigt werden:

• Es finden momentan die Formate GIF und JPEG Verwendung, die je nach Zweck passend verwendet werden sollten.
• Screenshots sollten möglichst 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 möglich und verbreitet ist, vorher auszuschalten.
• Screenshots sollten nur in der Bildgröße verändert werden, wenn die Lesbarkeit der Texte und die allgemeine Wiedererkennbarkeit darunter nicht leidet.
• 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.
• 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.

Hyperlink-Auszeichnungen (Symbolgrafiken)

Alle Links sind SELFHTML-typisiert, sprich, sie bekommen eine Symbolgrafik 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.

Links zu besonderen Formaten wie Microsoft-Office-Dateien oder auch zu PDF-Dateien 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 Text auf das Format hingewiesen werden.

Links innerhalb einer Seite

Symbol	Verwendung	Quellcode
	Links zu Stellen weiter oben im Text	<img src="http://src.selfhtml.org/up.gif" width="14" height="10" alt="nach oben">&nbsp;<a href="...">...</a>
	Links zu Stellen weiter unten im Text	<img src="http://src.selfhtml.org/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="...">...</a>

Links innerhalb der Subdomain aktuell.de.selfhtml.org

Symbol	Verwendung	Quellcode
	Links zu Informationsseiten	<img src="http://src.selfhtml.org/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="...">...</a>
	Links zu Kapitelseiten oder Einstiegsseiten	<img src="http://src.selfhtml.org/kap.gif" width="15" height="13" alt="Kapitel">&nbsp;<a href="...">...</a>
	Links zu Beispielseiten im neuen Fenster	<img src="http://src.selfhtml.org/dokf.gif" width="15" height="10" alt="Popup-Seite">&nbsp;<a href="..." target="_blank">...</a>
	Links zur logisch vorhergehenden Seite	<img src="http://src.selfhtml.org/prev.gif" width="10" height="10" alt="zurück">&nbsp;<a href="...">...</a>
	Links zur logisch nächsten Seite	<img src="http://src.selfhtml.org/next.gif" width="10" height="10" alt="weiter">&nbsp;<a href="...">...</a>

Bitte korrekt zwischen "Seite" und "Kapitel" unterscheiden! So sind alle Übersichtsseiten, etwa die Rubrik "Artikel", Bereich "JavaScript", Kapitelseiten. Auch Startseiten (index.htm) von mehrseitigen Artikeln sind Kapitelseiten. Einseitige Artikel sind dagegen trotz eigener index.htm Informationsseiten! Links auf den SELFHTML-Chat sind derzeit Popup-Links.

Links zu anderen Subdomains von selfhtml.org

Symbol	Verwendung	Quellcode
	Links zu Informationsseiten	<img src="http://src.selfhtml.org/serverdok.gif" width="15" height="10" alt="bereichsübergreifende Seite">&nbsp;<a href="...">...</a>
	Links zu Kapitelseiten oder Einstiegsseiten	<img src="http://src.selfhtml.org/serverkap.gif" width="15" height="13" alt="bereichsübergreifendes Kapitel">&nbsp;<a href="...">...</a>

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. Links zu Stellen innerhalb der SELFHTML-Dokumentation sind aus Sicht von SELFHTML aktuell ebenfalls bereichsübergreifende Links.

Links zu fremdsprachigen SELFHTML-Adressen

Das Attribut target wird ausschließlich bei Popup-Links mit dem Wert _blank gebraucht wird. Alle anderen Links, darunter Links zu fremden Web-Angeboten, sollten kein target-Attribut besitzen.

Symbole	Verwendung	Quellcode
	Links zu französischen Informationsseiten	<img src="http://src.selfhtml.org/fr.gif" width="16" height="10" alt="französischsprachige Seite"><img src="http://src.selfhtml.org/serverdok.gif" width="15" height="10" alt="bereichsübergreifende Seite">&nbsp;<a href="...">...</a>
	Links zu französischen Kapitelseiten oder Einstiegsseiten	<img src="http://src.selfhtml.org/fr.gif" width="16" height="10" alt="französischsprachige Seite"><img src="http://src.selfhtml.org/serverkap.gif" width="15" height="13" alt="bereichsübergreifendes Kapitel">&nbsp;<a href="...">...</a>
	Links zu spanischen Informationsseiten	<img src="http://src.selfhtml.org/es.gif" width="16" height="10" alt="spanischsprachige Seite"><img src="http://src.selfhtml.org/serverdok.gif" width="15" height="10" alt="bereichsübergreifende Seite">&nbsp;<a href="...">...</a>
	Links zu spanischen Kapitelseiten oder Einstiegsseiten	<img src="http://src.selfhtml.org/es.gif" width="16" height="10" alt="spanischsprachige Seite"><img src="http://src.selfhtml.org/serverkap.gif" width="15" height="13" alt="bereichsübergreifendes Kapitel">&nbsp;<a href="...">...</a>
	Links zu japanischen Informationsseiten	<img src="http://src.selfhtml.org/jp.gif" width="16" height="10" alt="japanischsprachige Seite"><img src="http://src.selfhtml.org/serverdok.gif" width="15" height="10" alt="bereichsübergreifende Seite">&nbsp;<a href="...">...</a>
	Links zu japanischen Kapitelseiten oder Einstiegsseiten	<img src="http://src.selfhtml.org/jp.gif" width="16" height="10" alt="japanischsprachige Seite"><img src="http://src.selfhtml.org/serverkap.gif" width="15" height="13" alt="bereichsübergreifendes Kapitel">&nbsp;<a href="...">...</a>

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:

Symbole	Verwendung	Quellcode
	Links zu deutschsprachigen Web-Angeboten	<img src="http://src.selfhtml.org/de.gif" width="16" height="10" alt="deutschsprachige Seite">&nbsp;<a href="...">...</a>
	Links zu englischsprachigen Web-Angeboten	<img src="http://src.selfhtml.org/en.gif" width="16" height="10" alt="englischsprachige Seite">&nbsp;<a href="...">...</a>
	Links zu französischsprachigen Web-Angeboten	<img src="http://src.selfhtml.org/fr.gif" width="16" height="10" alt="französischsprachige Seite">&nbsp;<a href="...">...</a>
	Links zu spanischsprachigen Web-Angeboten	<mg src="http://src.selfhtml.org/es.gif" width="16" height="10" alt="spanischsprachige Seite">&nbsp;<a href="...">...</a>
	Links zu japanischsprachigen Web-Angeboten	<img src="http://src.selfhtml.org/jp.gif" width="16" height="10" alt="japanischsprachige Seite">&nbsp;<a href="...">...</a>

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 unter src.selfhtml.org 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 E-Mail-Adressen

Alle mailto-Verweise erhalten das Symbol vorangestellt (<img src="http://src.selfhtml.org/mail.gif" width="15" height="10" alt="E-Mail">&nbsp;<a href="mailto:...">...</a>). Zu beachten ist, dass im Linktext die Mailadresse selber noch mal genannt werden sollte. 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 ( <img src="http://src.selfhtml.org/zip.gif" width="12" height="10" alt="ZIP-Datei">&nbsp;<a href="...">...</a>) vorangestellt. Als Linktext sollte normalerweise der URI angegeben werden.

Verzeichnis-, Datei- und Ankernamen

Ziel hierbei ist, lesbare, ansprechende und selbstredende URI bei allen redaktionellen 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 Artikel 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 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 nicht .html!)
  .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 der einfache Bindestrich. Bitte keine Unterstriche!

Navigationsleisten oben und unten

Kapitelseiten enthalten eine Navigationsleiste oben, jedoch keine unten. Informationsseiten enthalten sowohl oben als auch unten eine Navigationsleiste. Die obere Navigationsleiste befindet sich in einer Tabellenzelle, die mit id="kopf-navigation" ausgezeichnet ist. Die untere Navigationsleiste befindet sich in einem Textabsatz mit id="fuss-navigation". Portalseiten enthalten keine Navigationsleisten, da sie die obersten Hierarchie-Ebene darstellen.

Die Navigationsleisten zeigen systematisch von links her den logischen Hierarchie-Pfad zur aktuellen Seite (im Fachjargon Brotkrumenpfad, englisch breadcrumb trail genannt). Die aktuelle Seite selbst ist nicht Teil der verlinkten Oberseiten. Ein paar Beispiele sollen dies verdeutlichen:

Beispiel der oberen Navigationsleiste eines Artikels, bestehend aus einer Seite

 SELFHTML aktuell  Artikel  JavaScript

HTML-Code dieser Navigationszeile

...
<tr><td colspan="2" id="kopf-navigation">
<a name="top">
<img src="http://src.selfhtml.org/refkap.gif" width="16" height="13" alt="Teil von"></a>
&nbsp;<a href="/">SELFHTML aktuell</a>
<img src="http://src.selfhtml.org/refkap.gif" width="16" height="13" alt="Teil von">&nbsp;
<a href="../../">Artikel</a>
<img src="http://src.selfhtml.org/refkap.gif" width="16" height="13" alt="Teil von">&nbsp;
<a href="../">JavaScript</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 Symbolgrafik wird im Falle oberen Navigationszeile in ein a-Element eingeschlossen, das einen Anker namens top definiert. Für die untere Navigationszeile gilt dies nicht.
• Die Leerzeichen zwischen Symbolgrafiken und a-Elementen werden wie gewohnt durch erzwungene Leerzeichen ( ) ausgedrückt. Die Leerzeichen zwischen den Symbol-Hyperlink-Paaren sind hingegen gewöhnliche.
• 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. Bei mehrseitigen 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.

Urheberangaben

Obwohl das ©-Zeichen im deutschen Rechtsraum keine juristische Bedeutung hat, wird es auf den SELFHTML-Seiten verwendet, um daran zu erinnern, dass alle publizierten Texte dem Urheberrecht unterliegen. Eine rechtlich bindende Urheberangabe im Sinne einer Nutzungslizenz liegt allerdings noch nicht vor. Stattdessen wird auf das Impressum des SELFHTML e.V. verwiesen.

Die Urheberangabe steht unterhalb der unteren Navigationsleiste in einem eigenen Textabsatz und bildet den letzten Inhalt vor dem schließenden </body>-Tag. In diesem Textabsatz wird gleichzeitig der Anker bottom definiert.

Die Urheberangabe hat folgendes Schema: Ein ©-Zeichen gefolgt von der aktuellen, vierstelligen Jahreszahl. Anschließend folgt ein Verweis auf das zentrale Impressum auf www.selfhtml.org. Wenn die Seite von einem Fremdautor verfasst wurde, wie es bei den meisten Artikeln der Fall ist, so folgt, durch ein Komma getrennt, der Text für diese Seite:, gefolgt von einem Verweis auf die Mail-Adresse des jeweiligen Autors.

Beispiel einer allgemeinen Urheberangabe

<p><a name="bottom">&copy; 2006</a> <img src="http://src.selfhtml.org/serverdok.gif"
width="15" height="10" alt="bereichsübergreifende Seite">&nbsp;
<a href="http://www.selfhtml.org/de.impressum.html">Impressum</a></p>

Beispiel einer Urheberangabe mit Fremdautor

<p><a name="bottom">&copy; 2006</a> <img src="http://src.selfhtml.org/serverdok.gif"
width="15" height="10" alt="bereichsübergreifende Seite">&nbsp;
<a href="http://www.selfhtml.org/de.impressum.html">Impressum</a>,
für diese Seite: <img src="http://src.selfhtml.org/mail.gif" width="15" height="10" alt="E-Mail">
&nbsp;<a href="mailto:molily@gmx.de">molily@gmx.de</a></p>

Erläuterung:

Die Zeilenumbrüche im obigen Beispielcode sind jeweils wegzudenken, der Absatz besteht nur aus einer Zeile.

 SELFHTML aktuell  Sonstiges

© 2007  Impressum