L'utilisation du BBcode

Qu'est-ce-que le BBcode?

Les balises BBcodes sont les fonctionnalités afin d'habiller les textes de vos posts.

La plupart apparaissent sous forme d'une case portant leur nom, au dessus du cadre des messages que vous rédigez. Ce sont les balises standards.

D'autres existent, pour un usage plus restreint, telle que la balise pour insérer un tableau, une vidéo...

Cliquer sur la case fait apparaître les deux parties de la [balise][/balise] : demi-balise de début [balise] et demi-balise de fin [/balise]. En effet, pour être fonctionnelle, la balise doit encadrer le texte ciblé.
La façon la plus simple est de taper directement votre texte en l'intégrant entre ces deux parties de la balise (entre ] de la première partie et [ de la deuxième). Il se verra aussitôt appliquer la fonction qu'elle remplit.
Un autre manière rapide d'user de la balise est de d'abord sélectionner à la souris (clic-gauche) le texte ciblé (faisant partie de votre message), qui apparaît ainsi surligné en bleu, puis de cliquer directement sur la balise souhaitée. Aussitôt, celle-ci encadrera le texte sélectionné.
Enfin, vous pouvez bien sûr directement taper au clavier en même temps que votre texte les demi-balises, en les plaçant correctement pour encadrer le texte cible, et en allant chercher les caractères correspondants (AltGr+touche5 pour le crochet ouvert [, AltGr+touche° pour le crochet fermé et Alt+touche/ pour le slash /)

Il faut noter que l'effet de la balise ne sera apparent qu'après l'envoi (l'enregistrement) du post.
Lors de l'édition de votre post, la balise réapparait... ce qui vous permet de corriger sa syntaxe, en cas d'erreur (si, si, ça arrive... :ange: ).

Toutes les balises obéissent à une syntaxe spécifique. Ces syntaxes seront détaillées balise par balise dans la suite de ce tutoriel.
ATTENTION : certaines balises sont à l'origine "sensibles à la casse". Cela veut dire que dans leur syntaxe, une Majuscule est différente d'une minuscule.

I - Les balises standard détaillées
Voici les balises les plus souvent utilisés.
Les premières balises sont celles de mise en forme du texte :

La balise B
(pour bold = gras). Elle met le texte en caractères gras.
La syntaxe est simple :

Code:

Elle met [b]le texte en caractères gras[/b].

La balise i
(pour italique). Elle met le texte en italique.
Syntaxe :

Code:

Elle met [i]le texte en italique[/i].

La balise u
(pour underlined = souligné). Elle souligne le texte.
Syntaxe :

Code:

Elle [u]souligne le texte[/u].

La balise Taille.
(pour Taille de la police de caractères)
Celle-ci apparaît après son titre dans une case spéciale, affichant "Normale" , avec une flèche-bas à droite, à cliquer pour faire apparaître le menu déroulant.
Il faut cliquer sur cette mini-fenêtre (et pas sur la légende qui la précède pour présenter) pour sélectionner la taille de votre texte.
A l'aide de cette balise, le texte sélectionné verra sa taille modifiée en Minuscule, Petite, Grande ou Enorme Hors-norme.

Code:

A l'aide de cette balise, le texte sélectionné verra sa taille modifiée en [size=10]Minuscule[/size], [size=13]Petite[/size], [size=16]Grande[/size] ou [size=18]Enorme[/size] [size=24]Hors-norme[/size].


[size=200]La balise Quote[/size]
(pour quote = citation). Elle encadre le texte avec une ligne de titre et un cadre couleur bronze (changeant la couleur du fond en blanc).
Elle peut signaler l'auteur s'il est précisé dans la première demi-balise, par un ="auteur". Attention à la syntaxe, sans espace :

Lola91 a écrit:Elle encadre le texte avec une ligne de titre et un cadre couleur bronze (changeant la couleur du fond en blanc).
Elle peut signaler l'auteur s'il est précisé dans la première demi-balise, par un ="auteur". Attention à la syntaxe, sans espace :

Code:

[quote="Lola91"]Elle encadre le texte avec une ligne de titre et un cadre couleur bronze (changeant la couleur du fond en blanc).
Elle peut signaler l'auteur s'il est précisé dans la première demi-balise, par un ="auteur". Attention à la syntaxe, sans espace et entre guillemets :[/quote]

[size=200]La balise Code[/size]
Elle va encadrer le texte sur fond blanc (avec ligne de titre et cadre en gris).
Sa spécificité est d'être insensible aux BBcodes... et donc de laisser apparentes les balises utilisées, même après envoi du message et publication du post.
Il s'agit donc d'un moyen de citation... du BBcode ! C'est LA balise indispensable à ce tutoriel.

Code:

Il s'agit donc d'un moyen de citation... du BBcode ! C'est [u]LA[/u] balise indispensable à ce tutoriel.

Syntaxe :

Code:

[code]Il s'agit donc d'un moyen de citation... du BBcode ! C'est [u]LA[/u] balise indispensable à ce tutoriel.[/code]

Les balises List, List= et
[*]
Elles permettent de créer des listes, à partir du texte, avec plusieurs configurations possibles :

Création d'une liste avec puce : * et list (ou list=circle/square/disc)
Une liste non ordonnée affiche chaque élément séquentiellement l’un après l’autre sur le ligne indentée par une puce. Placez la balise list pour démarrer une liste non ordonnée. Définissez chaque élément de la liste précédé d'une balise *. Terminez la liste par une balise /list.

Par exemple, pour la liste de vos couleurs préférées, utilisez

Code:

[list]
[*]Rouge
[*]Bleu
[*]Jaune
[/list]

pour générer la liste suivante:

• Rouge
  
• Bleu
  
• Jaune
  

Création d'une liste ordonnée : * et list=1/list=i/list=a

Une liste ordonnée vous permet de spécifier qu'un indice doit s’afficher avant chaque élément précisant la position de celui-ci dans la liste. Utilisez list=1 pour créer une liste ordonnée numérotée avec des chiffres décimaux, list=i pour des chiffres romains, ou list=a pour les lettres de l'alphabet. Comme pour les listes avec puce, les éléments sont indiqués avec *. Par exemple:

Code:

[list=1]
[*]Faire les courses
[*]Acheter un nouvel ordinateur
[*]Jurer quand le PC plante
[/list]

affichera

1. Faire les courses
   
2. Acheter un nouvel ordinateur
   
3. Jurer quand le PC plante
   

Alors que pour une liste alphabétique, vous utiliserez

Code:

[list=a]
[*]Faire les courses
[*]Acheter un nouvel ordinateur
[*]Jurer quand le PC plante
[/list]

affichera

• Faire les courses
  
• Acheter un nouvel ordinateur
  
• Jurer quand le PC plante
  

II Les balises pour insérer des images, des liens, des vidéos.

La balise Img
(pour Image). Elle permet d'insérer une image (tirée du web) dans votre texte, en indiquant l'url complète de l'image.
L'insertion se fait directement dans votre texte.

Code:

L'insertion se fait directement [img]http://www.joliecarte.com/images/cartes/fr/cartes-mini/coucou/coucou-plage.jpg[/img] dans votre texte.

La balise URL
Pour créer un lien (vers une url) dans votre texte. Attention à ce que celle-ci soit complète. Le lien fait apparaitre le texte en bleu timide (peu visible si on agrandit pas la police des caractères) qui devient tout rouge quand la souris passe dessus.
Il y a deux syntaxes possibles :
Vous pouvez signaler directement le lien dans votre texte : http://www.joliecarte.com/images/cartes/fr/cartes-virtuelles/coucou/coucou-plage.jpg

Code:

Vous pouvez signaler directement le lien dans votre texte : [url]http://www.joliecarte.com/images/cartes/fr/cartes-virtuelles/coucou/coucou-plage.jpg[/url]

Ou bien insérer le lien sur une partie de votre texte

Code:

Ou bien insérer le lien [url=http://www.joliecarte.com/images/cartes/fr/cartes-virtuelles/coucou/coucou-plage.jpg]sur une partie[/url] de votre texte

C'est utile pour de grandes images, mais aussi pour tout autre lien y compris interne au site.

La balise You tube
Pour insérer une vidéo youtube, il ne faut pas prendre le liens qui s'affiche en haut sur la barre de lien, mais il faut cliquer sur l'option partager et copier-coller le lien qui s'affiche en-dessous.

Code:

[youtube]Ok1Nb3Y7kQU[/youtube]

Pour les autres balises on verra mais voilà l'essentiel.