3.6 Syntax: Wiki versus HTML

From Wiki

Jump to: navigation, search

Autor: Melanie Weißenborn

MediaWiki stellt Dir zur Erstellung von Beiträgen eine systemeigene Auszeichnungssprache, die so genannte Wiki-Syntax, zur Verfügung. Diese stellt (nachdem man sich ein wenig damit beschäftigt hat) eine vereinfachte Alternative zu HTML (Hypertext Markup Language) dar. Allerdings lässt MediaWiki immer auch HTML-Tags zu. Kombinationen aus beiden Auszeichnungssprachen sind durchaus denkbar, sollten aber mit Rücksicht auf andere Autoren sparsam Einsatz finden. Um die Logik der Wiki-Syntax besser verstehen zu können, stellen wir nachfolgend HTML und Wiki-Syntax - anhand von ausgewählten Beispielen - gegenüber und zeigen Unterschiede auf.


Eines vorweg: Das wiki-Eingabefenster "versteht" viele HTML-Befehle. Wenn Du also gerne in HTML "codest", kannst Du die meisten Befehle auch im wiki-Eingafenster nutzen. Oder noch einfacher: Benutze einen wysiwyg-Editor, um eine HTML-Seite zu erstellen. Dann brauchst Du den durch den Editor erstellten Code nur in das wiki-Eingabefester zu kopieren. Das ist vor allem für Tabellen praktisch, kann aber auch zu Fehlern führen, weil in der wiki-Syntax eben nicht alles möglich ist, was HTML kann.


Contents

[edit]

Verlinkungen

Wiki-Syntax
HTML
Die Wiki-Syntax nutzt zur Verlinkung eckige Klammern, um den wesentlich komplexeren HTML-Code zu umgehen. Außerdem wird allein durch die Anzahl der eckigen Klammern bereits klar zwischen externen und internen Links unterschieden.
  • Interner Link: 
[[Name der Seite]]
Die Seite wird allein über den Namen angesprochen. Die Links sind nicht relativ.
  • Interner Link: 
<a href="../wiki/index.html">Name 
der Seite</a>
Interne Links werden stets relativ angegeben, also ausgehend von der Seite, von der aus man verlinkt.
  • Externer Link: 
[http://www.medienspielwiese.de]
  • Externer Link: 
<a href="http://www.medienspielwiese.de">
http://www.medienspielwiese.de</a>
Sind URL und Name des Links identisch, hat man in HTML wesentlich mehr Schreibarbeit.
In beiden Auszeichnungssprachen hat man die Möglichkeit, einen vom Link abweichenden Linktext zu definieren. Aber auch hier existieren Unterschiede:
  • Interner Link: 
[[Name der Seite | Anderer Linktext]]
Link und Linktext werden durch einen senkrechten Strich voneinander getrennt. Die Reihenfolge ist bindend.
  • Interner Link: 
<a href="../wiki/index.html">Anderer Linktext</a>
  • Externer Link: 
[http://www.medienspielwiese.de 
Anderer Linktext]
Bei externen Links wird auf den senkrechte Strich verzichtet.
  • Externer Link: 
<a href="http://www.medienspielwiese.de">
Anderer Linktext</a>
[edit]

Bilder

Wiki-Syntax
HTML
Wesentliche Unterschiede zwischen Wiki-Syntax und HTML zeigen sich auch beim Einbinden von Bildern. Allerdings machen es beide Auszeichnungssprachen gleichermaßen möglich, sowohl interne als auch externe Bilder einzubinden.
  • Bild (intern): 
[[Image:Name des Bildes.jpg]]
  • Bild (intern): 
<img src="../images/Name des Bildes.jpg"></img>
In HTML wird die Position des Bildes innerhalb der Ordnerstruktur relativ zur Datei, in die man das Bild einfügen möchte, angegeben. ACHTUNG: Das <img>-Tag funktioniert im MediaWiki nicht!


  • Bild (extern): 
http://www.kreativeinsatz.de/images/auge.jpg
  • Bild (extern): 
<img src="http://www.kreativeinsatz.de/
images/auge.jpg></img>
ACHTUNG: Das <img>-Tag funktioniert im MediaWiki nicht!
[edit]

Tabellen

Wiki-Syntax
HTML
Die größten Unterschieden zwischen HTML und Wiki-Syntax zeigen sich sicherlich bei der Erstellung von Tabellen. Ich, als regelmäßige HTML-Nutzerin, kann aus eigener Erfahrung sagen, dass ich doch etwas Zeit gebraucht habe, um die Logik zu durchschauen und soweit zu verinnerlichen. Alles aber eine Frage der Übung. 
{|
 |Zelle 1 
 |Zelle 2 
 |Zelle 3
 |-
 |Zelle 4 
 |Zelle 5 
 |Zelle 6
 |-
 |Zelle 7 
 |Zelle 8 
 |Zelle 9
|}
Ganz andere Syntax: Anfang und Ende der Tabelle werden durch {| |} gekennzeichnet. Am Beginn einer Tabellenzelle steht ein senkrechter Strich. Durch |- wird eine neue Zeile eingeleitet. 
 <table>
      <tr>
         <td>Zelle 1</td>
         <td>Zelle 2</td>
         <td>Zelle 3</td>
      <tr>
      <tr>
         <td>Zelle 4</td>
         <td>Zelle 5</td>
         <td>Zelle 6</td>
      <tr>
      <tr>
         <td>Zelle 7</td>
         <td>Zelle 8</td>
         <td>Zelle 9</td>
      <tr>
 </table>
Auch bei einer einfachen Tablle fällt der HTML-Code wieder etwas länger aus als in der Wiki-Syntax! Von der Logik her wird die Tabelle aber sowohl in Wiki-Syntax als auch in HTML nach und nach zeilenweise erzeugt. Für jede Zeile wird die Anzahl der Zellen separat definiert und von links nach rechts jede Zelle mit Inhalt gefüllt.
Angabe von Attributen 
{| border="1" width="70%"
! width="10%" align="right" | Zelle 1 
! width="20%" | Zelle 2 
! width="40%" | Zelle 3
|-
|Zelle 4 
|Zelle 5
|Zelle 6
|- valign="bottom"
| height="100" |Zelle 7
|Zelle 8 
|Zelle 9
|}
  • Globale Attribute (border="1"), die die gesamte Tabelle betreffen, werden wie auch in HTML im Tabellenkopf platziert.
  • Attribute für einzelne Zellen können mit ! oder mit einem zusätzlichen senkrechten Strich eingeleitet werden. Hinweis: Das ! definiert die Zelle gleichzeitig als Tabellenkopf und stellt ihn dementsprechend fett und ohne weitere Angabe der Textausrichtung zentriert dar.
  • Attribute, die die gesamte Zeile betreffen (z.B. valign="bottom"), werden nach dem |- geschrieben.

Das Ganze in HTML: 

 <table border="1" width="70%">
      <tr>
         <th width="10%" align="right">Zelle 1</td>
         <th width="20%">Zelle 2</td>
         <th width="40%">Zelle 3</td>
      <tr>
      <tr>
         <td>Zelle 4</td>
         <td>Zelle 5</td>
         <td>Zelle 6</td>
      <tr>
      <tr valign="bottom">
         <td height="100">Zelle 7</td>
         <td>Zelle 8</td>
         <td>Zelle 9</td>
      <tr>
 </table>
  • Auch HTML bietet Dir eine Unterscheidung zwischen Tabellenkopf (th) und normaler Zelle (td) an.
  • Attribute können wie in der Wiki-Syntax auf unterschiedlichen Ebenen und damit mit unterschiedlicher "Reichweite" definiert werden.
  • Trotz der Angabe von Attributen bleibt in HTML die Ausgangsstruktur erhalten. Ich persönlich finde, dass die HTML-Tabelle aufgeräumter und damit übersichtlicher wirkt als die gleiche Tabelle in der Wiki-Syntax.
[edit]

Tags in der Wiki-Syntax?

Auch die Wiki-Syntax kommt nicht vollkommen ohne die so genannten TAGS ("Auszeichner") aus. Es gibt auch hier einige Befehle, die sich eines öffnenen und eines schließenden Tags bedienen.

Beispiele:

  • <nowiki></nowiki>: Unterbindet ausdrücklich die Anwendung der Wiki-Syntax zwischen dem Tag.
  • <pre></pre>: Stellt vorformatierten Text genau so dar wie er eingegeben wird, umrahmt ihn mit einer "Ameisenlinie" und hinterlegt ihn grau.
  • <code></code>: Stellt Text als Quellcode in einer bestimmten Schriftart und grau hinterlegt dar.


[edit]

Zusammenfassung & Fazit

Die Wiki-Syntax macht Sinn. Sie wurde mit dem vorrangigen Ziel erdacht, den Autoren das Editieren zu erleichtern und dem Anspruch einer schnellen Bearbeitung von Artkeln, der hinter dem Namen "Wiki" steckt, gerecht zu werden. Die Beispiele haben gezeigt, dass ihr das gelingt. Der Schreibaufwand war stets sichtbar geringer als in HTML.


Für routinierte HTML-Nutzer dürfte allerdings vor allem die Syntax für Tabellen eine Umstellung bedeuten. Auch HTML-ferne Anfänger dürften hier einige Startschwierigkeiten haben. Denn gerade bei komplexeren Tabellen verliert man wesentlich schneller den Überblick als in HTML. Allerdings hat sich im Vergleich auch gezeigt, dass die Logik, die sich dahinter verbirgt, gar nicht so weit entfernt von der HTML-Logik ist.


[edit]

Weiterführende Links

SELFHTML
Das Online-Nachschlagewerk u.a. zu den Themen XHTML/HTML, CSS und XML.

Retrieved from "http://www.medienspielwiese.de/wiki/index.php/3.6_Syntax:_Wiki_versus_HTML"
Personal tools
0. Wiki Handbuch
2. Bevor es richtig losgeht