BBCode

Principales balises BBCode

Cet article a été mis à jour, vous consultez ici une archive de cet article!
Dernière mise à jour : 03/05/2014 à 14h21
Table des matières
  1. Smileys
  2. Mise en forme du texte
    1. Mises en forme de base : gras, italique, souligné et barré
    2. Taille du texte
    3. Couleur
    4. Alignement
    5. Un autre alignement : float
    6. Les titres
    7. Les conteneurs
    8. Les styles
  3. Insertion liens, image, citation, code, multimédia, ...
    1. Liens
      1. Différentes syntaxes possibles
      2. Attention
    2. Images
      1. Écrire sur une image
    3. Texte caché
    4. Citation
    5. Tableaux
    6. Listes
    7. Insérer du code
      1. Préciser le type de code inséré
      2. Afficher les lignes
    8. Multimédia
      1. Flash
      2. Vidéos
      3. Son
    9. Insérer des expressions mathématiques
    10. Ancres
      1. Qu'est-ce qu'une ancre?
      2. Créer une ancre
      3. Faire pointer un lien vers une ancre
    11. Flux RSS
PHPBoost gère la mise en forme des messages du forum, articles, commentaires, etc... avec un "langage" simplifié. En effet, qui n'a jamais entendu parler du BBCode? C'est un langage inventé, qui permet de faciliter la mise en forme d'un message et qui permet entre autres de mettre du texte en gras, de le souligner, de faire un lien ou bien d'autres choses encore. Il permet à des utilisateurs ne connaissant pas du tout l'html de formater leur messages.







Niveau fonctionnement, pour ceux qui sont intéressés, des expressions régulières reconnaissent les balises BBcode et remplacent ce language à balises à crochets [] par les balises XHTML et CSS correspondantes.







Nous allons voir par l'intermédiaire de cet article comment mettre en forme un message, valable sur toutes les pages de PHPBoost où vous voyez la case message avec en dessous des boutons et des smileys :) .







A noter aussi la possibilité d'insérer dans vos messages des formules mathématiques, pour cela, voir l'article approprié.







Smileys









Pour égayer vos messages, rien de mieux que d'y insérer quelques smileys histoire d'illustrer des réactions récurrentes.







Pour cela vous devez placer le curseur à l'endroit où vous voulez insérer le smiley, à l'intérieur de la zone de texte. Ensuite vous cliquez sur le bouton smiley dans la barre BBCode et vous avez la collection de smileys disponibles (une vingtaine d'origine plus ceux éventuellement rajoutés) et vous cliquez sur le smiley qui vous intéresse.







Un code va donc s'afficher à l'endroit où vous aviez placé le curseur.



Et oui vous l'aurez compris le smiley ne s'insère pas directement mais cela insère un "code smiley" qui est propore à chaque smiley, ce code sera donc remplacé par le smiley à l'affichage du message.







Vous pourrez donc au bout d'un certain temps et avec de l'habitude ne plus avoir à cliquer sur le bouton smiley car vous aurez retenu leur code correspondant. D'ailleurs pourquoi des caractères si bizarres?







Effectivement les caractères correspondant aux smileys peuvent être compliqués mais pour cela on a une explication évidente. Par exemple pour le smiley sourire si le code était sourire, dès que le mot sourire apparaîtrait dans le message il serait remplacé par le smiley correspondant.







Et puis pour allez encore plus loin vous allez remarquer quelque chose si ce n'est pas déjà fait.



Par exemple justement le smiley sourire :)



Son code est:



Code : 
:)








Et bien faites faire un quart de tour dans le sens horaire et vous verrez vite qu'il forme un visage souriant (avec les deux points: les yeux, et la parenthèse: la bouche).



Vous pouvez faire ça avec beaucoup de smileys classiques comme le clin d'œil par exemple.







Mise en forme du texte









Vous vous demandez comment j'ai mis en page cet article? Simplement, grâce au BBCode! En effet le BBCode dérive de l'HTML par sa syntaxe.







Mises en forme de base : gras, italique, souligné et barré









Pour mettre un texte en gras vous n'aurez qu'à l'encadrer par la balise b comme le montre cet exemple:



Code : 
[b]Texte à mettre en gras[/b]








Cet exemple affichera:



Texte en gras







Pour l'insérer plus facilement vous pouvez sélectionner le texte que vous voulez mettre en gras et vous cliquez sur bold, il s'entourera automatiquement des bonnes balises.







Vous pouvez faire de même avec les balises i, u, s qui correspondent à :



  • i : italique (italic)
  • u : souligné (underline)
  • s : barré (strike)








Mais pourquoi des lettres b, i et u?



A cause de l'anglais tout simplement!



b est l'initiale de "bold" qui signifie "gras", i pour "italic", et u pour "underline" ou "souligné" en français.







Taille du texte









Pour modifier ces propriétés, le principe est le même. On va encadrer le texte désiré par d'autres balises. L'icône de la balise est : size







Code : 
[size=25]Texte[/size]




Cet exemple affichera:



Texte







La balise size , admet en argument un chiffre entre 0 et 49







Quelques exemples:



Taille 5



Taille 9



Taille 25



Taille 35



Taille 49



[size=50]Taille 50[/size] Celle la ne marche pas comme prévu.







Remarque: La balise size ne fonctionne que sous les versions supérieures à la version 1.4.0 de PHPBoost.







Couleur









Dans color vous mettrez la couleur (en anglais pour les principales couleurs, ou alors en hexadécimal pour les connaisseurs). Liste des couleurs disponibles: red, green, blue, yellow, purple, olive, black, white, grey etc.







L'icône de la balise est : color







Code : 
[size=25][color=red]Texte[/color][/size]
[size=25][color=#FF6600]Texte[/color][/size]




Cet exemple affichera:



Texte



Texte







Alignement









Pour l'alignement d'un texte le principe est encore une fois le même. En utilisant les boutons gauche, centre et droite vous pourrez aligner le texte qui sera entouré des balises où vous voudrez dans la page.







Les icônes de la balise sont :



  • gauche : left
  • centré : center
  • droite : right
  • justifié: justify








Code : 
[align=right]Exemple de texte aligné à droite[/align]
donne



Exemple de texte aligné à droite









Un autre alignement : float









Nous avons déjà vu la balise align, elle permet de positionner des éléments.



L'avantage de la balise float c'est qu'elle permet de mettre plusieurs éléments à la même hauteur, par exemple si on veut insérer une image sur la droite, si on lui demande de se positionner à droite par la balise float le texte ne viendra pas se mettre sur l'image mais il l'entourera.



A noter qu'il est possible de faire flotter à droite ou à gauche mais pas au centre.







Les icônes de la balise sont :



  • gauche : float_left
  • droite : float_right








Code : 
[float=right]élément flottant[/float]








Les titres









L'icône de la balise est : title







La balise 'title' sert à créer des titres. Sélectionnez votre texte à mettre en titre, cliquez sur l'icône et choisissez le niveau de titre.







Exemples :







Code : 
[title=1]titre 1[/title]
[title=2]titre 2[/title]
[title=3]titre 3[/title]
[title=4]titre 4[/title]








donnera :







titre 1





titre 2





titre 3





titre 4









Les conteneurs









L'icône de la balise est : subtitle







Les balises 'block' et "fieldset" servent à créer un cadre autour d'un texte. Sélectionnez votre texte à encadrer, cliquez sur l'icône et choisissez le type de cadre.







Code : 
[block]ce texte est encadré[/block]
[fieldset]ce texte est aussi un texte encadré[/fieldset]








donnera :







ce texte est encadré




ce texte est aussi un texte encadré








A noter que la balise "fieldset" peut aussi s'utiliser avec l'attribut "legend" pour mettre un titre:







Code : 
[fieldset legend="titre"]ce texte est encadré avec un titre[/fieldset]








donnera







titre
ce texte est encadré avec un titre








Les styles









Les styles de texte permettent de bien mettre en évidence une zone texte sous forme de question, remarque, attention et erreur. La balise utilisée est : 'style'







L'icône de la balise est : style







Voici comme exemple les 4 styles disponibles :







Code : 

[style=question]question[/style]
[style=notice]remarque[/style]
[style=warning]attention[/style]
[style=error]erreur[/style]








ce qui donne :







question



remarque



attention



erreur







Insertion liens, image, citation, code, multimédia, ...









Liens









Différentes syntaxes possibles









Pour faire un lien vers une page web quelconque, vous devez suivre la démarche suivante. Vous devez d'abord insérer la balise lien qui est url. Vous mettez le texte ou l'image qui serviront de support pour le lien. Ensuite vous revenez à l'ouverture de la balise url et vous remplacez url par url=votre page.







L'icône de la balise est : url







Voila un exemple:



Code : 
[url=http://www.phpboost.com]PHPBoost[/url]
[url=http://www.phpboost.com]http://www.phpboost.com[/url]




Cet exemple affichera:







PHPBoost



http://www.phpboost.com







Attention









Veillez à bien respecter un ordre d'ouverture et de fermeture des balises lorsque vous en imbriquez une dans l'autre:



Code : 
[b][i]Texte[/b][/i]
est à proscrire et à remplacer par:
[b][i]Texte[/i][/b]




Effectivement vous allez me dire: "mais ça marche aussi!".



Certes, mais cela n'est absolument pas bon pour les navigateurs et la page ne sera plus compatible au standard XHTML 1.0 Strict du W3C.







Veillez aussi à ne pas intercaler d'espaces à l'intérieur des crochets [] qui correspondent à la balise, cela empêcherait tout simplement le fonctionnement de la mise en forme.







Images









L'ajout d'image permet d'expliquer un problème, montrer des créations graphiques, images drôles/intéressantes, etc...



Pour cela vous pouvez insérer une image en spécifiant son adresse internet dans les balises img.







L'icône de la balise est : image







Voila un exemple:



Code : 
[img]http://www.phpboost.com/templates/base/theme/images/phpboost.png[/img]








Cet exemple affichera:



phpboost







Combinons avec ce que nous avons appris avant, nous allons centrer l'image:



Code : 
[align=center][img]http://www.phpboost.com/templates/base/theme/images/phpboost.png[/img][/align]








phpboost









Vous savez donc maintenant ajouter des images à vos messages :top







Écrire sur une image









Pour écrire sur une image, il vous suffit de faire cela :







Code BBCODE : 
[block style="background-image:url(LIEN DE L'IMAGE); width:760px; height:650px;"]Texte par dessus[/block]








Code BBCODE : 
background-image:url(LIEN DE L'IMAGE)
est l'élément ou vous devriez mettre le lien de l'image







Code BBCODE : 
width:760px
et la largeur.







Code BBCODE : 
height:650px;
la hauteur.







Code TEXT : 
Texte par dessus
est le texte qui sera par dessus l'image.











Texte caché









La balise 'hide' permet d'afficher une zone de texte caché. Il suffit de cliquer dessus pour afficher le contenu. Elle peut être utilisée pour un article de questionnaire donnant ainsi la réponse à la question.







L'icône de la balise est : hide







Exemple :







Code : 
[hide]Texte caché[/hide]








donne :







Caché :
Texte caché








Cliquez sur la zone de texte pour afficher le texte :wink







Citation









La balise quote (citation en anglais) est souvent utilisée pour citer le message d'un autre membre, mais peut avoir d'autres utilisation très pratiques.







L'icône de la balise est : quote







Elle peut être utilisé simplement pour citer un texte:







Code : 
[quote=Citation]Texte sans auteur particulier à citer[/quote]








Ce qui donne:







Citation :
Texte sans auteur particulier à citer








Maintenant, vous pouvez citer l'auteur du message (ça ne doit pas forcément être le pseudo d'un membre, ça peut être le nom d'un site ou d'un auteur...)







Code : 
[quote=CrowkaiT]Message dont l'auteur est CrowkaiT[/quote]








Ce qui donne:







CrowkaiT :
Message dont l'auteur est CrowkaiT








Tableaux









Article détaillé :
Insérer des tableaux








Listes









Article détaillé :
Insérer des listes








Insérer du code









Pour afficher du BBCode sans qu'il soit interprété comme par exemple plus haut dans cet article (tous les autres langages y compris le HTML sont bloqués par mesure de sécurité), il faut utiliser la balise BBCode nommée code. Le code ne sera pas interprété, et il sera peut-être coloré, tout dépend si le langage est supporté et reconnu par le colorateur syntaxique.







L'icône de la balise est : code







Voici un exemple:







Code : 
<?php echo 'Bonjour cher membre'; ?>








On peut également précisé le type de code que l'on vas y insérer :







Préciser le type de code inséré









En précisant le type de code que l'on veux colorer, on met toute les chances de notre côtés pour que l'interpréteur syntaxique gère au mieux la couleur.







Exemple :







Si c'est du code php, l'on peut mettre directement :







Code BBCODE : 
[code=php]<?php echo 'Bonjour cher membre'; ?>[/code]








Ce qui donne :







Code PHP : 
<?php echo 'Bonjour cher membre'; ?>








Afficher les lignes









Pour insérer les lignes a côtés du code, il va falloir insérer un argument supplémentaire dans la balise BBCode.







Procéder comme suit :







Code BBCODE : 
[code=php,1]<?php 
echo 'Bonjour cher membre'; 
?>[/code]








Ce qui donne :







Code PHP : 
  1. <?php 
  2. echo 'Bonjour cher membre'; 
  3. ?>








Multimédia









Flash









L'icône de la balise est : flash







La balise flash [swf] permet d'intégrer des animations flash directement dans PHPBoost, celle-ci peut prendre deux arguments: largeur et hauteur







Code : 
[swf=largeur,hauteur]url de l'animation[/swf]








Nous allons travailler avec l'animation de la pub PHPBoost, elle s'affiche avec le code suivant:







Code : 
[swf=155,250]http://www.phpboost.info/phpboost/pub.swf[/swf]








Ce qui donne:











Vidéos









L'icône de la balise est : movie







Pour savoir comment utiliser la balise flash pour insérer des vidéos, merci de lire l'article approprié.







Son









Vous pouvez bien sur insérer du son sur phpboost. La balise utilisée est 'sound'







L'icône de la balise est : sound



Il faut cependant noter que le lecteur lit uniquement les fichiers .mp3. De plus la lecture optimale se fait pour les fichiers encodés à 44,100kHz. Dans les autres cas, la lecture ne se fera pas normalement.







Exemple :







Code : 
[sound]http://art.macp3.info/VRAC/mp3/tagadatsointsoin.mp3[/sound]








Donnera :











Source: Musique composée par Kak Miortvi Pengvin. Fichier distribué sous licence Creative Commons BY-NC-ND 2.0.















Insérer des expressions mathématiques









L'icône de la balise est : math







La balise math permet d'insérer des expressions mathématiques. Vous trouverez tous les détails sur l'article approprié (explication et démonstration).







Ancres









Attention: Cette balise n'est supportée que depuis PHPBoost 2.0.







Qu'est-ce qu'une ancre?









Une ancre permet de définir des lieux dans la page. Elle permet de faire en sorte de se rendre directement sur l'endroit recherché dans la page (voir par exemple les liens du sommaire de cette page, ils mènent directement au paragraphe concerné).







L'icône de la balise est : anchor







Créer une ancre









Pour définir une ancre, il faut définir la syntaxe suivante:







Code : 
[anchor=nom-ancre]Titre[/anchor]








Faire pointer un lien vers une ancre









Pour créer un lien vers un endroit précis de la page, il faut mettre avant tout l'adresse de la page, puis mettre un dièse et le nom de l'ancre précédemment définie.



Nous utiliserons par exemple:







Code : 
[url=/wiki/principales-balises-bbcode#creer-une-ancre]Créer des ancres en BBCode sur PHPBoost[/url]








Ce qui affichera:



Créer des ancres en BBCode sur PHPBoost







Flux RSS









Depuis la V4, il est possible d'ajouter un flux RSS interne au site via le BBCode.







Il faut utiliser cette balise







Code BBCODE : 
[feed cat"x" number="x"]NOM DU MODULE[/feed]








Vous avez la possibilité de personnaliser l'affichage :



  • cat="numéro de la catégorie du flux dans le module"



    Pour connaitre le numéro de la catégorie du flux, allez dans le module souhaité, allez dans la catégorie souhaitée et cliquez sur cette icone rss, vous allez être redirigé vers une page avec ce type d'adresse : /syndication/rss/forum/4



    Cela correspond au module forum et la catégorie est la n° 4.



    Si vous souhaitez afficher tous les flux d'un module, dans ce cas ne mettez pas cat"x"
  • number="nombre de flux à afficher"











Exemple : afficher les 5 derniers flux du module téléchargement de la catégorie 3







Code BBCODE : 
[feed cat"3" number="5"]download[/feed]