Navigation
Chatbox
Merci, nablaalf.
Même si tu sais que c'est pas mon meilleur site. 
Mdr énorme, Guillaume.
Livre d'or
Français
Le BBcode
Le BBcode est un langage très simple et appréhensible par tous créé par l'équipe qui a programmé phpBB, un script de forum très connu et utilisé par les webmasters. Ce langage s'est imposé sur de nombreux sites web via le succès de phpBB. C'est pour sa célébrité que je l'ai choisi pour permettre la personnalisation des messages dans la chatbox et le livre d'or de PC Conviction.
Concrètement, le BBcode permet, sur les plateformes qui l'autorisent (forums, MSN, chatbox et livre d'or de ce site), entre autres, de colorer le texte que l'on écrit, plus généralement de le formater, d'insérer un lien vers un site web, ou encore des images et par extension des smileys.
Comment se présente la syntaxe du BBcode ?
Le BBcode s'écrit sous cette forme : [paramètre(=option)]texte[/paramètre], le texte entre parenthèses étant optionnel, et dépendant du type du paramètre (il est normal que cela vous paraisse flou au premier abord, nous verrons cela en détails plus loin).
Voyons maintenant les différents types de paramètres et leurs options (vous comprendrez par la même occasion la signification de ces deux mots dans ce contexte).
Mettre du texte en gras
Le paramètre "b" permet de mettre le texte en gras : [b]texte en gras[/b] donnera : texte en gras.
Ce paramètre n'admet aucune d'option.
Mettre du texte en italique
Le paramètre "i" met le texte en italique : [i]texte en italique[/i] donnera : texte en italique.
Ce paramètre n'admet pas d'option non plus.
Souligner du texte
Le paramètre "u" souligne le texte : [u]texte souligné[/u] donnera : texte souligné.
Il n'admet pas d'option non plus.
Colorer du texte
Le paramètre "c", ou bien "color" colore le texte. Cependant, le paramètre seul ne suffit pas ici. Il faut aussi préciser comme option la couleur que l'on veut appliquer au texte. La syntaxe sera alors : [c=couleur]texte coloré[/c] ou [color=couleur]texte coloré[/color].
Il existe trois manières d'appeler une couleur :
- On l'appelle par son nom anglais, tout simplement. Ainsi, si vous voulez colorer votre texte en bleu, vous écrivez : [c=blue]texte en bleu[/c] qui donnera : texte en bleu. Si vous préférez le fuchsia (couleur penchant vers le rose), vous écrivez : [c=fuchsia]texte en fuchsia[/c] et vous obtiendrez : texte en fuchsia. Vous ne devriez pas avoir de mal à manipuler cela si vous avez des notions en Anglais. Cependant, cette manière d'appeler la couleur est très limitée (23 couleurs dans mon code). Si l'on veut des couleurs moins classiques, il faut utiliser autre chose.
- La notation héxadécimale, des milliers de possibilités !
Tout d'abord, la notation hexadécimale (16 chiffres) est une façon d'écrire des nombres en
utilisant les chiffres '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A' (10), 'B' (11), 'C' (12),
'D' (13), 'E' (14), et 'F' (15). On écrit le nom d'une couleur de cette manière avec six chiffres
héxadécimaux (admettant alors les "chiffres" de 'A' à 'F'), précédés d'un dièse.
On aura donc pour option quelque chose de ce genre : #fc52d6. L'inconvénient est qu'il est difficile de
savoir à quelle notation héxadécimale une couleur correspond. Aussi je vous donne des exemples
dont je ne connais pas les résultats (c'est tout de même assez "fun"
) :
[c=#642921]texte en couleur[/c] donnera texte en couleur
et [c=#fc52d6]texte en couleur[/c] donnera texte en couleur - On l'appelle par un nombre entre 0 et 68 qui lui correspond. Cette même méthode est utilisée régulièrement sur MSN. Ce nombre correspond à une couleur qui va du noir au ... noir. L'avantage de cette technique est le caractère court du code, et donc la rapidité à laquelle on l'écrit. Suit une série d'exemples recensant toutes les couleurs permises par ce genre d'option :
[c=0]texte[/c] donnera : texte
[c=1]texte[/c] donnera : texte
[c=2]texte[/c] donnera : texte
[c=3]texte[/c] donnera : texte
[c=4]texte[/c] donnera : texte
[c=5]texte[/c] donnera : texte
[c=6]texte[/c] donnera : texte
[c=7]texte[/c] donnera : texte
[c=8]texte[/c] donnera : texte
[c=9]texte[/c] donnera : texte
[c=10]texte[/c] donnera : texte
[c=11]texte[/c] donnera : texte
[c=12]texte[/c] donnera : texte
[c=13]texte[/c] donnera : texte
[c=14]texte[/c] donnera : texte
[c=15]texte[/c] donnera : texte
[c=16]texte[/c] donnera : texte
[c=17]texte[/c] donnera : texte
[c=18]texte[/c] donnera : texte
[c=19]texte[/c] donnera : texte
[c=20]texte[/c] donnera : texte
[c=21]texte[/c] donnera : texte
[c=22]texte[/c] donnera : texte
[c=23]texte[/c] donnera : texte
[c=24]texte[/c] donnera : texte
[c=25]texte[/c] donnera : texte
[c=26]texte[/c] donnera : texte
[c=27]texte[/c] donnera : texte
[c=28]texte[/c] donnera : texte
[c=29]texte[/c] donnera : texte
[c=30]texte[/c] donnera : texte
[c=31]texte[/c] donnera : texte
[c=32]texte[/c] donnera : texte
[c=33]texte[/c] donnera : texte
[c=34]texte[/c] donnera : texte
[c=35]texte[/c] donnera : texte
[c=36]texte[/c] donnera : texte
[c=37]texte[/c] donnera : texte
[c=38]texte[/c] donnera : texte
[c=39]texte[/c] donnera : texte
[c=40]texte[/c] donnera : texte
[c=41]texte[/c] donnera : texte
[c=42]texte[/c] donnera : texte
[c=43]texte[/c] donnera : texte
[c=44]texte[/c] donnera : texte
[c=45]texte[/c] donnera : texte
[c=46]texte[/c] donnera : texte
[c=47]texte[/c] donnera : texte
[c=48]texte[/c] donnera : texte
[c=49]texte[/c] donnera : texte
[c=50]texte[/c] donnera : texte
[c=51]texte[/c] donnera : texte
[c=52]texte[/c] donnera : texte
[c=53]texte[/c] donnera : texte
[c=54]texte[/c] donnera : texte
[c=55]texte[/c] donnera : texte
[c=56]texte[/c] donnera : texte
[c=57]texte[/c] donnera : texte
[c=58]texte[/c] donnera : texte
[c=59]texte[/c] donnera : texte
[c=60]texte[/c] donnera : texte
[c=61]texte[/c] donnera : texte
[c=62]texte[/c] donnera : texte
[c=63]texte[/c] donnera : texte
[c=64]texte[/c] donnera : texte
[c=65]texte[/c] donnera : texte
[c=66]texte[/c] donnera : texte
[c=67]texte[/c] donnera : texte
[c=68]texte[/c] donnera : texte
Surligner un texte
Le paramètre "a" surligne le texte d'une couleur définie comme option de la même manière que pour colorer le texte (le nom de la couleur en Anglais, la notation héxadécimale de la couleur, ou bien un nombre de 0 à 68). Voici des exemples avec la notation de la couleur par un nombre allant de 0 à 68 :
[a=0]texte[/a] donnera : texte
[a=1]texte[/a] donnera : texte
[a=2]texte[/a] donnera : texte
[a=3]texte[/a] donnera : texte
[a=4]texte[/a] donnera : texte
[a=5]texte[/a] donnera : texte
[a=6]texte[/a] donnera : texte
[a=7]texte[/a] donnera : texte
[a=8]texte[/a] donnera : texte
[a=9]texte[/a] donnera : texte
[a=10]texte[/a] donnera : texte
[a=11]texte[/a] donnera : texte
[a=12]texte[/a] donnera : texte
[a=13]texte[/a] donnera : texte
[a=14]texte[/a] donnera : texte
[a=15]texte[/a] donnera : texte
[a=16]texte[/a] donnera : texte
[a=17]texte[/a] donnera : texte
[a=18]texte[/a] donnera : texte
[a=19]texte[/a] donnera : texte
[a=20]texte[/a] donnera : texte
[a=21]texte[/a] donnera : texte
[a=22]texte[/a] donnera : texte
[a=23]texte[/a] donnera : texte
[a=24]texte[/a] donnera : texte
[a=25]texte[/a] donnera : texte
[a=26]texte[/a] donnera : texte
[a=27]texte[/a] donnera : texte
[a=28]texte[/a] donnera : texte
[a=29]texte[/a] donnera : texte
[a=30]texte[/a] donnera : texte
[a=31]texte[/a] donnera : texte
[a=32]texte[/a] donnera : texte
[a=33]texte[/a] donnera : texte
[a=34]texte[/a] donnera : texte
[a=35]texte[/a] donnera : texte
[a=36]texte[/a] donnera : texte
[a=37]texte[/a] donnera : texte
[a=38]texte[/a] donnera : texte
[a=39]texte[/a] donnera : texte
[a=40]texte[/a] donnera : texte
[a=41]texte[/a] donnera : texte
[a=42]texte[/a] donnera : texte
[a=43]texte[/a] donnera : texte
[a=44]texte[/a] donnera : texte
[a=45]texte[/a] donnera : texte
[a=46]texte[/a] donnera : texte
[a=47]texte[/a] donnera : texte
[a=48]texte[/a] donnera : texte
[a=49]texte[/a] donnera : texte
[a=50]texte[/a] donnera : texte
[a=51]texte[/a] donnera : texte
[a=52]texte[/a] donnera : texte
[a=53]texte[/a] donnera : texte
[a=54]texte[/a] donnera : texte
[a=55]texte[/a] donnera : texte
[a=56]texte[/a] donnera : texte
[a=57]texte[/a] donnera : texte
[a=58]texte[/a] donnera : texte
[a=59]texte[/a] donnera : texte
[a=60]texte[/a] donnera : texte
[a=61]texte[/a] donnera : texte
[a=62]texte[/a] donnera : texte
[a=63]texte[/a] donnera : texte
[a=64]texte[/a] donnera : texte
[a=65]texte[/a] donnera : texte
[a=66]texte[/a] donnera : texte
[a=67]texte[/a] donnera : texte
[a=68]texte[/a] donnera : texte
La petite astuce : comment créer un drapeau simple (comme celui de la France ou de l'Italie) grâce
au BBcode, en utilisant le surlignage et la couleur du texte ? Il s'agit tout simplement de
mettre autant de [a=] qu'il y a de couleurs dans le drapeau. Mais cela ne suffit pas, il faut
aussi définir un contenu au surlignage pour qu'il s'affiche. Bon d'accord, un drapeau avec du
texte par-dessus, ce n'est pas terrible, mais alors, réfléchissons un peu, comment pourrait-on éviter cela ?
Très simple : il suffit de colorer le texte de la même couleur que le surlignage ! Il ne reste alors
plus qu'à bidouiller le texte pour que les bandes de couleurs soient de longueur(s) adéquate(s).
Ainsi,
[a=12][c=12]FR[/c][/a][a=1][c=1]An[/c][/a][a=5][c=5]CE[/c][/a] donnera
FRAnCE
et [a=3][c=3]IT[/c][/a][a=16][c=16]AL[/c][/a][a=4][c=4]IA[/c][/a] :
ITALIA
!
Sur mon site,
ce genre de code s'affiche mal dans l'aperçu du message, mais bien lorsqu'il est enregistré.
Alors, pas de panique.
Modifier la taille du texte
Le paramètre "size" modifie la taille du texte, qui est indiquée comme option.
[size=16]texte[/size] donnera texte
Sur PC Conviction, ce paramètre n'est permis que sur le forum.
Code composé
Vous pouvez sans aucun problème composer vos codes. Ainsi, [b][i][u][a=8][c=11]texte[/c][/a][/u][/i][/b] donnera texte.
Bien entendu, quelque chose du genre : [c=12][c=11]texte[/c][/c] ne donnera que : texte, le même paramètre étant redéfini.
Insérer des smileys
Sur PC Conviction, vous pouvez insérer des smileys via leurs raccourcis :
"^^" donnera
"-_-" donnera 
"=P", "=p", ":P" ou ":p" donnera 
";)" donnera
"=)" ou ":)" donnera
"=(", ":(", "=@" ou ":@" donnera 
"=D", ":D", "=d" ou ":d" donnera 
"Oo" donnera 
":$" ou "=$" donnera 
":siffle:" donnera 
":censure:" donnera 
Si nécessaire, j'ajouterai de nouveaux smileys plus tard.
Insérer des images
Le paramètre "img" permet d'insérer une image dont le chemin est défini par le texte en dehors des crochets.
Ainsi, [img]http://www.pcconviction.com/image_a_afficher.jpg[/img] affichera l'image dont l'adresse web exacte est http://www.pcconviction.com/image_a_afficher.jpg.
Sur PC Conviction, ce code n'est permis que sur le forum.
Créer une liste
Les paramètres "list" et "*" permettent de créer une énumération.
La syntaxe, relativement spéciale, est :
[list]
[*]texte numéro 1
[*]texte numéro 2
[/list]
Cela aura pour résultat :
- texte numéro 1
- texte numéro 2
PC Conviction ne l'admet que sur son forum.
Citer du texte
Le paramètre "quote" permet de citer du texte, qui sera alors présenté différemment du texte normal.
Il n'admet pas d'option.
Sur PC Conviction, ce paramètre n'est pris en compte que par le forum.
Insérer du code
De la même manière, le paramètre "code" permet une présentation encore différente du texte pour préciser son statut de code (un programme, par exemple).
Lui non plus n'admet pas d'option.
De même, PC Conviction ne le prend en compte que sur le forum.
Insérer un lien
Le paramètre "url" permet d'insérer un lien.
Il peut s'écrire sans option ([url]http://www.pcconviction.com[/url] donnera : http://www.pcconviction.com), ou bien avec : [url=http://www.pcconviction.com]lien[/url] donnera : lien.
Sur PC Conviction, ce paramètre est pris en compte par le forum, mais sur la chatbox et le livre d'or, il suffit d'écrire l'adresse du lien pour le créer : http://www.pcconviction.com donnera : http://www.pcconviction.com.
Finissons-en avec ce cours
Le BBcode est utilisé sur de multiples plateformes. Tout ce que vous venez d'apprendre pourra donc vous être utile aussi bien sur MSN que sur la majorité des forums du Web, dont celui de PC Conviction, ou encore sur la chatbox ou le livre d'or du site.
Sur la chatbox de PC Conviction (dans le menu de gauche), des cases déroulantes vous permettent d'insérer du BBcode aussi facilement que rapidement.
J'espère que ce cours vous a plu et que vous en aurez tiré le maximum.
Accueil -> Cours -> Trucs et astuces
