[Tutorial] LeBBCode : Mettre en forme ses messages

Voila un petit tutorial qui, je l’espère, vous permettra d’être un peu plus à l’aise avec les différentes balises utilisées pour mettre en forme votre texte.

Introduction :

Tout d’abord, il faut savoir que pour donner un effet quelconque à un texte, il est nécessaire de l’encadrer de deux balises :

• balise d’ouverture : [X]
  
• balise de fermeture : [/X]

Nous verrons plus tard par quoi remplacer les « X ».
Pour ceux qui ne le savent pas, il faut maintenir la touche | alt gr | enfoncée en plus d’une autre pour pouvoir écrire ces crochets :

• [ = | alt gr | + | 5 |
  
• ] = | alt gr | + | ° |

(Les « | » sont là pour représenter les touches du clavier)

Il ne doit pas y avoir d’espace entre le texte et ses balises : [X]Texte[/X]

Pour la mise en forme courante, un petit panneau d’outils nous est proposé au dessus de la zone de texte :



Pour utiliser au mieux ces outils, il suffit de sélectionner avec la souris le texte auquel vous voulez appliquer l’effet puis de cliquer sur le bouton souhaité.
Un simple survolage du bouton à l’aide de la souris vous renseignera sur sa fonction.

Général :

Voici les balises qui n’ont pas besoin d’explication particulière :



Petite note pour la citation : Si vous voulez référencier l'auteur du texte cité, utilisez ces balises :


(N'oubliez pas d'encadrer le nom par des guillemets, sinon ça ne fonctionnera pas.)
Ce qui donnera quelque chose comme ça :

Nachew a écrit:

Vous comprenez ce que je vous explique au moins ? x]

Explication sur la fonction « Code » :


Encadrer un texte par ces balises permet de l’afficher dans son état brut, sans mise en forme donc.
Cela peut-être utile pour insérer des codes de programmation ou bien des tablatures de guitare par exemple.
Ici, je peux utiliser cette fonction pour vous afficher les balises sans qu’elles ne modifient l’aspect du texte. (Mais si vous allez comprendre grâce à la suite)


Texte qui remonte façon "Générique" :

Voici une balise qui n'est pas présente dans la "boite à outils" :

Code:

[updown]Texte[/updown]

Ce qui donne :
Un texte qui remonte !! Wahou!!! xD


Listes :

Il est possible de faire trois genres de listes :

+ Tout d’abord la liste à puce qui sera ordonnée par l’intermédiaire de petits points.
Chaque nouveau point devra être représenté par ce symbole : [*]
Voici les balises a utiliser :

Code:

 [list][*]Premier point abordé. [*]Second point. [*]Troisième point. [*]Etc…[/list]

Ce qui donne :

• Premier point abordé.
• Second point.
• Troisième point.
• Etc…

+ Ensuite la liste ordonnée par lettres. Il s'agit du même principe, seul la prepière balise change :

Code:

 [list=A][*]Premier point abordé. [*]Second point. [*]Troisième point. [*]Etc…[/list]

Ce qui donne :

1. Premier point abordé.
2. Second point.
3. Troisième point.
4. Etc…

+ Et enfin, la liste organisée par chiffres. Pareillement que pour les lettres, il faut changer la première balise :

Code:

 [list=1][*]Premier point abordé. [*]Second point. [*]Troisième point. [*]Etc…[/list]

Ce qui donne :

1. Premier point abordé.
2. Second point.
3. Troisième point.
4. Etc…

Taille du texte :


Ici le plus simple consiste à sélectionner le texte et à lui appliquer les taille prédéfinies du menu déroulable de la "boite a outils".


Sinan, dans les balises si dessus, il suffit de remplacer le "x" par la taille souhaitée, sachant que :

• "très petit" correspond à 7
  
• "petit" correspond à 9
  
• "normal" correspond à 12
  
• "grand" correspond à 18
  
• "très grand" correspond à 24

A vous de choisir un nombre entre 0 et 29.


Couleur du texte :

Comme pour la taille, on peut choisir une couleur dans le menu déroulant de la "boite à outils".


Sinon, pour un plus grand choix, on peut utiliser le code Hexadécimal des couleurs disponible ici, en remplaçant le "x" dans les balises par le code.
(/!\ : Ne pas oublier le # devant les chiffres.)

Exemple : Pour cette couleur il faut écrire :

Code:

[color=#990033]texte[/color]

Autre petite précision de notre amie Auglyane, on peut également utiliser le nom de la couleur voulue à la place du code hexadécimal. Voici le lien qu’elle nous a gentiment donné pour connaître le nom de votre couleur favorite : ici

Les balises seront alors de la forme :

Code:

[color=nom]texte[/color]

Insérer un lien :

Il y a deux manières d'insérer un lien.

• Soit le lien tel quel : https://royaumedejade.kanak.fr/portal.htm (il suffit de faire un copier/coller du lien sans balises).
  
• Soit un texte cliquable menant au lien : Le Royaume de Jade
  Voici les balises à utiliser dans ce cas :
  

  Code:

  [url=(coller votre lien)]texte cliquable[/url]

Pour plus de lisibilité, il est conseillé de mettre en valeur votre lien (surtout s'il s'agit d'un lien cliquable) en le mettant en couleur, en le soulignant ou encore en le mettant en gras.


Insérer une image :

Deux sortes d'images ici aussi.

• Une image toute simple :
  
  
  
  Balises :

  Code:

  [img]coller le lien direct de l'image sous la forme http://blablabla.jpg (ou autre format)[/img]

• Une image cliquable menant à un site : il s'agit d'une combinaison entre l'insertion d'un lien et d'une image :
  
  
  
  
  Balises :

  Code:

  [url=coller le lien du site][img]coller le lien direct de l'image sous la forme http://blablabla.jpg (ou autre format)[/img][/url]

Ensuite il existe des sites hébergeant vos images et vous proposant des liens "tout prêt" à copier/coller (en fait ils ont simplement inséré pour vous les balises que nous venons de voir). Mais ceci est une autre histoire, et fera l'objet d'un prochain tutorial. ^^'


Conseils :

• Il est possible de "mixer" les différents effets, veillez toute fois à refermer chaque balise ouverte, et dans le bon ordre.
  Exemple : C'est bientôt fini !!!
  Voilà le mélange des balises :
  

  Code:

  [updown][scroll][color=darkred][size=18][b][i]C'est bientôt fini !!![/i][/b][/size][/color][/scroll][/updown]

  Elles se referment donc symétriquement, attention de ne pas écrire :
  

  Code:

  [updown][scroll][color=darkred][size=18][b][i]C'est bientôt fini !!![/updown][/scroll][/color=darkred][/size][/b][/i]

• Méfiez-vous si vous notez les balises à la main, le "/" pour la fermeture est vite oublié.
  
• Vérifiez toujours par une "Prévisualisation" s'il n'y a rien qui cloche.
  

*respire*
Vali vala.

wahou !

** est admirative **

Superbe, Nach' , complet et compréhensible par tous, ton tutorial !

** vraiment admirative ! **


Ma petite contribution, concernant les couleurs : il est souvent plus facile de se souvenir d'un nom de couleur que de son code hexadécimal. Voici une palette de couleurs avec les noms correspondants : ici (vous pourrez ainsi aisément vous rendre compte que la couleur habituelle de parole d'Augly - le mediumseagreen - est illisible ici, voilà pourquoi elle parle en blanc chez les Jadiens )

Correct Augly, pour les couleurs cela marche aussi avec les noms (en anglais :p).
Je le rajoute dans le premier message avec ton lien, merci :]