Un Nouveau Forum > Bienvenue, FAQ et infos

🧰 TUTORIEL Le BBCODE, c'est quoi ? BBCODE pour les nuls !

(1/1)

Coccinelle:
Le BBCODE, c'est quoi ? BBCODE pour les nuls !

[bb]

Tout les membres du forum auront remarqué que, par défaut, la saisie d'un message se fait comme si on était sur un simple éditeur de texte, c'est à dire sans aucune apparente possibilité de mise en page : pas de gras, pas d'italique, pas de couleur... Bref, rien à voir avec un joli traitement de texte comme Word où une simple sélection de texte à la souris permet de formater le texte à volonté, et surtout, où le résultat se voit tout de suite. Cela peut donc déconcerter et même donner l'impression que ce forum appartient à l'âge de pierre de l'informatique.

Si vous faites partie de ces coccinautes perplexes, c'est parfait, car ce petit article a été rédigé pour vous. Il est écrit pour expliquer comment mettre en page votre texte alors que rien ne semble prévu pour, et surtout pourquoi « l'âge de pierre » a parfois du bon ;) .

Ce tutoriel est donc expliqué simplement, il va à l'essentiel, est pratique, et a pour but de faire de vous un pro du... BBCODE !

BBCODE ::) ? C'est quoi ce truc ?

Quand à la fin du siècle dernier les forums informatiques ont commencé à fleurir sur internet, le besoin de colorer un peu les messages s'est vite imposé. On savait déjà le faire pour les pages web, même qu'un langage de mise en forme avait était créé pour cela, avec un joli petit nom : le HTML (acronyme de HyperText Markup Language). Une idée simple et ingénieuse : une page HTML c'est du pur texte, mais les parties auxquelles on souhaite appliquer une mise en forme particulière sont entourées par un chevron entrant  <> et un chevron sortant  </> . On appelle ça des balises. Il suffit ensuite d'insérer au sein des balises un code textuel indiquant la nature de la mise à forme à appliquer. Par exemple, pour mettre un texte en italique, on rajoute bêtement la lettre i.

Voici un exemple :
Code: Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous<i>Ceci est un texte en italique</i>
--- Fin du code ---
donne : Ceci est un texte en italique

Rien de sorcier donc. Seulement voilà, il y a un hic : insérer du code HTML dans le corps d'un message sur un forum peut poser de sérieux problème de sécurité, car le HTML, ce n'est pas juste une histoire d'italique et ou de jolies couleurs. Donc on a inventé un langage de mise en forme similaire, mais volontairement limité. Et c'est comme ça qu'est né le langage de mise en forme BBCODE.

BBCODE signifie  Bulletin Board Code, « bulletin board » étant le surnom anglais des forums de discussion. Sa différence la plus flagrante par rapport au HTML, est que ce ne sont pas des chevrons qui sont utilisés pour les balises, mais des crochets :  [] et  [/] . C'est d'ailleurs à cela qu'on reconnaît du premier coup d’œil qu'un texte est du BBCODE et non du HTML.

Ainsi, en BBCODE, notre exemple précédent devient :

Code: Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous[i]Ceci est un texte en italique[/i]
--- Fin du code ---

Sur un clavier français, on obtient les crochets avec les touches Alt-Gr-5 pour   [   et Alt-Gr-) pour   ]  . Pourquoi tant de complications ? C'est que sur un clavier anglais, les crochets sont accessibles sans combinaison de touches, et comme le BBCODE est une création anglo-saxonne... Les Français n'avaient qu'à être plus rapides ;D !

Le BBCODE diffère aussi du HTML par ces points :

✅ Si le langage est à la base limité, il est plus explicite et convivial que le HTML.
✅ Il ne répond pas à des normes précises, même s'il existe une convention pour les balises les plus courantes, sinon d'un forum à l'autre ça deviendrait ingérable (gras, italique, alignement, insertion d'une image...).
✅ L'absence de normalisation oblige l'utilisateur à s'adapter à chaque forum : une balise peut fonctionner sur un forum et pas un autre.
✅ Cette absence de normalisation fait aussi qu'un administrateur de forum peut créer une foule de BBCODE originaux, alors que le HTML est figé, car normalisé.

Pourquoi utiliser du BBCODE plutôt que la WYSIWYG ?

Sur ce forum (comme sur beaucoup d'autres), il est bien entendu possible de rédiger ses messages comme on le fait avec un traitement de texte : il suffit de sélectionner une portion de texte, de lui appliquer une mise en forme particulière, et le résultat est visuel et immédiat. Seulement voilà, si le WYSIWYG (What You See Is What You Get, vous obtenez ce que vous voyez) peut dépanner... :

✅ ... Le BBCODE peut évoluer en fonction de ses propres besoins, avec la création de balises personnalisées.
✅ ... Le BBCODE permet de structurer sa mise en page.
✅ ... Le BBCODE permet avec une simple balise de formater des paragraphes entiers (comme des styles).
✅ ... Surtout : vous pouvez sauvegarder votre texte en BBCODE dans un simple fichier texte pour une utilisation future sur un autre forum (moyennant peut-être adaptation pour les balises non conventionnelles).
 
Comment utiliser le BBCODE sur ce forum ?

Pour bien utiliser le BBCODE, gardez à l'esprit ces petites choses

✅ Le BBCODE, ce n'est que du texte, donc copiez-coller à volonté, vous ne risquez pas de faire des bêtises. Utilisez souvent la fonction Prévisualiser pour voir ce que donne votre prose.
✅ Toute balise ouverte doit être fermée :
Code: Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous[b]mauvais
[b]bon[/b]
--- Fin du code ---
✅ Ne croisez jamais les balises. Lorsque des balises sont imbriquées, elles doivent être fermées dans le bon ordre :
Code: Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous[b][i]mauvais[/b][/i]
[b][i]bon[/i][/b]
--- Fin du code ---
✅ Une balise peut parfois avoir un attribut, dont la valeur est précédée du égal  = .

Exemple 1 :
Code: Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous[color=red]J'écris en rouge[/color]
--- Fin du code ---
donne : J'écris en rouge
Code: Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous[color=#008800]J'écris en vert foncé[/color]
--- Fin du code ---
donne : J'écris en vert foncé

Exemple 2 :
Code: Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous[picw=240]http://cocci10.fredisland.net/modules/images/COCCIKIT.png[/picw]
--- Fin du code ---
donne une image forcée à 240 pixels de large :
(picw est une balise spéciale de ce forum, ainsi que d'autres que vous pourrez tester à volonté.)

Exemple 3 -  Une URL peut s'écrire de deux façons:
Code: Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vousSans titre : [url]http://cocci10.fredisland.net/fofo[/url]
Avec titre : [url=http://cocci10.fredisland.net/fofo]Le forum Cocci 10[/url]
--- Fin du code ---
Donnent :
Sans titre :  Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous
Avec titre : Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous

Utilisation

Vous avez donc compris que toute portion de texte que vous souhaitez formater doit être entourée de balises BBCODE.

Les boutons en haut de l'éditeur vous permettent d'insérer directement ces balises plutôt qu'avoir à les apprendre par cœur pour ensuite les saisir au clavier avec tous les risques d'erreur que cela comporte. Sachez simplement que :
✅ Si vous n'avez sélectionné aucun texte et que vous cliquez sur un bouton BBCODE, les balises seront insérées telles quelles à l'emplacement du curseur. À vous ensuite d'insérer à l'intérieur votre texte (usez et abusez du copier-coller que je vous dis !).
Exemple avec la balise IMG :
Code: Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous[img][/img]
--- Fin du code ---
✅ Si vous cliquez sur un bouton BBCODE après avoir sélectionné du texte, les balises seront insérées de part et d'autre de la sélection.
Exemple avec la même balise IMG une fois que l'url de l'image est sélectionnée :
Code: Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous[img]http://cocci10.fredisland.net/modules/images/COCCIKIT.png[/img]
--- Fin du code ---
✅ Une petite exception pour les binettes : ce ne sont pas du BBCODE, mais elles sont apparentées. Elles ne comportent toutefois pas de balises.
✅ Si vous laissez quelques instant le pointeur de votre souris par-dessus un bouton BBCODE, une petite infobulle d'aide s'affiche.


Voilà, vous savez tout. À vous de jouer avec le BBCODE !

Pour conclure, je vous invite à consulter cette page qui vous parle des BBCODE cachés du forum :
Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous

Exercice

À vous de plancher ;) :

Cocci 10, c'est vraiment cool !

Navigation

[0] Index des messages