MosaPedia:Formatierung/HTML und CSS

Aus MosaPedia

Wechseln zu: Navigation, Suche
Image:Construction.jpg An diesem Artikel oder Abschnitt arbeitet gerade Kobold. Um Bearbeitungskonflikte zu vermeiden, warte bitte mit dem Ändern, bis diese Markierung entfernt ist, oder kontaktiere Kobold.

HTML (Hypertext Markup Language) und CSS (Cascading style sheets) sind zusammen die Sprache, in der Webseiten über das Internet übertragen werden.

In der MosaPedia werden Artikel nicht als HTML, sondern als Wikitext geschrieben. Die Wikimedia-Software übersetzt den Wikitext in HTML-Code, der auf dem Server zwischengespeichert, zum Rechner des Benutzers übertragen und dort vom Browser angezeigt wird. Wikitext ermöglicht in den am häufigsten vorkommenden Fällen eine etwas einfachere (d.h. einfach zu handhabende) Textgestaltung, deckt aber nicht die gesamte Bandbreite der Anforderungen ab. Für die etwas komplizierteren Fälle wird dann HTML eingesetzt. Da der Wikitext ohnehin zu HTML übersetzt wird, ist dies unproblematisch: der HTML-Text bleibt einfach so, wie er ist.

Über HTML und CSS gibt es eine Vielzahl von Lehr- und Nachschlagewerken, deren Inhalt hier nicht wiedergegeben werden muss (im Folgenden nur einige Grundgedanken). Beim Einsatz in der Wikimedia-Software gibt es aber einige Details zu beachten, die nicht in den HTML-Büchern stehen:

  • Der erlaubte Sprachumfang ist eingeschränkt, dafür fügt die Wikimedia-Software einige Tags hinzu, die wie HTML aussehen, und ändert die Wirkung einiger Befehle
  • Konventionen zu beachten

Inhaltsverzeichnis

HTML

Tags, entities

Wann HTML benutzen?

pro: Viele Effekte lassen sich nur durch HTML erreichen pro: HTML ist (zerbrechlichen, ggf. schwer verständlichen) "Tricksereien" vorzuziehen con: HTML im Quelltext schreckt unerfahrene Benutzer ab (Syntax und Wirkung sollte offensichtlich sein)

HTML sparsam einsetzen, und/oder einheitlich formatieren komplexe Layouts in Wiki-Vorlagen kapseln Dito für CSS.

Konventionen

Wikipedia... hier geringfügig anders in der MosaPedia häufig < br clear="both" /> (s.u.)

Kommentare < !-- --> werden vom Parser entfernt, können für Hinweise an den nächsten Bearbeiter etc. sinnvoll sein:

<!-- Bitte hier noch ... ergänzen -->
== Cappuccino im Mosaik ==
=== Die Abrafaxe als Genießer ===

<!-- 11/77 --> 
[[Califax]] lässt sich von ...

<!-- 420 --> 
In London begegnet [[Brabax]] ...
[[Datei:Creck375.jpg|thumb|x200|[[375]]]] <!-- ausnahmsweise thumb, damit auf einheitliche Größe skaliert werden kann -->

HTML-Kommentare können Zeilenumbrüche zur Strukturierung des Quelltextes kapseln

HTML-Elemente (Tags)

HTML-Elemente bestehen aus einem einleitenden tag (z.B. <small>), einem abschließenden tag (z.B. </small>) und dem Text dazwischen, also etwa: <small>kleiner Text</small>. Welche tags es gibt, ist in den HTML-Standards definiert. Im Wikitext ist nur ca. die Hälfte der in HTML gültigen Elemente bzw. Tags erlaubt, nur ein kleinerer Teil davon wird regelmäßig benötigt.

Die verschiedenen HTML-Tags lassen sich aus der Sicht des Wiki-Systems bzw. seines Benutzers wie folgt einteilen:

  1. Erlaubte (also vom Wiki-Parser unterstützte) Tags: Diese werden bei der Übersetzung des Wikitextes in HTML unverändert gelassen.
    (Dabei wird die korrekte Schachtelung überprüft, und ggf. wird die Eingabe syntaktisch korrigiert: aus <br> wird <br />, usw.)
    • Beispiele sind <br>, <small>, <u>, <div>, ...
    • Für einige gibt es eine alternative Wiki-Schreibweise: z.B. ''...'' oder <i>...</i>
  2. Verbotene Tags: Hierbei handelt es sich (a) um solche, für die im Wiki ein etwas abweichender Mechanismus existiert , und (b) um solche, die für in das System eingebettete Dokumente nicht benötigt werden (z.B. <html>, <body>) oder die (c) das System durcheinanderbringen könnten (z.B. <script>).
    • Ungültige (falsch geschachtelte, falsch geschriebene oder unbekannte) Tags werden ebenso behandelt.
    • Verbotene und ungültige Tags werden vom Parser "entschärft" und in reinen Text verwandelt, indem die spitzen Klammern durch ihre grafischen Äquivalente ersetzt werden.
    • Beispiele sind (a) <a> und <img> (für Links und Bilder steht u.a. [[...]] zur Verfügung); (b) <html>, <head>, <body> usw (das "Grundgerüst" wird vom Wiki hinzugefügt); (c) <script>, <applet> usw.
  3. Die Wiki-Software fügt eine Anzahl von Elementen hinzu, die wie HTML aussehen und wie HTML-Tags benutzt werden, aber in HTML unbekannt sind.
    • In die Wikimedia-Software fest eingebaut sind Sprachelemente wie <gallery>; <nowiki> (Abschalten aller Wiki- und HTML-Formatierungen) sowie <onlyinclude>, <noinclude> und <includeonly> (Steuern der Vorlageneinbindung).
    • In der MosaPedia sind zusätzlich die Erweiterungen <imagemap>, <poem>, <pre>, <ref> und <references> installiert.
    • In der MosaPedia noch nicht installiert, aber in der Wikipedia: u.a. <math> <categorytree> <syntaxhighlight>
  4. Tags mit modifizierter Bedeutung: <pre>

Wichtige HTML-Formatierungen

Für den "Hausgebrauch" sollen im folgenden einige häufig verwendete (und natürlich "erlaubte") HTML-Tags beschrieben werden. Eine ähnliche, aber etwas anders zusammengestellte Liste findet sich unter [1]. Eine Liste aller erlaubten Tags findet sich weiter unten, ausführlich unter [2].

Einige der hier aufgeführten Formatierungen sollten in Artikeln nur in Ausnahmefällen verwendet werden, auf Diskussions-, Projektseiten usw. werden sie jedoch häufig benötigt. (Zu den stilistischen Konventionen siehe #...?).

Wikitext Ergebnis
Zeilenumbruch (br=break)
vorher...<br>...nachher

# So.<br> Sagte er; aber
# muss man feststellen, dass hier
nicht alles passt.

vorher...
...nachher

  1. So.
    Sagte er; aber
  2. muss man feststellen, dass hier

nicht alles passt.

Kleinere Schrift (small)
Größere Schrift (big)
Das ist so!
<small>Meinst du wirklich?</small>
<big>Ja!</big>
Ja, gut, OK.

Das ist so! Meinst du wirklich? Ja! Ja, gut, OK.

Unterstreichen (u=underline)
Eingefügter Text (ins=inserted)
<u>Unterstrichen</u><br>
<ins>Eingefügt</ins>

Unterstrichen
Eingefügt

Durchstreichen (s=strikethrough)
Löschmarkierung (del=deleted)
<s>Durchgestrichen</s><br />
<del>Gelöscht</del>

Durchgestrichen
Gelöscht

Schrift fester Zeichenbreite (tt=teletype)
Quelltext oder Programmcode (code)
<tt>Schreibmaschine</tt><br />
<code>Quellcode</code>

Schreibmaschine
Quellcode

Kommentare
<!-- Bitte stehen lassen -->
Kommentare sind nur beim Bearbeiten sichtbar.

Kommentare sind nur beim Bearbeiten sichtbar.

Vorformatierter Text (pre=preformatted)

Achtung: <pre> hat im Wikicode eine
andere Wirkung als in "reinem" HTML.

<pre>
Voll '''fett''' und ''schräg'' ist das hier.
</pre>

<pre width="22" style="background:#ffe; 
                       border: 1px solid">
[[Datei:Beispiel.jpg]]
  [[421]], [[422]]
* <small>Zwerg</small>
* 1690&ndash;1695
</pre>
Voll '''fett''' und ''schräg'' ist das hier.
[[Datei:Beispiel.jpg]]
  [[421]], [[422]]
* <small>Zwerg</small>
* 1690–1695

HTML alternativ zum Wikitext

Für einige Formatierungen stehen sowohl Wiki-Syntax als auch eine HTML-Variante mit identischer oder ähnlicher Wirkung zur Verfügung.

In der Regel ist wegen der Kürze und der besseren Lesbarkeit die Wiki-Variante vorzuziehen.
In einigen Fällen ist die HTML-Variante klarer (d.h. besser zu verstehen), oder nur diese führt zum richtigen Ergebnis, wie das folgende Beispiel zeigt:

... stellte in '''s-Gravenhage'' sein neues Album ''Ma compil''' vor.<br>
Bei der Präsentation der neuen CD ''Ma compil''' in '''s-Gravenhage'' ...

... stellte in s-Gravenhage sein neues Album Ma compil vor.
Bei der Präsentation der neuen CD Ma compil in s-Gravenhage ...

... stellte in <i>'s-Gravenhage</i> sein neues Album <i>Ma compil'</i> vor.<br>
Bei der Präsentation der neuen CD <i>Ma compil'</i> in <i>'s-Gravenhage</i> ...

... stellte in 's-Gravenhage sein neues Album Ma compil' vor.
Bei der Präsentation der neuen CD Ma compil' in 's-Gravenhage ...

Übersicht
Wikitext HTML Ergebnis Austauschbar
Kursiv
''Kursiv''
<i>Kursiv</i>
Kursiv Ja
Fett
'''Fett'''
<b>Fett</b>
Fett Ja
Überschriften
==Überschrift2==
<h2>Überschrift2</h2>

Überschrift2

Bedingt
(siehe "Bemerkungen")
Absatz
(Wikitext: Leerzeile)
... gewesen ist.

Jahre später...
<p>... gewesen ist.</p>
<p>Jahre später...</p>

... gewesen ist.

Jahre später...

Ja
Tabellen
{| {{ Prettytable }}
|+ Ne Tabelle
|-
! Kopf !! Zeile
|-
| Inhalt || Zelle
|}
<table {{Prettytable}} >
    <caption>Ne
        Tabelle</caption>
    </caption>
    <tr>
        <th>Kopf </th>
        <th>Zeile</th>
    </tr>
    <tr>
        <td>Inhalt</td>
        <td>Zelle </td>
    </tr>
</table>
Ne Tabelle
Kopf Zeile
Inhalt Zelle
Ja
(Elemente nur zum Teil
miteinander "mischbar",
siehe "Bemerkungen")
Listen * # ; : ul ol li dl dd Ja(?)
div und span


Positivliste: Erlaubte Tags

Die folgenden HTML-Tags sind im Wikitext erlaubt, d.h. sie werden vom Wiki-Parser als gültig erkannt:
(Zusammenstellung aus http://en.wikipedia.org/wiki/Help:HTML_in_wikitext; ohne Anspruch auf Vollständigkeit)

<!-- ... -->   <del>          <ol>           <strong>
<abbr>         <div>          <p>            <sub>
<b>            <dl>           <pre> *        <sup>
<big>          <dt>           <rb>           <table>
<blockquote>   <em>           <rp>           <td>
<br>           <font>         <rt>           <th>
<caption>      <h1> - <h6>    <ruby>         <tr>
<center>       <hr>           <s>            <tt>
<cite>         <i>            <small>        <u>
<code>         <ins>          <span>         <ul>
<dd>           <li>           <strike>       <var>

*: Modifizierte Bedeutung durch Parser Extension

Negativliste: Nicht erlaubte Tags

Verbotene Tags werden vom Wiki-Parser deaktiviert: So wird z.B. <script> im Wikicode zu &lt;script&gt; im HTML umgewandelt und im Browser wiederum als <script> angezeigt. Unbekannte, falsch geschriebene oder an der falschen Stelle gesetzte Tags werden ebenso behandelt.

Die folgenden HTML-Tags sind im Wikitext nicht erlaubt, d.h. sie werden vom Wiki-Parser "unschädlich gemacht":

<a>            <dfn>          <kbd>          <param>
<acronym>      <dir>          <label>        <q>
<address>      <fieldset>     <legend>       <samp>
<applet>       <form>         <link>         <script>
<area>         <frame>        <map>          <select>
<base>         <frameset>     <menu>         <style>
<basefont>     <head>         <meta>         <tbody>
<bdo>          <html>         <noframes>     <textarea>
<body>         <iframe>       <noscript>     <tfoot>
<button>       <img>          <object>       <thead>
<col>          <input>        <optgroup>     <title>
<colgroup>     <isindex>      <option>

Die Liste erhebt keinen Anspruch auf Vollständigkeit. So gibt es in älteren HTML-Standards (und damit evtl. auch in Lehr- und Nachschlagewerken) zahlreiche weitere HTML-Tags, die hier nicht berücksichtigt sind.

HTML-Symbole

  • Liste Zeichenreferenz
  • Editierleiste?
  • Wikipedia-Konvention: (Sonder)Zeichen im Quelltext sind besser lesbar als HTML-Entities (müssen aber vom Zeichensatz des Bearbeiters unterstützt werden, und am Bildschirm klar unterschieden werden können -- s. Leerzeichen).

HTML-Dialekte

  • Transitional, Strict etc - Deprecated attributes, "quoting" etc.
  • XHTML - Balancierte Schachtelung
<br clear=both>
<br clear="both">
<br style="clear:both">
<br clear=both />
<br style="clear:both" />

Beobachtung: der Parser fügt das / ein.

Leerzeichen, Leerzeilen; Einrückungen, Abstände

Leerzeichen und Zeilenumbrüche werden in HTML geringfügig anders als im Wikitext interpretiert:

  • Mehrere Leerzeichen sind so viel wie ein Leerzeichen, ebenso wie im Wikitext
  • In HTML wirken Zeilenumbrüche genauso wie Leerzeichen, in Wikicode haben Zeilenumbrüche spezielle Bedeutung.
  • Im Inneren von Tags können (wirkungslose, erlaubte) Zeilenumbrüche zur Strukturierung des Quelltextes gesetzt werden
  • In Attributwerten <... name="wert" ...> gilt das Gesagte nicht

Es gibt verschiedene Arten von Leerzeichen, diese können nur durch HTML erzeugt werden. nbsp thinsp ensp emsp pro: optische Wirkung con: Quelltext schlechter lesbar

CSS

Wofür?

Wo?

  • in Tabellen
  • in HTML-Tags
  • script-Tag nicht erlaubt
  • CSS-Files readonly
  • Skins

Styles

background border margin padding align float clear

Classes

thumb tright, ... NavFrame (+JavaScript code)

Persönliche Werkzeuge