Nous revoilà cette fois-ci pour apprendre à se servir du BBcode. Idiot certains penseront mais cela peut être très utile. En plus si vous n'avez pas envie de vous casser la tête à essayer de comprendre le HTML, le BBcode est fait pour vous. C'est le seul langage utilisable dans les champs d'édition de votre profil.
Ce langage est une version simplifiée du HTML qui se présente avec des crochets.
Les Bases Fondamentales.
Tout comme pour le HTML, toute balise ouverte en BBcode doit être fermée. De plus, contrairement au HTML, le BBcode a pour particularité de ne pas cumuler les informations au sein d'une même balise. Entre autre, chaque balise contient une seule information.
Exemple: - Code:
-
[ color= #XXXXXX; size=16 ] n’existe pas.
Si l'on veut que notre texte ait une couleur et une taille de police il faudra procéder ainsi:
- Code:
-
[color=#XXXXXX][size=16]Texte[/size][/color]
Il est aussi important de préciser qu'il y a un ordre précis de fermeture des balises. Par exemple si l'on a le code suivant
- Code:
-
[color=#XXXXXX][size=16]Texte[/size][/color]
on ne pourra pas l'écrire comme ça
- Code:
-
[size=16][color=#XXXXXX]Texte[/size][/color]
Cette écriture du code ne marche pas. Il faut toujours garder à l'esprit qu'une ouverture de balise doit toujours être suivie, au plus proche, de sa fermeture:
[Ouverture de balise A] [Ouverture de balise B] Texte [Fermeture de balise B] [Fermeture de balise A]De plus combiner le HTML et le BBcode, même si ça marche, est une erreur en soi.
1.Les Différents types de balise
Il existe plusieurs types de balises. Les plus connues sont bien sûr celles que l'on utilise assez souvent comme
(je précise qu'il vous faudra enlever les espaces):
- Spoiler:
-
[ quote ] [ /quote ] qui cite un message et peu être affublé d'un "titre:
[ quote="TEXTE" ]Exemple: - Un exemple a écrit:
- Voilà mon texte cité
-
[ spoiler ] [ /spoiler ] qui permet de cacher un texte que l'on peut dévoiler en cliquant sur le mot "spoiler" ou bien le titre qu'on aura donné au spoiler grâce à ça:
[ spoiler=TEXTE ]Vous noterez que pour la citation le = est suivit de " alors qu'il n'y en a pas pour le spoiler. C'est une erreur à ne pas faire que de mettre des " après un = lorsque l'on veut donner un titre à un spoiler.
Exemple:- Mon titre:
J'étais cachée avec un titre :3
- Spoiler:
J'étais cachée sans titre :3
-
[ code ] [ /code ] qui permet d'insérer un code dans un message sans que celui-ci ne soit exécuté par le forum:
Exemple: - Code:
-
<div style="border: 1px solid #000000"> Voici un cadre qui sera noir </div>
-
[ url ] [ /url ] qui permet d'insérer un lien. On peu aussi lui mettre un nom:
[ url=LIEN ] TITREExemple: Cliquez sur moi, je redirige vers l'index du forumhttp://arcane.forumactif.fr/-
[ left ] [ /left ] qui aligne un texte à gauche.
Exemple: Je suis à gauche
-
[ right ] [ /right ] qui aligne un texte à droite.
Exemple: Je suis à droite
-
[ center ] [ /center ] qui centre un texte.
Exemple: Je suis centrée
-
[ justify ] [ /justify ] qui justifie un texte, permet de faire des coupes droites, comme dans les livres.
Exemple:Je suis un long texte justifié. Je suis un long texte justifié. Je suis un long texte justifié. Je suis un long texte justifié. Je suis un long texte justifié. Je suis un long texte justifié. Je suis un long texte justifié. Je suis un long texte justifié. Je suis un long texte justifié.
-
[ list ] [ * ]Première phrase [ * ]Deuxième phrase [ /list ] qui permet de faire les listes ordonnées simple.
On peut aussi faire une liste numérotée:
[ list=1 ] [ * ]Première phrase [ * ]Deuxième phrase [ /list ]Une liste alphabétisée:
[ list=a ] [ * ]Première phrase [ * ]Deuxième phrase[ /list ]Exemple:
- Première phrase
- Deuxième phrase
- Première phrase
- Deuxième phrase
- Première phrase
- Deuxième phrase
-
[ size=X ] [ /size ] qui permet de donner une taille à un texte ou à un mot (le X désignant un nombre).
Exemple:Je suis de taille 24-
[ color=Nom de la couleur ou code hexacimal ] [ /color ] qui permet d'ajouter une couleur à un élément. (voici un petit sélecteur de couleur:
Cliquez )
Exemple:Je suis un bleu o/-
[ font=Nom de la font ] [ /font ] qui permet de changer la police d'un texte.
Exemple: (Il existe plusieurs polices)
gabriola
arial
arial black
comic sans ms
courier new
georgia
impact
sans-serif
serif
times new roman
trebuchet ms
verdana-
[ b ] [ /b ] , [ i ][ /i ] , [ u ][ /u ] , [ strike ][ /strike ] qui, respectivement, mettent en gras, italique, soulignent ou barrent un texte.
Exemple:GrasItaliqueSoulignéBarré
Mais en plus de ces nombreuses balises que nous pouvons retrouver dans l'éditeur de texte, il y en a qui existent mais qui sont beaucoup moins utilisées:
- Spoiler:
-
[ scroll ] [ /scroll ] qui fait défiler un élément de droite à gauche.
Exemple:-
[ updown ] [ /updown ] qui fait défiler un élément de bas en haut.
Exemple:-
[ flipv ] [ /flipv ] qui créer un effet miroir vertical et [
fliph ] [ /fliph ] qui créer lui aussi un effet miroir mais horizontal.
Exemple:Miroir ! Miroir ! -
[ blur ] [ /blur ] qui donne un effet flouté.
Exemple:Flou power.-
[ rand ]X min,X max[ /rand ] qui permet d'obtenir un nombre aléatoire en précisant un intervalle minimum et maximum. (X désigne un nombre entier)
Exemple:- Nombre aléatoire (50,100) :
- 64
- [ hr ] tire une ligne.
Exemple:
Avant
Après
Il est possible de combiner toutes ces balises comme dans l'exemple suivant:
2.Placer des balises, tout un art
Bien que le BBcode soit une version simplifiée du HTML, on ne peut pas placer les balises n'importe comment. Nous avons déjà vu comment elles devaient être ouvertes et fermées, mais maintenant nous allons voir comment bien placer toutes ces balises pour qu'elles soient prisent en compte.
D'après mes expériences, j'ai conclu que chaque balise avait sa précision, ainsi les balises les moins "précises" (comme center, left, updown, ect) doivent toujours se placer à "l'extérieur", c'est à dire le plus loin possible du texte. Et la précision va décroissant, ainsi les balises les plus "précises" se retrouvent "collées" au texte.
Voici quelques exemples pour illustrer mes propos.
- Code:
-
[center][color=#a84dbf][b]Ceci est un texte centré, gras et en couleur[/b][/color][/center]
Ceci est un texte centré, gras et en couleur
- Code:
-
[color=#a84dbf][b][center]Ceci est un texte centré, gras et en couleur[/center][/b][/color]
Ceci est un texte centré, gras et en couleur
- Code:
-
[color=#a84dbf][center][b]Ceci est un texte centré, gras et en couleur[/b][/center][/color]
Ceci est un texte centré, gras et en couleur
- Code:
-
[b][center][color=#a84dbf]Ceci est un texte centré, gras et en couleur[/color][/center][/b]
Ceci est un texte centré, gras et en couleur
Comme vous avez pu le remarquer dans ces exemples, il y a toujours les mêmes balises utilisées mais elles sont disposées à des endroits différent. Cela ne donne pas du tout le même résultat.
Après je ne connais pas la précision de chaque balise donc je peux juste vous conseiller de faire des testes jusqu'à trouver le bon ordre.
- Sélecteur de couleur:
Tuto écrit par Alphonse/Sadike