Tutoriel d'aide au bbcode
- Voici un petit tutoriel pour tous ceux qui ont du mal à se repérer avec le bbcode sous phpbb.
Qu'est-ce que le bbcode ? Le bbcode ce sont des balises permettant de mettre en page un texte ou de créer des pages avec un langage html simplifié. En fait, cela sert surtout à rendre le html "accessible", dans le sens où il vous suffit généralement de cliquer sur un bouton pour obtenir l'effet désiré.
Cependant, il y a quelques détails qu'il faut connaître et comme nous ne sommes pas tous des experts, il vaut mieux faire un mode d'emploi.
Attention les balises ne sont visibles que sur la fenêtre d'édition et à condition que le Mode "Editeur" ou WYSIWYG soit désactivé.
Ce sont ces balises qui vont vous permettre de mettre un texte en gras, en italique ou encore de le centrer sur la page. Leur utilisation est relativement simple. Il vous suffit de sélectionner votre texte dans la fenêtre d'édition avec la souris et de cliquer ensuite sur les boutons suivants :
-
Ce bouton sert à mettre en gras.
Lorsque vous cliquez, vous obtenez ceci dans votre fenêtre d'édition.Ce qui donne quand vous prévisualisez votre message :Code : Tout sélectionner
[b]Ce texte est en gras.[/b]
Ce texte est en gras.
Pour la culture générale, le "b" provient du mot "bold" en anglais, qui signifie "gras". -
Ce bouton sert à mettre en italique.
Lorsque vous cliquez, vous obtenez ceci dans votre fenêtre d'édition.Ce qui donne quand vous prévisualisez votre message :Code : Tout sélectionner
[i]Ce texte est en italique.[/i]
Ce texte est en italique. -
Ce bouton sert à souligner.
Lorsque vous cliquez, vous obtenez ceci dans votre fenêtre d'édition.Ce qui donne quand vous prévisualisez votre message :Code : Tout sélectionner
[u]Ce texte est souligné.[/u]
Ce texte est souligné.
Pour la culture générale, le "u" provient du mot "underline" en anglais, qui signifie "souligner". -
Ce bouton sert à surligner.
Lorsque vous cliquez, vous obtenez ceci dans votre fenêtre d'édition.Ce qui donne quand vous prévisualisez votre message :Code : Tout sélectionner
[surligne]Ce texte est surligné.[/surligne]
Ce texte est surligné. -
Ce bouton sert à barrer.
Lorsque vous cliquez, vous obtenez ceci dans votre fenêtre d'édition.Ce qui donne quand vous prévisualisez votre message :Code : Tout sélectionner
[barre]Ce texte est barré.[/barre]
Ce texte est barré. -
Ce bouton sert à changer la couleur.
Cette balise nécessite une petite manipulation supplémentaire, puisqu'une fois que vous avez cliqué dessus, vous remarquerez qu'une palette de couleurs s'ouvre. Il vous suffit de cliquer ensuite sur la couleur dans laquelle vous souhaitez mettre votre texte et le tour est joué, vous obtenez ceci (ici, j'ai pris du bleu, ça marche pour toute autre couleur).Ce qui donne quand vous prévisualisez votre message :Code : Tout sélectionner
[color=#0000BF]Ce texte est de couleur bleu.[/color]
Ce texte est de couleur bleu.
Quelques précisions sont importantes. D'abord, la balise de couleur ne fonctionne qu'avec la police du texte et non pas l'arrière-plan. Ensuite, toutes les couleurs peuvent fonctionner, pour peu qu'elles soient en hexadécimal, c'est à dire de ce type-là : "#xxxxxx" ou x peut être une lettre comprise entre A et F ou encore un chiffre de 0 à 9. Voici un site qui peut vous aider à trouver le code hexadécimal d'une couleur. Vous pouvez en trouver d'autres grâce à google, notamment, en faisant une recherche. -
Ce bouton sert à changer la taille de la police.
Cette balise nécessite une petite manipulation supplémentaire, puisqu'une fois que vous avez cliqué dessus, vous remarquerez qu'une liste déroulante s'ouvre, vous proposant différents types de taille. Cliquez sur celui qui vous convient le mieux.Ce qui donne quand vous prévisualisez votre message :Code : Tout sélectionner
[size=85]Ce texte est écrit en petit.[/size] [size=150]Ce texte est écrit en grand.[/size]
Ce texte est écrit en petit.
Ce texte est écrit en grand.
Vous pouvez modifier le chiffre se trouvant après le "=". Plus votre chiffre est petit, plus le texte sera petit. Et vice versa. Attention, une police d'écriture trop grande surcharge et déforme la page, ce qui gêne le confort des autres usagers du forum. Merci de ne pas en abuser, je vous renvoie au règlement. -
Ce bouton sert à changer de police d'écriture.
Comme les précédentes, cette balise nécessite une manipulation, mais elle n'est pas automatisée, vous devrez donc écrire directement le nom de la police après le "=". Regardez plus bas pour savoir quelles sont les polices supportées.Ce qui donne quand vous prévisualisez votre message :Code : Tout sélectionner
[police=courier new]Ce texte est écrit avec la police Courier New.[/police] [police=georgia]Ce texte est écrit avec la police Georgia.[/police] [police=trebuchet MS]Ce texte est écrit avec la police Trebuchet MS.[/police]
Ce texte est écrit avec la police Courier New.
Ce texte est écrit avec la police Georgia.
Ce texte est écrit avec la police Trebuchet MS.
En théorie, vous pouvez mettre toutes les polices de base. En pratique, la majorité des polices ne fonctionnent pas sur certains navigateurs et d'autres requièrent une installation pour être visibles... Pour faire très simple, voici les codes de police qui fonctionnent de façon universelle (il vous suffit de recopier la police après le "=" : CourierNew ; Georgia ; Arial ; Garamond ; Helvetica ; Times New Roman ; Comic sans MS ; Verdana ; Calibri ; Trebuchet MS ; Impact ; Tahoma.
Attention entre le "=" et le "]", il ne doit pas y avoir d'espace, en revanche il peut y en avoir dans le nom de la police. -
Ce bouton sert à aligner votre texte à gauche.
Lorsque vous cliquez, vous obtenez ceci dans votre fenêtre d'édition.Ce qui donne quand vous prévisualisez votre message :Code : Tout sélectionner
[gauche]Ce texte est aligné à gauche.[/gauche]Ce texte est aligné à gauche. Par défaut, le forum aligne déjà le texte à gauche, il est généralement inutile de mettre la balise. -
Ce bouton aligne votre texte à droite.
Lorsque vous cliquez, vous obtenez ceci dans votre fenêtre d'édition.Ce qui donne quand vous prévisualisez votre message :Code : Tout sélectionner
[droite]Ce texte est aligné à droite.[/droite]Ce texte est aligné à droite. -
Ce bouton centre votre texte.
Lorsque vous cliquez, vous obtenez ceci dans votre fenêtre d'édition.Ce qui donne quand vous prévisualisez votre message :Code : Tout sélectionner
[centrer]Ce texte est centré.[/centrer]Ce texte est centré. -
Ce bouton permet de justifier votre texte.
Lorsque vous cliquez, vous obtenez ceci dans votre fenêtre d'édition.Ce qui donne quand vous prévisualisez votre message :Code : Tout sélectionner
[justifier]Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié.[/justifier]Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié. Ce texte est justifié.
2°) Les balises de mise en page avancée du texte :
Ces balises sont particulières car moins utilisées que les précédentes. Elles permettent notamment d'apporter quelques spécificités au texte. Leur utilisation reste néanmoins plutôt simple bien que moins commune.
-
Ce bouton sert à faire une liste simple, non numérotée.
Lorsque vous cliquez, vous obtenez ceci dans votre fenêtre d'édition.Ce qui donne quand vous prévisualisez votre message :Code : Tout sélectionner
Voici ma liste de course : [list]- Pain - Vin - Boursin - ...[/list]
Voici ma liste de course :- - Pain
- Vin
- Boursin
- ...
- - Pain
-
Ce bouton n'a pas de franche utilité...
En réalité, il existe beaucoup plus simple pour mettre une petite puce (ou un point) dans votre liste. On reprendre l'exemple donné ci-dessus, il suffit de remplacer les "-" par des "[ * ]" (sans espace). Voyez ce que cela donne :Ce qui donne quand vous prévisualisez votre message :Code : Tout sélectionner
Voici ma liste de course : [list][*] Pain [*] Vin [*] Boursin [*] ...[/list]
Voici ma liste de course :- Pain
- Vin
- Boursin
- ...
-
Ce bouton vous permet de créer des listes numérotées.
Pour cela, il vous suffit de mettre après le "=", soit le chiffre 1, soit la lettre A (en majuscule ou en minuscule comme vous voulez). Notez bien que le "[ * ]" (sans espace) est obligatoire.Code : Tout sélectionner
Voici le plan du cours : [list=1][*] L'économie [*] Le droit bancaire [*] ...[/list]Ce qui donne quand vous prévisualisez votre message :Code : Tout sélectionner
Voici le plan du cours : [list=A][*] L'économie [*] Le droit bancaire [*] ...[/list]
Voici le plan du cours :- L'économie
- Le droit bancaire
- ...
- L'économie
- Le droit bancaire
- ...
-
Ce bouton vous permet de mettre un indice.
Dit comme ça, cela parait compliqué. Il n'y a pourtant pas plus simple. Il suffit de sélectionner la zone que vous voulez mettre en indice et de cliquer sur le bouton. Cela donne :Quand vous prévisualisez votre message :Code : Tout sélectionner
CO[indice]2[/indice]
CO2 -
Ce bouton vous permet de mettre un exposant.
C'est exactement le même principe qu'au dessus. Cela donne :Quand vous prévisualisez votre message :Code : Tout sélectionner
145 x 10[exposant]35[/exposant]
145 x 1035 -
Ce bouton permet de faire défiler le texte de la droite vers la gauche.
Cette balise est simple d'utilisation. Il suffit de sélectionner le texte à faire défiler et de cliquer sur le bouton.Quand vous prévisualisez votre message :Code : Tout sélectionner
[defil]Ce texte défile sur votre écran...[/defil]
Cette balise peut ne pas fonctionner sous Internet Explorer. Belle occasion de changer de navigateur internet pour un autre meilleur et gratuit (qui a dit Mozilla Firefox ?). Attention, le défilement de texte fait intervenir votre processeur et votre carte graphique afin de situer le texte à mesure que le temps passe. Un abus de ces balises peut entraîner une surcharge de votre cache mais aussi de votre ordinateur. Ce dernier va se mettre à ramer voire même ne répondra plus. A utiliser avec précaution et de façon responsable.
3°) Les balises d'insertion d'éléments :
Ces balises permettent d'ajouter du contenu à vos textes. Elles concernent les citations, les liens, l'insertion dimage ou encore de vidéo. Leur mode d'emploi est spécifique et elles renferment parfois quelques surprises. Rien d'insurmontable !
-
Ce bouton permet de voir les balises bbcode.
C'est grace à cela que vous avez pu voir les balises bbcode en dehors de la fenêtre d'édition. Sans elle, ce tuto n'existerait pas ![/code]Code : Tout sélectionner
[code][b][i][size=85][color=#800000][defil]Vous remarquerez dans ce code plusieurs balises. Et vous essayiez de reconnaître à quoi elles correspondent ?[/defil][/color][/size][/i][/b]
Quand vous prévisualisez votre message :Code : Tout sélectionner
[b][i][size=85][color=#800000][defil]Vous remarquerez dans ce code plusieurs balises. Et vous essayiez de reconnaître à quoi elles correspondent ?[/defil][/color][/size][/i][/b] -
Ce bouton sert à cacher votre texte. On appelle ça un spoiler.
Il suffit de sélectionner le texte puis de cliquer sur le bouton.Quand vous prévisualisez votre message :Code : Tout sélectionner
[spoiler]Ce texte est caché.[/spoiler] Il ne vous reste plus qu'à cliquer sur le bouton 
pour voir le texte. Mais attention, la curiosité est parfois un vilain défaut. -
Ce bouton sert à citer une personne ou une source.
Grâce à la balise quote vous pouvez citer de façon disctinte une phrase ou des propos entiers. Il suffit de sélectionner le texte et de cliquer ensuite sur le bouton.Dans la prévisualisation, ça donne :Code : Tout sélectionner
[quote]Ce texte est une citation.[/quote]
Cette balise a une particularité intéressante, c'est quelle peut faire figurer également le nom de l'auteur que vous citez ! Dans la première balise "quote", il suffit d'ajouter, à la suite sans espace ="Auteur ou pseudo". Exemple :Ce texte est une citation.Dans la prévisualisation, ça donne :Code : Tout sélectionner
[quote="Louis-Damien Lacroix de Beaufoy"]Vive la République Frôceuse !!![/quote]Louis-Damien Lacroix de Beaufoy a écrit :Vive la République Frôceuse !!! Notez que quand vous lisez un sujet, vous avez le bouton 
. Si vous cliquez dessus, le message de la personne est cité avec les balises déjà mises dedans ! C'est ça, la modernité ! -
Ce bouton permet des créer des liens.
Fonctionnalité capitale pour renvoyer vers des topics ou vers un autre site, utiliser cette balise est relativement aisé. Copiez puis collez votre adresse internet, sélectionnez là avec la souris et cliquez sur le bouton. Voici le résultat :Quand vous prévisualisez votre message :Code : Tout sélectionner
[url]http://www.republique-froceuse.com/forum/viewtopic.php?f=41&t=7[/url]
http://www.republique-froceuse.com/foru ... p?f=41&t=7
A l'instar de la balise précédente, celle-ci vous permet de mettre un lien dans un texte. Pas de panique, c'est simple comme bonjour. Il suffit de rajouter dans la première balise =votrelien et de taper votre texte entre les deux balises. Exemple :En prévisualisation, ça donne :Code : Tout sélectionner
[url=http://www.republique-froceuse.com/forum/viewtopic.php?f=41&t=7]Cliquez ici pour accéder au tutoriel.[/url]
Cliquez ici pour accéder au tutoriel. -
Ce bouton permet d'insérer des images.
Allez, ce sera mon quart d'heure mégalomanie... Pour utiliser cette balise, il faut au préalable avoir hébergé son image sur un site spécialisé. Tapez "hébergement d'images" sur Google, vous devriez trouver votre bonheur. Pour aider, gratuitement, vous trouverez Imageshack ou Tinypic ou encore Hiboox.
Quand votre image est hébergée, la seconde étape consiste à récupérer le "Direct Link". Ce dernier se finit obligatoirement par .jpeg ; .gif ; .png ; etc... autrement dit par une extension de fichier image. Copiez ce direct-link, collez le dans votre fenêtre d'édition puis sélectionnez-le avec la souris et cliquez sur le bouton. Vous obtiendrez ceci :Quand vous prévisualisez votre message :Code : Tout sélectionner
[img]http://newrepubliquefroce.forums-actifs.com/users/1715/22/08/00/avatars/15-4.jpg[/img]
Là encore vous pouvez ajouter une fonctionnalité, comme par exemple, un lien dans votre image. On va tout simplement faire fusionner les deux balises, url et img. Comme ceci :Ce qui vous donne en prévisualisation (cliquez sur l'image pour le fun) :Code : Tout sélectionner
[url=http://www.republique-froceuse.com/forum/memberlist.php?mode=viewprofile&u=56][img]http://newrepubliquefroce.forums-actifs.com/users/1715/22/08/00/avatars/15-4.jpg[/img][/url]
Pensez à surveiller la taille de vos images. Si elles sont trop grandes, elles vont déformer les pages du forum et nuire à l'affichage. N'oubliez pas le règlement. Si lorsque vous prévisualisez, vous avez une croix rouge à la place de votre image, c'est très probablement parce que votre lien n'est pas le direct-link... -
Ce bouton vous permet d'ajouter une musique du site Deezer.
L'utilisation de cette balise est très simple. Il vous suffit de chercher sur le site deezer la chanson que vous souhaitez écouter et de la lancer en lecture. Vous verrez alors en haut de page, le "player" ou lecteur pour ceux que l'anglais agace. Il vous suffit de prendre l'ID de la chanson, jetez un oeil à la capture décran juste en dessous, c'est la partie colorée !
Vous y êtes ? Il ne faut garder que le numéro, ici 910262. Quand vous avez écrit ce numéro sur votre fenêtre d'édition, vous le sélectionnez puis vous cliquez sur le bouton "deezertr". Vous obtenez ceci :Ce qui, lorsque vous prévisualisez ou postez, vous donne :Code : Tout sélectionner
[deezertr]910262[/deezertr]
Magnifique, non ?
-
Ce bouton sert à insérer des vidéos du site Youtube.
De la même façon qu'insérer une musique de Deezer est une tâche aisée, insérer une vidéo de Youtube l'est tout autant ! Rendez-vous sur le site youtube donc. Quand vous avez trouvé votre vidéo, lancez-là. Quand c'est fait, cliquez sur le bouton "Intégrer" (encadré en rouge) pour faire apparaître le lecteur exportable (surligné en bleu).
Copiez et collez le lecteur exportable sur un brouillon. On ne va conserver que la partie que j'ai mise en gras et en rouge :
Copiez-collez cette partie là sur votre fenêtre d'édition puis sélectionnez-la et cliquez sur le bouton youtube. Vous obtenez ceci :<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/[b]fDqiA4JxuNg&hl=fr_FR&fs=1&[/b]"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/fDqiA4JxuNg&hl=fr_FR&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>Ce qui en prévisualisation donne :Code : Tout sélectionner
[youtube]fDqiA4JxuNg&hl=fr_FR&fs=1&[/youtube]
[youtube]fDqiA4JxuNg&hl=fr_FR&fs=1&[/youtube]
Enjoy it ! -
Ce bouton sert à insérer une vidéo du site Dailymotion.
Pareil que pour Youtube, le principe ne change pas vraiment. Rendez-vous sur le site Dailymotion. Quand vous avez trouvé votre vidéo, lancez-là. Quand c'est fait, regardez en bas et trouvez le champ "Embed Code".
Copiez et collez le lecteur exportable sur un brouillon. On ne va conserver que la partie que j'ai mise en gras et en rouge :
Copiez-collez cette partie là sur votre fenêtre d'édition puis sélectionnez-la et cliquez sur le bouton dmotion. Vous obtenez ceci :<object width="480" height="270"><param name="movie" value="http://www.dailymotion.com/swf/[b]video/x76ufk[/b]"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed type="application/x-shockwave-flash" src="http://www.dailymotion.com/swf/video/x76ufk" width="480" height="270" allowfullscreen="true" allowscriptaccess="always"></embed></object>Ce qui en prévisualisation donne :Code : Tout sélectionner
[dmotion]video/x76ufk[/dmotion]
-
Ce bouton vous permet d'insérer du contenu vidéo tout site confondu.
Cette balise est assez déroutante à prendre en main, mais quand on a compris le système, elle n'a plus aucun secret. Phpbb propose tout simplement de remplacer le lecteur exportable des sites de vidéos en flash par cette balise.
La première chose à faire est de copier coller sur la fenêtre d'édition, le lecteur exportable du site en question. Dans mon exemple afin de vous montrer autre chose que youtube et dailymotion (qui ont leur propre bouton), je vais prendre une vidéo sur le site Wat. Quand vous avez trouvé votre vidéo, il vous suffit de passer la souris dessus et de cliquer sur "Export". Copiez-collez sur un brouillon le lecteur exportable, présent dans le champ "Code Player". Vous allez vous retrouver avec un code de ce type (j'ai mis en gras et en rouge, les seules parties qui nous intéressent) :
Alors, ici, le 480 va correspondre à la largeur de la vidéo et le 270 à sa hauteur. Le lien est le lien direct vers la vidéo. Quand vous avez relevé ces informations, et que vous les avez notée, effacez le lecteur exportable. Collez le lien direct de la vidéo et sélectionnez-le. Cliquez ensuite sur le bouton flash. Voilà ce que cela donne.<div><object type="application/x-shockwave-flash" data="http://www.wat.tv/swf2/249910nIc0K114846781" width="480" height="270" id="wat_4846781"><param name="movie" value="http://www.wat.tv/swf2/249910nIc0K114846781"/><param name="allowScriptAccess" value="always"/><param name="allowFullScreen" value="true"/><embed width="480" height="270" src="http://www.wat.tv/swf2/249910nIc0K114846781" allowscriptaccess="always" allowfullscreen="true" />Veuillez installer Flash Player pour lire la vidéo</object></div><div class="watlinks" style="width:480px;font-size:11px; background:#CCCCCC; padding:2px 0 4px 0;text-align:center;"><a target="_blank" class="waturl" href="http://www.wat.tv/video/zapping-web-18- ... <strong>Le Zapping du Web -18-06-10</strong></a></div>Maintenant que vous avez vos balises posées, vous remarquez qu'il n'y a rien après le "=". Il vous faut y mettre la largeur et la hauteur, toujours en suivant mon exemple, je vais donc ajouter après le "=" 480,270 sans espace, sans guillemets et obligatoirement avec la virgule !Code : Tout sélectionner
[flash=]http://www.wat.tv/swf2/249910nIc0K114846781[/flash]
Ce qui nous donne :Maintenant que nous avons tout ça, nous pouvons prévisualiser... tadam !Code : Tout sélectionner
[flash=480,270]http://www.wat.tv/swf2/249910nIc0K114846781[/flash]
Il vous suffit de cliquer sur la vidéo pour qu'elle démarre.
Le système est le même avec Dailymotion et Youtube ou tout autre site utilisant le shockwave flash player. Respectez les tailles et évitez de les changer, car cela va déformer votre vidéo et la rendre moche. De même évitez de mettre une largeur trop grande, 480 de large, c'est suffisant, ne dépassez jamais 640.