Introduction au bbcode, un langage de mise en forme
Sur la NIE, un langage est utilisé pour mettre en forme les fiches. Le but de ce tutoriel est de vous apprendre à vous servir de ce langage pour une utilisation basique, utile dans la traduction de nombreuses fiches. Tous les nouveaux membres sont invités à le lire afin de se familiariser à ce langage.
Structure d'une balise bbcodeDans un langage de mise en forme, on appelle balise un élément textuel qui sera interprété lors de l'affichage.
Hein ? Kézaco ?Pour simplifier, une balise est une suite de caractère qui ne sera pas affiché mais aura un effet sur la mise en forme de votre texte.
Sous les forums phpBB, le langage de mise en forme utilisé, le bbcode, est constitué de balise commençant par « [ » et finissant par « ] ».
Pour la mise en forme des fiches, nous sommes obligés d'utiliser des balises. Certaines mauvaises langues diront qu'il existe des boutons sur lesquels il suffit d'appuyer pour faire la mise en forme. Je vous déconseille d'utiliser cette méthode : il arrive assez souvent que le résultat final ne soit pas le bon et que la mise en forme devienne un vrai casse-tête à refaire.
Avant tout, une balise s'ouvre puis se ferme. La balise ouvrante est de la forme [balise] et la balise fermante de la forme [/balise]. La balise ouvrante commence la mise en forme et la balise fermante l'arrête.
Ça veut dire que si je veux qu'une balise s'applique sur toute ma fiche, je n'ai pas besoin de la fermer ?Si, justement. Retenez bien cela : il faut
toujours fermer les balises. (Remarquez que généralement, quand je mets quelque chose en gras et en souligné, ça veut dire que c'est important.)
Il existe cependant certaines balises qui n'ont pas besoin d'être fermées car elles désignent un élément ponctuel. Par exemple, pour faire une puce dans une liste, vous ne devez pas fermer de balise car une puce est un figuré ponctuel.
Une image aussi, c'est un figuré ponctuel, non ? Donc ça veut dire que pour insérer une image on n'a pas à fermer de balise ?Oui, une image est un figuré ponctuel. Néanmoins, c'est une exception. Vous comprendrez mieux pourquoi quand je vous présenterais la balise qui permet d'insérer une image et la manière de l'utiliser.
Les balises du bbcodeAvant tout, je tiens à préciser que cette section ne recense pas toutes les balises bbcode existantes. Seules les balises que vous utiliserez le plus et leurs utilisations les plus courantes seront ici montrées.
Des balises ne nécessitant pas une fermetureCette section sera brève, car je ne vais vous présenter qu'une seule balise qui n'a pas besoin d'être fermée.
- Code:
-
[hr]
Cette balise permet d'insérer une grande barre pour séparer deux parties. Leur utilisation n'est pas exigée mais elles peuvent être utiles dans les grandes fiches. Voilà à quoi ressemble la grande barre insérée.
Mais, mais... tu ne présente qu'une grande barre comme élément ponctuel ? Tu avais parlé des puces des listes !Avant tout, c'est bien si vous vous êtes posé cette question, je suis content de voir que vous suivez. En effet, une puce d'une liste est représentée par une balise qui ne doit pas être fermée. Mais une puce doit forcément être utilisées dans une liste. Cette balise vous sera donc présenté dans la partie
Des balises qui s'imbriquent.
Des balises nécessitant une fermetureCette section vous présente des balises qui doivent être ouvertes puis fermées obligatoirement. C'est le cas de la majeure partie des balises que vous utiliserez, et cette section est donc l'une des plus importantes.
- Code:
-
[b]Texte[/b]
Cette balise permet de mettre le texte en gras. On obtient donc :
Texte - Code:
-
[u]Texte[/u]
Cette balise permet de souligner le texte. Notre code donnera donc :
Texte - Code:
-
[i]Texte[/i]
Cette balise permet de mettre le texte en italique, ce qui donnera ici :
Texte - Code:
-
[color=######]Texte[/color]
Cette balise permet de colorer le texte. On choisit la couleur en changeant ###### par le nom de cette couleur en anglais dans la plupart des cas. Si on choisit de mettre le texte en violet, on remplacera donc ###### par « purple », ce qui donne :
Texte - Code:
-
[size=xx]Texte[/size]
Cette balise permet de changer la taille du texte. XX est le nombre de pixels de hauteur des lettres, comme sur les logiciels de traitement de texte (Word, par exemple). Si on met 24, cela donne :
Texte - Code:
-
[img]url_de_l_image[/img]
Cette balise permet d'insérer une image. Comme je vous l'avais dit, il faut bien une balise ouvrante et une balise fermante pour insérer une image : elles encadrent l'URL de l'image.
- Code:
-
[url=url]texte[/url]
Cette balise insère un lien vers une URL sur un texte. Par exemple, on peut obtenir :
Lien vers la Nuvapédia - Code:
-
[center]Texte[/center]
Cette balise centre le texte. Ce qui donne :
Texte
- Code:
-
[justify]Texte[/justify]
Cette balise justifie le texte. Pour voir la différence avec un texte-non justifié, je vous propose un exemple (pas la peine de lire, regardez juste la différence au niveau de la mise en forme :
Texte non justifié : Les licences de la plupart des logiciels sont conçues pour vous enlever toute liberté de les partager et de les modifier. A contrario, la Licence Publique Générale est destinée à garantir votre liberté de partager et de modifier les logiciels libres, et à assurer que ces logiciels soient libres pour tous leurs utilisateurs. La présente Licence Publique Générale s'applique à la plupart des logiciels de la Free Software Foundation, ainsi qu'à tout autre programme pour lequel ses auteurs s'engagent à l'utiliser. (Certains autres logiciels de la Free Software Foundation sont couverts par la GNU Lesser General Public License à la place.) Vous pouvez aussi l'appliquer aux programmes qui sont les vôtres.
(Pour information, j'ai pris le premier paragraphe de la Licence Générale GNU pour avoir un petit pavé)
Texte justifié : Les licences de la plupart des logiciels sont conçues pour vous enlever toute liberté de les partager et de les modifier. A contrario, la Licence Publique Générale est destinée à garantir votre liberté de partager et de modifier les logiciels libres, et à assurer que ces logiciels soient libres pour tous leurs utilisateurs. La présente Licence Publique Générale s'applique à la plupart des logiciels de la Free Software Foundation, ainsi qu'à tout autre programme pour lequel ses auteurs s'engagent à l'utiliser. (Certains autres logiciels de la Free Software Foundation sont couverts par la GNU Lesser General Public License à la place.) Vous pouvez aussi l'appliquer aux programmes qui sont les vôtres.
Ce sera tout pour cette section.
Des balises qui s'imbriquentCette sous-section est probablement la plus compliquée de tout le tutoriel. Elle vous explique l'utilisation de balises qui ne doivent être utilisées que entre une certaine balise ouvrante et une certaine balise fermante.
Les listesLes listes permettent de lister différents points. (Élémentaire, me direz-vous.)
En bbcode, on commence une liste avec :
- Code:
-
[list]
et on la termine avec :
- Code:
-
[/list]
Rien de très anormal ni de très extraordinaire jusqu'ici, me direz-vous. D'autant plus que si vous tapez du texte entre ces deux balises, vous vous rendrez compte qu'elles n'ont, apparemment, aucun effet.
Mais, mais... Elles ne servent alors ! Pourquoi est-ce que des tordus ont été imaginer un truc pareil !À titre d'information, on doit faire cela à cause du langage de mise en forme lu par votre navigateur web (Internet Explorer, Mozilla Firefox, Google Chrome...), le HTML. Cette façon de faire offre de nombreux avantages aux développeurs Web que l'on ne voit pas avec une utilisation basique. C'est aussi important pour la sémantique du Web.
De plus, cette balise a, en fait, un effet : elle vous permet d'utiliser une balise créant une puce :
- Code:
-
[*]
Il faut mettre cette balise à chaque nouvel élément de la liste. L'élément s'arrête au retour à la ligne.
On peut aussi imbriquer des listes dans des listes pour obtenir ça, par exemple :
- Élément 1
- Élément 2
- Sous-élément 1
Élément 3
Sous-élément 1
Sous-élément 2
Élément 4Les tableauxLes balises des tableaux sont probablement parmi les plus dures à maîtriser. C'est pourquoi je ne vais aborder qu'une utilisation extrêmement basique de ceux-ci. Si vous avez besoin d'aide pour faire un tableau sur une fiche, que ce soit un tableau récapitulatif ou pas, n'hésitez pas à demander à un NuvaLayouteur ou à un NuvaManageur.
Les balises pour commencer et pour achever un tableau sont :
- Code:
-
[table]Reste du code du tableau[/table]
Comme pour les listes, ces balises n'ont aucun effet visible. Néanmoins, elles vous permettent d'utiliser une balise pour créer des lignes de tableau. Pour un tableau à deux lignes, on aura donc :
- Code:
-
[table]
[tr]Code de la première ligne[/tr]
[tr]Code de la deuxième ligne[/tr]
[/table]
Et maintenant, dans chacune des lignes, il faut ajouter des balises pour créer des cellules. Oui, c'est un peu comme une poupée russe.
Pour un tableau de 2x2 cases, on aura donc :
- Code:
-
[table]
[tr][td]Première case[/td][td]Deuxième case[/td][/tr]
[tr][td]Troisième case[/td][td]Quatrième case[/td][/tr]
[/table]
J'ai essayé ton code. Ça donne un truc tout moche !
Première case | Deuxième case |
Troisième case | Quatrième case |
Je veux un vrai tableau ! Avec des traits, quoi...C'est tout à fait possible de faire un tableau avec des bordures. Pour cela, il faut ajouter « border=1;" »
dans votre balise « table » ouvrante.
Donc, vous devez modifier
- Code:
-
[table]
en
- Code:
-
[table border=1]
Et vous pourrez alors obtenir ça :
Première case | Deuxième case |
Troisième case | Quatrième case |
Je ne comprends pas. C'est quoi ce code bizarre ? Et pourquoi on ajoute un « border=machin truc » ?Et bien en fait, on ajoute un attribut. Ça permet de faire plein de trucs supers mais c'est plus compliqué à apprendre et pas trop utile pour des éditions normales.
Utilisation du bbcode dans les fichesC'est bien beau tout ça, mais moi, quand est-ce que j'utilise quoi ?Tout d'abord, félicitations. Votre question est tout à fait pertinente. Grâce à cette question, je vais vous montrer quel code mettre à quel endroit dans vos fiches.
Les listesSur quasiment toutes les fiches, vous serez amenés à faire des listes, notamment pour les parties « Divers » et « Apparitions ».
C'est le code de base des listes qu'il faut utiliser, il n'y a pas de subtilités comme des listes imbriqués.
Les fiches chronologiques sont en fait une grande liste, et c'est le seul cas où il est possible de trouver des listes imbriquées.
Autres petits détails de mise en formeToutes les fiches comportent un tableau récapitulatif. On ne vous demande pas de le mettre vous même car il nécessite un code assez compliqué, mais qui est néanmoins expliqué dans un tutoriel. Ce sont donc les NuvaLayouteurs qui sont chargés de faire ces tableaux.
Remarquez que si vous souhaitez mettre vous-même le tableau récapitulatif, on ne vous en empêchera pas.
Il est assez appréciable que vous mettiez le nom de la fiche en gras la première fois qu'il apparaît dans l'introduction.
Sur certaines fiches, il faut obligatoirement mettre des tableaux, notamment sur les fiches des équipes de Toa. Si vous avez des problèmes pour faire un tableau convenable, ne vous inquiétez pas, c'est normal, tout n'est pas expliqué sur les tableaux dans ce tutoriel. Vous pouvez demander de l'aide à un NuvaLayouteur ou un NuvaManageur qui vous guidera.
Sur ce, je vous félicite, vous avez fini de lire ce tutoriel et êtes fin prêts à utiliser le bbcode dans la plupart des cas que vous rencontrerez. Si ce n'est pas encore fait je vous conseille de lire les autres tutoriels qui vous donneront de précieux conseils pour éditer des fiches.
Sur ce, bonne édition.
Et surtout, n'oubliez jamais : si vous avez un problème de mise en forme, contactez un NuvaLayouteur ou un NuvaManageur.