1. Der Inhalt Deines Beitrags und das Design ist strikter bzw. besser von einander getrennt.
2. Generell ist das Design Deines erstellten Textes, des sog. Codes, logischer.
3. Änderungen lassen sich besser Durchführen. Dem ein oder anderen ist es vielleicht schonmal passiert, dass der Cursor auf einmal nur noch in kursiver Stellung ist und man nicht mehr im normalen Schriftbild schreiben kann. Bei mehrfachen Veränderungen an Texten kann es auch passieren, dass die Formatierungen gar nicht mehr korrigierbar sind.
4. Der Code ist „portabler“, das heißt Du kannst ihn kopieren, einfügen und alle Formatierungen bleiben erhalten.

¹ Es gibt im Internet Seiten, auf denen Farben stehen, die alle verwendet werden können. Zusätzlich stehen in der Leiste einige zu Auswahl. Du kannst die Farbe aber auch als Hexadezimalzahl schreiben. Das Beispiel mit dem türkisen Text ließe sich dann auch mit [color=#00ffff]türkis[/color] realisieren.

Ausführliche Beispiele

Da diese Schriftformatierungen die Anfänge sind, wenn man sich mit BBCode beschäftigt, sind hier nochmal sehr ausführliche Beispiele mitangegeben. In den nachfolgenden BBCode-Punkten werden die Tags nicht mehr mit Beispielen so detailliert erklärt.

Beispiel 1

Angenommen, Du möchtest Deinen Beitrag wie folgt gestalten:

Hallo zusammen,
ich möchte mit diesem Beitrag einen Vorschlag unterbreiten.

Dann kannst Du zunächst einmal den Inhalt genau so in den Editor schreiben, ohne dabei die Formatierungen zu beachten. Ist dies geschehen, so kannst Du das Wort „Beitrag“ markieren und auf das „B“ in der Leiste klicken. Analog verfährst Du mit dem Wort „Vorschlag“, nur dass Du hier auf das mit „I“ bezeichnete Symbol in der Leiste klickst. Dein Text müsste dann jetzt wie folgt aussehen:

Hallo zusammen,
ich möchte mit diesem [b]Beitrag[/b] einen [i]Vorschlag[/i] unterbreiten.

Bis hierhin ist alles richtig. Nun kannst Du unten auf den „Vorschau“-Button klicken, und Du siehst, wie Dein Beitrag bei Veröffentlichung schlussendlich aussehen wird. Das Wort „Beitrag“ zum Beispiel wird dann ohne eckige Klammern fettgedruckt.

Beispiel 2

Du kannst Wörter bzw. Textausschnitte auch mit mehreren Auszeichnungen versehen. Hier ist einmal ein Beispieltext:

Hier wird ein Teil fett und kursiv dargestellt.

Dazu schreibt man den auszuzeichnenden Text in zwei Umgebungen:

Hier wird ein Teil [b][i]fett und kursiv[/i][/b] dargestellt.

Die Reihenfolge spielt hierbei keine Rolle. Wichtig ist aber, dass Umgebungen, die zuletzt eingeleitet worden sind, auch zuerst wieder geschlossen werden müssen. Der obere Ausschnitt ließe sich also auch durch „[i][b]fett und kursiv[/b][/i]” realisieren, jedoch nicht durch „[i][b]fett und kursiv[/i][/b]”.

Beispiel 3

Hier soll Dir gezeigt werden, dass solche Formatierungen nicht nur für vereinzelte Wörter angewandt werden können, sondern für größere Textmengen. Denn diese Tags können auch über mehrere Zeilen hinweg genutzt werden. Der folgende Auszug ist aus dem Gedicht „Erlkönig“ von Johann Wolfgang von Goethe kursiv geschrieben:

Wer reitet so spät durch Nacht und Wind?
Es ist der Vater mit seinem Kind;
er hat den Knaben wohl in dem Arm,
er fasst ihn sicher, er hält ihn warm.

Um das hinzubekommen, musst Du nicht jede Zeile einzeln in eine kursive Umgebung schreiben. Dieser Code funktioniert genauso:

[i]Wer reitet so spät durch Nacht und Wind?
Es ist der Vater mit seinem Kind;
er hat den Knaben wohl in dem Arm,
er fasst ihn sicher, er hält ihn warm.[/i]

Codes

Hier wird Dir erklärt, wie Du Quellcodes anzeigen lassen kannst. Typisch für die Darstellung ist die Verwendung einer Schreibmaschinenschrift, das heißt einer Schriftart, bei der die Breite jedes Zeichens gleich ist. Außerdem hebt sich der in einer Code-Umgebung geschriebene Text vom normalen Text besser ab. Du kannst auch problemlos mehrzeilige, längere Texte in der Code-Umgebung schreiben. Der Elementname lautet code, das heißt die allgemeine Syntax ist:

[code]Dein 
ggf. mehrzeiliger
    und ggf. eingerückter
Code[/code]

Zitate

Früher oder später, vor allem in Feedback-Beiträgen fragst Du Dich, ob Du Argumente von anderen zitieren kannst. Das ist auch möglich. Hierzu musst Du den Text kopieren, den Du gerne zitieren würdest und in eine Quotations-Umgebung schreiben. Optional kannst Du auch noch den Autor angeben, von dem das Zitat stammt. Für Zitate gilt die allgemeine Syntax:

[quote=Autor]Hier das Zitat einfügen[/quote]

Auf diese Weise ist es natürlich möglich, Zitate und Autoren zu nennen, die gar nicht existieren oder nicht miteinander im Zusammenhang stehen. Du solltest aber davon absehen, Unsinn zu schreiben.

Erwähnungen

Du kannst Forenmitglieder in Beiträgen erwähnen. Das bedeutet, dass im Text zum einen der Name mit einem @-Symbol genannt wird und das Mitglied eine Benachrichtigung erhält, dass es in diesem Beitrag erwähnt worden ist. Das ist vor allem dann nützlich, wenn Du einigermaßen sicher stellen möchtest, dass jemand einen Beitrag liest und darauf vielleicht antwortet. Syntaktisch wird das folgendermaßen geschrieben:

[mention]Forenname[/mention]

Du hast vielleicht schon probiert, Listen oder Nummerierungen zu realisieren, indem Du einfach (wie in Office Word zum Beispiel) den Text und die Nummerierungen eingibst. Das ist aber keine richtige Nummerierung, und sobald ein Stichpunkt auch über mehrere Zeilen geht, sieht es gar nicht mehr gut aus. Ganz zu schweigen von verschachtelten Listen.

Du kannst aber trotzdem korrekte Aufzählungen realisieren. Hierzu gibt es zwei Möglichkeiten: in der ersten werden die einzelnen Stichpunkte wirklich durchnummeriert, während sie in der anderen mit solchen Aufzählungspunkten „•“ untereinander weg geschrieben werden.

Nummerierte Liste

Eine nummerierte Liste muss in eine Listenumgebung geschrieben werden, das heißt mit der Starttag „[list=1]“ und der Endtag „[/list]“. Innerhalb dieser Umgebung kannst Du nun Deinen Inhalt posten. Für jeden Stichpunkt musst Du dafür „[*]“ vor den Text schreiben. Damit gibst Du an, dass dies ein neuer Punkt ist. Wir schauen uns dafür einmal das folgende Beispiel an:

[list=1][*]Das ist der erste Punkt.
[*]Dieser in Klammern geschriebene Stern signalisiert den zweiten Punkt.
Da hier kein Stern vorgeschrieben ist, gehört dieser Satz auch noch zum zweiten Punkt.
[*]Dafür ist dies ein neuer Punkt.[*]Der Stern in der gleiche Zeile wird auch als ein neuer Punkt interpretiert.
[/list]

Wenn wir das in unseren Beitrag so hineinkopieren würden und auf den Vorschau-Button klicken, sehen wir das folgende:

1. Das ist der erste Punkt.
2. Dieser in Klammern geschriebene Stern signalisiert den zweiten Punkt.
   Da hier kein Stern vorgeschrieben ist, gehört dieser Satz auch noch zum zweiten Punkt.
3. Dafür ist dies ein neuer Punkt.
4. Der Stern in der gleiche Zeile wird auch als ein neuer Punkt interpretiert.

Du kannst Deine Aufzählung statt mit Zahlen auch mit Buchstaben oder römischen Zahlen gestalten. Dazu muss der Parameter „1“ in der Starttag ersetzt werden.

Stichpunktartige Liste

Eine stichpunktartige Liste wird vollkommen analog wie eine nummerierte Liste realisiert, dabei muss lediglich der zusätzliche Parameter in der Starttag weggelassen werden. Wir demonstrieren eine nicht-nummerierte Liste noch kurz anhand eines Beispiels.

[list][*]Das ist der erste Punkt.
[*]Und wie oben entsteht hier ein weiterer Punkt,
während dies keinen weiteren erzeugt.
[/list]

Wenn wir das in unseren Beitrag so hineinkopieren würden und auf den Vorschau-Button klicken, sehen wir das folgende:

• Das ist der erste Punkt.
• Und wie oben entsteht hier ein weiterer Punkt,
  während dies keinen weiteren erzeugt.

Verschachtelte Listen

Du kannst in einer Liste eine neue starten. Dabei ist es sogar möglich, stichpunktartige Listen in eine nummerierte einzubauen, oder auch umgekehrt. Dazu muss lediglich in der vorhandenen Listenumgebung eine weitere hinzugefügt werden. Die Syntax bleibt dabei genau wie oben. In diesem folgenden Beispiel werden wir einmal eine nummerierte Liste in einer nummerierten Liste in einer stichpunktartigen Liste schreiben:

[list]
[*]Der erste Stichpunkt.
[*]Der zweite Punkt, der sich aber nun noch weiter aufteilt:
[list=1]
[*]Der erste nummerierte Punkt im zweiten Stichpunkt.
[list=1]
[*]Ein Unterunterpunkt.
[*]Und weil es so schön ist noch ein Punkt.
[/list]
[*]Hier fahren wir mit einem einfachen Unterpunkt fort.
[/list]
[*]Ein letzter Punkt.
[/list]

Dies im Editor im Forum eingegeben wird am Ende dann wie folgt aussehen:

• Der erste Stichpunkt.
• Der zweite Punkt, der sich aber nun noch weiter aufteilt:
  1. Der erste nummerierte Punkt im zweiten Stichpunkt.
     1. Ein Unterpunkt.
     2. Und weil es so schön ist noch ein Punkt.
  2. Hier fahren wir mit einem einfachen Unterpunkt fort.
• Ein letzter Punkt.

Abstand zwischen einzelnen Stichpunkten

Je nach Menge eines Inhalts, der in einem Stichpunkt festgehalten wird, kann der Text besser aussehen, wenn zwischen den einzelnen Punkten mehr Abstand ist. Vor allem ist das dann sinnvoll, wenn ein Stichpunkt schon aus einem Text mit mehreren Absätzen besteht.

Hier wird das Problem jedoch nicht dadurch gelöst, indem einfach Leerzeilen in den Code gelassen werden. Denn diese werden dann einfach ignoriert.

[list][*]Eine Menge Inhalt.

[*]Der zweite Stichpunkt.
[/list]

Das liefert in der Vorschau und im Forum am Ende nur:

• Eine Menge Inhalt.
• Der zweite Stichpunkt.

Damit die Leerzeilen genutzt werden, muss der gesamte Inhalt eines Stichpunktes in eine „align“-Umgebung (mehr Informationen stehen in dem Punkt zu den Textausrichtungen). Innerhalb dieser Umgebung werden Leerzeilen dann richtig interpretiert.

[list][*][align=left]Eine Menge Inhalt.
[/align]
[*]Der zweite Stichpunkt.
[/list]

Das würde schlussendlich wie folgt aussehen:

• Eine Menge Inhalt.
• Der zweite Stichpunkt.

Wenn Du auf einen anderen Thread im Forum verweisen möchtest, oder schlicht einen Link für eine einfachere Navigation angeben möchtest, so kannst Du das auch tun. Du kannst in unserem Forum ausschließlich Seiten angeben, die ebenfalls in unserem Forum vorhanden sind. Ein Thread aus unserem Forum besitzt eine Adresse der Form

https://eldercom.de/forum/viewtopic.php?f=000&t=00000

Wenn es sich um ein Unterforum handelt, steht dort „viewforum“ anstelle von „viewtopic“. Auch die Ziffern sind sicher verschieden als mit Nullen. Möchtest Du diesen Link nun posten, so musst Du davon alle Zeichen von Beginn bis zum Schrägstrich vor „viewtopic“ entfernen. Das ganze sieht dann so aus:

Im Editor:
    [url]viewtopic.php?f=000&t=00000[/url]

In der Vorschau:
viewtopic.php?f=000&t=00000

Zugegeben, nicht ganz hübsch. Daher kannst Du den anzeigenden Text auch ändern. Du kannst zum Beispiel die Überschrift des Threads/Unterforums als Text wählen. Dazu muss der gekürzte Link, statt in die Umgebung, mit in die Start-Tag geschrieben werden. Der anzeigende Text wird dafür in die Umgebung geschrieben. Das soll Dir anhand dieses Beispiels einmal genauer gezeigt werden:

Im Editor:
    [url=viewtopic.php?f=000&t=00000]Allgemeine Erklärungen[/url]

In der Vorschau:
Allgemeine Erklärungen

Auf den unterstrichenen Text „Allgemeine Erklärungen“ könnte jemand dann klicken und es öffnet sich in einem neuen Tab die Seite https://eldercom.de/forum/viewtopic.php?f=000&t=00000.

Du kannst die Größe der Schrift verändern. Dabei sind alle Werte von 1 bis 500 zulässig. Der allgemeine Code lautet:

[size=Größe]Dein Text[/size]

Der Editor im Forum hat schon einige eingestellte Größen, die Du verwenden kannst. Die normale Schriftgröße hat den Wert 100.

Spoiler

Spoiler sind Werkzeuge, mithilfe derer Textinhalte versteckt werden. Erst durch einen Klick auf den Spoiler öffnet sich der Inhalt. Dieser Wiki-Beitrag hier ist beispielsweise bestückt mit Spoilern.

Im Forum gibt es zwei verschiedene Arten von Spoilern. Es gibt die Möglichkeit, eine Überschrift hinzuzufügen, genau wie es in diesem Beitrag auch gemacht wurde. Dazu lautet der allgemeine Code wie folgt:

[spoiler=Überschrift des Spoilers]Der Text, der versteckt werden soll.[/spoiler]

Wird in dem Code keine Überschrift gesetzt, so wird sie automatisch auf „Spoiler“ gesetzt. Da das nicht unbedingt die schönste Darstellung ist, kannst Du auch stattdessen die Methode

[spoil]Der Text, der versteckt werden soll.[/spoil]

nutzen. Dieser Code produziert einen Spoiler mit der Überschrift „> Text zeigen“.

Für Gäste versteckte Inhalte

Es gibt eine weitere Möglichkeit, Inhalte zu verstecken. Das Prinzip hier ist aber ein anderes. Die Idee ist, Textinhalte vor Gästen, also nicht angemeldeten Nutzern zu verstecken. Das heißt anstelle des Inhaltes sehen sie einen Bannerzug in dem steht, dass sie sich registrieren und anmelden müssen, um ihn lesen zu können.

Angemeldete Forenmitglieder können diesen Inhalt immer sehen und ihn auch nicht ausblenden, wie es bei Spoilern der Fall ist.

Der Code für solche Inhalte ist folgender:

[hidden]Der zu versteckende Text[/hidden]

Die Standardausrichtung ist immer linksbündig. Du kannst sie aber auch ändern, wenn Du möchtest. Dazu musst Du die align-Tag verwenden und in der Starttag mit angeben, welche Ausrichtung Du gern haben möchtest. Der allgemeine Code lautet dann:

[align=Elementname]Dein Text[/align]

In der folgenden Tabelle sind Beispiele und alle möglichen Varianten aufgelistet.

Diese Ausrichtungsumgebungen funktionieren natürlich auch, wenn Du mehrzeiligen Text hast. Sie wird erst beendet, sobald die End-Tag [/align] erscheint.

Im letzten Abschnitt wird Dir erklärt, wie Du Tabellen erstellst. Vorab: Du hast, was Tabellen angeht, nicht so die große Auswahl was das Design betrifft. Du kannst Tabellen nur mit hervorgehobener erster Zeile – der Kopfzeile – erstellen, und alle weitere Zeilen darunter werden stets als normale Zeilen angezeigt. Du kannst für jede Spalte die Textausrichtung verändern, und das ist auch alles. Was aber natürlich noch geht, ist Deinen Text zu formatieren (farbig schreiben etc.). Dies hat dann nur Auswirkungen auf den Text und nicht direkt auf das Design der Tabelle.

Wenn Du eine Tabelle anlegen möchtest, kommt in die erste Zeile die Kopfzeile, das heißt die Tabellenüberschriften über jeder einzelnen Spalte. Die Spalten/Überschriften werden durch einen senkrechten Strich | voneinander getrennt. Mal angenommen, wir möchten eine Tabelle anlegen mit den Überschriften „Tag“, „Ort“ und „To Do“. Dann sähe unsere erste Zeile folgendermaßen aus:

Tag|Ort|To Do

Nun kommt die nächste Zeile. Diese enthält die Information, wie der Text (für jede Spalte separat) ausgerichtet sein soll. Die Tag „:-“ bedeutet, dass der Text in dieser Spalte linksbündig sein soll, „-:“ bedeutet, dass er rechtbündig sein soll und „:-:“ bedeutet einen zentrierten Text. Wenn wir in unserer Tabelle die erste Spalte rechtsbündig, die zweite Spalte zentriert und die dritte Spalte linksbündig haben möchten, so müssen wir den Code oben um die zweite Zeile folgendermaßen erweitern:

Tag|Ort|To Do
-:|:-:|:-

Ab hier kannst Du nun weitere Inhalte in die Tabelle hinzufügen. Es ist auch kein Problem, wenn Zellen einmal mehr Text beinhalten und dadurch mehrere Zeilen entstehen. Wichtig ist immer: sobald Du eine Zeile in der Tabelle fertig geschrieben hast, und eine weitere ergänzen möchtest, musst Du sie in einer neuen Zeile beginnen. Wir erweitern den Code oben einmal als Beispiel:

Tag|Ort|To Do
-:|:-:|:-
Montag|B-Abbauwelt|2 Stacks Golderz abbauen.
Mittwoch|Mein großes Grundstück|Kühe schlachten, Weizen ernten und Fichtenholz durch Schwarzeiche ersetzen.

Das im Editor so eingefügt würde im Forum die folgende Tabelle (mit ggf. etwas verändertem Design und Farben) erstellen:

Tag	Ort	To Do
Montag	B-Abbauwelt	2 Stacks Golderz abbauen.
Mittwoch	Mein großes Grundstück	Kühe schlachten, Weizen ernten und Fichtenholz durch Schwarzeiche ersetzen.