MosaPedia:Formatierung/HTML und CSS

Aus MosaPedia

---

Version vom 17:45, 30. Jan. 2011

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-Tags 1.3 HTML-Symbole 1.4 HTML-Dialekte 1.5 Leerzeichen, Leerzeilen; Einrückungen, Abstände 2 CSS 2.1 Wofür? 2.2 Wo? 2.3 Styles 2.4 Classes

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-Tags

• Erlaubte (unterstützte) Tags: werden unverändert gelassen, ggf. syntaktisch korrigiert (XHTML)

br s u small (Disk.seiten)

• Verbotene Tags: werden "entschärft"

a, script; (table th tr td?) ebenso ungültige (falsch geschachtelte)

• Pseudo-Tags: noinclude etc; Parser-Erweiterungen: math poem ref references etc.
• Tags mit modifizierter Bedeutung: pre

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)