Guide du BBCode

Introduction

Qu’est-ce que le BBCode ?
Le BBCode est une implĂ©mentation spĂ©ciale du HTML. L’administrateur dĂ©termine si le BBCode peut ĂȘtre utilisĂ© dans vos messages sur le forum. Vous pouvez dĂ©sactiver le BBCode dans certains messages via le formulaire de rĂ©daction de message. Le BBCode ressemble au HTML, les balises sont entre crochets [ et ] au lieu de < et >, et offre une meilleure maĂźtrise de l’affichage du contenu. Selon le thĂšme utilisĂ©, vous pouvez Ă©galement ajouter les BBCodes en cliquant dans l’interface au-dessus du formulaire de rĂ©daction de message. MĂȘme avec cela, ce guide peut vous ĂȘtre utile.
Haut

Mise en forme du texte

Utiliser le gras, l’italique et le soulignĂ©
Le BBCode permet de modifier rapidement la forme du texte grùce aux méthodes suivantes :
  • Encadrez le texte entre [b][/b] pour mettre en gras.

    Par exemple : [b]Salut[/b] devient Salut

  • Utilisez [i][/i] pour l’italique.

    Par exemple : C’est [i]gĂ©nial ![/i] donne C’est gĂ©nial !

  • Utilisez [u][/u] pour souligner.

    Par exemple :[u]Bonjour[/u] devient Bonjour
Haut
Changer la couleur et la taille du texte
Pour modifier la couleur ou la taille de votre texte utilisez les balises suivantes :
  • Changez la couleur d’un texte en l’encadrant entre les balises [color=][/color]. Vous pouvez indiquer un nom de couleur connu (comme : red, blue, yellow, etc.) ou bien indiquer un code hexadĂ©cimal sous la forme #FFFFFF (oĂč FFFFFF est Ă  remplacer par la valeur hexadĂ©cimale).
    Par exemple, pour obtenir du texte rouge utilisez :

    [color=red]Salut ![/color]

    ou

    [color=#FF0000]Salut ![/color]

    Ces deux exemples afficheront : Salut !

  • Changez la taille du texte de façon analogue avec les balises [size=][/size]. L’affichage rĂ©sultant de ce BBCode dĂ©pend du thĂšme utilisĂ©. toutefois le format recommandĂ© est une valeur numĂ©rique reprĂ©sentant la hauteur du texte en pourcentage, Ă  partir de 20 (tellement petit que vous ne pourrez pas le voir) jusqu’à 200 (trĂšs grand).
    Par exemple :

    [size=30]PETIT[/size] sera affiché PETIT

    alors que [size=200]ÉNORME ![/size] donnera ÉNORME !

    Note : gardez Ă  l’esprit que la façon dont votre message s’affichera dĂ©pendra du navigateur et du systĂšme d’exploitation.
Haut
Puis-je combiner des balises ?
Oui, bien Ă©videmment, vous pouvez Ă©crire pour attirer l’attention :

[size=200][color=red][b]REGARDEZ-MOI ![/b][/color][/size]

Donne : REGARDEZ-MOI !

Attention toutefois Ă  ne pas en abuser ! Retenez aussi que c’est Ă  vous, l’auteur, de vous assurer que les balises sont correctement fermĂ©es.

Par exemple, ceci est incorrect : [b][u]C’est faux ![/b][/u]
Haut

Citations et textes Ă  espacement fixe

Citer du texte dans les réponses
Il y a deux maniÚres de citer un texte, avec ou sans référence.
  • Lorsque vous utilisez la fonction de citation pour rĂ©pondre Ă  un message sur le forum, vous pouvez noter que le texte du message est ajoutĂ© Ă  l’intĂ©rieur d’un bloc [quote=""][/quote]. Cette mĂ©thode vous permet de citer avec une rĂ©fĂ©rence Ă  une personne ou toute autre rĂ©fĂ©rence ! Par exemple, pour citer un texte de M. Goutte, vous mettrez :

    [quote="M. Goutte"]Le texte de M. Goutte ira ici[/quote]

    M. Goutte a Ă©crit : sera ajoutĂ© automatiquement avant le texte. Souvenez-vous que vous devez encadrer entre "" le nom Ă  citer, ce n’est pas optionnel.
  • La deuxiĂšme mĂ©thode vous permet de faire des citations en aveugle. Pour l’utiliser, encadrez le texte avec les balises [quote][/quote]. Lorsque vous consulterez le message, cela affichera, en fonction du thĂšme utilisĂ©, Citation : avant le texte lui-mĂȘme.
Haut
Afficher du code ou des données à espacement fixe
Si vous désirez insérer du code ou quoi que ce soit qui nécessite une police à largeur fixe, par exemple : une police de type « Courier », encadrez votre texte entre les balises [code][/code] :

[code]echo "Un peu de code" ;[/code]

Le format utilisé entre les balises [code][/code] est enregistré pour une consultation ultérieure.
Haut

Génération de listes

Créer une liste non ordonnée
Le BBCode gĂšre deux types de liste : ordonnĂ©es ou non. Elles sont les mĂȘmes que leur Ă©quivalent HTML. Une liste non ordonnĂ©e affiche chaque Ă©lĂ©ment de la liste sĂ©quentiellement l’un aprĂšs l’autre, chacun indentĂ© par une puce. Utilisez [list][/list] pour crĂ©er une liste non ordonnĂ©e et dĂ©finissez chaque Ă©lĂ©ment avec [*]. Par exemple, pour la liste de vos couleurs prĂ©fĂ©rĂ©es, utilisez :

[list]
[*]Rouge
[*]Bleu
[*]Jaune
[/list]

Ce qui générera la liste suivante :
  • Rouge
  • Bleu
  • Jaune

Sinon, vous pouvez spécifier le style de liste à puces en utilisant [list=disc][/list], [list=circle][/list] ou [list=square][/list].
Haut
Créer une liste ordonnée
Le deuxiĂšme type de liste, la liste ordonnĂ©e, vous permet de dĂ©cider de ce qui s’affiche avant chaque Ă©lĂ©ment. Utilisez [list=1][/list] pour crĂ©er une liste ordonnĂ©e numĂ©rotĂ©e ou [list=a][/list] pour une liste alphabĂ©tique. Comme pour les listes non ordonnĂ©es, les Ă©lĂ©ments sont indiquĂ©s avec [*]. Par exemple :

[list=1]
[*]Faire les courses
[*]Acheter un nouvel ordinateur
[*]Jurer quand le PC plante
[/list]

affichera :
  1. Faire les courses
  2. Acheter un nouvel ordinateur
  3. Jurer quand le PC plante
Alors que pour une liste alphabétique, en utilisant :

[list=a]
[*]RĂ©ponse 1
[*]RĂ©ponse 2
[*]RĂ©ponse 3
[/list]

vous obtiendrez :
  1. RĂ©ponse 1
  2. RĂ©ponse 2
  3. RĂ©ponse 3

[list=A]
[*]RĂ©ponse 1
[*]RĂ©ponse 2
[*]RĂ©ponse 3
[/list]

affichera
  1. RĂ©ponse 1
  2. RĂ©ponse 2
  3. RĂ©ponse 3

[list=i]
[*]RĂ©ponse 1
[*]RĂ©ponse 2
[*]RĂ©ponse 3
[/list]

affichera
  1. RĂ©ponse 1
  2. RĂ©ponse 2
  3. RĂ©ponse 3

[list=I]
[*]RĂ©ponse 1
[*]RĂ©ponse 2
[*]RĂ©ponse 3
[/list]

affichera
  1. RĂ©ponse 1
  2. RĂ©ponse 2
  3. RĂ©ponse 3
.
Haut

Création de liens

Créer un lien vers un autre site
Le BBCode permet de créer des URI (Indicateurs de Ressources Uniformes) ou URL de différentes façons.
  • La premiĂšre est d’utiliser les balises [url=][/url], ce que vous saisirez aprĂšs le signe = se comportera comme une URL. Par exemple, pour un lien vers phpBB-fr.com, vous pouvez utiliser :

    [url=https://www.phpbb-fr.com/]Visitez phpBB ![/url]

    Ce qui générera le lien : Visitez phpBB !
    Vous noterez que le lien s’ouvre soit dans la mĂȘme fenĂȘtre, soit dans une nouvelle fenĂȘtre selon les prĂ©fĂ©rences du navigateur.
  • Si vous dĂ©sirez que l’URL elle-mĂȘme soit affichĂ©e comme un lien, vous pouvez simplement utiliser :

    [url]https://www.phpbb-fr.com/[/url]

    Ce qui générera le lien : https://www.phpbb-fr.com/
  • De plus, phpBB autorise les Liens magiques, ce qui transforme automatiquement les URL correctement Ă©crites en lien sans indiquer de balise ou mĂȘme https://. Par exemple, si vous saisissez www.phpbb-fr.com, un lien www.phpbb-fr.com sera affichĂ© automatiquement Ă  la lecture de votre message.
  • La mĂȘme chose s’applique aux adresses courriels, vous pouvez indiquer l’adresse explicitement, comme par exemple :

    [email]personne@domain.adr[/email]

    Ce qui affichera personne@domain.adr ou bien vous pouvez simplement saisir personne@domain.adr dans votre message et cela sera automatiquement converti lors de la consultation.
Comme avec toutes les balises BBCode, vous pouvez encapsuler avec des URL d’autres balises telles que [img][/img] (voir l’entrĂ©e suivante), [b][/b], etc. Comme avec les balises de mise en forme, c’est Ă  vous de vous assurer de les ouvrir et de les fermer correctement, par exemple :

[url=https://www.phpbb.com/][img]https://www.phpbb.com/theme/images/logos/blue/160x52.png[/url][/img]

n’est pas correct ce qui peut entraüner la suppression de votre message, donc faites attention.
Haut

Afficher des images dans les messages

Ajout d’une image dans un message
Le BBCode permet d’inclure des images dans vos messages Ă  l’aide d’une balise. Il y a deux choses importantes Ă  se rappeler lors de l’utilisation de cette balise qui sont d’une part, que beaucoup d’utilisateurs n’apprĂ©cient pas qu’il y ait beaucoup d’images dans les messages et d’autre part, que l’image affichĂ©e doit ĂȘtre disponible sur Internet (elle ne peut ĂȘtre uniquement que sur votre ordinateur, sauf si vous avez un serveur Web !). Pour afficher une image, vous devez encadrer son URL entre des balises [img][/img]. Par exemple :

[img]https://www.phpbb.com/theme/images/logos/blue/160x52.png[/img]

Comme notĂ© dans la section URL ci-dessus, vous pouvez entourer l’image entre des balises [url][/url] si dĂ©sirĂ©, exemple :

[url=https://www.phpbb.com/][img]https://www.phpbb.com/theme/images/logos/blue/160x52.png[/img][/url]

affichera

Haut
Joindre un fichier Ă  un message
Les fichiers peuvent maintenant ĂȘtre joints Ă  n’importe quel endroit du message en utilisant le BBcode [attachment=][/attachment], si l’administrateur a activĂ© cette fonctionnalitĂ© et si vous en avez la permission. Dans l’écran de rĂ©daction de message, vous trouverez un menu dĂ©roulant (respectivement un bouton) pour joindre vos fichiers en ligne.
Haut

Autres questions

Puis-je ajouter mes balises ?
Si vous ĂȘtes administrateur du forum et avez les autorisations nĂ©cessaires, vous pouvez ajouter des BBcodes supplĂ©mentaires via la section "BBcodes" dans le sous menu "Messages".
Haut

Boite des BBCodes avancés

Police de caractĂšres
[font=Comic Sans MS]text[/font]

Exemple :
[font=Comic Sans MS]Le renard brun et rapide saute sur le chien paresseux.[/font]

Résultat :
Le renard brun et rapide saute sur le chien paresseux.
Haut
Texte surligné
[highlight=yellow]texte[/highlight] Astuce: vous pouvez Ă©galement utiliser color=#FF0000

Exemple :
[highlight=yellow]Le renard brun et rapide saute sur le chien paresseux.[/highlight]

Résultat :
Le renard brun et rapide saute sur le chien paresseux.
Haut
Alignement du texte
[align=center|left|right|justify]texte[/align]

Exemple :
[align=center]Le renard brun et rapide saute sur le chien paresseux.[/align]

Résultat :
Le renard brun et rapide saute sur le chien paresseux.
Haut
Texte flottant
[float=left|right]text[/float]

Exemple :
[float=right]Le renard brun et rapide saute sur le chien paresseux.[/float]

Résultat :
Le renard brun et rapide saute sur le chien paresseux.
Haut
Texte barré
[s]texte[/s]

Exemple :
[s]Le renard brun et rapide saute sur le chien paresseux.[/s]

Résultat :
Le renard brun et rapide saute sur le chien paresseux.
Haut
Texte en indice
[sub]texte[/sub]

Exemple :
[sub]Le renard brun et rapide saute sur le chien paresseux.[/sub] Le renard brun et rapide saute sur le chien paresseux.

Résultat :
Le renard brun et rapide saute sur le chien paresseux. Le renard brun et rapide saute sur le chien paresseux.
Haut
Texte en exposant
[sup]texte[/sup]

Exemple :
[sup]Le renard brun et rapide saute sur le chien paresseux.[/sup] Le renard brun et rapide saute sur le chien paresseux.

Résultat :
Le renard brun et rapide saute sur le chien paresseux. Le renard brun et rapide saute sur le chien paresseux.
Haut
Texte lumineux
[glow=color]text[/glow]

Exemple :
[glow=red]Le renard brun et rapide saute sur le chien paresseux.[/glow]

Résultat :
Le renard brun et rapide saute sur le chien paresseux.
Haut
Ombres sur le texte
[shadow=color]text[/shadow]

Exemple :
[shadow=blue]Le renard brun et rapide saute sur le chien paresseux.[/shadow]

Résultat :
Le renard brun et rapide saute sur le chien paresseux.
Haut
Texte à courte ombre portée
[dropshadow=color]text[/dropshadow]

Exemple :
[dropshadow=blue]Le renard brun et rapide saute sur le chien paresseux.[/dropshadow]

Résultat :
Le renard brun et rapide saute sur le chien paresseux.
Haut
Texte flou
[blur=color]text[/blur]

Exemple :
[blur=blue]Le renard brun et rapide saute sur le chien paresseux.[/blur]

Résultat :
Le renard brun et rapide saute sur le chien paresseux.
Haut
Texte fondant
[fade]text[/fade]

Exemple :
[fade]Le renard brun et rapide saute sur le chien paresseux.[/fade]

Résultat :
Le renard brun et rapide saute sur le chien paresseux.
Haut
Texte préformaté
[pre]texte[/pre]

Exemple :
[pre]Le renard brun et rapide saute sur le chien paresseux. Le renard brun et rapide saute sur le chien paresseux.[/pre]

Résultat :
Le renard brun et rapide saute sur le chien paresseux.
	Le renard brun et rapide saute sur le chien paresseux.
Haut
Texte défilant
[marq=up|down|left|right]text[/marq]

Exemple :
[marq=left]Le renard brun et rapide saute sur le chien paresseux.[/marq]

Résultat :
Le renard brun et rapide saute sur le chien paresseux.
Haut
Spoiler le message
[spoil]texte[/spoil]

Exemple :
[spoil]Le renard brun et rapide saute sur le chien paresseux.[/spoil]

Résultat :
â–ș Afficher le texte
Haut
Masquer aux invités
[hidden]text[/hidden]

Exemple :
[hidden]Le renard brun et rapide saute sur le chien paresseux.[/hidden]

Résultat :
Contenu caché
Vous devez ĂȘtre inscrit et connectĂ© sur ce forum pour voir le contenu cachĂ©.
Haut
Message d’alerte
[mod=username]texte[/mod]

Exemple :
[mod=Nom d’utilisateur]Le renard brun et rapide saute sur le chien paresseux.[/mod]

Résultat :
 ! Message de : Nom d’utilisateur
Le renard brun et rapide saute sur le chien paresseux.
Haut
Message hors-sujet
[offtopic]texte[/offtopic]

Exemple :
[offtopic]Le renard brun et rapide saute sur le chien paresseux.[/offtopic]

Résultat :
Hors-sujet
Le renard brun et rapide saute sur le chien paresseux.
Haut
Texte [ASCII Art] NFO
[nfo]texte[/nfo]

Exemple :
[nfo]àŒŒ ぀ ◕_◕ àŒœă€ Ê•â€ąáŽ„â€ąÊ” ÂŻ\_(ツ)_/ÂŻ[/nfo]

Résultat :
àŒŒ ぀ ◕_◕ àŒœă€    Ê•â€ąáŽ„â€ąÊ”   ÂŻ\_(ツ)_/ÂŻ
Haut