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 brefPeut-ê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 BBcodePour é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 ForumactifVoici la liste du BBcode disponible sur Forumactif.
Effets de texte![[Fiche] Forumactif - Le BBcode Tuto0110](https://i.servimg.com/u/f83/15/33/52/85/tuto0110.png)
Permet de mettre le texte en gras. Exemple :
Texte.
- Code:
-
[b]Texte[/b]
![[Fiche] Forumactif - Le BBcode Tuto0210](https://i.servimg.com/u/f83/15/33/52/85/tuto0210.png)
Permet de mettre le texte en italique. Exemple :
Texte.
- Code:
-
[i]Texte[/i]
![[Fiche] Forumactif - Le BBcode Tuto0310](https://i.servimg.com/u/f83/15/33/52/85/tuto0310.png)
Permet de souligner le texte. Exemple :
Texte.
- Code:
-
[u]Texte[/u]
![[Fiche] Forumactif - Le BBcode Tuto0410](https://i.servimg.com/u/f83/15/33/52/85/tuto0410.png)
Permet de barrer le texte. Exemple :
Texte.
- Code:
-
[strike]Texte[/strike]
![[Fiche] Forumactif - Le BBcode Tuto1810](https://i.servimg.com/u/f83/15/33/52/85/tuto1810.png)
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).![[Fiche] Forumactif - Le BBcode Tuto1910](https://i.servimg.com/u/f83/15/33/52/85/tuto1910.png)
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 ]![[Fiche] Forumactif - Le BBcode Tuto2010](https://i.servimg.com/u/f83/15/33/52/85/tuto2010.png)
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![[Fiche] Forumactif - Le BBcode Tuto0510](https://i.servimg.com/u/f83/15/33/52/85/tuto0510.png)
Permet d'aligner le texte à gauche.
- Code:
-
[left]Texte[/left]
![[Fiche] Forumactif - Le BBcode Tuto0610](https://i.servimg.com/u/f83/15/33/52/85/tuto0610.png)
Permet de centrer le texte.
- Code:
-
[center]Texte[/center]
![[Fiche] Forumactif - Le BBcode Tuto0710](https://i.servimg.com/u/f83/15/33/52/85/tuto0710.png)
Permet d'aligner le texte à droite.
- Code:
-
[right]Texte[/right]
![[Fiche] Forumactif - Le BBcode Tuto0810](https://i.servimg.com/u/f83/15/33/52/85/tuto0810.png)
Permet de justifier le texte.
- Code:
-
[justify]Texte[/justify]
Listes, tableaux et mise en page![[Fiche] Forumactif - Le BBcode Tuto0910](https://i.servimg.com/u/f83/15/33/52/85/tuto0910.png)
Permet de créer une liste.
- Code:
-
[list]Texte[/list]
![[Fiche] Forumactif - Le BBcode Tuto1010](https://i.servimg.com/u/f83/15/33/52/85/tuto1010.png)
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
![[Fiche] Forumactif - Le BBcode Tuto1110](https://i.servimg.com/u/f83/15/33/52/85/tuto1110.png)
Permet d'insérer un séparateur, configurable par le CSS.
/!\ Code particulier - Code:
-
Texte[hr]Texte
![[Fiche] Forumactif - Le BBcode Tuto1210](https://i.servimg.com/u/f83/15/33/52/85/tuto1210.png)
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![[Fiche] Forumactif - Le BBcode Tuto1310](https://i.servimg.com/u/f83/15/33/52/85/tuto1310.png)
Permet de créer une citation. Exemple :
- Yuu a écrit:
- Voici une citation
- Code:
-
[quote]Texte[/quote] ou [quote="Pseudo"]Texte[/quote]
![[Fiche] Forumactif - Le BBcode Tuto1410](https://i.servimg.com/u/f83/15/33/52/85/tuto1410.png)
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![[Fiche] Forumactif - Le BBcode Tuto1510](https://i.servimg.com/u/f83/15/33/52/85/tuto1510.png)
Permet d'insérer une image. (utilisé pour les images ci-contre)
- Code:
-
[img]URL[/img]
![[Fiche] Forumactif - Le BBcode Tuto1610](https://i.servimg.com/u/f83/15/33/52/85/tuto1610.png)
Permet d'insérer un lien (utilisable sur une image). Exemple :
Je suis un lien ! - Code:
-
[url="Lien"]Texte[/url]
![[Fiche] Forumactif - Le BBcode Tuto1710](https://i.servimg.com/u/f83/15/33/52/85/tuto1710.png)
Permet d'insérer un fichier flash. (comme une vidéo YouTube par exemple)
- Code:
-
[flash(largeur,hauteur)]URL[/flash]
Divers effets![[Fiche] Forumactif - Le BBcode Tuto2110](https://i.servimg.com/u/f83/15/33/52/85/tuto2110.png)
Permet de mettre le texte en indice. Exemple :
Texte - Code:
-
[sub]Texte[/sub]
![[Fiche] Forumactif - Le BBcode Tuto2110](https://i.servimg.com/u/f83/15/33/52/85/tuto2110.png)
Permet de mettre le texte en exposant. Exemple :
Texte - Code:
-
[sup]Texte[/sup]
![[Fiche] Forumactif - Le BBcode Tuto2110](https://i.servimg.com/u/f83/15/33/52/85/tuto2110.png)
Permet de mettre le texte en spoiler. (utilisé dans ce tutoriel)
- Code:
-
[spoiler]Texte[/spoiler] ou [spoiler="Texte"]Texte[/spoiler]
![[Fiche] Forumactif - Le BBcode Tuto2110](https://i.servimg.com/u/f83/15/33/52/85/tuto2110.png)
Permet de cacher le texte aux autres membres sauf modos et admins.
- Code:
-
[hide]Texte[/hide]
![[Fiche] Forumactif - Le BBcode Tuto2110](https://i.servimg.com/u/f83/15/33/52/85/tuto2110.png)
Permet de faire défiler le texte horizontalement.
- Code:
-
[scroll]Texte[/scroll]
![[Fiche] Forumactif - Le BBcode Tuto2110](https://i.servimg.com/u/f83/15/33/52/85/tuto2110.png)
Permet de faire défiler le texte verticalement.
- Code:
-
[updown]Texte[/updown]
Cette liste n'est sûrement pas exhaustive.