Knuddels-Wiki:Handbuch08/7: Unterschied zwischen den Versionen

K (Niveauvoll verschob die Seite Knuddels-Wiki:Hanbuch08/7 nach Knuddels-Wiki:Handbuch08/7, ohne dabei eine Weiterleitung anzulegen: Name angepasst)
K (Angepasst.)
Zeile 1: Zeile 1:
{{KWTut}}
{{Handbuch}}
==Tags==
==Tags==
Ein charakteristisches Merkmal der Knuddels-Wiki Texte sind die '''Tags'''. Sie sind den Auszeichnungssprachen XML und HTML verfasst. In diesem Artikel wird dir nun ein vollständiger Überblick zur Anwendung in Knuddels-Wiki-Projekten gegeben.  
Ein charakteristisches Merkmal der Knuddels-Wiki Texte sind die '''Tags'''. Sie sind den Auszeichnungssprachen XML und HTML verfasst. In diesem Artikel wird dir nun ein vollständiger Überblick zur Anwendung in Knuddels-Wiki-Projekten gegeben.  
Zeile 255: Zeile 255:




Nachdem wir uns nun ausführlich mit dem Thema Tags beschäftigt haben, folgt nun der Abschnitt [[Knuddels-Wiki:Tutorial08/8|Bilder]].
Nachdem wir uns nun ausführlich mit dem Thema Tags beschäftigt haben, folgt nun der Abschnitt [[Knuddels-Wiki:Handbuch08/8|Bilder]].

Version vom 31. Januar 2018, 20:09 Uhr

Tags

Ein charakteristisches Merkmal der Knuddels-Wiki Texte sind die Tags. Sie sind den Auszeichnungssprachen XML und HTML verfasst. In diesem Artikel wird dir nun ein vollständiger Überblick zur Anwendung in Knuddels-Wiki-Projekten gegeben.

Syntax

Die Syntax entspricht derjenigen von XML und HTML; zwischen beiden Sprachen gibt es minimale Unterschiede. Ein Tag hat im einfachsten Fall die Form <name> – nach der öffnenden spitzen Klammer < steht der Bezeichner. Er soll kleingeschrieben werden, wird aber auch mit Großbuchstaben verstanden. Die schließende spitze Klammer > beendet das Tag.

Grundsätzlich gibt es mehrere Fälle:

Anfang und Ende:

Ein Textabschnitt wird von zwei Tags eingeschlossen, die den gleichen Bezeichner tragen. Das abschließende Tag führt zu Beginn einen Schrägstrich:<name>………</name>

  • Dem eingeschlossenen Bereich sollen dadurch bestimmte Eigenschaften zugewiesen werden.
  • Die gesamte Einheit aus Anfang, Ende und Inhalt nennt man Element.
  • Elemente können ineinander verschachtelt sein; allerdings muss ein inneres Element dann vollständig in einem äußeren Element enthalten sein.

unary tag wie <references /> (alleinstehend):

  • Sie haben keinen Inhalt; können aber steuernd wirken.
  • In Texten, die auch gelegentlich von Menschen gelesen werden (wie das regelmäßig bei Wikitexten der Fall ist), schreibt man zur besseren Lesbarkeit ein Leerzeichen vor den Schrägstrich, um das Tag sicher und fehlerfrei von der binary-Variante unterscheiden zu können, z. B. bei <references /> vs. </references>.

Leeres Element (etwa <div></div>):

  • Bei den Wiki-Extensionen kann dies immer durch das kürzere und schneller erfassbare unary tag ersetzt werden, wie das auch in XML vorgesehen ist.
  • In HTML wird immer noch eine Unterscheidung getroffen zwischen Tags, die nie Inhalt enthalten können (void), und solchen, die prinzipiell Inhalt enthalten könnten, nur jetzt gerade leer sind. Im ersten Fall muss ein unary tag verwendet werden, im zweiten Fall (empty) darf kein unary tag benutzt werden. Dies kann insbesondere bei leerem <div> zu Schwierigkeiten führen.

Vorlagenprogrammierung:

  • Hier können Tags mittels der Funktion #tag: der normalen Verarbeitung zunächst entzogen werden.

Attribute

Weiterhin gilt:

  • Innerhalb von Tags sind Attributzuweisungen möglich. Dies gilt allerdings nur für das erste Tag (öffnend oder alleinstehend).
  • Sie haben das Format attribut="Wert usw."'
  • Attributwerte sollen in " ASCII-Zeichen, eingeschlossen werden (möglich, aber nicht üblich wären auch Apostroph ' als ASCII-Zeichen). Besteht der Attributwert nur aus einer Zahl oder einem einzelnen Wort
  • Innerhalb der Tags dürfen außer dem Namen des Tags und der Attributzuweisungen keine anderen Inhalte stehen.
  • Zeilenumbrüche zwischen Attributzuweisungen sind zulässig, um lange Tags mit vielen Attributen übersichtlicher zu gestalten; jedoch keine Leerzeilen.
  • Attribute dürfen sich in einem Tag nicht wiederholen.

Einige häufige Standard-Attribute sind:

  • class=
  • id=
  • style=
  • lang=
  • title=

Ob sie im konkreten Einzelfall auch wirksam sind, hängt vom Tag ab.

class

Die Klassen sind insbesondere wichtig für die Zuordnung von CSS.

Achtung: Falls mehrere Klassen angegeben werden, müssen sie durch Leerzeichen voneinander getrennt werden; nicht mit Komma: class="wikitable float-right"

Eine projektweit definierte Klasse ist error, mittels der auf allen Seiten Fehlermeldungen aufgefunden und einheitlich formatiert werden können.

id

Damit lassen sich Fragmente bilden, mit denen sich die Tags direkt verlinken lassen. Für den Identifizierer gibt es Regeln:

  • Identifizierer müssen mit einem Buchstaben beginnen und dürfen kein # enthalten.
  • Sie sollten zur besseren Lesbarkeit in allen Situationen nur aus bestimmten ASCII-Zeichen gebildet werden, nämlich:<br />A-Z a-z 0-9 . - / ( ) , ;
  • Identifizierer dürfen sich auf einer Seite nie wiederholen.
  • Sie sollten möglichst kurz und inhaltlich prägnant sein (Schlagwort), und von Menschen zweifelsfrei interpretiert und unterschieden werden

style

Während mit class= CSS-Formatierungen für alle Elemente gleichzeitig zugewiesen werden, lässt sich mit style= ein einzelnes Element in einem bestimmten Stil darstellen.

lang

In der Vorlagenprogrammierung wird gelegentlich das Attribut lang= benutzt. Es wird dem Element eine menschliche Sprache zugewiesen. lang="fr" kennzeichnet als französisch, lang="de-AT" als österreichisch.

Das kann durch Screenreader oder zur Auswahl besonders geeigneter Schriftarten ausgenutzt werden.

Die Verwendung eines XML-Namensraums, also xml:lang="it", ist weder hier noch anderswo zulässig.

dir

Schreibrichtung (Projektstandard: von links nach rechts); die Zuweisung wird in Artikeln nicht direkt verwendet.

title

Auf allen sichtbaren Elementen wird der Inhalt als Tooltip dargestellt; in der Regel aber nur auf Desktop-Geräten und nicht auf Mobilgeräten mit Touchscreen. Der Inhalt des Atttributs ist einfacher Text ohne Markup; ein Zeilenumbruch kann mittels # erzeugt werden.

Mit der Zuweisung einer leeren Zeichenkette title="" würde sich der Tooltip umgebender Bereiche unterdrücken lassen.

Diese Funktionalität darf nur unterstützende und keine bedeutungstragende Informationen anbieten, da sie technisch nicht von jedem Leser wahrgenommen werden kann und Leser auch nicht vermuten können, dass sie gelegentlich an einer unscheinbaren Stelle mittels Mauszeiger weitere Texte sichtbar machen könnten. Insbesondere für laufende enzyklopädische Artikeltexte ist dies nicht geeignet; bei Funktionsseiten und interaktiven grafischen Elementen kann der Leser auf die Möglichkeiten hingewiesen werden.

Wiki-Erweiterung

In der deutschsprachigen Wikipedia sind neben der Basis-Wikisyntax die folgenden nur in Wikis gültigen Tag-Bezeichner definiert:

categorytree, ce, charinsert, chem, gallery, graph, hiddentext, hiero, imagemap, includeonly, indicator, inputbox, maplink, math, noinclude, nowiki, onlyinclude, poem, pre, ref references, score, section, (source) syntaxhighlight, templatedata, timeline

charinsert

Dieses Element ist ausschließlich dafür vorgesehen, Verlinkungen zum Einfügen von Text-Elementen in das Bearbeitungsfeld zu programmieren. Der eingeschlossene Bereich wird umgewandelt in ein Link, das die wikibits-Funktion insertTags() aufruft. Derartige Links sind mit sonstiger Wikisyntax nicht möglich.

nowiki

Im von <nowiki>……/nowiki> umschlossenen Bereich hat die Wiki-Syntax keine Wirkung.

  • Alternativ kann man auch Entities verwenden, wenn nur wenige Zeichen maskiert werden sollen. Das ist in einem normalen Quelltext jedoch weniger gut lesbar und wäre eher etwas für die Vorlagenprogrammierung.

Mit nowiki /> als unary tag wird die Wiki-Verarbeitung unterbrochen; das wird bei Zusammensetzungen mit Wikilinks benutzt, wenn das anschließende Wort nicht als Linktitel dargestellt werden soll.

Soll nowiki zwar im Prinzip Verlinkungen und andere Syntaxelemente unwirksam machen, jedoch Variablen auswerten, lässt es sich für die Vorlagenprogrammierung und interne Dokumentationen mittels der Funktion #tag: darstellen: <syntaxhighlight> lang="text" style="margin-left:2em"> {{#tag:nowiki| ... {{PAGENAME}} ... }} </syntaxhighlight>

Basis-Syntax

In jedem Projekt werden folgende eingebaute Elemente interpretiert:

hiddentext, includeonly, noinclude, nowiki, onlyinclude

Zusätzlich kann jedes Projekt individuell optionale Software-Komponenten zusammenstellen, die Extensionen

HTML-Philosophie

Die in unserem Wikitext erlaubten HTML-Elemente tragen nach zwei Methoden zum dargestellten Text bei:

  1. Inline-Elemente – sie beeinflussen die Schriftgestaltung innerhalb eines Fließtextes; also dessen Farben, Größe, Schriftart und mehr.
  2. Block-Elemente – sie arrangieren das Layout der Seite. Jedes Block-Element lässt sich als ein rechteckiges Zettelchen vorstellen; auf der Seite werden dann vom Browser all diese Rechtecke nebeneinander, selten ineinander und ansonsten untereinander angeordnet.
  3. Kommentare sind zwar erlaubt, wirken aber nicht auf das generierte HTML-Dokument.

Inline-Elemente

  • Das universelle Inline-Element in HTML heißt <span>.
    • Dies ist nur sinnvoll, wenn ihm auch Attribute mitgegeben werden.
  • Weitere gebräuchliche wären beispielsweise: <small>, sub>, <sup>, <code>
  • In der Regel treten Inline-Elemente paarig auf, also mit Anfangs- und End-Tag, und erwarten Textinhalt dazwischen.
  • <br /> ist eine Ausnahme davon, ist Teil des Fließtextes und ebenso das seltene < wbr />.

Innerhalb der Spannweite eines Inline-Elements darf niemals ein Block-Element auftreten; auch nicht das Ende eines Absatzes.

  • <code> erlaubt auch keinen Zeilenumbruch, da es nur für Einzelwörter oder kurze Wortgruppen gedacht ist.

Der einfache Text, ggf. streckenweise mit Inline-Elementen besonders formatiert, wird (typischerweise als Fließtext in ein Block-Element „hineingegossen“.

Block-Elemente

  • Das universelle Block-Element in HTML heißt <div>. Es wird in der Regel ein Attribut tragen.
  • Block-Elemente bedürfen in HTML nahezu immer eines Anfangs- und End-Tags; zumindest sofern im Wikitext erwünscht.

Von den Elementen der Wikisoftware sind Block-Elemente:

    • Alle Absätze (etwa durch Leerzeile beendet).
    • Alle Überschriften.
    • Alle Aufzählungen und Listen und jedes einzelne Element darin.
    • Alle Tabellen, Tabellenzeilen und einzelne Tabellen-Zellen.
    • Vorformatierter Text mit einem Leerzeichen zu Beginn der Zeile.
    • <pre>, wodurch ein HTML-Element gleichen Namens maskiert wird.

Block-Elemente können einfachen Text (ggf. streckenweise mit Inline-Elementen formatiert) sowie andere Block-Elemente enthalten.

Sie können zentriert ausgerichtet sein oder für den Layoutfluss adressiert werden; zumindest das Element als Ganzes, etwa die gesamte Tabelle.

Sinnvolles HTML für Artikel und Seitentexte

Uneingeschränkt auf allen Seiten sinnvoll ist nur ein kleiner Teil an Elementen aus der allgemeinen Hypertext Markup Language:

<!--…-->, br, code, div, small, sub, tt,

Im laufenden Artikeltext sind ungewöhnliche Formatierungskonstrukte für die anderen Autoren unverständlich und störend; hier sollten sie in allgemein verwendbare Vorlagen mit einem sprechenden Namen eingebettet werden. Autoren allgemeiner Artikel sollen im Fließtext nicht mit kryptischen Syntaxbasteleien konfrontiert werden.

Bei Tabellen und schematischen Darstellungen im Artikel kann der Einsatz von Farben und besonderer Formate über die Standard-Elemente hinaus erforderlich und sinnvoll sein.

bdi, ruby, rb, rp, rt, rtc

– dazu würde auch das zurzeit von der Software nicht unterstützte rbc gehören.

Auf einer Positivliste vermerkte HTML-Elemente werden von der Wiki-Software in den Ausgabetext durchgereicht. Bei unbekannten Elementen werden auch die Tags dargestellt und unwirksam; Gleiches gilt für alle ausdrücklich verbotenen Elemente. Damit können zwar die meisten HTML-Elemente benutzt werden; es sind aber nicht alle HTML-Elemente im Wikitext wünschenswert und sinnvoll.

Kommentar

  • Ein Kommentar beginnt mit dem Code <!-- und endet mit -->.
  • Der Kommentar erscheint nicht auf der dargestellten Seite; er wird auch nicht als Kommentar in die generierte HTML-Seite eingebettet.
  • Andere Tags sollten innerhalb von Kommentaren nicht auftreten, auch nicht -- als Zeichenkette und die Zeichen < > möglichst auch nicht.
  • Als Kommentare sind vorgesehen:
    • Technische Hinweise für Bots, Skripte und Autoren, etwa
      • !-- sic! -->

br

  • Das Element <br /> erzeugt einen Zeilenumbruch innerhalb eines Textblocks.
  • Am Ende von Textblöcken ist <br /> unwirksam und deshalb überflüssig. Das können beispielsweise sein: Ein Absatz, eine Aufzählungsposition, Tabellenzellen oder Bildlegenden. Am Anfang eines solchen Blocks könnte ein Umbruch ebenfalls wirkungslos sein.
  • Das Element <br /> hat keine gültigen Attribute; insbesondere nicht clear=.
  • Zur Typografie gilt:
    • Im Fließtext von Artikeln ist ein Abbruch des Leseflusses unerwünscht. Entweder beginnt man einen neuen Gedanken und macht dazu einen neuen Absatz, oder man setzt den Gedankengang in derselben Zeile fort.
    • Sinnvoll sind Zeilenumbrüche dort, wo auf begrenztem Raum eine optische Gliederung erfolgen soll: Tabellenzellen und Bildlegenden; auch die inhaltliche Gliederung einer einzelnen Aufzählungsposition (Listenpunkt) ohne Beginn einer weiteren Nummerierung oder eines zusätzlichen Aufzählungszeichens.
    • Zwei aufeinanderfolgende Zeilenumbrüche sind in der Regel nicht sinnvoll; hier ist ein Absatz zu machen.
  • Das <br /> kann innerhalb einer Quelltext-Zeile stehen, eine neue Quelltext-Zeile muss nicht begonnen werden.
  • In HTML4 war die Schreibweise nur <BR>, anders das <br /> der XHTML-Spezifikation. Das funktioniert auch, intern werden alle diese Tags XML-konform in <br /> umgewandelt. Es ist zwingend ein unary tag; <br></br> sind daher zwei Zeilenumbrüche und kein leeres Element.

code

Mittels <code>……</code> werden im laufenden Text Bereiche in Schreibmaschinenschrift dargestellt. Damit sind Buchstaben deutlich unterscheidbar; etwa style="white-space: nowrap">i I l 1 | können nicht verwechselt werden. Das ist für Computercode interessant.

  • Wikisyntax wird innerhalb des Bereichs ersetzt.
  • Mittels <code> wird standardmäßig ein Rahmen dargestellt; das Element ist nur für sehr kurze, also einzeilige Schlüsselwörter oder Textsequenzen vorgesehen. Ein Zeilenumbruch ist nicht sinnvoll. Mehrzeilige Textpassagen können mittels <tt> in Schreibmaschinenschrift dargestellt werden.
  • Wenn ein ganzer Textblock in Artikeln dargestellt werden soll, empfiehlt sich der Einschluss mittels style="white-space:nowrap">syntaxhighlight lang="text"> .
    • Zurzeit wird der code-Bereich auf weißem Hintergrund dargestellt. Das ist normalerweise nicht zu bemerken und wird wohl eines Tages entfallen; geht auch noch auf frühere Einsatzzwecke zurück.
    • Linktexte sind damit aber auch nicht erkennbar, wenn die Ausdehnung von Verlinkung und Code-Block gleich sind. Dafür und bei farbigem Hintergrund muss noch auf <tt> ausgewichen werden, oder die <code>-Tags müssen die vollständige Verlinkung umschließen.
  • Wenn der Zeilenumbruch in einer kurzen Code-Sequenz vermieden werden soll, lässt sich schreiben:
    <code style="white-space: nowrap">……</code>
    Längere Sequenzen gehören in einen eigenen Block.
  • <code></nowiki''' ist Nachfolger des veraltenden '''<nowiki><tt>.

div

Mittels <div> wird ein Element auf der Textblocks-Ebene definiert. Ein Textblock beginnt im Regelfall in einer neuen Zeile; ansonsten gehören auch Tabellenzellen und Bildlegenden dazu.

In Artikeln ist außerhalb von schematischen Darstellungen nur eine einzige Verwendung erforderlich:

  • <div style="clear: both;"></div>

Damit wird bewirkt, dass nach Einbindung von Bildern oder Tabellen das Seitenlayout wieder über die volle Breite reicht; erforderlichenfalls wird ein Leerraum bis unter das unterste vorangegangene Bild eingefügt.

Nicht zulässige und nicht von allen Browsern verstandene Formen sind

  • <br style="clear: both;" />
    • <br />nowiki>''' ist kein Element auf Textblock-Ebene, wie es für das Seitenlayout erforderlich wäre. * '''<nowiki><<div style="clear: all;" />
    • Das Schlüsselwort lautet both.
  • <div clear="all" />
    • clear ist kein standardisierter Attribut-Name.
  • <div style="clear: both;" />

Daneben wäre statt both auch noch left und right als Schlüsselwort vorstellbar; dies ist aber für die Gestaltung normaler Wiki-Seiten irrelevant.

small

  • Der Text wird eine Stufe kleiner geschrieben. Damit sollte man es im normalen Text bewenden lassen, nur im Formelsatz mittels <math> können weitere Verkleinerungen sinnvoll sein.
  • Oft ist eine kleinere Schrift typografisch aber überhaupt nicht sinnvoll; es könnte genausogut in normaler Schriftgröße geschrieben und dafür in Klammern gesetzt werden.
  • Innerhalb bereits kleiner geschriebener Bereiche ist eine weitere Verkleinerung teils technisch unwirksam (weil je nach Skin nicht relativ zur Umgebung gerechnet wird), teils führt dies dazu, dass Leser mit Augenproblemen den Text nicht mehr lesen können oder Endgeräte die Zeichen nicht mehr unterscheidbar darstellen. Innerhalb von sub und sup, Bildlegenden, ref soll small nicht benutzt werden.

sub sup

Die Elemente sub und sup bewirken die Tief- und Hochstellung des eingeschlossenen Textes. Dieser wird gleichzeitig kleiner geschrieben. Dabei soll kein zusätzliches <small> benutzt werden; auch sollen keine anderen sub oder sup enthalten sein. Für solche Fälle gibt es <math>.

tt

Das HTML-Element <tt>……</tt> bewirkte die Darstellung in Schreibmaschinenschrift.

  • Die Wirkung entspricht grundsätzlich der von <code>.
    • Es gibt Unterschiede betreffend Hintergrundfarbe (transparent) und Schriftgröße; auch abhängig vom Kontext und Skin.
    • Während <tt> auch mehrzeilige Textpassagen erlaubt, ist <code> standardmäßig mit einem Rahmen umgeben und nur für sehr kurze, also einzeilige Schlüsselwörter oder Textsequenzen vorgesehen.

<tt> ist (mit HTML5) eine veraltete und langfristig nicht mehr unterstützte Notation in HTML. Weil sie jedoch sehr leicht zu tippen ist, wird dies aber noch häufig in Wikitexten anzutreffen sein. Sollte sie einmal nicht mehr von Browsern unterstützt werden, kann ihre Wirkung sehr leicht durch ein MediaWiki-Element gleicher Syntax wahrgenommen werden.


Nachdem wir uns nun ausführlich mit dem Thema Tags beschäftigt haben, folgt nun der Abschnitt Bilder.