Seite 1 von 1

BBCodes

Verfasst: 9. Aug 2010, 19:56
von tomS
Liebe Forenmitglieder,

das Forum bietet beim Erstellen der Beiträge Möglichkeiten, den Beitrag bzw. die Schrift zu formatieren, Bilder bzw. Graphiken einzubinden, externe Verlinkungen auf andere Inhalte im Web durchzuführen und einiges andere mehr. Die entsprechenden Funktionen verbergen sich hinter sogenannten BBCodes, die man aber nicht umständlich von Hand eintippen muss, sondern über die oberhalb des Editierfeldes angeordneten "Tasten" erreichen lassen. Im Folgenden möchte ich kurz die Verwendung und die Möglichkeiten aufzeigen.

Einige Grundlagen sowie Tips vorweg:
- jeder BBCode, sagen wir mal [XXX], wird von eckigen Klammern eingeschlossen
- zu jedem Beginn [XXX] gehört auch ein entsprechendes Ende [/XXX], dazwischen wird der jeweilige Text eingeschlossen
- beim Verwenden der "Tasten" werden Anfang und Ende automatisch erzeugt
- Markiert man einen bereits geschriebenen Textabschnitt und verwendet dann eine der "Tasten", wird der Text automatisch durch die Anfangs- und Endekennung des BBCode eingeschlossen
- die Verwendung eines BBCodes kann man sich anschauen, in dem man einen Beitrag, der diese Formatierung verwendet, "zitiert". Man sieht dann im Editierfeld die ursprüngliche Verwendung des BBCodes
- wenn ich im folgenden einen BBCode im Text schreibe, verwende ich meist nicht [XXX] sondern (XXX), da der BBCOde sonst ja ausgeführt würde; gemeint ist natürlich [XXX]


code
Ich beginne mal mit dem BBCode (Code) ...(/Code), denn den werden ich im folgenden immer wieder verwenden. Er dient dazu, eine Textstelle abzusetzen, in der Code, also z.B. HTML Code, TeX Code, Programmiersprachen oder eben auch BBCodes unverändert bzw. unformatiert dargestellt werden. Wenn ich euch also zeigen will, wie der BBCode (b) für Fettdrucken verwendet wird, dann muss ich ihn in (Code) einschließen, d.h. also (Code)(b)fettgedruckter Text ...(/b)(/code) schreiben. Alles klar?

Damit kann ich alle anderen BBCodes erstmal auflisten:


Fett, kursiv, unterstrichen

Code: Alles auswählen

[b]XXX[/b] setzt den Text "XXX" fett
[i]XXX[/i] setzt den Text "XXX" kursiv
[u]XXX[/u] unterstreicht den Text "XXX"
sieht wie folgt aus

XXX setzt den Text "XXX" fett
XXX setzt den Text "XXX" kursiv
XXX unterstreicht den Text "XXX"


Hoch- und tiefstellen
Da man nicht immer gleich TeX verwenden möchte, gibt es einige einfache Möglichkeit, Text hoch- bzw. tiefzustellen

Code: Alles auswählen

H[down]2[/down]O
E=mc[up]2[/up]
erzeugt

H[down]2[/down]O
E=mc[up]2[/up]


"Überstreichen"

Statt unter-kann man auch "überstreichen". Ich kenne kein deutsches Wort dafür :-(

Code: Alles auswählen

[overline]XXX[/overline]
erzeugt

XXX


Schriftgrößen
Auch Schriftgrößen können über einen BBCode gesteuert werden; in dem Fall ist es keine "Taste", sondern eine Auswahlliste

Code: Alles auswählen

[size=50]Winzig[/size]
[size=85]Klein[/size]
Normal
[size=150]Groß[/size]
[size=200]Riesig[/size]
ergibt

Winzig
Klein
Normal
Groß
Riesig

Man könnte auch andere Größenangaben verwenden; diese stammen einfach aus der Liste und werden automatisch erzeugt.


Schriftfarben
Auch Farben werden mittels BBCode gesteuert; man verwendet dazu einfach die Farbauswahlpalette neben dem Editierfeld

Code: Alles auswählen

[color=#800040]Deep Purple[/color]
sieht so aus

Deep Purple


Mehrfache Formatangaben
Formatangaben können auch geschachtelt werden

Code: Alles auswählen

[color=#FF0000][u][b]Fett, unterstrichen und rot[/b][/u][/color]
ergibt

Fett, unterstrichen und rot


Zitieren
Der BBCode (quote) dient zum Zitieren von (Ausschnitten aus) anderen Beiträgen. Er wird automatisch mittels der Taste "Zitieren" erzeugt, kann aber auch nachträglich in einen Beitrag eingebaut werden. Hier bietet sich die Möglichkeit, auch noch einen Namen mitzugeben, d.h.

Code: Alles auswählen

[quote]XXX[/quote] zitiert einfach einen Text "XXX"
[quote="Hans"]XXX[/quote] zitiert den Text "XXX" von Hans
ergibt
XXX
zitiert einfach einen Text "XXX"
Hans hat geschrieben:XXX
zitiert den Text "XXX" von Hans


Erklärungen
Selten genutzt, aber doch sinnvoll, ist das Einfügen von Erklärungen, z.B. ein einer längeren mathematischen Abhandlung einen Abschnitt "zur Erklärung", oder einen Kasten "für Experten".

Code: Alles auswählen

[expl]zur Erklärung: ...[/expl]
ergibt
Erläuterungzur Erklärung: ...

Auflistungen
Eine Liste erzeugt man mittels

Code: Alles auswählen

[list]
[*] XXX
[*] YYY
[*] ZZZ
[/list]
Die Liste sieht wie folgt aus
  • XXX
  • YYY
  • ZZZ
Auflistungen
Eine geordnete Liste erzeugt man mittels

Code: Alles auswählen

[list=]
[*] XXX
[*] YYY
[*] ZZZ
[/list]
Hier kann man hinter dem Gleichheitszeichen entweder eine Zahl eingeben oder einen Buchstaben. Das Ergebnis sieht dann so aus:
  • XXX
  • YYY
  • ZZZ
oder so
  1. XXX
  2. YYY
  3. ZZZ
welche Zahl oder welchen Buchstaben man eingibt ist ohne Belang, das Forum beginnt die Liste stets bei 1. oder a.


Bilder
Bilder kann man beim Editieren eines Beitrages als Dateianhang vom eigenen Rechner hochladen und im Beitrag anzeigen lassen.


URLs
Eine URL, d.h. ein Verweis auf eine andere Webseite wird mittels

Code: Alles auswählen

[url]http://www.XXX.htm[/url]
[url=http://www.XXX.htm]Text[/url]
eingebunden. Dabei sehen die beiden Optiponen dann wie folgt aus

http://www.XXX.htm
Text

In der ersten Version wird direkt die Webadresse sichtbar, in der zweiten dagegen ein Text, hinter dem jedoch der Verweis auf die Webadresse steckt.


Flash
Flash-Animationen werden wie URLs eingebunden, allerdings mittels des speziellen BBCodes

Code: Alles auswählen

[flash=][/flash]
...


Elemente fremder Websites einbinden ...
... ist hier eigentlich nicht erlaubt. Man kann aber z.B. in Ausnahmefällen z.B. ein PDF-Dokument, das entweder hier bei Gravi auf dem Serber liegt, oder auf einer eigenen Webseite zugänglich ist, direkt mittels eines iframes einfügen.

Code: Alles auswählen

[iframe=Energie_thst_2009-11-24.pdf]1024,760,1[/iframe]
bindet das PDF-Dokument (das Gravi hier auf seinem Server liegen hat) direkt ins Forum ein:

[iframe=Energie_thst_2009-11-24.pdf]1024,760,1[/iframe]

Dabei wird noch die Formatierung des iFrames, d.h.Breite und Höhe angegeben. Ist lästig, da ja jeder einen anderen Bildschirm hat :-)


Interne Verlinkungen
Man kann innerhalb des Forums mittels des BBCodes (URL) auf andere Beiträge (d.h. deren Titel) verlinken. Mittels des Pärchens (anker) und (goto=) kann man eigene Marken auch innerhalb eines längeren Textes setzen bzw. von einer anderen Stelle (evtl. auch aus einem anderen Beitrag) aus dorthin springen.

ACHTUNG: goto habe ich noch nicht verwendet

Das sieht dann wie folgt aus:

Mittels

Code: Alles auswählen

[anker]1[/anker] [b]Text der Überschrift[/b]
definiert man das Sprungziel, also z.B.

[anker]1[/anker] Text der Überschrift

...
...
...

und mittels

Code: Alles auswählen

[url=http://abenteuer-universum.de/bb/viewtopic.php?f=13&t=1357&p=15368#p15368#Sprungziel][b]Text der Überschrift[/b][/url]
baut man einen entsprechenden Link ein

Link zur Überschrift