[Fiche] Forumactif - Le BBcode

Le BBcode s'utilise généralement sur les forums. Dans cette fiche, je parlerai uniquement du BBcode disponible sur Forumactif, les codes pouvant varier d'un serveur à l'autre. Le BBcode ne doit pas être confondu avec le HTML et le CSS ! Pour en apprendre plus sur ces deux autres styles de codage, voici la fiche à leur sujet.


I. Le BBcode, en bref

Peut-être que ce nom ne vous dit rien, mais vous devez sûrement connaître le BBcode. Vous voyez tous les "outils" disponibles pour éditer votre texte, au dessus du champ d'écriture d'un message ? Ils servent à mettre du gras, centrer le texte, etc. Ce sont des balises de BBcode. Contrairement aux HTML, qui utilisent des balises de ce genre < >, le BBcode utilise des balises comme ceci [ ].


II. Utiliser le BBcode

Pour écrire un code, il faudra employer les balises de cette façon :

Code:

[b]Mettre le texte en gras[/b]

Décortiquons tout ça. Le texte qui sera modifié par le BBcode doit être entouré par les balises. La première balise est simple : [ ]. Néanmoins, la balise fermant le code doit être écrite comme ça impérativement : [/ ] ! Si le slash n'est pas présent, le code s'appliquera jusqu'à la fin du message. Pour finir, il y a un certain code à placer à l'intérieur de ces balises, qui définira l'effet à appliquer sur le texte.

Pour aller un peu plus loin, vous pouvez également, par exemple, centrer tout votre texte mais ne mettre en gras qu'une partie.

Code:

[center][b]Bla bla bla[/b] bla bla bla bla bla[/center]

D'où l'importance de toujours refermer ces balises si vous ne souhaitez appliquer un effet qu'à un certain endroit du texte !

Forumactif facilite l'édition de texte en vous offrant la possibilité de cliquer sur l'effet de votre choix, ce qui créera automatiquement la première balise au premier clic, et la fermera ensuite au second. Vous pouvez également, à l'aide de votre souris, sélectionner le texte à modifier pour n'avoir à cliquer qu'une fois sur l'effet désiré.

Il est cependant très utile de connaître les différents codes. C'est d'ailleurs un bon début pour l'apprentissage du HTML, qui dispose de codes similaires.


III. Liste du BBcode disponible sur Forumactif

Voici la liste du BBcode disponible sur Forumactif.

Effets de texte

Permet de mettre le texte en gras. Exemple : Texte.

Code:

[b]Texte[/b]

Permet de mettre le texte en italique. Exemple : Texte.

Code:

[i]Texte[/i]

Permet de souligner le texte. Exemple : Texte.

Code:

[u]Texte[/u]

Permet de barrer le texte. Exemple : Texte.

Code:

[strike]Texte[/strike]

Permet de changer la taille du texte. Exemple : Texte. (taille 9)

Code:

[size=9]Texte[/size]
[size="Nombre"]Texte[/size]

Plus le nombre entré est grand, plus le texte sera grand ! Sachez cependant que sur forum, il y a souvent une limite de taille (environ 30).
Permet de changer la couleur du texte. Exemple : Texte. (green : vert)

Code:

[color="Couleur en anglais"]Texte[/color]

Vous pouvez entrer une couleur en anglais ou un code hexadécimal. [ Liste des couleurs ]
Permet de changer la police du texte. Exemple : Texte. (Police : Impact)

Code:

[font="Nom de la police"]Texte[/font]

Attention, il n'y a que certaines polices qui peuvent être utilisées avec ce code : il s'agit des polices choisies par les administrateurs du forum. Pour utiliser une police téléchargée, il faudra que la police soit rentrée dans les paramètres du forum et seules les personnes qui auront également téléchargé la police pourront la voir, donc ce n'est pas conseillé. Les polices disponibles sont listées par Forumactif en cliquant sur le bouton des polices.


Alignement du texte

Permet d'aligner le texte à gauche.

Code:

[left]Texte[/left]

Permet de centrer le texte.

Code:

[center]Texte[/center]

Permet d'aligner le texte à droite.

Code:

[right]Texte[/right]

Permet de justifier le texte.

Code:

[justify]Texte[/justify]

Listes, tableaux et mise en page

Permet de créer une liste.

Code:

[list]Texte[/list]

Permet de créer une liste ordonnée.

Code:

[list=1]Texte[/list]

Lors de la création de liste, utilisez le code ci-dessous pour créer un point (•) ou un numéro (1. - 2. etc.) avec la liste ordonnée.

Code:

[ * ] sans les espaces

Permet d'insérer un séparateur, configurable par le CSS. /!\ Code particulier

Code:

Texte[hr]Texte

Permet d'insérer un tableau

Code:

[table]Texte[/table]

À l'intérieur de votre tableau, utilisez les balises tr pour créer des colonnes et les balises td pour créer des lignes.

Code:

[table][tr][td]Texte[/td][/tr][/table]

Les tableaux étant complexes à utiliser, un autre tutoriel leur sera réservé.

Citer et montrer un code

Permet de créer une citation. Exemple :

Yuu a écrit:

Voici une citation

Code:

[quote]Texte[/quote] ou [quote="Pseudo"]Texte[/quote]

Permet de créer une zone désactivant le code (comme utilisé dans ce tutoriel).

Code:

[code]Texte[/code]

Insérer médias, liens et images

Permet d'insérer une image. (utilisé pour les images ci-contre)

Code:

[img]URL[/img]

Permet d'insérer un lien (utilisable sur une image). Exemple : Je suis un lien !

Code:

[url="Lien"]Texte[/url]

Permet d'insérer un fichier flash. (comme une vidéo YouTube par exemple)

Code:

[flash(largeur,hauteur)]URL[/flash]

Divers effets

Permet de mettre le texte en indice. Exemple : _Texte

Code:

[sub]Texte[/sub]

Permet de mettre le texte en exposant. Exemple : ^Texte

Code:

[sup]Texte[/sup]

Permet de mettre le texte en spoiler. (utilisé dans ce tutoriel)

Code:

[spoiler]Texte[/spoiler] ou [spoiler="Texte"]Texte[/spoiler]

Permet de cacher le texte aux autres membres sauf modos et admins.

Code:

[hide]Texte[/hide]

Permet de faire défiler le texte horizontalement.

Code:

[scroll]Texte[/scroll]

Permet de faire défiler le texte verticalement.

Code:

[updown]Texte[/updown]

Cette liste n'est sûrement pas exhaustive.