Zum Inhalt springen

Vorlage:HTMLTag/Doku

Aus Wikibooks

Verwendung

[Bearbeiten]

Mit dieser Vorlage können HTML-Elemente in einer Vorlage eingebunden werden. Diese Vorlage dient als Hilfe zur Vorlagenprogrammierung und sollte nicht direkt in Artikeln verwendet werden.

Die Parameter

[Bearbeiten]

Der inhalt Paramter

[Bearbeiten]

Der Inhalt des HTML-Elementes wird über inhalt eingebunden. Beispielsweise ist

{{HTMLTag|inhalt=Text}}

äquivalent zur Definition

<div>
Text
</div>

Hinweis: Es gibt ein paar kleine Unterschiede, die aber in den folgenden Parameter erläutert werden.

Der Parameter inline

[Bearbeiten]

Für Wikitext ist es ein Unterschied, ob

<div>... Text ...</div>

oder

<div>
... Text ...
</div>

definiert ist. Im zweiten Beispiel wird nämlich der Text in ein zusätzliches <p>-Tag eingeschlossen und damit erhält man den HTMl-Code

<div><p>... Text ...</p></div>

Wenn der HTML-Tag größeren Wikitext mit Listen, Tabellen oder mehreren Paragraphen enthält, dann ist es notwendig, dass der Code wie im zweiten Beispiel geschrieben wird. Dementsprechend verhält sich diese Vorlage auch wie der Code im zweiten Beispiel. Ist aber inline=ja gesetzt, wird kein umschließender <p> wie im ersten Beispiel erzeugt. Dies ist notwendig, wenn der Inhalt dieser Vorlage nur Inline-Text ist.

Der Parameter html-tag

[Bearbeiten]

Standardmäßig wird ein <div> verwendet. Wenn man einen anderen HTML-Tag einbinden möchte, kann man hierfür den Parameter html-tag verwenden. Mögliche Werte sind alle HTML Blockelemente.

Beispiel:

{{HTMLTag
 |html-tag=pre
 |inhalt=Dieser Text ist in einem pre-Tag eingeschlossen.
}}

Ergebnis:

Dieser Text ist in einem pre-Tag eingeschlossen.

Der Parameter float-objekte-beachten

[Bearbeiten]

Normalerweise werden andere gefloatete Objekte zur eigenen Breitenbestimmung nicht beachtet. Für diese Vorlage wurde aber ein Trick angewendet, um gefloatete Objekte zur eigenen Breitenbestimmung zu beachten (siehe http://stackoverflow.com/questions/23897328/consider-floated-elements-for-the-width-of-blocks ).

Normales Verhalten:

<div style='margin: 0 50px; float: right;'>[[File:Dawn on cloud nine.jpg|200px]]</div>

{{HTMLTag
 |css=border: 1px solid grey; padding: 10px; min-width: 15em;
 |inhalt={{Blindtext}}
}}

Ergebnis:

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Wenn du aus irgendwelchen Gründen diesen Bugfix nicht haben möchtest, dann musst du float-objekte-beachten=nein setzen.

Verhalten mit float-objekte-beachten=nein:

<div style='margin: 0 50px; float: right;'>[[File:Dawn on cloud nine.jpg|200px]]</div>

{{HTMLTag
 |css=border: 1px solid grey; padding: 10px; min-width: 15em;
 |float-objekte-beachten=nein
 |inhalt={{Blindtext}}
}}

Ergebnis:

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Der Parameter nomobile

[Bearbeiten]

Ist nomobile=ja gesetzt, dann wird das HTML-Element nicht in der mobilen Ansicht angezeigt.

Der Parameter noprint

[Bearbeiten]

Ist noprint=ja gesetzt, dann wird das HTML-Element nicht in der Druckversion der Seite angezeigt.

Der Parameter mf-id

[Bearbeiten]

Ist mf-id gesetzt, dann wird id="mf-{{{mf-id}}}" im HTMLTag eingebunden. Dies braucht man eventuell für die mobile Version einer Seite. Siehe mw:Mobile_Gateway/Mobile_homepage_formatting für nähere Informationen. Der Parameter id muss für die Verwendung von mf-id ungesetzt sein.

Der Parameter clear

[Bearbeiten]

Standardmäßig ist für ein Kasten die CSS-Eigenschaft clear ungesetzt. Mit Hilfe des Parameters clear kann diese Eigenschaft gesetzt werden. Es sind alle Werte erlaubt, die auch für clear erlaubt sind (also zum Beispiel both, left oder right).

Der Parameter id

[Bearbeiten]

Setzt das Attribut id des HTML-Elements.

Der Parameter css

[Bearbeiten]

Mit css kann weiteres CSS definiert werden. Dieser Parameter, welcher auch in Vorlagen wie Vorlage:Kasten zur Verfügung steht, sollte nur in der Programmierung neuer Vorlagen benutzt werden.

Der Parameter class

[Bearbeiten]

Mit dem Parameter class können weitere CSS-Klassen für das HTML-Element definiert werden.

Vorlagen-Spezifikation

Vorlage zur Einbindung von HTML-Tags.

Vorlagenparameter[Vorlagendaten bearbeiten]

ParameterBeschreibungTypStatus
Inhaltinhalt

Der Inhalt des Kastens.

Wikitexterforderlich
Inline?inline

Setze diesen Parameter auf „ja“, wenn der Inhalt nur Inline-Text ist.

Standard
nein
Einzeiliger Textoptional
No-Mobile?nomobile

Setze diesen Parameter auf „ja“, wenn der Inhalt auf mobilen Seiten versteckt werden soll.

Einzeiliger Textoptional
No-Print?noprint

Setze diesen Parameter auf „ja“, wenn der Inhalt in der Druckversion der Seite versteckt werden soll.

Einzeiliger Textoptional
IDid

Setzt das HTML-Attribut id des HTML-Elements.

Einzeiliger Textoptional
Mf-IDmf-id

MF-ID (siehe Vorlagendokumentation)

Einzeiliger Textoptional
Clearclear

Wert der CSS-Eigenschaft „clear“.

Einzeiliger Textoptional
Tag-Namehtml-tag

Name des HTML Tag Namens für den Kasten

Standard
div
Einzeiliger Textoptional
Float-Objekte beachten?float-objekte-beachten

Sollen anderene gefloatete Objekte für die Breitenbestimmung berücksichtigt werden?

Standard
ja
Einzeiliger Textoptional
Weiteres CSScss

Weiteres CSS für den HTML Tag

Einzeiliger Textoptional
CSS-Klassenclass

CSS-Klassen für den HTML Tag

Einzeiliger Textoptional

Hinweis: Diese Vorlagen-Spezifikation wurde mit Hilfe der Parsererweiterung <templatedata> erstellt. Siehe Vorlage:TemplateData für eine Erklärung, wie du <templatedata> auf Wikibooks verwenden kannst.

<templatedata> wird unter anderem vom VisualEditor verwendet. Eine ausführliche Hilfe zu dieser Parsererweiterung findest auf der Seite Help:TemplateData.