Benutzer:Lea b/Vorlagen programmieren

aus Wikipedia, der freien Enzyklopädie

Grundlagen s.a.

Bedingtes Einbinden von Quelltextblöcken

Tag-Kombination Auf Vorlagenseite? Einbindung? Anmerkung
keine Ja Ja Nur, wenn kein onlyinclude in der Vorlage ist.
<includeonly>…</includeonly> Nein Ja Nur, wenn kein onlyinclude in der Vorlage ist.
<noinclude>…</noinclude> Ja Nein Auch innerhalb von onlyinclude möglich.
<onlyinclude>…</onlyinclude> Ja Ja Text außerhalb wird nicht eingebunden.
<onlyinclude><includeonly>…
</includeonly></onlyinclude>		 Nein Ja Text außerhalb wird nicht eingebunden.

Unterseiten

s.a. Vorlage:Dokumentation#Unterseiten anlegen

Dokumentation

Für ausführliche Dokumentationen Unterseite anlegen: /Doku.

Einbinden der Dokumentation in die Vorlage mit <noinclude>{{Dokumentation}}</noinclude>


XML

s.a. 

<?xml version="1.0" encoding="UTF-8"?>
<?mediawiki "{{XML-Warnung}}"?>
 <TemplateUsage output="">
   <Group name="" showempty="">
     <Parameter name="" />
     <Parameter name="" label="" lentgh="" height="" null="" predefinded="">
       <Help>         </Help>
       <Condition>    </Condition>
       <Default>      </Default>
       <Value>        </Value>
       <AutoValue>    </Autovalue>
     </Parameter>
   </Group>
 </TemplateUsage>

Attribute von <Template Usage> und <Group>

  • output="collapse": nur Parameter welche einen Wert haben werden ausgegeben, der Quelltext enthält keine Zeilenumbrüche
    output="expand": Quelltext enthält auch leere Parameter, jeder Parameter steht auf einer eigenen Zeile.
  • showempty="": "true" → alle Parameter diser Gruppe werden im Quelltext angegeben. "false": Die Parameter der Gruppe werden nur ausgegeben wenn mind. einer einen Wert hat.

Attribute von <Parameter>

  • name="": Name des Parameters in der Vorlage
  • label="": Wie der Parameter im Vorlagenmeister genannt werden soll.
  • lenght="": Die Länge des Eingabefeldes für diesen Parameter (in Zeichen)
  • height="": Höhe des Eingabefeldes für diesen Parameter in Zeilen
  • null="": mögliche Werte sind true für optionale Parameter und false für Pflichtparameter.
  • predefinded="": true für vordefinierte Parameter, false für nicht vordefinierte Werte.

Kindobjekte von <parameter>

  • <Default>: Zur Festlegung eines Vorgabewerts mit dem das Eingabefeld immer vorausgefüllt wird.
  • <Help>: Hilfetext zum Parameter. Erscheint in der Statuszeile des Eingabeformulars wenn der Parameter aktiv ist.
  • <Value>: zur Angabe von Werten welche der Parameter annehmen darf. Jeder Parameter wird in ein eigenes Value-Tag eingeschlossen.
  • <AutoValue>: Wert welcher in die Vorlage eingefügt wird, wenn das Feld im Vorlagenmeister leer bleibt.

Tags

s.a.

  • <name>: Anfangs-Tag
  • </name>: Ende-Tag
  • <name/>: Unary-tag, haben keinen Inhalt
  • Element: Einheit aus Anfang, Inhalt und Ende
  • Attribute (auch Parameter oder Eigenschaften): Stehen im Anfangs-Tag.
    • Format: attribut="Wert"
    • Der Wert steht dabei immer zwischen ".

Tag-Namen

  • <span>....</span>: Universalelement für beliebige Textformatierungen. Wirkt im Gegensatz zum <div> auch innerhalb eines Absatzes. Bsp.: Zuweisung von class und style zu Textelementen.
  • <div atr1="Wert" atr2="Wert"...>...</div>: Definierung eines Elements auf der Textblockebene. Bsp.: Zuweisung von class und style zu Textblöcken.
  • <synthaxhighlight lang="">: Zur Darstellung von Programm-Quelltexten.

Attribute (Eigenschaften) class und style

  • class: dienen v.a. der Zuordnung von CSS. Gilt für alle Elemente. Mehrere Klassen werden durch Leerzeichen voneinander getrennt.
  • style: Wie code, gilt aber nur für ein Element.

Zusammenfassung

Style="clear: both; -moz-columns: x y; -webkit-columns: x y; columns: x y; display:; float:; height:; width:; overflow:; white-space:; padding: ; margin:; background: #RRGGBB; border: em solid #RRGGBB; border-radius:; line-height:; font-size:; color:; text-align:;vertical-align:;"

Spalten (s.a.)

Spalten werden mit -moz-columns: x y; -webkit-columns: x y; columns: x y; erzeugt. Es ist nötig dreimal die selben Angaben zu machen, da unterschiedliche Browser verschiedene Befehle zur Spaltenbildung benötigen.

  • x: Anzahl Spalten
  • y: Spaltenbreite (keine Angabe → automatische Spaltenbreite)

Formatierung von Elementen

 

display (s.a.)

Definiert die Art der Box

  • style="display:inline": Boxen auf einer horizontalen Linie, width ist wirkungslos.
    • horizontale Ausrichtung mit style="text-align:"
    • vertikale Ausrichtung mit style="vertical-align:"
  • style="display:block" gewohne Darstellung mit untereinander angeordneten, die ganze Breite einnehmenden Blöcken.
    • Element mittig ausrichten mit style="margin-left:auto; margin-right:auto"
  • style="display:inline-block": Mischung aus inline und block (aussen inline, innen block.
    • Elementbreite kann mit style="width:" festgelegt werden.
    • Ausrichtung erfolgt wie bei inline
  • style="display:flex" und style="display:flex" → flexible Layouts.


 

Ausrichtung

  • style="float: right" oder class="float-right": Element wird nach rechts ausgerichtet. class sorgt zusätzlich für einen Abstand zum Fliesstext.
  • style="float: left" oder class="float-left": Element nach links ausgerichtet
  • class="center": Element wird mittig ausgerichtet.
  • <div style="clear: both;"></div> bewirkt, dass nach Einbindung von Bildern oder Tabellen das Seitenlayout wieder über die ganze Breite reicht. (weitere Details)


 

Grösse (s.a.)

  • style="width:": Breite des Inhalts
  • style="height:": Höhe des Inhalts
  • style="min-width:": Mindestbreite (funktioniert auf Wikipedia nur in Tabellen)
  • style="min-height:": Mindesthöhe
  • style="max-width:": Maximalbreite (funktioniert auf Wikipedia nur in Tabellen)
  • style="max-height:": Maximalhöhe


 

overflow (s.a.)

Falls der Inhalt zu gross ist kann mit Overflow bestimmt werden was mit dem Überschuss geschieht.

  • style="overflow:auto": browserabhängige Darstellung, meist mit Scrollbalken
  • style="overflow:scroll": Inhalte per Scrollbalcken erreichbar.
  • style="overflow:visible": Inhalte sind sichtbar
  • style="overflow:hidden": Inhalte sind unsichtbar

Zudem kann die x-Achse overflow-x: unabhängig von der y-Achse overflow-y: codiert werden.


 

white space (s.a.)

Kontrolliert das Verhalten von Leerzeichen und Umbrüchen im Text.


 

Abstände (s.a. für Padding oderMargin)

  • Padding: Innenabstand (Inhalt-Rand)
    style="padding: w x y z" wobei:
    • w = Abstand zu Oberkante
      auch möglich:style="padding-top:"
    • x = Abstand zum rechten Rand
      auch möglich:style="padding-right:"
    • y = Abstand zum Unterrand
      auch möglich:style="padding-bottom:"
    • z = Abstand zum linken Rand
      auch möglich:style="padding-left:"
  • Margin: Aussenrand(Abstand zwischen zwei Elementen)
    style="margin: w x y z" wobei:
    • w = Abstand zu Oberkante
      auch möglich:style="margin-top:"
    • x = Abstand zum rechten Rand
      auch möglich:style="margin-right:"
    • y = Abstand zum Unterrand
      auch möglich:style="margin-bottom:"
    • z = Abstand zum linken Rand
      auch möglich:style="margin-left:"


 

Hintergrundfarben:

style="background: #RRGGBB" oder
class="hintergrundfarbe"

Rahmen

<span style="border: 0.1em solid #0000FF">Text innerhalb des Rahmens</span>

Variablen:

  • Ersetzen von Border durch
    border-top
    border-left
    border-right
    border-bottom
  • 0.1em steht für die Dicke der Linie
  • Ersetzen von solid durch dotted dashed double groove ridge inset outset
  • #0000FF steht für die Farbe des Rahmens. Hilfe:Farbtabelle
  • abgerundete Ecken:
    <span style="border: 0.1em solid #0000FF; border-radius: 1em;">Text</span>
    Ellipse:
    <span style="border: 0.1em solid #0000FF; border-radius: 4em/1em;">Text</span>
    Unterschiedliche Ecken:
    <span style="border: 0.1em solid #0000FF; border-radius: aem bem cem dem;">Text</span>
    a: Wert für oben links (hier 1em),
    b: Wert für oben rechts (hier 2em),
    c: Wert für unten rechts (hier 3em),
    d: Wert für unten links (hier 4em).
    abgerundete Ecken der Hintergrundfarbe ohne Rahmen:
    <br/> <span style="border: none; background-color: #00FF00; border-radius: 2em;">Text</span>

Textformatierung

 

Höhe der Zeile (s.a.)

  • style="line-height:": Angabe erfolgt
    • relativ zur Schriftgrösse wobei nach dem Doppelpunkt ein Prozentwert oder eine Fliesskommazahl (z.B. 1.2) stehen kann.
    • durch eine absolute Angabe (line-height: xem)
    • style="line-height:normal": Browser wählt eine vernünftige relative Zeilenhöhe


 

Schriftgrösse

  • style="font-size: xxem; line-height: xxem; color: #xxyyzz"


 

Schriftfarbe


 

Ausrichtung

  • style="text-align: left": linksbündig
  • style="text-align: right": rechtbündig
  • style="text-align: center" oder class="center": mittig.
  • style="text-align:justify;": Blocksatz
  • style="vertical-align: top": oben
  • class="toptextcells": oben für alle Zellen einer Tabelle
  • style="vertical-align: middle": mittig
  • style="vertical-align: bottom": unte

Attribute für Syntaxhighlight

s.a. <syntaxhighlight lang="" inline highlight="" line start="" strict id title dir class style>


 

Pflichparameter

  • lang=""Bezeichnet die Sprache deren Synthaxhighlight verwendet werden soll. Möliche Attribute sind:


 

optionale Parameter

  • inline: Um die Synthaxhighlight innerhalb eines Absatzes wiederzugeben (sonst entsteht mit source eine eigener Absatz)
  • highlight="x-y": Die Zeilen x-y werden farbig hinterlegt
  • line: Die Zeilen werden durchnummeriert. Soll nicht mit Zeile 1 begonnen werden kann noch start="Zeilennummer" hinzugefügt werden.
  • class und style: s.oben

Boxen

Eine Box besteht aus dem Inhaltsbereich mit Text und/oder Bild, dessen Grösse mit width und height vorgegeben wird, dem Innenabstand padding, dem Rahmen border und dem Aussenabstand margin

  • Mit dem <div>-Tag entsteht die Box rechts:
    Inhalt der Div-Box
    2. Zeile
    <div style="float: right; height: 5em; width: 10em; background: #00FF00; border: 0.1em solid #0000FF; padding: 0.3em; margin: 2em; text-align: center;">Inhalt der Div-Box <br/> 2. Zeile</div>


  • Mit dem <span>-Tag:
    Inhalt der Span-Box
    2. Zeile     <span style="float: right; height: 5em; width: 10em; background: #00FF00; border: 0.1em solid #0000FF; padding: 0.3em; margin: 2em; text-align: center;">Inhalt der Span-Box <br/>2. Zeile</span>
    oder auch:
    <span style="background: #00FF00; border: 0.1em solid #0000FF;"> Box ohne viel Codierung</span> Box ohne viel Codierung

Klappbox mit mw-collapsible

<div class="mw-collapsible mw-collapsed" data-expandtext=""  data-collapsetext="" style="">
  Titel der Klappbox
    <div class="mw-collapsible-content" style="">
      Inhalt der Klappbox
    </div>
</div>
 

dabei bedeutet:

  • mw-collapsibel: bewirkt die Einklappbarkeit
  • mw-collapsed: bewirkt, dass der Kasten von Anfang an eingeklappt ist.
  • data-expandtext: Text oder sonstige Daten deren Anklicken ein Aufklappen der Box bewirken.
  • data-collapsetext: Text oder sonstige Daten, deren Anklicken ein Zuklappen der Box bewirken.

Klappbox mit Nav

s.a.

Mit class="Nav...." 

<div class="NavFrame">
  <div class="NavHead">[... This is the title of your collapsible content ...]</div>
  <div class="NavContent">
    [... The content you want to hide goes here ...]
  </div>
</div>

Rollbox

<div style="height:; overflow:;">Inhalt</div> Wobei nach overflow: folgende Aussagen verfügbar sind s.a.

  • auto: browserabhängige Darstellung, meist mit Scrollbalken
  • scroll: Inhalte per Scrollbalcken erreichbar.
  • visible: Inhalte sind sichtbar
  • hidden: Inhalte sind unsichtbar

Zudem kann die x-Achse overflow-x: unabhängig von der y-Achse overflow-y: codiert werden.



Tabellen

 

Kopiervorlage einfache Tabelle

{| border="1pt black solid" style="border-collapse: collapse" cellpadding="3"
|}


 

Inhalt

ist alles was zwischen {| und |} steht.


 

neue Zelle

| zum Beginn einer Quelltextzeile.
|| innerhalb einer Quelltextzeile


 

neue Zeile

|-


 

Kopfzeile

! anstelle von | (→ Text wird fett und zentriert dargestellt)


 

Beschriftung der Tabelle

|+ Beschriftungstext
|+ align="bottom" style="caption-side: bottom" | Beschriftungstext unter der Tabelle


 

Wikitable

class="wikitable" im Tabellenkopf → schwach grau getönte Tabelle mit sichtbaren, wenngleich dezenten Zellgrenzen. Zwischen Zellinhalt und Rand wird etwas Luft gelassen.


 

Attribute

  • die gesamte Tabelle betreffend:
    {| style="" class=""
  • eine Zeile betreffend:
    |- style="" class=""
  • eine Zelle betreffend:
    | style="" class="" |Inhalt der Zelle


 

Tabellengrenzen

  • Tabellengrenzen zeichnen mit: border="xy" nach dem Initialen {|.
  • Zellgrenzen zeichnen:
Zeichnen der Oberkannte einer Zelle: style="border-top: 1pt black solid"
Zeinen des rechten Randes einer Zelle durch: style="border-right:medium solid"
  • border-collapse: innerhalb eines style-Tags
  • border-collapse: seperate → Rahmen benachbarter Tabellenelemente werden getrennt.
border-spacing: xxem legt den Abstand zwischen zwei Tabellenelementen fest.
  • border-collapse: collapse → Rahmen benachbarter Tabellenelemente werden zusammengefasst.


 

Spaltenbreite

  • Relative Breite: width=""xx%""
  • Effektive Breite: width: xxem
  • Flexible Breite: style="min-width: xx em; max-width: xx em"


 

Zellenabstände

{|border="x" cellspacing="xx" cellpadding=".."

  • Cellspacing: legt den Abstand zwischen den Zellen fest, dh. die Stegbreite zwischen zwei Zellen.
  • Cellpadding bestimmt den Abstand des Zellinhalts vom Zellrahmen.


 

Zellen verbinden

  • horizontal:
    |colspan="Anzahl der Zellen welche verbunden werden sollen"|Inhalt der verbundenen Zellen
  • vertikal:
    |rowspan="Anzahl der Zellen welche verbunden werden sollen"|Inhalt der verbundenen Zellen


 

Einklappen der Tabelle

  • mit: class="mw-collapsible"


 

Sortieren der Tabelle

  • mit class="unsortable"
  • Einzelne Spalten nicht sortieren:
    !class="unsortable"|Titel der Spalte

If-Funktion

{{#if: <Bedingung> | <Dann-Text> | <Sonst-Text> }}

Inhaltsverzeichnis

  • Erzwingen

__TOC__

  • Unterdrücken

__NOTOC__

  • Position ändern

<div style="float:right; margin-left:20px; margin-bottom:20px; font-size:0.9em;"> __TOC__ </div>

Pseudounterseite

Zu Beginn der Seite steht ein Verweis auf die Oberseite.
Standard:

{{Subpage|[[Name|Name]]}}

Optional:

{{Subpage|[[Seitenname|Seitenname]]|Optional1|Optional2}}
Optional können insgesamt bis zu drei Parameter angegeben werden.

Kategorienbaum

Tag - Element

<categorytree Par1="Wert" Parameter2="Wert"... >KatName </categorytree>

Wobei:

  • KatName der Name der Kategorie ist, für welche der Baum erstellt werden soll,
  • Par ein Parameter darstellt s.u.
  • Wert in " " steht.

Parser-Funktion

{{#categorytree:KatName | par1=wert | par2=wert |...}}

Wobei: KatName der Name der darzustellenden Kategorie ist und par die Parameter welche mit dem entsprechden Wert s.u. versehen werden können.

Parameter = Attribut

  • depth: Verästelungstiefe zu Beginn der Darstellung
    • mögliche Werte: Zahlen
  • mode: was im Baum gezeigt werden soll
    • mögliche Werte:
      • categories: zeigt nur Unterkategorien
      • pages: zeigt Unterkategorien und einzelne Seiten, aber keine Dateien.
      • all: zeigt Unterkategorien, Seiten und Dateien.
      • parents: zeigt übergeordnete Kategorien.
  • hideroot=on → der Kategorienamen wird nicht angezeigt.
  • hideprefix: legt fest, ob die Namensräume der Einträge angezeigt werden.
    • mögliche Werte:
      • categories: nur den Namensraum Kategorie: nie anzeigen.
      • always: immer den Namensraum verstecken.
      • never: nie den Namensraum verstecken.
      • auto: verstecke den Namensraum wenn nur Kategorien sichtbar sind.
  • showcount=on zeigt die Anzahl von Seiten und Unterkategorien an.
  • namespaces: zum Anzeigen mehrerer Namensräume
    • Werteeingabe: Namen der Namensräume durch Leerzeichen getrennt.
  • class style id: (nur beim Tag-Format) Standard-Attribute

Quellen

Abgerufen von „https://de.wikiup.org/index.php?title=Benutzer:Lea_b/Vorlagen_programmieren&oldid=198976451“