BBCode: Présentation de texte, insertion d'image, de lien, ...
Posté : 21 janv. 2023, 13:42
BBCode est l'abréviation de Bulletin Board Code, utilisé pour mettre en forme les messages de forums de discussion.
Les éléments du BBCode sont appelés balises. Le nom d'une balise est délimité par les crochets [balise]Texte[/balise]
Certaines balises ont un attribut dont la valeur est assignée à l'aide du symbole '=' : [balise=attribut]Texte[/balise]
Les balises peuvent s'imbriquer [balise1][balise2]Texte[/balise2][/balise1]
ATTENTION la forme [balise1][balise2]texte[/balise1][/balise2] est incorrecte
Les différentes balises et leurs résultats:
Texte en gras:
[b]Texte[/b] donne Texte
Texte en italique:
[i]Texte[/i] donne Texte
Texte souligné:
[u]Texte[/u] donne Texte
Texte barré:
[barre]Texte[/barre] donne Texte
Texte centré:
[centrer]Texte[/centrer] donne
[droite]Texte[/droite] donne
[size=80]Texte[/size] donne Texte
Couleur du texte:
[color=red]Texte[/color] donne Texte
Les couleurs textuelles sont les dénominations des couleurs basiques en Anglais:
black white red green lime blue navy teal aqua yellow pink orange brown olive grey silver maroon purple fuchsia
Une couleur peut aussi se définir suivant le codage #RRVVBB (Voir par exemple le site https://www.peko-step.com/fr/tool/tfcolor.html)
[color=#FF306F]Texte[/color] donne Texte
Couleur du fond de texte:
[inv=red]Texte[/inv] donne Texte
Par défaut le texte est écrit en noir, pour l'inverser il vaut donc mieux l'écrire en blanc sur fond noir ce qui se traduit par l'écriture suivante:
[inv=black][color=white]Texte[/color][/inv] donne Texte
Les couleurs se définissent de la même façon que ci dessus
Lien vers un site:
[url=https://www.vstrom.fr]Visitez le forum[/url] donnera Visitez le forum
Le lien s’ouvrira soit dans la même fenêtre soit dans un onglet ou une nouvelle fenêtre selon la configuration du navigateur.
Insertion d'image:
[img]https://www.vstrom.fr/images/smilies/Vstrom2.png[/img] donne
ATTENTION: l'insertion d'une image en http génère pour certains navigateurs un problème d'affichage connu sous le nom de Contenu Mixte.
Les essais avec les navigateurs utilisés pour visualiser des images en balise http sur le forum ont donné les résultats suivant (début 2023):
Les navigateurs affichant les images sont indiqués en vert. Les autres n'affichent rien.
[rimg=25]https://www.vstrom.fr/images/smilies/Vstrom2.png[/rimg] donne
[rimg=10]https://www.vstrom.fr/images/smilies/Vstrom2.png[/rimg] donne
Affiche respectivement l'image à 25% et 10% de la largeur du message du forum. Si l'image est plus petite que la largeur du message elle sera agrandie, si elle est plus grande elle sera diminuée.
Pour une image en http, même remarque que ci dessus.
Image cliquable envoyant vers un lien:
[url=https://www.vstrom.fr]img[https://www.vstrom.fr/images/smilies/Vstrom2.png[/img][/url] donnera l'image cliquable
Pour une image en http, même remarque que pour Insertion d'image:
Exposant:
[exp]Texte[/exp] donne Texte
Exemple (en bleu) d'utilisation du mode exposant:
1/10 de seconde plus tard et Mme BlueSuedeShoes se gaussait qu'avec le Dr Antrax il y aurait eu deux ravioles* de 1re au m2 **
* Terme issu d'un antique forum dont seuls quelques vieux barbus comprennent la signification
** Toute ressemblance avec des personnages existants serait purement fortuite
Ligne:
[line=épaiseur]couleur[/line]
Exemples:
Ligne en noir épaiseur 1
[line=1]black[/line] donne
Ligne en gris épaiseur 2
[line=2]grey[/line] donne
Ligne en rouge épaiseur 3
[line=3]red[/line] donne
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 jolijumper, vous mettrez : [quote="jolijumper"]Le texte de jolijumper ira ici[/quote]
[quote="jolijumper"]Le texte de jolijumper ira ici[/quote] donnera
La deuxième méthode vous permet de faire des citations sans référence. Pour l’utiliser, encadrez le texte avec les balises [quote][/quote]
[quote]Quelqu'un a dit ...[/quote] donnera
Liste non ordonnée:
Une liste non ordonnée affiche chaque élément de la liste séquentiellement, chacun indenté par une puce.
Utilisez [list][/list] pour créer une liste non ordonnée et définissez chaque élément avec [*].
Exemple:
[list]
[*]Le forum est ton refuge
[*]Les administrateurs tu vénéreras
[*]Les modérateurs tu imploreras
[/list]
Ce qui générera la liste suivante:
Liste ordonnée:
La liste ordonnée vous permet d'afficher le type de numérotation avant chaque élément. Utilisez [list=1][/list] pour créer une liste ordonnée numérotée. Comme pour les listes non ordonnées, les éléments sont indiqués avec [*] et vous pouvez changer le type d'incrément en utilisant [list=a][/list],
[list=A][/list], [list=i][/list] ou [list=I][/list]
Exemple :
[list=1]
[*]Réponse 1
[*]Réponse 2
[*]Réponse 3
[/list]
affichera :
La balise [media][/media] est une balise particulière car son résultat dépend du lien qu'elle encadre.
Cette balise provient d'une extension rajoutée au forum qui permet de visualiser des contenus multimédia comme de la vidéo.
Cette extension supporte plusieurs sites. Chaque site ayant un support multimédia différent le résultat dépendra du site.
Les sites actuellement supportés sont les suivants (liste potentiellement évolutive):
Alors qu'un lien Google Sheets affichera une page de tableur.
Conclusion:
le BBCode enjolive un texte pour que vos posts soient plus agréables et compréhensibles à lire par vos interlocuteurs. Cette page par exemple a été entièrement écrite avec du BBCode. Ce langage par balise génère du HTML qui est aussi un langage de description par balise. Le HTML comporte plus de balises avec des attributs plus sophistiqués. Les sites WEB importants ne sont plus écrits directement en HTML car il devenait trop complexe de gérer l'affichage et les liens. La plupart du temps les développeurs WEB écrivent ces sites avec un système de gestion de contenu (CMS) comme WordPress, Drupal ou Joomla!. Associés à une base de données ils génèrent toujours du HTML, gèrent les dépendances et adaptent désormais automatiquement l'affichage aux différents types de terminaux: ordinateurs, tablettes, smartphones (site dit réactif, comme l'est ce forum). Par exemple, le site dl650.org a été écrit par Bégé directement en HTML. Pour changer l'adresse mail du Webmaster il a fallu modifier une trentaine de pages. Avec un CMS une seule modification aurait été nécessaire.
Maintenant que vous avez tout compris du BBCode je vous propose un petit exercice, écrivez exactement (avec gras et lien en texte) l'expression suivante en BBCode:
[img]http://www.smileys.lu/repository/Rire/3656.gif[/img] = :lol:
Pour tester => copier/coller dans un post + Prévisualiser
Bonne chance![[35.gif]](./images/smilies/35.gif "[35.gif]")
PS: Solution par MP
Les éléments du BBCode sont appelés balises. Le nom d'une balise est délimité par les crochets [balise]Texte[/balise]
Certaines balises ont un attribut dont la valeur est assignée à l'aide du symbole '=' : [balise=attribut]Texte[/balise]
Les balises peuvent s'imbriquer [balise1][balise2]Texte[/balise2][/balise1]
ATTENTION la forme [balise1][balise2]texte[/balise1][/balise2] est incorrecte
Les différentes balises et leurs résultats:
Texte en gras:
[b]Texte[/b] donne Texte
Texte en italique:
[i]Texte[/i] donne Texte
Texte souligné:
[u]Texte[/u] donne Texte
Texte barré:
[barre]Texte[/barre] donne Texte
Texte centré:
[centrer]Texte[/centrer] donne
Texte
Texte aligné à droite:[droite]Texte[/droite] donne
Texte
Taille du texte:[size=80]Texte[/size] donne Texte
Couleur du texte:
[color=red]Texte[/color] donne Texte
Les couleurs textuelles sont les dénominations des couleurs basiques en Anglais:
black white red green lime blue navy teal aqua yellow pink orange brown olive grey silver maroon purple fuchsia
Une couleur peut aussi se définir suivant le codage #RRVVBB (Voir par exemple le site https://www.peko-step.com/fr/tool/tfcolor.html)
[color=#FF306F]Texte[/color] donne Texte
Couleur du fond de texte:
[inv=red]Texte[/inv] donne Texte
Par défaut le texte est écrit en noir, pour l'inverser il vaut donc mieux l'écrire en blanc sur fond noir ce qui se traduit par l'écriture suivante:
[inv=black][color=white]Texte[/color][/inv] donne Texte
Les couleurs se définissent de la même façon que ci dessus
Lien vers un site:
[url=https://www.vstrom.fr]Visitez le forum[/url] donnera Visitez le forum
Le lien s’ouvrira soit dans la même fenêtre soit dans un onglet ou une nouvelle fenêtre selon la configuration du navigateur.
Insertion d'image:
[img]https://www.vstrom.fr/images/smilies/Vstrom2.png[/img] donne
ATTENTION: l'insertion d'une image en http génère pour certains navigateurs un problème d'affichage connu sous le nom de Contenu Mixte.
Les essais avec les navigateurs utilisés pour visualiser des images en balise http sur le forum ont donné les résultats suivant (début 2023):
Les navigateurs affichant les images sont indiqués en vert. Les autres n'affichent rien.
- Windows: Edge, Internet Explorer, Chrome, Firefox, Opera
- Android: Chrome, Firefox, Opera, Samsung Internet, navigateur Huawei
- IOS: Safari
- Linux: Firefox
- Copiez/Collez le lien le lien HTTP de l'image dans votre message ou utilisez la balise [url=] sur une partie de texte.
- Utilisez un site d'hébergement externe en HTTPS (servimg, zupimages, Google photos, ...)
- Téléchargez votre photo en pièce jointe
[rimg=25]https://www.vstrom.fr/images/smilies/Vstrom2.png[/rimg] donne
[rimg=10]https://www.vstrom.fr/images/smilies/Vstrom2.png[/rimg] donne
Affiche respectivement l'image à 25% et 10% de la largeur du message du forum. Si l'image est plus petite que la largeur du message elle sera agrandie, si elle est plus grande elle sera diminuée.
Pour une image en http, même remarque que ci dessus.
Image cliquable envoyant vers un lien:
[url=https://www.vstrom.fr]img[https://www.vstrom.fr/images/smilies/Vstrom2.png[/img][/url] donnera l'image cliquable
Pour une image en http, même remarque que pour Insertion d'image:
Exposant:
[exp]Texte[/exp] donne Texte
Exemple (en bleu) d'utilisation du mode exposant:
1/10 de seconde plus tard et Mme BlueSuedeShoes se gaussait qu'avec le Dr Antrax il y aurait eu deux ravioles* de 1re au m2 **
* Terme issu d'un antique forum dont seuls quelques vieux barbus comprennent la signification
** Toute ressemblance avec des personnages existants serait purement fortuite
Ligne:
[line=épaiseur]couleur[/line]
Exemples:
Ligne en noir épaiseur 1
[line=1]black[/line] donne
Ligne en gris épaiseur 2
[line=2]grey[/line] donne
Ligne en rouge épaiseur 3
[line=3]red[/line] donne
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 jolijumper, vous mettrez : [quote="jolijumper"]Le texte de jolijumper ira ici[/quote]
[quote="jolijumper"]Le texte de jolijumper ira ici[/quote] donnera
jolijumper a écrit : sera ajouté automatiquement avant le texte. Vous devez encadrer entre "" le nom à citer.jolijumper a écrit :Le texte de jolijumper ira ici
La deuxième méthode vous permet de faire des citations sans référence. Pour l’utiliser, encadrez le texte avec les balises [quote][/quote]
[quote]Quelqu'un a dit ...[/quote] donnera
Quelqu'un a dit ...
Liste non ordonnée:
Une liste non ordonnée affiche chaque élément de la liste séquentiellement, chacun indenté par une puce.
Utilisez [list][/list] pour créer une liste non ordonnée et définissez chaque élément avec [*].
Exemple:
[list]
[*]Le forum est ton refuge
[*]Les administrateurs tu vénéreras
[*]Les modérateurs tu imploreras
[/list]
Ce qui générera la liste suivante:
- Le forum est ton refuge
- Les administrateurs tu vénéreras
- Les modérateurs tu imploreras
Liste ordonnée:
La liste ordonnée vous permet d'afficher le type de numérotation avant chaque élément. Utilisez [list=1][/list] pour créer une liste ordonnée numérotée. Comme pour les listes non ordonnées, les éléments sont indiqués avec [*] et vous pouvez changer le type d'incrément en utilisant [list=a][/list],
[list=A][/list], [list=i][/list] ou [list=I][/list]
Exemple :
[list=1]
[*]Réponse 1
[*]Réponse 2
[*]Réponse 3
[/list]
affichera :
- Réponse 1
- Réponse 2
- Réponse 3
La balise [media][/media] est une balise particulière car son résultat dépend du lien qu'elle encadre.
Cette balise provient d'une extension rajoutée au forum qui permet de visualiser des contenus multimédia comme de la vidéo.
Cette extension supporte plusieurs sites. Chaque site ayant un support multimédia différent le résultat dépendra du site.
Les sites actuellement supportés sont les suivants (liste potentiellement évolutive):
- YouTube
- Dailymotion
- Vimeo
- Google Sheets
Alors qu'un lien Google Sheets affichera une page de tableur.
Conclusion:
le BBCode enjolive un texte pour que vos posts soient plus agréables et compréhensibles à lire par vos interlocuteurs. Cette page par exemple a été entièrement écrite avec du BBCode. Ce langage par balise génère du HTML qui est aussi un langage de description par balise. Le HTML comporte plus de balises avec des attributs plus sophistiqués. Les sites WEB importants ne sont plus écrits directement en HTML car il devenait trop complexe de gérer l'affichage et les liens. La plupart du temps les développeurs WEB écrivent ces sites avec un système de gestion de contenu (CMS) comme WordPress, Drupal ou Joomla!. Associés à une base de données ils génèrent toujours du HTML, gèrent les dépendances et adaptent désormais automatiquement l'affichage aux différents types de terminaux: ordinateurs, tablettes, smartphones (site dit réactif, comme l'est ce forum). Par exemple, le site dl650.org a été écrit par Bégé directement en HTML. Pour changer l'adresse mail du Webmaster il a fallu modifier une trentaine de pages. Avec un CMS une seule modification aurait été nécessaire.
Maintenant que vous avez tout compris du BBCode je vous propose un petit exercice, écrivez exactement (avec gras et lien en texte) l'expression suivante en BBCode:
[img]http://www.smileys.lu/repository/Rire/3656.gif[/img] = :lol:
Pour tester => copier/coller dans un post + Prévisualiser
Bonne chance
PS: Solution par MP