Le BBcode, qu'est-ce que c'est ?, Explications et liste des balises disponibles Options

[Volyova]

Le BBcode, qu’est-ce que c’est ?

1. Définition du BBcode
2. Comment ça marche ?
3. Comment appliquer le BBcode ?
4. Exemple de mises en forme multiples sur un même texte
5. Exemple de mise en forme complexe
   A
   A

1 - Définition

Le Wiki nous dit :

BBCode est l'abréviation de Bulletin Board Code, une simplification du langage HTML utilisée pour mettre en forme les messages de forums de discussion. Par abus de langage, les éléments du BBCode sont appelés balises. Le nom d'une balise est délimité par les crochets [ et ], contrairement au HTML où les caractères < et > sont utilisés. Certaines balises ont une propriété, aussi appelée attribut, dont la valeur est assignée à la balise elle-même à l'aide du symbole =.

Plus simplement, le BBcode permet à l’utilisateur de mettre en forme ses messages en leur appliquant des contraintes
de taille, de couleur, de style (gras, italique, souligné, barré) etc.
Pour simplifier l’usage du BBcode, les moteurs de forums le proposent sous la forme de boutons cliquables accessibles dans la fenêtre de rédaction des messages.

(IMG:http://myst-aventure.com/forum/style_images/2/sepsign.gif)


2 - Le BBcode comment ça marche ?

Le code ?

Pour que le moteur du forum sache à quelle partie de votre texte il doit appliquer la mise en forme,
il faut que vous délimitiez cette partie.
On fait ça à l’aide balises.
Les balises sont des crochets ouvrant [] : le début de la mise en forme
et fermant : [/] la fin de la mise en forme
On indique donc que la mise en forme commence en plaçant des crochets ouvrants puis on indique qu’elle se termine
avec les crochets fermants et le slash qui met fin à l’ordre de mise en forme
Il est impératif d’ouvrir et de fermer ses balises. Une balise incomplète ne fonctionne pas.
D’ailleurs, le moteur du forum vous signalera une balise incomplète.

Le moteur doit aussi savoir quel type de mise en forme vous désirez appliquer.
On utilise pour cela les attributs (qui se placent dans les balises)
les attributs : b pour gras, i pour italique, s pour barré etc.

voici donc, par exemple, la balise complète pour mettre un texte en gras :

CODE

[b]le texte à mettre en forme[/b]

(IMG:http://myst-aventure.com/forum/style_images/2/sepsign.gif)


3 - Comment appliquer le code ?

Pour appliquer ces balises et attributs on utilise les boutons de mise en forme
présents dans la fenêtre de rédaction des messages.
Ils « écrivent » les balises à votre place!

(IMG:https://www.ufo-3d.fr/gallery/upload/2022/12/04/20221204175142-36a42c7d.jpg)

1- Sélectionner, en le surlignant, le texte ou les éléments auxquels vous désirez appliquer une mise en forme quelconque.
2 - Cliquer sur le bouton de mise en forme que vous souhaitez appliquer en haut de la fenêtre de rédaction.
3 - les balises encadrent automatiquement le texte ou l'élément que vous aviez sélectionné
4 - vérifiez si vous le voulez que la mise en forme de votre texte est correcte
en cliquant sur le bouton de prévisualisation en bas de la fenêtre de rédaction
5 - la prévisualisation affiche le texte tel qu’il apparaîtra lorsque vous aurez posté votre message

(IMG:http://myst-aventure.com/-grover/image/balises.gif)

(IMG:http://myst-aventure.com/forum/style_images/2/sepsign.gif)


4 - Exemple de mises en forme multiples
sur un même texte

On peut bien sûr appliquer plusieurs mises en forme au même texte.
Ainsi la phrase ci-dessous est mise en forme grâce à 4 balises différentes.

J’adooooooooore la Montbélliard.

1 - La balise gras lui a d’abord était appliqué
2 - puis on a sélectionné tout le texte ET les balises ouvrantes et fermantes gras pour appliquer la balise de couleur
3 – on a ensuite sélectionné le texte ET LES DEUX balises précédentes pour appliquer la balise barré
4 – l’ensemble du texte ET LES TROIS BALISES précédentes sont enfin sélectionnées
et on applique la balise de position du texte centré

(IMG:http://myst-aventure.com/-grover/image/mise-en-forme.gif)

(IMG:http://myst-aventure.com/forum/style_images/2/sepsign.gif)


5 - Exemple de mise en forme complexe

Des mises en forme complexes sont donc possibles, incluant des titres de différentes tailles, couleurs et styles,
des alignements de texte divers, des citations, des images, des liens nommés, des vidéos You tube etc.

Voir l’exemple ci-dessous et son code juste après.

La charcuterie
Un article de Wikipédia, l'encyclopédie libre plus quelques ajouts personnels

(IMG:http://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Saucisson_02.JPG/400px-Saucisson_02.JPG)
Charcuterie traditionnelle de montagne

La charcuterie désigne l'ensemble des préparations alimentaires principalement à base de viande de porc crue ou cuite et souvent de sel comme agent de conservation. En Italie, la charcuterie se nomme salumeria, dérivé du mot latin "sal", le sel. La charcuterie utilise l'ensemble des parties du porc. Elle emploie également d'autres viandes, notamment de gibier. Le nombre de spécialités est très élevé, les plus importantes sont les jambons, les pâtés, les saucisses et saucissons. Le terme désigne aussi le magasin dans lequel se vendent ces produits.

Sommaire

1. Historique
2. Principaux plats de charcuterie
3. Quelques produits AOC
4. Une vidéo sur le sujet
5. Quelques citations sur le sujet

1 - Historique

La pratique de la charcuterie remonte à des temps forts anciens. Ce sont les Romains qui mirent en pratique une certaine façon d'accommoder les viandes et, plus précisément, celle de porc. Cette viande, il est vrai, se prête bien au salage et au fumage. En France, la profession de charcutier a eu du mal à s'imposer. Ce n'est qu'au XVe siècle que les charcutiers obtinrent le droit d'être les seuls à vendre de la viande de porc crue, cuite ou apprêtée. Ils durent attendre le XVIe siècle pour avoir l'autorisation de tuer eux-mêmes les porcs. Jusqu'alors, ils achetaient cette viande aux bouchers. Le terme apparu vers le XVIe siècle dérive de "chair cuite". C'est en 1475 à Paris, que la corporation des charcutiers "chair cuitiers" devint autonome et distincte de celle des bouchers qui conservaient le privilège de vendre des chairs fraîches.

(IMG:http://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Saucisson_03.JPG/200px-Saucisson_03.JPG)

2 - Principaux plats de charcuterie
Parmi les plats de charcuterie que l'on trouve couramment, on peut citer :

• le jambon cru, le jambon blanc ou jambon glacé, le jambon poché, le jambon désossé et moulé en gelée,
• le jambon roulé, le jambon persillé ;
• le jambonneau cru, le jambonneau salé ou fumé ;
• l'andouille et l'andouillette ;
• le boudin blanc, le boudin noir ;
• les crépinettes (petites saucisses plates), la hure, les galantines ;
• les multiples saucisses et saucissons frais ou secs ;
• les pâtés de campagne, de foie, rillettes...

(IMG:http://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Wurst1.JPG/200px-Wurst1.JPG)

3 - Quelques produits AOC

Saucisse de Morteau, Saucisse de Montbéliard, Jambon de Luxeuil...

4 - Une vidéo sur le sujet

Les Deschiens - La Charcuterie pour les enfants

5 - Quelques citations sur le sujet

Lorsque le saucisson est trop long, on y remédie facilement.
Proverbe danois

Le jambon fait boire Or, le boire désaltère Donc, le jambon désaltère.
Montaigne

Les seules créatures qui s'accouplent en se faisant face sont l'homme et le sandwich au pâté.
François Cavanna

(IMG:http://myst-aventure.com/forum/style_images/2/sepsign.gif)

Le code de l'article ci-dessus :

CODE

[center][color=#CC0000][size=6]Sommaire[/size][/color]
[list=1]
[*]Historique
[*]Principaux plats de charcuterie
[*]Quelques produits AOC
[*]Une vidéo sur le sujet
[*]Quelques citations sur le sujet
[/list][/center]

[color=#CC0000][size=6]1 - Historique[/size][/color]

[font=Palatino Linotype]La pratique de la charcuterie remonte à des temps forts anciens. Ce sont les [u]Romains[/u] qui mirent en pratique une certaine façon d'accommoder les viandes et, plus précisément, celle de porc. Cette viande, il est vrai, se prête bien au salage et au fumage. En France, la profession de charcutier a eu du mal à s'imposer. [u]Ce n'est qu'au XVe siècle [/u] que les charcutiers obtinrent le droit d'être les seuls à vendre de la viande de porc crue, cuite ou apprêtée. Ils durent attendre le XVIe siècle pour avoir l'autorisation de tuer eux-mêmes les porcs. Jusqu'alors, ils achetaient cette viande aux bouchers. Le terme apparu vers le XVIe siècle dérive de "chair cuite". C'est en [u]1475 à Paris[/u], que la corporation des charcutiers [u]"chair cuitiers"[/u] devint autonome et distincte de celle des bouchers qui conservaient le privilège de vendre des chairs fraîches.[/font]

[center][img]http://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Saucisson_03.JPG/200px-Saucisson_03.JPG[/img][/center]

[color=#CC0000][size=6]2 - Principaux plats de charcuterie[/size][/color]
Parmi les plats de charcuterie que l'on trouve couramment, on peut citer :

[color=#993300][list]
[*]le jambon cru, le jambon blanc ou jambon glacé, le jambon poché, le jambon désossé et moulé en gelée, [*]le jambon roulé, le jambon persillé;
[*]le jambonneau cru, le jambonneau salé ou fumé;
[*]l'andouille et l'andouillette;
[*]le boudin blanc, le boudin noir;
[*]les crépinettes (petites saucisses plates), la hure, les galantines;
[*]les multiples saucisses et saucissons frais ou secs;
[*]les pâtés de campagne, de foie, rillettes... [/list][/color]

[center][img]http://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Wurst1.JPG/200px-Wurst1.JPG[/img][/center]

[color=#CC0000][size=6]3 - Quelques produits AOC[/size][/color]

[url=http://fr.wikipedia.org/wiki/Saucisse_de_Morteau]Saucisse de Morteau[/url], [url=http://fr.wikipedia.org/wiki/Saucisse_de_Montb%C3%A9liard]Saucisse de Montbéliard[/url], [url=http://fr.wikipedia.org/wiki/Jambon_de_Luxeuil]Jambon de Luxeuil[/url]...

[color=#CC0000][size=6]4 - Une vidéo sur le sujet[/size][/color]

[center]Les Deschiens - La Charcuterie pour les enfants
[yt]VnwYT8uyaw0[/yt][/center]

[color=#CC0000][size=6]5 - Quelques citations sur le sujet[/size][/color]

[quote][center]Lorsque le saucisson est trop long, on y remédie facilement.
Proverbe danois[/center][/quote]

[quote][center]Le jambon fait boire Or, le boire désaltère Donc, le jambon désaltère.
Montaigne[/center][/quote]

[quote][center]Les seules créatures qui s'accouplent en se faisant face sont l'homme et le sandwich au pâté.
François Cavanna[/center][/quote]

[center][img]http://myst-aventure.com/forum/style_images/2/sepsign.gif[/img][/center]

[Volyova]

Qu’est-ce qu’on peut faire avec le BBcode ?
Quelles sont les balises disponibles ?



(IMG:https://www.ufo-3d.fr/gallery/upload/2022/12/04/20221204175142-de20d468.jpg) ---> Police

CODE

[font=nom de la police]votre texte[/font]

vous donne la possibilité d’utiliser une autre police que celle par défaut (Verdana)
Attention, cette liste propose des polices Web safe (celles qui sont installées par défaut sur tous les systèmes) mais aussi des polices non Web safe. Cela signifie que la police choisie ne sera pas forcément affichée sur l’écran d’un lecteur chez qui elle n’est pas installée. Votre police sera remplacée par la police par défaut du forum.

Effet (exemple avec Impact) : texte d'exemple

(IMG:http://myst-aventure.com/forum/style_images/2/sepsign.gif)

(IMG:https://www.ufo-3d.fr/gallery/upload/2022/12/04/20221204175141-4183ca7f.jpg) ---> Taille

CODE

[size=taille de la police de 1 à 11]votre texte[/size]

vous donne la possibilité de changer la taille de texte par défaut du forum (taille 4)
Les grandes tailles sont à utiliser avec prudence,
si votre texte est trop long et trop grand il peut déformer l’affichage du forum.

Effet (exemple avec taille 1) : texte d'exemple

(IMG:http://myst-aventure.com/forum/style_images/2/sepsign.gif)

(IMG:http://myst-aventure.com/forum/style_images/2/folder_rte_images/indent.gif) ---> indent

CODE

[indent]votre texte[/indent]

augmente le retrait du texte sélectionné par rapport à la marge ainsi que l’espace au dessus et en dessous
(le retrait ne fonctionne pas avec du texte centré)

Effet :

texte d'exemple

(IMG:http://myst-aventure.com/forum/style_images/2/sepsign.gif)

(IMG:http://myst-aventure.com/forum/style_images/2/folder_rte_images/bold.gif) ---> gras

CODE

[b]votre texte[/b]

mise en gras de votre texte

Effet : texte d'exemple

(IMG:http://myst-aventure.com/forum/style_images/2/sepsign.gif)

(IMG:http://myst-aventure.com/forum/style_images/2/folder_rte_images/italic.gif) ---> italique

CODE

[i]votre texte[/i]

mise en italique de votre texte

Effet : texte d'exemple

(IMG:http://myst-aventure.com/forum/style_images/2/sepsign.gif)

(IMG:http://myst-aventure.com/forum/style_images/2/folder_rte_images/underline.gif) ---> souligné

CODE

[u]votre texte[/u]

souligne votre texte

Effet : texte d'exemple

(IMG:http://myst-aventure.com/forum/style_images/2/sepsign.gif)

(IMG:http://myst-aventure.com/forum/style_images/2/folder_rte_images/spoiler.gif) ---> spoiler

CODE

[spoiler]votre texte et/ou vos images[/spoiler]

masque le texte ou les images dans une boîte sur laquelle il faut cliquer pour afficher le contenu

Effet :

» Cliquez pour voir le message - Recliquez pour le cacher...  «

texte d'exemple

(IMG:http://myst-aventure.com/forum/style_images/2/sepsign.gif)

(IMG:http://myst-aventure.com/forum/style_images/2/folder_rte_images/strike.gif) ---> barré

CODE

[s]votre texte[/s]

barre votre texte d’un trait horizontal

Effet : texte d'exemple

(IMG:http://myst-aventure.com/forum/style_images/2/sepsign.gif)

(IMG:http://myst-aventure.com/forum/style_images/2/folder_rte_images/textcolor.gif) ---> couleur de texte

CODE

[color=# + code hexadécimal de la couleur][/color]

propose plusieurs couleurs de base pour votre texte (couleurs hexadécimales du type #993399)

Effet (avec le code couleur #006600) : texte d'exemple

(IMG:http://myst-aventure.com/forum/style_images/2/sepsign.gif)

(IMG:http://myst-aventure.com/forum/style_images/2/folder_rte_images/hyperlink.gif) ---> insertion de lien

CODE

[url=http://www.machinchose/bidule/quelque_part_sur _la_toile]le texte que vous aviez sélectionné[/url]

permet d’insérer un lien cliquable dans vos message.

Si vous avez sélectionné un texte ou une image, l’appui sur le bouton déclenche une invite de script dans laquelle vous pouvez copier une url, le texte que vous aviez sélectionné sera cliquable.
Si vous n’avez pas sélectionné de texte ou d’image dans votre message, l’appui sur le bouton déclenche une invite de script dans laquelle vous pouvez copier une adresse url puis indiquer le texte qui sera cliquable.

Effet (avec l'url de la page d'accueil du forum) : Myst Aventure - Accueil

(IMG:http://myst-aventure.com/forum/style_images/2/sepsign.gif)

(IMG:http://myst-aventure.com/forum/style_images/2/folder_rte_images/email.gif) ---> insertion d'adresse e-mail

CODE

[email]machinchose@fournisseur.fr[/email]

déclenche une invite de script dans laquelle vous pouvez taper une adresse e-mail.
L’adresse sera cliquable et ouvrira une fenêtre de rédaction de message du programme de courrier par défaut de l’utilisateur.

Effet (avec l'adresse e-mail du forum) : <a href="mailto : info@myst-aventure.com">info@myst-aventure.com</a>

(IMG:http://myst-aventure.com/forum/style_images/2/sepsign.gif)

(IMG:http://myst-aventure.com/forum/style_images/2/folder_rte_images/image.gif) ---> insertion d'image

CODE

[img]http://www.adresse de l'image[/img]

permet d’afficher une image dans un message.
Si vous avez sélectionné l’adresse url de l’image dans votre message,
l’appui sur le bouton encadre l’adresse url avec les balises d’image.
Si vous n’avez rien sélectionné dans votre message,
l’appui sur le bouton déclenche une invite de script dans laquelle vous devez copier l’adresse url de l’image.

Effet : (IMG:https://www.ufo-3d.fr/gallery/upload/2022/12/04/20221204175141-c6538b09.jpg)

(IMG:http://myst-aventure.com/forum/style_images/2/sepsign.gif)

(IMG:http://myst-aventure.com/forum/style_images/2/folder_rte_images/quote.gif) ---> citation

CODE

[quote]le texte à citer[/quote]

permet d’afficher un texte et/ou des images dans un bloc spécifique portant la mention "citation"

Effet :

Citation d'un texte et/ou d'image(s)

(IMG:http://myst-aventure.com/forum/style_images/2/sepsign.gif)

(IMG:http://myst-aventure.com/forum/style_images/2/folder_rte_images/code.gif) ---> code
permet d’afficher le texte brut sans formatage et donc de voir les balises BBcode qui ne sont pas prises en compte

Effet : voir toutes les boîtes de code de ce message

[Volyova]

(IMG:http://myst-aventure.com/forum/style_images/2/folder_rte_images/left_just.gif) ---> alignement gauche

CODE

[left]votre texte ou image[/left]

permet de forcer l’alignement du texte et/ou d’une image à gauche de votre message

Effet :

Texte aligné à gauche

(IMG:http://myst-aventure.com/forum/style_images/2/sepsign.gif)


(IMG:http://myst-aventure.com/forum/style_images/2/folder_rte_images/centre.gif) ---> alignement centré

CODE

[center]votre texte ou image[/center]

permet de forcer l’alignement du texte et/ou d’une image au centre de votre message

Effet :
Texte centré

(IMG:http://myst-aventure.com/forum/style_images/2/sepsign.gif)

(IMG:http://myst-aventure.com/forum/style_images/2/folder_rte_images/right_just.gif) ---> alignement droite

CODE

[right]votre texte ou votre image[/right]

permet de forcer l’alignement du texte et/ou d’une image à droite de votre message

Effet :

Texte aligné à droite

(IMG:http://myst-aventure.com/forum/style_images/2/sepsign.gif)

(IMG:http://myst-aventure.com/forum/style_images/2/folder_rte_images/numbered_list.gif) ---> liste numérotée

CODE

[list=1]
[*]premier élément de la liste
[*]deuxième élément de la liste
[*]troisième élément de la liste
[/list]

permet d’insérer des listes numérotées dans vos messages dont les éléments seront précédés d’un numéro à partir de 1
et seront placés en retrait par rapport au reste du texte de votre message.
Un appui sur le bouton déclenche une invite de script dans laquelle vous devrez taper les uns après les autres les éléments de votre liste en les validant chaque fois par "OK" ou la touche "Entrée" de votre clavier.
Pour terminer la liste cliquer sur "annuler"

Effet :

1. premier élément de la liste
2. deuxième élément de la liste
3. troisième élément de la liste

(IMG:http://myst-aventure.com/forum/style_images/2/sepsign.gif)

(IMG:http://myst-aventure.com/forum/style_images/2/folder_rte_images/list.gif) ---> liste à puces

CODE

[list]
[*]premier élément de la liste
[*]deuxième élément de la liste
[*]troisième élément de la liste
[/list]

permet d’insérer des listes à puces dans vos messages dont les éléments seront précédés d’une puce
et seront placés en retrait par rapport au reste du texte de votre message.
Un appui sur le bouton déclenche une invite de script dans laquelle vous devrez taper les uns après les autres les éléments de votre liste en les validant chaque fois par "OK" ou la touche "entrée" de votre clavier.
Pour terminer la liste cliquer sur annuler.

Effet :

• premier élément de la liste
• deuxième élément de la liste
• troisième élément de la liste

(IMG:http://myst-aventure.com/forum/style_images/2/sepsign.gif)

pas de bouton ---> YouTube

CODE

[yt]identifiant de la vidéo[/yt]

permet d’insérer une vidéo YouTube dans votre message.
Pas de bouton automatique, la balise doit être tapée.
Sur YouTube, à la fin de l’adresse URL de la page sur laquelle se trouve la vidéo, après le signe =,
copier la série de chiffres et/ou lettres identifiant la vidéo.
Coller cet identifiant dans votre message.
Taper les balise avant et après l'identifiant.

Effet :