Seite 1 von 1

[Tutorial] BBCodes

Verfasst: 28.11.09 14:00
von ZET
Das ist ein Tutorial für die Benutzung der Buttons und BBCodes. Hier gibt es ein weiteres Tutorial, von dem ich vorher leider nichts gewusst habe.
Fast alle Codes sind gleich aufgebaut: [DerCode]TEXT[/DerCode]
  1. breit / kursiv / unterstrichen
  2. quote
  3. code
  4. list
  5. list=
  6. Bild einfügen
  7. Links einfügen
  8. Schriftgröße / Farbe
  9. hide
  10. duchstreichen
  11. YouTube
  12. Mischen von Funktionen

1. breit / kursiv / unterstrichen
Die ersten 3 Buttons dienen nur dazu, die Schrift zu verändern:
breit:

Code: Alles auswählen

[b]breit[/b]
kursiv:

Code: Alles auswählen

[i]kursiv[/i]
und unterstrichen:

Code: Alles auswählen

[u]unterstrichen[/u]

2. quote
Das nächste ist quote, also Zitieren, das kannst du entweder so :
ich mache das aus spaß

Code: Alles auswählen

[quote]ich mache das aus spaß[/quote]
oder, wenn man wissen soll, von wem das Zitat ist, so:
(!ZET!) hat geschrieben:Ich mache das aus Spaß

Code: Alles auswählen

[quote="(!ZET!)"]Ich mache das aus Spaß[/quote]
Achte hier auf das = und die "Anführungszeichen" vor und nach dem Namen!


3. code
Dann kommt die Code-Funktion, die braucht man nicht so oft, ich benutzte sie aber hier die ganze Zeit.
Das ist das hier:

Code: Alles auswählen

[code]Mir fällt nichts ein
[/code]


4. list
Zuerst die normale list-Aufzählung. Sie funktioniert so:
  • Hier
  • kommt
  • der
  • Text
  • hin
Zuerst den list-Button anklicken, und dann für jede einzelne Aufzählung den list-Eintrag-Button anklicken: [*]

Code: Alles auswählen

[list][*]Hier [*]kommt [*]der [*]Text [*]hin[/list]

5. list=
Die geordnete list (list=) funktioniert fast genauso, nur mit dem Unterschied, dass man alles in der Liste nach Zahlen oder Buchstaben ordnen kann:
  1. Hier
  2. kommt
  3. der
  4. Text
  5. hin

Code: Alles auswählen

[list=1][*]Hier [*]kommt [*]der [*]Text [*]hin[/list]
oder
  1. Hier
  2. kommt
  3. der
  4. Text
  5. hin

Code: Alles auswählen

[list=A][*]Hier [*]kommt [*]der [*]Text [*]hin[/list]
Hier einfach nach dem = eintragen, wie man es geordnet haben will (1, A oder a):

Code: Alles auswählen

[list=1][/list]

Code: Alles auswählen

[list=A][/list]

Code: Alles auswählen

[list=a][/list]

6. Bild einfügen
[img]http://forum.penspinning.de/styles/ps/i ... c_logo.jpg[/img]

Code: Alles auswählen

[img]http://forum.penspinning.de/styles/ps/imageset/gpc_logo.jpg[/img]
Beachte, dass das Bild nicht zu groß sein darf :!:


7. Links einfügen
Der URL-Code, der ist etwas komplizierter:
Wenn du willst, dass die URL nicht so aussieht: http://forum.penspinning.de/viewtopic.php?f=15&t=41, sondern SO, musst du folgendes machen:

Code: Alles auswählen

[url=http://forum.penspinning.de/viewtopic.php?f=15&t=41]SO[/url]
Zwischen den beiden Klammern den Text hinschreiben, wie der Link heißen soll und in der linken Klammer ein = und nach dem = den Link einfügen:


8. Schriftgröße / Farbe
Schriftgrößen funktionieren ganz einfach:
Einfach gewünschte Schriftgröße anklicken und dann den Text wieder zwischen den Klammern hinschreiben.
Riesig
Groß
Normal
Klein
Sehr klein

Code: Alles auswählen

[size=50]hier muss dein text stehen[/size]
Schriftfarbe funktioniert genauso wie Schriftgröße:
Farbe

Code: Alles auswählen

[color=#BF40FF]Farbe[/color]

9. Hide
Diesen Code kannst du genauso wie "quote" vewenden:
Block: anzeigen
Wenn du einen langen Text hast, kannst du "hide" benutzen

Code: Alles auswählen

[hide]Wenn du einen langen Text hast, kannst du "hide" benutzen[/hide]
Oder wieder mit Namen:
Block: anzeigen
Hier wieder auf die "Anführungszeichen" achten

Code: Alles auswählen

[hide="ZET"]Hier wieder auf die "Anführungszeichen" achten[/hide]

10. Durchstreichen
Durchstreichen funktioniert wieder ganz einfach, wie breit, kursiv oder unterstrichen:

Code: Alles auswählen

[s]Durchstreichen[/s]

11. YouTube

Anstatt den ganzen link:

Code: Alles auswählen

http://www.youtube.com/watch?v=l8iZOCYVQ6E
nur alles nach dem = einfügen:

Code: Alles auswählen

[youtube]l8iZOCYVQ6E[/youtube]

12. Mischen von Funktionen
Es gibt auch die Möglichkeit, Funktionen zu mischen, z.B um groß und bunt auf einmal zu schreiben:
Ich bin groß und grün

Code: Alles auswählen

[size=150][color=#008000]Ich bin groß und grün[/color][/size]
oder große bunte Links:
Ich bin groß, grün und ein Link

Code: Alles auswählen

[url=http://forum.penspinning.de/index.php][size=150][color=#00BF00]Ich bin groß, grün und ein Link[/color][/size][/url]
Man kann auch ein Bild als Link vewenden: [img]http://forum.penspinning.de/styles/ps/i ... c_logo.jpg[/img]

Code: Alles auswählen

[url=http://forum.penspinning.de/index.php][img]http://forum.penspinning.de/styles/ps/imageset/gpc_logo.jpg[/img][/url]
Man kann eigentlich fast alles mischen: Code Tutorial

Code: Alles auswählen

[url=http://forum.penspinning.de/viewtopic.php?f=5&t=20241][b][size=150][color=#0000FF]C[/color][/size][/b][u][size=150]o[/size][/u][i][size=150][color=#FF00FF]d[/color][/size][/i][b][size=150][color=#408000]e[/color][/size][/b] [u][size=150][color=#FF0000]T[/color][/size][/u][i][size=150][color=#FFFF00]u[/color][/size][/i][b][size=150][color=#FFBF00]t[/color][/size][/b][u][size=150][color=#000000]o[/color][/size][/u][i][size=150][color=#00FFFF]r[/color][/size][/i][u][size=150][color=#800000]i[/color][/size][/u][i][size=150][color=#FF4000]a[/color][/size][/i][b][size=150][color=#00FF00]l[/color][/size][/b][/url]
xD

Ich hoffe, es hilft.
Wer Rechtschreibfehler findet, kann sie mir via PN mitteilen.
Vielen Dank an Easyboy für die Verbesserung der Rechtschreibfehler
mfg
(!ZET!)
und Easyboy

Re: code tutorial

Verfasst: 28.11.09 14:20
von Dunn_Star
oder man spart sich das getippe und benutzt einfach die buttons für die ganzen sachen ;-)

is aber doch ein sehr schönes und ausführliches tut, gut und einfach erklärt

kannst ja damit schön wird noch ne tolle gliederrung machen, so mit inhaltsverzeichniss und unterpunkten und so, aber ansonsten top

[Tutorial] BBCodes

Verfasst: 28.11.09 14:26
von ZET
Dunn_Star hat geschrieben:oder man spart sich das getippe und benutzt einfach die buttons für die ganzen sachen ;-)
Aslo das ist ja das problem, manche wissen nicht gnau wie sie diese Buttons bnutzen sollen.
Und eine Gliderung werde ich machen, danke für den Tipp
mfg
(!ZET!)

Re: code tutorial

Verfasst: 28.11.09 14:29
von mnjopp
http://forum.penspinning.de/faq.php?mode=bbcode :mrgreen:

Da kommt man übrigens hin, wenn man beim erstellen eines Beitrags rechts unter den Smilies auf "BBCode" klickt (PS-Style).

Grüße

Re: code tutorial

Verfasst: 28.11.09 15:47
von |DesTinY|
Man kann auch die Buttons benutzen. aber wenn mandie Codes kann geht es einigermaßen schneller :D
Achja & Das YouTube Video ist Klasse :D
Danke für die Codes helfen einem :D :spin:

Re: code tutorial

Verfasst: 28.11.09 16:25
von Düsseldorfer
Das Tutorial ist mMn eher unnötig.
Zum einen gib es sowas wie von mnjopp schon gepostet bereits,
zum anderen ist es sehr unübersichtlich aufgrund fehlender Gliederung und Formatierung.
Und von Rechtschreib-/Grammatikfehlern brauch ich gar nicht erst anfangen!
ICh würde mal die Shift-Taste benutzen, vor allem wenn es sich um ein Dokument handelt, dass ernst genommen werden soll und nicht um Umgangssprache.

[Tutorial] BBCodes

Verfasst: 28.11.09 17:58
von ZET
So ich habe es versucht zu ordnen, ich hoffe es ist jetzt übersichtlicher. Außerdem Habe ich noch einen weiteren Schritt eingefügt: Mischen von Funktionen
mfg
(!ZET!)

Re: code tutorial

Verfasst: 29.11.09 10:53
von ibd
Huhu ich glaube du musst nochmal bei "List=" nachschauen, da scheint dir ein Fehler unterlaufen zu sein.:-)
Ansonsten: Schön viel Arbeit gemacht, vielleicht hilft das Tutorial ja manchen.

[Tutorial] BBCodes

Verfasst: 29.11.09 14:58
von ZET
So ich habe es gändert. Anstatt aus dem anderen Tutorial zu zitieren habe ich es versucht selber zu erklären. Hoffentlich stimmt jetzt alles :D
e/ Easyboy hat die Rechtschreibfehler verbessert, vielen Dank.
mfg
(!ZET!)

Re: [Tutorial] BBCodes

Verfasst: 21.02.10 15:09
von togo
muss dass aber auch mal ausprobieren:

Durchstreichen
[url]http://penspinning.de%20%20hier[/url]

Re: [Tutorial] BBCodes

Verfasst: 22.02.10 23:42
von Skiller
In der ersten Codebox unter Punkt 12 ist ein Fehler.

Gruss

Re: [Tutorial] BBCodes

Verfasst: 23.02.10 07:56
von Robert
Skiller hat geschrieben:In der ersten Codebox unter Punkt 12 ist ein Fehler.
Hab ich korrigiert.