Fandom

Wikia Deutschland

Kommentare9

Portable Infoboxen erstellen

Störung durch Adblocker erkannt!


Wikia ist eine gebührenfreie Seite, die sich durch Werbung finanziert. Benutzer, die Adblocker einsetzen, haben eine modifizierte Ansicht der Seite.

Wikia ist nicht verfügbar, wenn du weitere Modifikationen in dem Adblocker-Programm gemacht hast. Wenn du sie entfernst, dann wird die Seite ohne Probleme geladen.

Herzlich willkommen zu meiner Hilfe für das Erstellen von portablen Infoboxen:

Im Grunde reichen eigentlich schon 5 verschiedene Tags, um eine einfache und strukturierte Infobox zu erstellen.

<infobox>

Jede Infobox wird mit einem öffnenden <infobox>-Tag begonnen und ebenso mit einem schließenden </infobox>-Tag geschlossen.

Wenn wir das hier eingeben:

<infobox>
</infobox>

erhalten wir eine Infobox ohne Inhalt, denn wir haben der Infobox ja keinen Inhalt gegeben.

Das erklärt auch schon den <infobox>-Tag, zumindest was einfache Infoboxen angeht.

<title>

Mit dem <title>-Tag kommen wir auch schon zum ersten Tag, der unserer Infobox etwas Inhalt verleiht.

Dieser Tag gibt uns die Möglichkeit, einen Titel für die Infobox anzugeben.

Dabei müssen wir jedoch auch festlegen, was auf Artikelseiten eingegeben werden muss, um den Titel anzugeben. Das source-Attribut gibt die Quelle an, aus der wir den Titel beziehen.

Zum Beispiel können wir den <title>-Tag so schreiben:

<title source="Titeltext"></title>

Das legt fest, dass wir auf der Artikelseite durch die Eingabe von

|Titeltext=

den Titel festlegen können.

Angewandt auf eine vollständige Vorlage sieht das dann so aus:

<infobox>
<title source="Titeltext"></title>
</infobox>

Das ist unser Resultat, wenn wir durch Eingabe des folgenden Codes unsere Infobox in einen Artikel einfügen:

{{Name der Infobox
|Titeltext=Käsebrot
}}
Somit haben wir gelernt, wie wir Infoboxtitel festlegen.


<image>

Eine Infobox sollte passenderweise auch Bilder enthalten, dafür haben wir den <image>-Tag. Wie bei dem <title>-Tag legen wir auch hier die Quelle mit dem source-Attribut fest. Ansonsten unterscheidet sich der <image>-Tag nur wenig vom <title>-Tag.

So schreiben wir den <image>-Tag:

<image source="Bild"></image>

Nun können wir per Eingabe von

|Bild=

auf der Artikelseite das Bild festlegen.

Binden wir den neuen Tag in unsere bestehende Infobox ein:

<infobox>
<title source="Titeltext"></title>
<image source="Bild"></image>
</infobox>

Hier sehen wir wieder anhand eines Beispieles, wie folgender Code aussieht:

{{Name der Infobox
|Titeltext=Käsebrot
|Bild=Oscar_Trophäe_Logo.jpg
}}

Tipp: Bei portablen Infoboxen ist es egal, ob du [[Datei:Oscar_Trophäe_Logo.jpg]] oder Oscar_Trophäe_Logo.jpg schreibst!

Anders als beim <title>-Tag, lassen sich mehrere <image>-Tags an beliebiger Stelle einfügen. Dadurch können beliebig viele Bilder untereinander angezeigt werden.

Jetzt sind wir auch dazu fähig, Bilder in unsere Infobox einzubinden.







<data>

Den eigentlichen Inhalt der Infobox bildet der <data>-Tag. Er fügt der Infobox beliebige Textinhalte hinzu.

Auch der <data>-Tag hat ein source-Attribut. Doch darüber hinaus gibt es auch den <label>-Tag, der die Bezeichnung neben dem eingegebenen Wert auf der Artikelseite festlegt.

Da das doch ziemlich kompliziert klingt, visualisieren wird das einmal:

<data source="DOB"><label>Geburt</label></data>

Nun können wir per Eingabe von

|DOB=

auf der Artikelseite den Text neben „Geburtsdatum“ festlegen.

Hier insertieren wir zur Verdeutlichung gleich 2 <data>-Tags in unsere Infobox:

<infobox>
<title source="Titeltext"></title>
<image source="Bild"></image>
<data source="DOB"><label>Geburt</label></data>
<data source="Essen"><label>Leibspeise</label></data>
</infobox>

Nun sieht unsere neue Infobox auf der Artikelseite so aus:

{{Name der Infobox
|Titeltext=Käsebrot
|Bild=Oscar_Trophäe_Logo.jpg
|DOB=09.07.1478
|Essen=Baguette
}}

Wie wir hier gut sehen, legt der <label>-Tag den Text fest, der neben unserem eigentlichen Eingabewert steht. Anders als der Eingabewert, ist der Text nicht auf der Artikelseite veränderbar.

Nun können wir unsere Infobox mit beliebigen Informationen ausstatten








<header>

Um etwas Struktur in die Infobox zu bringen, sortiert man die <data>-Tags nach Unterüberschriften. Diese Funktion bietet uns der <header>-Tag.

Der Tag ist eigentlich so simpel wie der <infobox>-Tag:

<header>Persönlichkeit<header>

Damit der Tag seine Wirkung zeigt, muss kein Text auf der Artikelseite angegeben werden. Der Text des Tags wird in der Vorlage selbst angegeben.

Er wird innerhalb des <infobox>-Tags, aber außerhalb von <image>-, <title>- und <data>-Tags eingefügt:

<infobox>
<title source="Titeltext"></title>
<image source="Bild"></image>
<header>Technische Daten</header>
<data source="DOB"><label>Geburt</label></data>
<header>Persönlichkeit</header>
<data source="Essen"><label>Leibspeise</label></data>
</infobox>

Nun kommen wir auch schon zu unserem Beispiel:

{{Name der Infobox
|Titeltext=Käsebrot
|Bild=Oscar_Trophäe_Logo.jpg
|DOB=09.07.1478
|Essen=Baguette
}}
Jetzt können wir unserer Infobox eine Struktur verleihen.












<default>

Ein sehr nützlicher Tag ist der <default>-Tag, denn er legt den Wert fest, wenn keiner auf der Artikelseite eingegeben wurde.

Verwendet wird er innerhalb von <data>-, <image>- und <title>-Tags:

<image source="Quelle"><default>Kein Bild.png</default></image>

Wenn wir jetzt auf der Artikelseite keinen Wert für „Quelle“ angeben, wird „Kein Bild.png“ automatisch als Wert genommen:

|Quelle=

So sieht unsere Infobox mit dem <default>-Tag aus:

<infobox>
<title source="Titeltext"><default>Kein Titel</default></title>
<image source="Bild"><default>Oscar_Trophäe_Logo.jpg</default></image>
<header>Technische Daten</header>
<data source="DOB"><label>Geburt</label><default>unbekannt</default></data>
<header>Persönlichkeit</header>
<data source="Essen"><label>Leibspeise</label><default>Mjam</default></data>
</infobox>

Hier sehen wir dies nochmal:

{{Name der Infobox
|Titeltext=
|Bild=Oscar_Trophäe_Logo.jpg
|DOB=
}}

Tipp: Man kann Zeilen auch einfach weglassen, damit der <default>-Tag-Wert genommen wird, so wie es hier bei „Essen“ getan wurde!

Nun können wir Standardwerte für unsere Infobox angeben.












Zusammenfassung

Das war es schon mit meiner Hilfestellung! Ich hoffe, dass diese verständlicher als die Standard-Hilfeseite ist. Wie man die Farbgebung und den Textstil von Infoboxen anpasst, erkläre ich euch vielleicht ein andermal. ;)

Nun noch als Schlusswort:

Jetzt wissen wir, wie wir strukturierte portable Infoboxen mit Titel, Bildern und Standardwerten erstellen.

Auch bei Fandom

Zufälliges Wiki