MosaPedia:Formatierung/HTML und CSS

Aus MosaPedia

(Unterschied zwischen Versionen)

Aktuelle Version vom 23:02, 4. Feb. 2011

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

1 HTML
- 1.1 Wann HTML benutzen?
  - 1.1.1 Konventionen
- 1.2 HTML-Elemente (Tags)
  - 1.2.1 Wichtige HTML-Formatierungen
  - 1.2.2 HTML alternativ zum Wikitext
    - 1.2.2.1 Übersicht
2 Überschrift2
3 CSS

[Bearbeiten] HTML

Tags, entities

[Bearbeiten] 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.

[Bearbeiten] 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

[Bearbeiten] 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:

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>
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.
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>
Tags mit modifizierter Bedeutung: <pre>

[Bearbeiten] 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

So.
Sagte er; aber
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

Bemerkungen

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

<u>, <s>, <tt> vs. <ins>, <del>, <code>: <u>, <s> und <lt> 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 werden bereits vom Wiki-Parser entfernt, sind also schon im HTML-Text nicht mehr vorhanden.; (Wenn der Wiki-Parser die Kommentare stehen lassen würde, so würden sie erst bei der Anzeige vom Browser unterdrückt werden. In diesem Falle wären sie z.B. für Suchmaschinen, die den HTML-Text "durchforsten", sichtbar.)

<pre>: In "reinem" HTML funktioniert <pre> ähnlich wie "eingerückter Text" oder <poem> 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.

Zur Demonstration das obige Beispiel ohne <pre>


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


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

Voll fett und schräg ist das hier.

 421, 422

Zwerg
1690–1695

[Bearbeiten] 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 ...

[Bearbeiten] Ü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(?)

Bemerkungen

Überschriften: Es gibt verschiedene Überschriften-Ebenen: im Wiki = == === ==== usw.; in HTML <h1>...<h6>.; Beide Varianten erzeugen automatisch einen Eintrag im Inhaltsverzeichnis.; Die Wiki-Variante erzeugt zusätzlich einen "Bearbeiten"-Link für den jeweiligen Abschnitt.

Absätze: Leerzeilen, <p>; Leerzeilen im Wikicode, die von "normalem Text" umgeben sind, erzeugen </p><p>; Wofür könnte explizites HTML-<p> gebraucht werden?

Tabellen: <table>, <th>, <tr>, <td> und <caption> sind erlaubt (kommen auch in Wikitables vor); <thead>, <tbody> <tfoot>, <colgroup> und <col> sind verboten

Die Wiki-Variante spart Schreibarbeit

Die Wiki-Variante ist toleranter gegenüber Schreibfehlern (?)

In der Wiki-Variante müssen {|, |-, !, |, |} jeweils am Zeilenanfang stehen (bis auf ...)

In der HTML-Variante können die Elemente beliebig eingerückt werden, um die Struktur zu verdeutlichen

Fazit: Die Wiki-Variante ist für einfache Tabellen zu bevorzugen; komplizierte Strukturen (z.B. Tabellen in Tabellen) sind in der HTML-Version besser zu überblicken.

Wiki-Syntax und HTML-Syntax können eingeschränkt vermischt werden (solange außen <table>...</table> und nicht {| ... |} verwendet wird?):

<table {{Prettytable}} >
|+ Ne Tabelle
    <tr>
         <th>Kopf </th>
         <th>Zeile</th>
    </tr>
|-
| Hier || steht
    <tr>
        <td>viel</td>
        <td>drin</td>
    </tr>
</table>

Ne Tabelle
Kopf	Zeile
Hier	steht
viel	drin

div und span

[Bearbeiten] 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

[Bearbeiten] Negativliste: Nicht erlaubte Tags

Verbotene Tags werden vom Wiki-Parser deaktiviert: So wird z.B. <script> im Wikicode zu <script> 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.

Beschreibung einiger im Wikitext nicht erlaubter HTML-Tags

HTML-Grundgerüst: <head>, <body>, <title>, <base>, <meta>
Frames: <frameset>, <frame>, <noframes>; Dito
Links, Einbindung von Bildern: <a>: <a href="..."> <a name="...">; <img>; stattdessen [[...]], [http://...], http://..., [[Datei:...]] <div id="..."> benutzen

HTML, CSS(?)

Einbindung von Bildern: <img src="..."> stattdessen Wikisyntax benutzen [[Datei:Beispiel.jpg|...]]
Tabellen: nur <table>, <th>, <tr>, <td>, <caption> sind erlaubt (kommen in Wikitables vor); <thead>, <tbody>, <tfoot>, <colgroup> und <col> sind verboten (Äquivalente kommen in Wikitables nicht vor)
Skripte: <script> (PHP, JavaScript usw.)
Ähnlich: <applet> <button> <menu> <object> usw. (Bedeutung?)

[Bearbeiten] 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).

[Bearbeiten] 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.

[Bearbeiten] 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

[Bearbeiten] CSS

[Bearbeiten] Wofür?

[Bearbeiten] Wo?

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

[Bearbeiten] Styles

background border margin padding align float clear

[Bearbeiten] Classes

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