Auszeichnungen und Tags
Allgemeines
Wir benutzen XHTML 1.1.
Alle xhtml-Elemente, Tags, Attribute, Auszeichnungen usw. sind immer komplett klein zu schreiben. Tags, die nicht geschlossen werden, z.B. br, müssen folgendermaßen geschrieben werden: <br />
Umlaute können in aller Regel normal auf der Tastatur eingegeben werden, xhtml-Entities (z.B. Ä für Ä
) sind nicht erforderlich.
Abschnitte werden beim Eingeben mit einer einfachen Zeilenschaltung (Newline, Return, Enter) beendet. Siehe auch br-Element und p-Element.
Nur solche xhtml-Elemente, Erweiterungen und Klassen sind erlaubt, die in den folgenden Listen beschrieben sind.
Eingabe / Umsetzung bei Typo3
Typo3 bietet drei Möglichkeiten der Textverarbeitung/-eingabe: RTE, HTML-Code, Typoscript.
Den RTE haben wir so konfiguriert, dass die Formatierung anhand dieser hier vorgestellten Tags und Klassen leicht möglich ist.
Überschriften können direkt im Dropdown-Menü ausgewählt werden. Die anderen Tags erreicht man über die Schaltfläche "insert tag". Jeder Absatz wird mit <p> </p> eingeschlossen. Will man stattdessen ein <br /> verwenden, so gelingt dies durch SHIFT+ENTER.
Außerdem bietet der RTE die Möglichkeit, direkt im HTML-Quellcode zu arbeiten.
Mehr zum RTE unter RTE.
Schaltet man den RTE ab, so muss die Eingabe der Tags von Hand erfolgen. Mit einer Ausnahme: <p>-Tags werden nicht angezeigt, sondern durch Absätze bestimmt. Man kann zusätzliche typoscripts verwenden. Diese sind:
- <link> ... </link>
- Links
- <typolist> ... </typolist>
- Ungeordnete Listen
- <abbr> … </abbr>
- Abkürzung
- <cite> … </cite>
- Quellenangabe (Herkunft, Sprecher)
- <code> … </code>
- Quellcode
- <dfn> … </dfn>
- Definition (von Wort, Begriff, Abkürzung, Code)
- <em> … </em>
- Hervorhebung, Betonung
- <kbd> … </kbd>
- Keyboard- oder Shelleingabe
- <samp> … </samp>
- Beispiel, Ausgabe eines Programms
- <span> … </span>
- sonstige Bereichsmarkierung (v.a. für Klassen)
- <strong> … </strong>
- Hervorhebung zur Markierung
- <var> … </var>
- Variablenname, Platzhalter für eine Eingabe
- <address> … </address>
- Kontaktinformation
- <blockquote> … </blockquote>
- Zitatblock
- <dl> … <dt> … </dt> <dd> … </dd> … </dl>
- Definitionsliste mit freien Überschriften für jeden Eintrag
- <h1> … </h1>
- Überschrift Ebene 1
- <h2> … </h2>
- Überschrift Ebene 2
- <h3> … </h3>
- Überschrift Ebene 3
- <h4> … </h4>
- Überschrift Ebene 4
- <p> … </p>
- Abschnitt
- <pre> … </pre>
- Blockelement, das vor allem zum Einfassen von Klassen dient
- <ul> … <li> … </li> … </ul>
- Liste mit unbezeichneten Punkten
- <ol> … <li> … </li> … </ol>
- Liste mit nummerierten oder bezeichneten Einträgen
Inline-Elemente
Inline-Elemente werden im fortlaufenden Fließtext dargestellt. Sie kennzeichnen Eigenschaften oder Auszeichnungen des Textes oder Bereichs, die irgendwo beginnen und enden. Text wird im Inline-Element gewöhnlich umbrochen.
Wir benutzen die folgenden Auszeichnungen:
Blockelemente
Blockelemente haben Höhe und Breite, sie erzeugen ein Rechteck in der Ausgabe. Wenn ein Umbruch nötig ist, passiert er "im Innern" eines Blockelements. Wir nutzen diese blockelemente:
CSS und Klassen (class=)
Für etliche Auszeichnungen stellt xhtml keine geeigneten Elemente zur Verfügung, daher definieren wir eigene Auszeichnungen als CSS-Klassen. Sie werden mit dem Attribut class="klasse_1 klasse_2 …" einem Textabschnitt zugewiesen.
Klassen für Inline-Elemente:
Bei Inline-Elementen verwenden wir prinzipiell das generische Element span.
file
Datei- oder Verzeichnisname oder Pfadangabe im Dateisystem
Beispiel:
Im Verzeichnis <span class="file">~/etc</span> liegen Dateien, die ...
Ausgabe:
Im Verzeichnis ~/etc liegen Dateien, die ...
explanation
Erklärung. Eignet sich auch für Kommentare innerhalb eines codes.
<pre class="blockcode">xyz00-user1: name@example.org <span class="explanation">Hier erfolgt eine Weiterleitung an eine reale E-Mail-Adresse</span><br />xyz00-user3: name1@example.org, name2@example.net, xyz00-user4<span class="explanation">Hier an drei Adressen gleichzeitig</span></pre>
Ausgabe:
xyz00-user1: name@example.org Hier erfolgt eine Weiterleitung an eine reale E-Mail-Adresse
xyz00-user3: name1@example.org, name2@example.net, xyz00-user4Hier an drei Adressen gleichzeitig
Klassen für Blockelemente:
Manche Klassen wurden von uns festgelegt, um Blockelemente formatieren zu können. Diese Blockelemente werden entweder mit p oder mit pre formatiert. Im ersten Fall können Zeilenumbrüche nur mit <br /> erzwungen werden, während im zweiten Fall Zeilenumbrüche mit <br /> oder <p></p> (also ENTER) funktionieren und sogar nötig sind, da pre keinen automatischen Zeilenumbruch bietet.
blockcode
Block mit Code. Dies beinhaltet alles, was Teil einer Datei ist, also HMTL, php, usw. aber auch .htaccess, Formulare, ...
Beispiel:
Die Datei virtusertable kann z.B. so aussehen:
<pre class="blockcode">webmaster@example.com xyz00-doms<br />
service@example.com xyz00-doms<br />
postmaster@example.com xyz00-doms<br />
hans@example.com xyz00-hans,xyz-doms<br />
suse@example.com suse.testmann@gmx.de</pre>
Ausgabe:
Die Datei virtusertable kann z.B. so aussehen:
webmaster@example.com xyz00-doms
service@example.com xyz00-doms
postmaster@example.com xyz00-doms
hans@example.com xyz00-hans,xyz-doms
suse@example.com suse.testmann@gmx.de
shell
Abbildung einer Shell inkl. Eingaben und Ausgaben.
<pre class="shell"> <samp>xyz00@hopi:~$</samp> <kbd>passwd</kbd><br />
<samp>Changing password for mi</samp><br />
<samp>(current) UNIX password:</samp> <var>ALTESPASSWORT</var><br />
<samp>Enter new UNIX password:</samp> <var>NEUESPASSWORT</var><br />
<samp>Retype new UNIX password:</samp> <var>NEUESPASSWORT</var><br />
<samp>passwd: password updated successfully </samp><br />
<samp>xyz00@hopi:~$ </samp></pre>
Ausgabe:
xyz00@hopi:~$ passwd
Changing password for mi
(current) UNIX password: ALTESPASSWORT
Enter new UNIX password: NEUESPASSWORT
Retype new UNIX password: NEUESPASSWORT
passwd: password updated successfully
xyz00@hopi:~$
Bei der Formatierung von Shell-Inhalten sind noch weitere Dinge zu beachten. So wird die Shell ausgegeben, wie Sie erscheint, also auch mit dem Präfix (...$) bestehend aus dem User (xyz00 oder xyz00-...) und dem Hive. Alle Ausgaben (also auch der Präfix) werden mit <samp></samp> eingeschlossen. Tastatureingaben werden als <kbd></kbd> bei eindeutigen Eingaben oder als <var></var> bei Beispielwerten und Variablen verwendet.
hint
Hinweis
<pre class="hint">Übrigens: Wikinger haben in der Regel rote Bärte.</pre>
Ausgabe:
Übrigens: Wikinger haben in der Regel rote Bärte.
linkbox
Box mit einer Link-Liste
<pre class="links">Links zum Thema:
www.was-es-alles-gibt.de
www.keine-Ahnung.de </pre>
Ausgabe:
Links zum Thema:
www.was-es-alles-gibt.de
www.keine-Ahnung.de
