BBCode: eine kurze Einführung

Mit BBCode kann man in vielen Foren seine Beiträge formatieren.

Inhalt

  1. Allgemeines

  2. Textformatierung

    1. kursiver Text

    2. fetter Text

    3. unterstrichener Text

    4. farbiger Text

    5. Textgröße

    6. Schriftarten

    7. Kombination von verschiedenen Formaten

  3. Textstrukturierung

    1. Zeilenumbrüche und Absätze

    2. Überschriften

    3. Ausrichtung des Textes

    4. Listen

    5. Zitate

    6. Spoiler

    7. Code

  4. Sonstiges

    1. Smileys

    2. Verweise

    3. Bilder

Allgemeines

Text, auf den eine Formatierung wirken soll, wird in sog. Tags [x] und [/x] eingeschlossen, also z.B. [i]kursiver Text[/i] ergibt kursiver Text. (Im Folgenden wird der einzugebene Code immer dunkelgrün und das Ergebnis violett dargestellt.)

Textformatierung

kursiver Text

Kursiver Text wird – wie schon erwähnt – mit [i]…[/i] erzeugt (i für italic).

Beispiel:
[i]Das ist wichtig![/i] wird zu Das ist wichtig!

fetter Text

Fetter Text wird mit [b]…[/b] erzeugt (b für bold).

Beispiel:
[b]Das ist noch wichtiger![/b] wird zu Das ist noch wichtiger!

unterstrichener Text

Unterstrichener Text wird mit [u]…[/u] erzeugt (u für underline).

Beispiel:
[u]Das ist unterstrichen.[/u] wird zu Das ist unterstrichen.

(Diese Formatierung ist allerdings veraltet und stammt noch aus den Zeiten, als man mit Schreibmaschinen nicht kursiv und nur schwer fett schreiben konnte. (Letzteres funktionierte, indem man einen Text mehrfach übereinander auf das Papier schrieb.) Deshalb wurde stattdessem unterstrichen oder zwischen die Buchstaben Leerzeichen eingefügt. Heute sind diese Hervorhebungen obsolet, zugunsten von Kursiv- und Fettschrift.
Außerdem gilt mittlerweile die Konvention, Links zu unterstreichen. Um Verwechselungen zu vermeiden, sollte man also anderen Text möglichst nicht unterstreichen.)

farbiger Text

Farbiger Text wird mit [color=farbe]…[/color] erzeugt. Dabei kann man für farbe entweder einen von 16 definierten Farbnamen (black, gray, maroon, red, green, lime, olive, yellow, navy, blue, purple, fuchsia, teal, aqua, silver, white), oder eine Farbe in hexadezimaler Notation #RRGGBB (RR, GG und BB geben die Rot-, Grün- und Blau-Anteile in hexadezimaler Schreibweise an) notieren.
Im Stargate-Project-Forum ist auch eine Farbe mit deutschem Farbnamen (Blau, Rot, Lila, Orange, Gelb, Grau, Grün) möglich.

Beispiel:
[color=yellow]Das ist kaum lesbar.[/color] und [color=#FFFF00]Das ist kaum lesbar.[/color], sowie [color=Gelb]Das ist kaum lesbar.[/color] werden alle drei zu Das ist kaum lesbar.

Textgröße

Größerer oder kleinerer Text wird mit [size=größe]…[/size] erzeugt. Dabei notiert man für größe eine Zahl zwischen 1 (sehr klein) und 14 (sehr groß). Im SGP-Forum ist die normale Schriftgröße 4 (glaube ich).

Beispiel:
[size=2]Das ist sehr unwichtig.[/size] wird zu Das ist sehr unwichtig.
[size=8]Überschrift[/size] wird zu Überschrift

Schriftarten

Text in verschiedenen Schriftarten wird mit [font=schriftart]…[/font] erzeugt. Dabei notiert man für schriftart eine der Schriftarten Arial, Arial Black, Arial Narrow, Book Antiqua, Century Gothic, Comic Sans MS, Courier New, Fixedsys, Franklin Gothic Medium, Garamond, Georgia, Impact, Lucida Console, Lucida Sans Unicode, Microsoft Sans Serif, Palatino Linotype, System, Tahoma, Times New Roman, Trebuchet MS und Verdana. Sehen alle (oder mehrere) dieser Schriften gleich aus, ist es wahrscheinlich, dass einige der Schriften nicht auf deinem Rechner installiert sind. Die drei Schriften Arial, Times und Courier sollten aber auf jedem Rechner verfügbar sein.

Beispiel:
[font=Times]Mal mit Serifen[/font] wird zu Mal mit Serifen.

Kombination von verschiedenen Formaten

Og. Formatierungen können auch kombiniert werden.

Beispiele:
[i][b]Das ist wirklich wichtig![/b][/i] wird zu Das ist wirklich wichtig!
[size=8][color=red]Wichtige Überschrift[/color][/size] wird zu Wichtige Überschrift.

Es können auch die weiter unten beschriebenen Tags, z.B. die Listen oder Zitate, miteinander und mit obigen Tags verschachtelt werden.

Achtung:
Beim Verschachteln der Formate sollte darauf geachtet werden, dass immer die innerste Formatierung zuerst wieder geschlossen wird. Falsch wäre also etwas wie [x][y]…[/x][/y]!

Textstrukturierung

Zeilenumbrüche und Absätze

Zeilenumbrüche und Absätze werden so umgesetzt, wie sie eingegeben wurden, Leerzeilen erzeugen Leerzeilen und mehrfache Leerzeilen erzeugen wieder mehrfache Leerzeilen.

Überschriften

Für Überschriften gibt es keine speziellen Tags. Man macht sie mit einer Zeile größerer Schrift.

Ausrichtung des Textes

Rechtsbündiger Text

Ein oder mehrere Absätze rechtsbündig ausgerichteter Text werden mit [right]…[/right] erzeugt.

Beispiel:
[right]Rechtsbündig ist auch mal schön.[/right] wird zu

Rechtsbündig ist auch mal schön.

Linksbündiger Text

Ein oder mehrere Absätze linksbündig ausgerichteter Text werden mit [left]…[/left] erzeugt. Diese Textausrichtung ist i.d.R. die Voreinstellung.

Beispiel:
[left]Linksbündig ist auch mal schön.[/left] wird zu

Linksbündig ist auch mal schön.

Zentrierter Text

Ein oder mehrere Absätze zentrierter Text werden mit [center]…[/center] erzeugt.

Beispiel:
[center]Zentriert ist auch mal schön.[/center] wird zu

Zentriert ist auch mal schön.

Eingerückter Text

Ein oder mehrere Absätze eingerückter Text werden mit [indent]…[/indent] erzeugt.

Beispiel:
[indent]Eingerückt ist auch mal schön.[/indent] wird zu

Eingerückt ist auch mal schön.

Listen

Eine Liste wird mit [list]…[/list] erzeugt. Die einzelnen Punkte der Liste werden dabei mit [*] eingeleitet.

Beispiel:

[list]
[*]ein Punkt
[*]ein weiterer Punkt
[*]ein dritter Punkt
[/list]

wird zu

Nummerierte Listen

Eine nummerierte Liste wird mit [list=art]…[/list] erzeugt. Dabei notiert man für art die Art der Nummerierung, indem man das erste Element nennt, nämlich entweder 1 oder a.

Beispiele:

[list=1]
[*]ein Punkt
[*]ein weiterer Punkt
[*]ein dritter Punkt
[/list]

wird zu

  1. ein Punkt

  2. ein weiterer Punkt

  3. ein dritter Punkt

und

[list=a]
[*]ein Punkt
[*]ein weiterer Punkt
[*]ein dritter Punkt
[/list]

wird zu

  1. ein Punkt

  2. ein weiterer Punkt

  3. ein dritter Punkt

Zitate

Ein Zitat wird mit [quote]…[/quote] erzeugt. Der Inhalt wird dann eingerahmt und farblich hervorgehoben.
Kennt man den Namen des Verfassers, kann der Name ebenfalls angegeben werden: [quote=name]…[/quote]. Dann wird das Zitat mit Zitat von name überschrieben.

Nachempfundenes Beispiel:

[quote=Oma Dessala]
Wenn man weiß, dass das
Kerzenlicht Feuer ist, wurde die Mahlzeit schon vor langer Zeit
bereitet.
[/quote]

Wird zu sowas wie

Zitat von Oma Dessala
Wenn man weiß, dass das Kerzenlicht Feuer ist, wurde die Mahlzeit schon vor langer Zeit bereitet.

Spoiler

Ein Spoiler wird mit [spoiler]…[/spoiler] versteckt. Statt des Textes erscheint dann zunächst nur der Spoiler-Button. Erst, wenn man darauf klickt, kann man den Text lesen. (In anderen Foren erscheint ein Spoiler auch manchmal als schwarzer Text auf schwarzem Grund oder als weißer Text auf weißem Grund o.ä. Hier muss man den schwarzen Balken, der auf das Stichwort Spoiler folgt, markieren, um den Inhalt lesen zu können.)

Beispiel:
[spoiler]Dies ist der Text, der versteckt werden soll. Wenn man mit der Maus …[/spoiler] wird zu:

Spoiler

Dies ist der Text, der versteckt werden soll. Wenn man mit der Maus über den Spoiler-Button fährt, wird dieser Absatz sichtbar.
(Im Forum wird der Absatz sichtbar, wenn der Spoiler-Button angeklickt wird. Und er bleibt auch sichtbar, bis der Button erneut angeklickt wird.)

Code

Ein Stück Computer-Code wird mit [code]…[/code] erzeugt.

Beispiel:

[code]
#! /bin/sh

while true
  do
    for i in *.mp3
      do
        play $i
      done
  done
[/code]

wird zu sowas wie

#! /bin/sh

while true
  do
    for i in *.mp3
      do
        play $i
      done
  done

Besondere Programmiersprachen

In einigen Fällen kann man die Programmiersprache direkt angeben. Dies hat den Vorteil, dass dann bestimmte Schlüsselwörter der jeweiligen Sprache hervorgehoben werden. Beim Board bei SG-P ist es möglich, HTML- und PHP-Code mit den BB-Tags [html]…[/html] und [php]…[/php] angeben.

Beispiel:

[html]
<html>
<head>
  <title>Beispielseite</title>
</head>
<body>
  <h1 style="color:blue">&Uuml;berschrift</h1>
  <p>Dies ist ein Beispieltext&nbsp;&hellip;</p>
</body>
</html>
[/html]

wird zu sowas wie

<html>
<head>
  <title>Beispielseite</title>
</head>
<body>
  <h1 style="color:red">&Uuml;berschrift</h1>
  <p>Dies ist ein Beispieltext&nbsp;&hellip;</p>
</body>
</html>

(Dieser HTML-Code ergibt übrigens diese Seite.)

[php] funktioniert analog und hebt entsprechende PHP-Schlüsselwörter hervor.

Beispiel:

[php]
<?php
if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== FALSE) {
    echo "Sie benutzen Microsofts Internetexplorer.<br />";
}
?>
[/php]

wird zu sowas wie

<?php
if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== FALSE) {
  echo "Sie benutzen Microsofts Internetexplorer.<br />";
}
?>

Sonstiges

Smileys

Smileys oder Emoticons kann man mit Buchstaben-Kombinationen einfügen, die meistens mit einem Doppelpunkt beginnen und oft enden. Die wichtigsten Emoticons sind der Smiley :), der Frowney :( und der ironische Smiley ;). Weitere Smileys sind z.B. der "Kopf-gegen-die-Wand-hau-Smiley" :wall: oder der anbetende Smiley :anbet:. Wenn man diese Zeichenketten im Text benutzt, werden sie vom Board durch die entsprechenden Bildchen :), :(, ;), :wall: und :anbet: ersetzt. Eine vollständige Liste aller verfügbaren Smileys gibt es in jedem Board.

Verweise

Ein Verweis wird mit [url]http://…[/url] erzeugt.

Beispiel:
[url]http://www.stargate-project.de[/url] wird zu http://www.stargate-project.de.

Lässt man das http:// weg, wird dieser Prefix im Link selbst von der BBCode-Software automatisch ergänzt (sog. magic links), im Text ist der verkürzte URL lesbar.

Beispiel:
[url]www.stargate-project.de[/url] wird zu www.stargate-project.de.

Ein Verweis kann auch einen abweichenden Linktext haben, dies wird mit [url=URI]linktext[/url] erzeugt. Dabei notiert man für URI den gewünschten URL und für linktext der Text, der lesbar sein soll.

Beispiel:
[url=http://www.stargate-project.de]eine tolle Stargate-Webseite[/url] wird zu eine tolle Stargate-Webseite.

E-Mail Verweise

Eine mailto:-Link wird mit [email]adresse[/email] erzeugt. Dabei notiert man für adresse die gewünschte E-Mail-Adresse.

Beispiel:
[email]niemand@nirgend.wo[/email] wird zu niemand@nirgend.wo.

Bilder

Ein Bild, das irgendwo im WWW liegt, wird mit [img]URI[/img] in einen Beitrag eingefügt. Dabei notiert man für URI den URL, unter dem das Bild zu finden ist.

Beispiel:
[img]http://www.stargate-project.de/stargate/images/lexikon/S/stargate.jpg[/img] wird zu

Ein Bild vom Stargate.

Bilder mit Verweisen

Analog zur Verschachtelung von Textformaten kann man auch ein Bild zu einem Link machen.

Beispiel:

[url=http://www.stargate-project.de]
[img]http://www.stargate-project.de/stargate/images/news/sg1s9_sga_s2dvds.jpg[/img]
[/url]

wird zu
Stargate SG-1 & Atlantis.


Diese Einführung wurde komplett mit HTML und CSS erstellt, ohne die Benutzung von BBCode. Deshalb sind einige der Beispiele den echten Erscheinungsformen in echten BB-Boards nur nachempfunden. Trotzdem erhält man – meiner Meinung nach – einen guten Eindruck davon, wie ein mit BBCode formatierter Text aussehen kann.

Britta (Tauriel), Mon, 10 Jul 2006 16:48:16 +0200