Vorlage:HTMLTag

Aus Wikibooks
Zur Navigation springen Zur Suche springen

Informationen zu dieser Dokumentation
Vorlage HTMLTag [Bearbeiten]

Verwendung

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

Der inhalt Paramter

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

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

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

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:

Dawn on cloud nine.jpg

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:

Dawn on cloud nine.jpg

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

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

Der Parameter noprint

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

Der Parameter mf-id

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

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

Setzt das Attribut id des HTML-Elements.

Der Parameter css

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

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

ParameterBeschreibungTypStatus
Inhaltinhalt

Der Inhalt des Kastens.

Inhalterforderlich
Inline?inline

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

Standard
nein
Zeileoptional
No-Mobile?nomobile

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

Zeileoptional
No-Print?noprint

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

Zeileoptional
IDid

Setzt das HTML-Attribut id des HTML-Elements.

Zeileoptional
Mf-IDmf-id

MF-ID (siehe Vorlagendokumentation)

Zeileoptional
Clearclear

Wert der CSS-Eigenschaft „clear“.

Zeileoptional
Tag-Namehtml-tag

Name des HTML Tag Namens für den Kasten

Standard
div
Zeileoptional
Float-Objekte beachten?float-objekte-beachten

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

Standard
ja
Zeileoptional
Weiteres CSScss

Weiteres CSS für den HTML Tag

Zeileoptional
CSS-Klassenclass

CSS-Klassen für den HTML Tag

Zeileoptional

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.