Ce tutoriel a pour but de vous apprendre quelques notions sur le bbcode, plus compliquée que celles présentées dans le tutoriel « Introduction au bbcode, un langage de mise en forme ».

Important : vous devez impérativement avoir lu le tutoriel « Introduction au bbcode, un langage de mise en forme » avant de lire celui-ci.

Ce tutoriel s'adresse essentiellement aux NuvaLayouteurs. Les NuvaLayouteurs se doivent d'avoir une maîtrise du bbcode assez fine pour pouvoir résoudre tous les problèmes de mise en page que les éditeurs sont susceptibles de rencontrer. Néanmoins, si vous n'êtes pas NuvaLayouteur, vous avez aussi le droit de suivre ce tutoriel, personne ne vous en voudra.

Retour sur les listes et d'autres balises

Dans cette partie, nous allons revoir certaines balises et en introduire quelques autres.

Les listes

Nous allons reparler des listes. Nous avons vu, dans le tutoriel « Introduction au bbcode, un langage de mise en forme », comment faire une liste non-ordonnée :

Code:

[list]
[*]Élément 1
[*]Élément 2
[/list]

C'est une liste non-ordonnée, ça ? Mais alors c'est quoi une liste ordonnée ?

J'y venais, j'y venais, jeune impatient. Une liste ordonnée, c'est une liste où les éléments sont classés selon un ordre.

Par exemple :

1. Élément 1
   
2. Élément 2
   

Pour faire une liste comme celle que vous venez de voir, le code à utiliser est :

Code:

[list=1]
[*]Élément 1
[*]Élément 2
[/list]

Remarquez qu'il est aussi possible d'avoir une liste comme ça :

1. Élément 1
   
2. Élément 2
   

Pour cela, il suffit de remplacer le « 1 » dans « list=1 » par un « a »

Ce sera tout pour les listes.

Autres balises

Le but de cette sous-partie est de vous présenter de nouvelles balises.

Code:

[strike]Texte[/strike]

La balise « strike » permet de barrer le texte. On obtient donc :

Texte

Code:

[left]Texte[/left]

La balise left permet d'aligner le texte à gauche. C'est le comportement standard pour le texte sur la Nuvapédia.

Code:

[right]Texte[/right]

La balise right permet d'aligner le texte à droite. On peut donc faire :

Code:

[color=#rrggbb]Texte[/color]

Quoi ? Mais tu débloques ou quoi ? On la connaît déjà la balise color !

Oui, vous la connaissez. Mais juste pour un emploi basique. En fait, cette balise permet d'afficher 16 777 216 couleurs différentes. Vous vous doutez bien que ce n'est pas avec les noms des couleurs en anglais qu'on peut faire autant de couleur.

Pour obtenir autant de couleurs, on utilise une notation hexadécimale (en base 16). Dans une telle base, les chiffres sont 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, A, B, C, D, E, F.

Le code d'une couleur en hexadécimal est composé de six chiffres hexadécimaux précédés d'un dièse (#). Comme vous le savez probablement, toute couleur est constitué de couleurs dites primaires. On peut obtenir toutes les autres à partir d'elles. Et bien, c'est exactement le même principe qui a été utilisé pour la notation des couleurs en hexadécimal. La seule différence, c'est qu'on a utilisé les couleurs secondaires au lieu des couleurs primaires.

Ce qui fait que :

• Les deux premiers chiffres du code hexadécimal indiquent la valeur de la composante en rouge, valeur comprise entre 00 et FF.
  
• Les deux chiffres suivants indiquent la valeur de la composante en vert, valeur elle aussi comprise entre 00 et FF.
  
• Les deux derniers chiffres indiquent la valeur de la composante en bleu, valeur également comprise entre 00 et FF.
  

Mais je les trouve où, les valeurs de ces « composantes » ?

Il est possible de les avoir à partir de n'importe quel logiciel de graphisme, même Paint. Néanmoins, vous n'en aurez pas besoin sur la NIE, toutes les couleurs dont vous aurez besoin sont déjà référencées.

Avec cette méthode, on peut donc avoir de nouvelles couleurs :
Ce vert, par exemple
Ou encore ce bleu gris

Code:

[font=nom]Texte[/font]

La balise font permet de changer la police de caractères. Exemple avec Comic sans MS :
Texte

Code:

[sub]Texte[/sub]

La balise sub permet de mettre le texte en indice. Exemple :
_Texte

Code:

[sup]Texte[/sup]

La balise sup est similaire à la balise sub, mais elle met le texte en exposant. Exemple :
^Texte


Un peu plus d'informations sur les attributs

Si vous vous souvenez bien, la présentation de balises dans le tutoriel « Introduction au bbcode, un langage de mise en forme » se finissait sur quelque chose d'assez étrange : alors que je ne vous avais présenté que des balises simples jusqu'à présent, je vous montrais une balise... différente.

Code:

[table border=1]

Et je vous disais que c'était la balise table avec, en plus, un attribut. Un argument précise le comportement d'une balise. Et, grande nouveauté, l'attribut border n'est pas seul. Il existe deux autres arguments spécifiques aux tableaux et un autre utilisable sur presque toutes les balises.

Les attributs spécifiques aux tableaux

cellspacing=0 : cet attribut permet de supprimer les espaces entre les bordures. Il s'utilise sur la balise table.
On peut donc avoir :

Case n°1	Case n°2
Case n°3	Case n°4

colspan=X : permet de faire en sorte qu'une case s'étende sur la place de X cases. Très utile pour les titres. Il s'utilise sur la balise td. On peut donc faire :

Titre
Case n°1	Case n°2

L'attribut style : un instrument diabolique

Cette sous-partie est exclusivement réservée à l'explication de 'attribut style. C'est un attribut très puissant qui peut prendre de nombreuses valeurs, qui peuvent se combiner entre elles. Cependant, il faut veiller à ne pas l'utiliser abusivement. En effet, il a la fâcheuse tendance de rendre votre fiche presque incompréhensible dans son code s'il est trop utilisé. En pratique, sa principale utilité est de pouvoir colorer le fond des cases des tableaux et de mettre des images dans le texte sans l'interrompre.

L'attribut style utilise le langage CSS. La syntaxe pour l'utiliser est :
[balise style="code CSS"]texte[/balise]

Comment ça, un code CSS ? On va devoir apprendre encore un autre langage pour faire ça ?

Eh bien, oui. Rassurez-vous, nous n'allons pas voir la totalité des possibilités offertes par ce langage. Nous allons à peine effleurer ce qu'il peut offrir à la présentation de vos fiches. De plus, il faut savoir que le bbcode n'est qu'une sur-couche au CSS et au HTML. Si tout ce qui est possible en bbcode l'est aussi en CSS, le contraire n'est pas vrai, loin s'en faut. C'est d'ailleurs deux de ces cas où le bbcode ne sert à rien que nous allons étudier.

Mettre de la couleur dans les cases de vos tableaux

Mettre de la couleur dans les cases de vos tableaux est impossible en bbcode. Pour faire ça, nous allons devoir utiliser le CSS. Plus précisément, nous allons devoir utiliser la propriété « background-color: », suivi de la couleur souhaitée (nom en anglais ou en hexadécimal, comme pour la balise color). Voici donc le code pour faire un tableau à case colorée :

Code:

[table cellspacing=0 border=1]
[tr][td style="background-color:#rrggbb"]Case n°1[/td][td style="background-color:#rrggbb;"]Case n°2[/td][/tr]
[tr][td colspan=2 style="background-color:#rrggbb"]Case n°3[/td][/tr]
[/table]

Comme le montre cet exemple, il est tout à fait possible de combiner l'attribut style avec d'autres attributs. Les couleurs ne sont pas obligées d'être les mêmes. Remarquez que le point-virgule après une propriété est indispensable si vous mettez plusieurs propriétés à la suite. Avec un code comme celui ci-dessus et les couleurs #303030, #058976 et #970000, on peut obtenir :

Case n°1	Case n°2
Case n°3

(Oui, je sais que les couleurs ne sont pas assorties)
On peut aussi obtenir, en changeant le code :

Bleu

Blanc

Rouge

Si vous voulez vous entraînez, essayez de refaire celui-là.

Erreurs fréquentes

Assez souvent, quand on visualise un message avec un bbcode assez important, on se rend compte que le résultat n'est pas vraiment ce à quoi on s'attendait. Le but de cette partie est de référencer quelques erreurs courantes.

Une partie de ma fiche a disparu ! Pourtant, elle est bien présente dans le code !

Quand vous obtenez une erreur comme celle-là, c'est généralement parce que vous avez oublié de fermer les guillemets (") d'un attribut « style ». Du coup, tout une partie de votre code est considérée comme du code CSS, et votre navigateur essaye de l'interpréter (généralement sans succès).

On voit des balises sur ma fiche ! La mise en forme n'a pas marché !

Plusieurs possibilités peuvent expliquer ce phénomène. Avant tout, vous avez peut-être oublié de fermer une balise, ou fait une faute de frappe. C'est le genre d'erreur bête qui peut vous faire chercher pendant des jours si vous ne savez pas comment repérer quelle balise n'a pas été fermée. En règle générale, ce sont les balises qui s'affichent qui n'ont pas été fermées. Vérifiez.

Si toutes les balises sont bien fermées, il est probable que le problème vienne du fait que vous avez fermé vos balises dans le désordre.

Quoi ? Il y a un ordre pour fermer les balises ?

Oui, il y a un ordre pour fermer les balises. Les balises ouvertes en dernier doivent être fermées en premier.
Donc, le code suivant marchera :

Code:

[size=13][u][b][i][font=Comic sans MS]Mon beau texte[/font][/i][/b][/u][/size]

Mais pas ce code-ci :

Code:

[size=13][u][b][i][font=Comic sans MS]Mon beau texte[/size][/u][/b][/i][/font]

Je n'arrive pas à souligner un texte, de couleur orange, en orange. Comment faire ?

Le problème vient de l'ordre de vos balises. Vous avez dû demander à souligner le texte avant de demander de le mettre en orange.
Votre code doit ressembler à ça :

Code:

[u][color=orange]Mon texte[/color][/u]

Inversez l'ordre des balises et ça devrait marcher.

Code:

[color=orange][u]Mon texte[/u][/color]

Voilà, vous en savez maintenant un peu plus sur le bbcode et devez être capable de mettre en forme toutes les fiches possibles. Au cas où vous rencontreriez une situation insurmontable pour vous, même avec l'aide de ce tutoriel, contactez un NuvaManageur. Il devrait pouvoir régler votre problème et modifier le tutoriel afin qu'il montre comment faire face à ce problème.