Bearbeiten von MosaPedia:Formatierung/HTML und CSS

{{Inuse|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

== 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:

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

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

<!-- 420 --> 
In London begegnet [[Brabax]] ...
</pre>
<pre>[[Datei:Creck375.jpg|thumb|x200|[[375]]]] <!-- ausnahmsweise thumb, damit auf einheitliche Größe skaliert werden kann --></pre>
HTML-Kommentare können Zeilenumbrüche zur Strukturierung des Quelltextes kapseln

=== HTML-Elemente (Tags) ===
HTML-''Elemente'' bestehen aus einem einleitenden ''tag'' (z.B. <code>&lt;small></code>), einem abschließenden ''tag'' (z.B. <code>&lt;/small></code>) und dem Text dazwischen, also etwa: <code>&lt;small>kleiner Text&lt;/small></code>. 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:
# Erlaubte (also vom Wiki-Parser unterstützte) Tags: Diese werden bei der Übersetzung des Wikitextes in HTML unverändert gelassen.<br
  />(Dabei wird die korrekte Schachtelung überprüft, und ggf. wird die Eingabe syntaktisch korrigiert: aus <code>&lt;br></code> wird <code>&lt;br /></code>, usw.)
#* Beispiele sind <code>&lt;br></code>, <code>&lt;small></code>, <code>&lt;u></code>, <code>&lt;div></code>, ...
#* Für einige gibt es eine alternative Wiki-Schreibweise: z.B. <code><nowiki>''...''</nowiki></code> oder <code><nowiki><i>...</i></nowiki></code>
# Verbotene Tags: Hierbei handelt es sich zum einen um solche, für die im Wiki ein etwas abweichender Mechanismus existiert (z.B. <code><nowiki>[[...]]</nowiki></code> statt <code><nowiki><a href="...">...</a></nowiki></code>), und zum anderen um solche, die für in das System eingebettete Dokumente nicht benötigt werden (z.B. <code><nowiki><html></nowiki></code>, <code><nowiki><body></nowiki></code>) oder die das System durcheinanderbringen könnten (z.B. <code><nowiki><script></nowiki></code>).
#* 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; <br 
  /> Bemerkenswert: <code>table th tr td</code> sind erlaubt, <code>thead tbody tfoot</code> dagegen nicht.
# 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 <code>&lt;nowiki&gt;</code> (Abschalten aller Wiki- und HTML-Formatierungen) sowie <code><nowiki><onlyinclude></nowiki></code>, <code><nowiki><noinclude></nowiki></code> und <code><nowiki><includeonly></nowiki></code> (Steuern der Vorlageneinbindung).
#* In der MosaPedia sind zusätzlich die Erweiterungen <code><nowiki><imagemap></nowiki></code>, <code><nowiki><poem></nowiki></code>, <code><nowiki><pre></nowiki></code>, <code><nowiki><ref></nowiki></code> und <code><nowiki><references></nowiki></code> installiert.
#* In der MosaPedia noch nicht installiert: u.a. <code><nowiki> <math> </nowiki></code>
# 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 [http://www.mediawiki.org/wiki/Help:Formatting].
Eine Liste aller erlaubten Tags findet sich weiter unten, ausführlich unter [http://en.wikipedia.org/wiki/Help:HTML_in_wikitext].

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 [[#...?]]).
{| {{Prettytable}} 
|-
! 
! Wikitext 
! Ergebnis
|-
| Zeilenumbruch ''(br=break)''

<small>Zum Unterschied zwischen <code>&lt;br></code> und <code>&lt;br /></code>, und zu weiteren Anwendungen (<code>&lt;br clear="both" /></code>) siehe [[#...?]].</small>
| <pre width="45">
vorher...<br>...nachher

# So.<br> Sagte er; aber
# muss man feststellen, dass hier
nicht alles passt.
</pre>
|
vorher...<br>...nachher

# So.<br>Sagte er; aber
# muss man feststellen, dass hier
nicht alles passt.
|-
| Kleinere Schrift ''(small)''<br>Größere Schrift ''(big)''
| <pre width="45">
Das ist so!
<small>Meinst du wirklich?</small>
<big>Ja!</big>
Ja, gut, OK.
</pre>
|
Das ist so!
<small>Meinst du wirklich?</small>
<big>Ja!</big>
Ja, gut, OK.
|-
| Unterstreichen ''(u=underline)<br>Eingefügter Text ''(ins=inserted)''
| <pre width="45">
<u>Unterstrichen</u><br>
<ins>Eingefügt</ins>
</pre>
|
<u>Unterstrichen</u><br />
<ins>Eingefügt</ins>
|-
| Durchstreichen ''(s=strikethrough)''<br>Löschmarkierung ''(del=deleted)''
| <pre width="45">
<s>Durchgestrichen</s><br />
<del>Gelöscht</del>
</pre>
|
<s>Durchgestrichen</s><br />
<del>Gelöscht</del>
|-
| Schrift fester Zeichenbreite ''(tt=teletype)''<br>Quelltext oder Programmcode ''(code)''
| <pre width="45">
<tt>Schreibmaschine</tt><br />
<code>Quellcode</code>
</pre>
|
<tt>Schreibmaschine</tt><br />
<code>Quellcode</code>
|- 
| colspan="3" | <small>
<code>&lt;u></code>, <code>&lt;s></code> und <code>&lt;tt></code> sind ''typografische'' (auf das Aussehen bezogene), <code>&lt;ins></code>, <code>&lt;del></code> und <code>&lt;code></code> sind ''semantische'' (auf die Bedeutung bezogene) Textauszeichnungen. Beide haben ''hier'' jeweils dieselbe Wirkung (oder auch nicht, das hängt ggf. vom Browser ab).
</small>
|-
| Kommentare

<small>Kommentare werden bereits vom Wiki-Parser entfernt, sind also schon im HTML-Text nicht mehr sichtbar.</small>
| <pre width="45">
<!-- Bitte stehen lassen -->
Kommentare sind nur beim Bearbeiten sichtbar.
</pre>
|
<!-- Bitte stehen lassen -->
Kommentare sind nur beim Bearbeiten sichtbar.
|-
| rowspan="2" | Vorformatierter Text ''(pre=preformatted)''


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

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

<small>(Aus diesem Grunde taucht <code>&lt;pre></code> unter den installierten [[Spezial:Version#Installierte_Erweiterungen|Parser-Erweiterungen]] auf, obwohl es in HTML ein gleichnamiges Element gibt.)</small>


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

| <pre width="45">
<pre>
Voll '''fett''' und ''schräg'' ist das hier.
&lt;/pre>

<pre width="22" style="background:#ffe; 
                       border: 1px solid">
[[Datei:Beispiel.jpg]]
  [[421]], [[422]]
* <small>Zwerg</small>
* 1690&amp;ndash;1695
&lt;/pre>
</pre>
|
<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>
|-
|
<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&ndash;1695
|}

==== Positivliste: Erlaubte Tags ====
<div style="clear:both; class="NavFrame">
<div class="NavHead" style="text-align:left">Liste im Wikitext erlaubter HTML-Tags</div>
<div class="NavContent" style="text-align:left">
Die folgenden HTML-Tags sind im Wikitext erlaubt,
d.h. sie werden vom Wiki-Parser als gültig erkannt:<br>
(Zusammenstellung aus http://en.wikipedia.org/wiki/Help:HTML_in_wikitext; ohne Anspruch auf Vollständigkeit)
<pre width="60" style="margin-left:1em">
<!-- ... -->   <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>
</pre>
<code>*</code>: Modifizierte Bedeutung durch Parser Extension(?), siehe unten
</div><!-- Ende NavContent -->
</div><!-- Ende NavFrame -->

==== Negativliste: Nicht erlaubte Tags ====
<thead></thead><tbody></tbody><tfoot></tfoot>
<table {{Prettytable}} ><tr><td>Tabelle</td><td>Inhalt</td></tr></table>

{| {{ Prettytable }}
|-
|
|}
;HTML-Grundgerüst <code><head> <body> <title> <base> <meta></code>
;Links <code><a> <href></code>
HTML, CSS(?)
;Einbindung von Bildern  <code><img></code> stattdessen Wikisyntax benutzen <nowiki>[[Datei:Beispiel.jpg|...]]</nowiki>
;Skripte  <code><script></code> (PHP, JavaScript usw.)
Tabellen || <table> <th> <tr> <td> sind erlaubt (kommen in Wikitables vor)
Tabellen || <thead> <tbody> <tfoot> sind verboten (kommen in Wikitables nicht vor)

<div style="clear:both; class="NavFrame">
<div class="NavHead" style="text-align:left">Liste im Wikitext nicht erlaubter HTML-Tags</div>
<div class="NavContent" style="text-align:left">
Die folgenden HTML-Tags sind im Wikitext nicht erlaubt,
d.h. sie werden vom Wiki-Parser "deaktiviert":<br>
(Zusammenstellung ohne Anspruch auf Vollständigkeit)
<pre width="60" style="margin-left:1em">
<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>
</pre>
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.
</div>
</div>

=== 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
<pre>
<br clear=both>
<br clear="both">
<br style="clear:both">
<br clear=both />
<br style="clear:both" />
</pre>
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)

[[Kategorie: MosaPedia]]