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
Sens d’écriture
[dir=ltr|rtl]text[/dir]

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

Résultat :
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
Insérer un lien vers n’importe quelle vidéo internet
[bbvideo]http://video_url[/bbvideo]

Exemple :
[bbvideo]https://www.youtube.com/watch?v=sP4NMoJcFd4[/bbvideo]

Résultat :
Haut