Vorlage:HTMLTag/Doku

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:

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

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[Vorlagendaten bearbeiten]

Parameter		Beschreibung	Typ	Status
Inhalt	inhalt	Der Inhalt des Kastens.	Wikitext	erforderlich
Inline?	inline	Setze diesen Parameter auf „ja“, wenn der Inhalt nur Inline-Text ist. Standard nein	Einzeiliger Text	optional
No-Mobile?	nomobile	Setze diesen Parameter auf „ja“, wenn der Inhalt auf mobilen Seiten versteckt werden soll.	Einzeiliger Text	optional
No-Print?	noprint	Setze diesen Parameter auf „ja“, wenn der Inhalt in der Druckversion der Seite versteckt werden soll.	Einzeiliger Text	optional
ID	id	Setzt das HTML-Attribut id des HTML-Elements.	Einzeiliger Text	optional
Mf-ID	mf-id	MF-ID (siehe Vorlagendokumentation)	Einzeiliger Text	optional
Clear	clear	Wert der CSS-Eigenschaft „clear“.	Einzeiliger Text	optional
Tag-Name	html-tag	Name des HTML Tag Namens für den Kasten Standard div	Einzeiliger Text	optional
Float-Objekte beachten?	float-objekte-beachten	Sollen anderene gefloatete Objekte für die Breitenbestimmung berücksichtigt werden? Standard ja	Einzeiliger Text	optional
Weiteres CSS	css	Weiteres CSS für den HTML Tag	Einzeiliger Text	optional
CSS-Klassen	class	CSS-Klassen für den HTML Tag	Einzeiliger Text	optional

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.