Crabonautes, bonjour !
Dans ce tutoriel, vous allez découvrir des codes qui vous permettront de mettre en forme vos messages sur le forum sans utiliser les fonctions de l'éditeur.
Mieux encore : vous allez pouvoir faire des choses que les boutons de l'éditeur ne permettent pas !
C'est parti !
BBCode ? C'est quoi ?
Le BBCode est un code de balisage du texte (un peu comme le HTML) qui est mis en place dans certains forums pour mettre en forme et enrichir votre texte de manière plus ou moins avancée.
Il prend la forme de balises comme ceci :
Je veux écrire [b]ce mot[/b] en gras et [i]celui-là[/i] en italique.
Une balise de BBCode est donc entourée de crochets.
Comment ça s'écrit ?
Vous allez le voir avec les exemples ci-dessous, c'est très simple une fois que l'on a compris le principe.
S'il est nécessaire d'encadrer un mot ou un texte, il vous faudra une paire de balises, la dernière comportant un slash ( / ) juste avant le nom de la balise. C'est ainsi qu'on différencie la balise de départ et de fin.
Dans notre exemple plus haut, la première balise B n'a pas de slash. Elle signifie : « Ici commence un texte en gras ». Et la balise de fin qui contient un slash devant le B, signifie donc : « Ici s'arrête le texte en gras débuté précédemment ».
S'il n'est pas nécessaire d'encadrer quoi que ce soit, il n'y a qu'une seule balise (pour afficher une image par exemple).
Comment ça marche ?
C'est très simple, vous écrivez les balises directement dans le texte.
Si vous testez par vous-même, vous allez certainement me dire : « Mais ça ne marche pas ! Quand j'écris les balises dans mon texte, ça ne produit rien ! »
Et c'est normal, parce que le BBCode n'est appliqué qu'une fois que vous publiez votre message. Les balises ne sont interprétées que lorsque vous envoyez votre message, pas avant.
Autre principe : le BBCode ne fonctionne que sur l'éditeur de messages et non-pas dans les champs de titre ou d'étiquettes.
Les balises !
Assez théorisé, passons à la pratique :
METTRE EN FORME À L'INTÉRIEUR DE SON TEXTE
Pour mettre en forme à l'intérieur de votre texte, voici les balises qui fonctionneront sur le site :
Texte en [b]gras[/b], [i]italique[/i], [u]souligné[/u], [s]barré[/s], en [sup]exposant[/sup] ou en [sub]indice[/sub], [color=red]en couleur[/color], [font=Courier]avec une police différente[/font].
Résultat :
Texte en gras, italique, souligné, barré, en exposant ou en indice, en couleur, avec une police différente.
Note : la couleur peut s'écrire aussi en hexadécimal (#fff ou #3a8f6d par exemple).
Pour obtenir ces codes, vous pouvez utiliser cet outil en ligne parmi d'autres.
ALIGNER SES PARAGRAPHES
[right]À droite.[/right][left]À gauche (par défaut).[/left][center]Au centre.[/center]
Résultat :
À droite.
À gauche (par défaut).
Au centre.
Note : Il n'est pas utile de passer à la ligne, les paragraphes sont générés automatiquement avec ces balises.
FAIRE UNE CITATION
[quote]Texte cité[/quote]
Résultat :
Note : Mettre un nom d'auteur ne sert à rien, car il n'est pas pris en compte.
Pour du code, c'est la balise suivante :
[code]Bout de code à afficher[/code]
Résultat :
Bout de code à afficher
CACHER UN TEXTE (SPOILER)
[spoiler]Texte à cacher.[/spoiler]
Résultat :
ÉCRIRE UNE LISTE
Liste à puces :
[list]
[*]Truc
[*]Machin
[*]Bidule
[/list]
Résultat :
Truc
Machin
Bidule
Pour les listes ordonnées, il suffit de modifier la première balise :
list=1 Pour une liste numérotée list=a Pour une liste alphabétique en minuscules list=A Pour une liste alphabétique en majuscules list=I (lettre i majuscule) Pour une liste numérotée en chiffres romains
Démonstration pour la numérotée :
Truc
Machin
Bidule
L'alphabétique en minuscules :
Truc
Machin
Bidule
L'alphabétique en majuscules :
Truc
Machin
Bidule
Et celle en chiffres romains :
Truc
Machin
Bidule
GÉNÉRER UNE LIGNE DE SÉPARATION
texte[hr]texte
Résultat :
texte
texte
FAIRE UN LIEN WEB
Texte [url=http://www.perdu.com]texte du lien[/url] texte.
Résultat :
Texte texte du lien texte.
Note : pas besoin d'encadrer le lien entre guillemets.
INSÉRER UNE IMAGE DÉJÀ EN LIGNE
Pour cela, il vous faut son adresse (URL) directe, qui commence par http et se termine en .jpg ou .png ou .gif :
[img=http://adresse_de_limage.jpg]
Exemple de résultat :
Note : idem, pas besoin d'encadrer l'URL entre guillemets.
AJOUTER UNE VIDÉO YOUTUBE OU VIMEO
Collez simplement son adresse (URL) et ajoutez un espace.
https://youtu.be/4iQETIfbzvk
Résultat :
Note : En réalité, il ne s'agit pas de BBCode pour cette dernière astuce : c'est une fonction du forum.
En revanche, cette dernière fonction est inefficace pour les adresses de vidéos de la plateforme Dailymotion (entre autres).
Pour terminer
Vous voilà parés !
N'hésitez pas à tester des balises que je n'aurais pas listé dans ce tuto. Pour faire vos essais en privé, vous pouvez vous envoyer un message privé à vous-même. Et venez nous faire part de vos trouvailles !
Bonne rédaction à toutes et à tous !