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 zum einen um solche, für die im Wiki ein etwas abweichender Mechanismus existiert (z.B. [[...]] statt <a href="...">...</a>), und zum anderen um solche, die für in das System eingebettete Dokumente nicht benötigt werden (z.B. <html>, <body>) oder die 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, img, script; html, head, meta, body;
      Bemerkenswert: table th tr td sind erlaubt, thead tbody tfoot dagegen nicht.
  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 <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: u.a. <math>
  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)

Zum Unterschied zwischen <br> und <br />, und zu weiteren Anwendungen (<br clear="both" />) siehe #...?. 

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

<u>, <s> und <tt> sind typografische (auf das Aussehen bezogene), <ins>, <del> und <code> sind semantische (auf die Bedeutung bezogene) Textauszeichnungen. Beide haben hier jeweils dieselbe Wirkung (oder auch nicht, das hängt ggf. vom Browser ab).

Kommentare

Kommentare werden bereits vom Wiki-Parser entfernt, sind also schon im HTML-Text nicht mehr sichtbar. 

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

Kommentare sind nur beim Bearbeiten sichtbar.

Vorformatierter Text (pre=preformatted)


In "reinem" HTML funktioniert <pre> ähnlich wie "eingerückter Text" im Wikicode: Der Text zwischen <pre> und </pre> wird Zeichen für Zeichen in <tt>-Schrift wiedergegeben, einschließlich aller Leerzeichen und Zeilenumbrüche.

Achtung: Im Wikitext (also hier) hat <pre> abweichend vom HTML-Lehrbuch zusätzlich die Wirkung von <nowiki>: Alle Wiki- und HTML-Formatierungen werden unterdrückt, nur HTML-Zeichencodes (&...;) werden noch interpretiert.

(Aus diesem Grunde taucht <pre> unter den installierten Parser-Erweiterungen auf, obwohl es in HTML ein gleichnamiges Element gibt.)


"Eingerückter Wikitext" und der Text zwischen <pre>...</pre> werden mittels Rahmen und Hintergrund hervorgehoben. Diese Hervorhebung ist eine CSS-Eigenschaft; bei <pre> kann sie durch CSS-Attribute (<pre style="...">, siehe #...?) variiert oder auch ganz unterdrückt werden. 

<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

Voll '''fett''' und ''schräg'' ist das hier.

[[Datei:Beispiel.jpg]]
  [[421]], [[422]]
* <small>Zwerg</small>
* 1690–1695

Voll fett und schräg ist das hier.

Datei:Beispiel.jpg 

 421, 422
  • Zwerg
  • 1690–1695

Positivliste: Erlaubte Tags

Liste im Wikitext erlaubter HTML-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(?), siehe unten

Negativliste: Nicht erlaubte Tags

<thead></thead><tbody></tbody><tfoot></tfoot>

TabelleInhalt
HTML-Grundgerüst <head> <body> <title> <base> <meta>
Links <a> <href>

HTML, CSS(?)

Einbindung von Bildern <img> stattdessen Wikisyntax benutzen [[Datei:Beispiel.jpg|...]]
Skripte <script> (PHP, JavaScript usw.)
Tabellen ||
sind erlaubt (kommen in Wikitables vor)

Tabellen || <thead> <tbody> <tfoot> sind verboten (kommen in Wikitables nicht vor)

Liste im Wikitext nicht erlaubter HTML-Tags

Die folgenden HTML-Tags sind im Wikitext nicht erlaubt, d.h. sie werden vom Wiki-Parser "deaktiviert":
(Zusammenstellung ohne Anspruch auf Vollständigkeit) 

<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 ist insofern unvollständig, als es u.a. in älteren HTML-Standards (und damit evtl. auch in Lehr- und Nachschlagewerken) zahlreiche weitere HTML-Elemente gibt, 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)
Von „http://mosapedia.de/wiki/index.php/MosaPedia:Formatierung/HTML_und_CSS“
Persönliche Werkzeuge