Le guide du BBcode. (utilisation,trucs et astuces)

[macabeyleo]

Aujourd'hui j'ouvre mon tout premier article concernant l'utilisation du BBcode.

Mais qu'est-ce que le BBcode?

Un droïd qui a passé le casting Stars Wars et ils ont pris BB8 à sa place du coup il est passé du côté obscur?

 

Ou un code de la route pour bébé Pokémon?

 

Stop au suspens, je vous dis tout:

Le BBCode est un langage de balisage léger inventé pour simplifier la mise en forme des messages sur les forums de discussion internet.
« BBCode » est l'abréviation de Bulletin Board Code, « bulletin board » étant le surnom anglais des forums de discussion.
Le BBCode est une implémentation spéciale du HTML, c'est l’administrateur qui détermine si le BBCode peut être utilisé dans vos messages sur le forum.
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.

Commençons par un petit aperçu des fonctions proposées:

Nous pouvons voir plusieurs boutons sur cette barre mais à quoi servent-ils? Vous le saurez en suivant le guide.

Avant, un peu de vocabulaire, ces boutons ont un nom sympathique, on les appelle des balises.

J'en vois certains qui se disent: Quoi mais que viennent faire ici les fruits du balisier?(Botanique :Arbuste cultivé pour sa racine comestible ou à des fins ornementales.)

Pour ceux qui voudrait voir à quoi ressemble le balisier:

 

Je vous rassure, rien à voir. La balise sert à mettre en forme du texte ou un objet (image) et elle est délimitée par des crochets [].


Premier petit truc avant de rentrer dans le vif du sujet: Quand vous souhaitez utiliser une balise, vous pouvez surligner votre texte et cliquez sur la balise de votre choix, ça mettra directement votre texte entre la balise de début et la balise de fin.

Petite démonstration (cliquez sur la démo pour l'agrandir):

 

Allez c'est parti, accrochez vos ceintures, tenez-vous bien à la balise, on décolle.

CHAPITRE 1
Le texte sous toutes ses formes même barré

 

Dans cette section nous allons voir les balises suivantes:





1. La balise b (bold: gras)

 

Cette balise sert à mettre du texte en gras.

Utilisation:

Code : Tout sélectionner

[B]texte à mettre en gras[/B]

Exemple:

Code : Tout sélectionner

[B]Aujourd'hui j'ai envie de manger quelque chose de bien gras[/B]

Résultat:

Aujourd'hui j'ai envie de manger quelque chose de bien gras

2. La balise i (italics: italique)

 

Cette balise sert à mettre du texte en italique.

Utilisation:

Code : Tout sélectionner

[I]texte à mettre en italique[/I]

Exemple:

Code : Tout sélectionner

[I]Italique: Se dit des populations indo-européennes qui pénétrèrent en Italie au cours du IIe millénaire, ainsi que de leurs langues.[/I]

Résultat:

Italique: Se dit des populations indo-européennes qui pénétrèrent en Italie au cours du IIe millénaire, ainsi que de leurs langues.

3. La balise u (underline: souligner)

 

Cette balise sert à mettre souligner du texte.

Utilisation:

Code : Tout sélectionner

[U]texte à souligner[/U]

Exemple:

Code : Tout sélectionner

[U]L'horizon souligne l'infini (Victor Hugo)[/U]

Résultat:

L'horizon souligne l'infini (Victor Hugo)

4. La balise color (mise en couleur du texte)

 

Cette balise sert à mettre le texte en couleur.

Utilisation:

Code : Tout sélectionner

[color=code couleur ou nom de la couleur]texte à mettre en couleur[/color]

Exemples:

Code : Tout sélectionner

[color=blue]Voir la vie en couleur[/color]
[color=#0000BF]Voir[/color][color=#BF0080] la vie [/color][color=#FF4000]en couleur[/color]

Résultats:

Voir la vie en couleur
Voir la vie en couleur

Pour faciliter l'utilisation, vous disposez du bouton goutte de peinture qui permet de choisir la couleur désirée.

5. La balise size (changer la taille du texte)

 

Cette balise sert à écrire du texte dans des tailles différentes: minuscule petite normale grande énorme

Utilisation:

Code : Tout sélectionner

[size=nombre correspondant à la taille voulue]texte de taille particulière[/size]

Exemple:

Code : Tout sélectionner

[size=150]On peut être [/size]petit [size=150]par la taille et [/size][size=200]grand[/size][size=150] par l'esprit.[/size]

Résultat:

On peut être petit par la taille et grand par l'esprit.

Pour choisir la taille appropriée, vous disposez du menu suivant:

6. La balise s (strikethrough: barré)

 

Cette balise sert à barrer du texte.

Utilisation:

Code : Tout sélectionner

[s]texte à barrer[/s]

Exemple:

Code : Tout sélectionner

Il y a des travaux sur la route, ils ont [s]barré[/s] un côté

Résultat:

Il y a des travaux sur la route, ils ont barré un côté

Maintenant que l'on a vu comment mettre du texte avec ses mises en forme, il faut apprendre à ordonner/classer tout ça.
Dans la section suivante nous allons mettre de l'ordre pour nos textes/images/objets avec des balises spécifiques.

CHAPITRE 2
Les balises de classement avec elles, tout est plus clair et ordonné.

 

Ici on va se concentrer sur les balises ci-dessous





1. La balise quote pour faire une citation

 

Cette balise permet de mettre du texte/image/objet sous forme de citation, c'est très utile quand on veut rapporter les paroles de quelqu'un par exemple.

Utilisations:

Code : Tout sélectionner

[quote]texte à citer[/quote]
[quote=auteur]texte à citer[/quote]

Exemples:

Code : Tout sélectionner

[quote]On dit que le ridicule tue.Est-ce vrai? 
Pas du tout! Regardez autour de vous, il n'y a que des gens bien portants (Raymond Devos)[/quote]

ou

[quote=Raymond Devos]On dit que le ridicule tue.Est-ce vrai? 
Pas du tout! Regardez autour de vous, il n'y a que des gens bien portants[/quote]

Résultat:

On dit que le ridicule tue.Est-ce vrai? Pas du tout!
Regardez autour de vous, il n'y a que des gens bien portants (Raymond Devos)

ou

On dit que le ridicule tue.Est-ce vrai?
Pas du tout! Regardez autour de vous, il n'y a que des gens bien portants

2. La balise code pour mettre du code (ex:html,php etc...)

 

Cette balise permet d'écrire du code ou autre dans un type d'écriture unique sans mise en forme.

Utilisation (les espaces sont à effacer):

Code : Tout sélectionner

[ code ]code[ /code ]

Exemple:

Code : Tout sélectionner

[ code ]<?php echo 'Bonjour tout le monde';
?>[ /code ]

Résultat:

Code : Tout sélectionner

<?php echo 'Bonjour tout le monde';
?>

3. La balise liste non ordonnée

 

Cette balise permet de créer une liste à puces.

Utilisation:

Code : Tout sélectionner

[list]
[*]puce
[*]autre puce
[/list]

Exemple:

Code : Tout sélectionner

[list]
[*]pain
[*]lait
[*]fromage
[/list]

Résultat:

• pain
• lait
• fromage

4. La balise liste ordonnée

 

Cette balise permet de créer une liste ordonnée, soit avec des numéros ou des lettres.

Utilisation:

Code : Tout sélectionner

liste numérotée
[list=1][*]premier élément
[*]deuxième élément
[/list]

liste alphabétique
[list=A][*]premier élément
[*]deuxième élément
[/list]

Exemples:

Code : Tout sélectionner

Les étapes du lavage de mains:
[list=1][*]passer les mains sous l'eau
[*]prendre le savon et se savonner les mains
[*]frotter pendant 2 minutes
[*]se rincer les mains à l'eau
[*]s'essuyer les mains
[/list]

Les étapes du lavage de dents
[list=A][*]passer la brosse à dent sous l'eau
[*]mettre du dentifrice sur la brosse
[*]frotter pendant 3 minutes
[*]se rincer la bouche
[*]rincer la brosse à dent
[/list]

Résultats:

Les étapes du lavage de mains:

1. passer les mains sous l'eau
2. prendre le savon et se savonner les mains
3. frotter pendant 2 minutes
4. se rincer les mains à l'eau
5. s'essuyer les mains

Les étapes du lavage de dents:

1. passer la brosse à dent sous l'eau
2. mettre du dentifrice sur la brosse
3. frotter pendant 3 minutes
4. se rincer la bouche
5. rincer la brosse à dent

5. La balise Align

 
Cette balise permet d'aligner des objets (texte, images) sur une page, il y a 3 possibilités gauche(left), centre(center) et droite(right).

Utilisation:

Code : Tout sélectionner

[Align=left]texte à gauche[/Align] [Align=center]texte au centre[/Align][Align=right]texte à droite[/Align]

Résultat:

à gauche

au centre

à droite

6. La balise Spoiler

 

Cette balise sert à cacher du contenu que l'on affiche en cliquant sur le bouton "Afficher".

Utilisation:

Code : Tout sélectionner

[Spoiler]Chose à cacher (texte, image, lien etc...)[/Spoiler]

Exemples:

Code : Tout sélectionner

[Spoiler] ceci est un texte caché[/Spoiler]
[Spoiler][carte]DF,18[/carte][/Spoiler]
[Spoiler][LiencarteHD=DF,18]Coxyclaque en haute résolution[/LiencarteHD]

Voici les résultats:

  ceci est un texte caché

  Carte numéro 18 de la série DF

  Coxyclaque en haute résolution

Que serait une belle page de texte sans lien ni image? On va donc s'intéresser à 2 autres balises (image et lien), c'est parti.

CHAPITRE 3
Balise et images: Les Démons de Minuit.

 

Voici les balises qui vont nous intéresser ici:




Avant de commencer on a besoin de parler de l'hébergement des images.

Pour partager des photos ou images que l'on a prisent, on doit les héberger sur un site particulier que l'on appelle Hébergeur d'images.
Il en existe beaucoup, voici les plus courants (zupimages, imgbb, casimages).

Plutôt que de faire une longue explication, voici un GIF animé pour montrer l'hébergement d'une image sur zupimages (cliquez sur la démo pour l'agrandir):

 

Une fois la photo hébergée, on obtient des liens qui permettent d'appeler directement l'image dans des pages (forum, internet, etc...)



2 liens sont très utiles:

• lien direct de votre image.
• Code BBCode(pour forum).

Voilà, maintenant que l'on sait héberger des images, on peut continuer.

1. La balise image

 
Grace à cette balise, il est possible d'insérer des images dans votre page, voici comment ça fonctionne.

Utilisation:

Code : Tout sélectionner

[img]lien vers une image[/img]

Exemple:

Code : Tout sélectionner

[img]https://www.pokecardex.com/assets/images/header_logo4.png[/img]

Résultat:

2. La balise lien

 
Cette balise permet de mettre des liens vers des adresses internet.

Utilisations:

Code : Tout sélectionner

[url]lien vers une adresse internet[/url]
ou
[url=lien vers une adresse internet]texte descriptif[/url]

Exemples:

Code : Tout sélectionner

[url]https://www.pokecardex.com/[/url]
ou
[url=https://www.pokecardex.com/]voici la page d'accueil du site Pokecardex[/url]

Résultats:

https://www.pokecardex.com/
ou
voici la page d'accueil du site Pokecardex

Nous entrons dans la dernière partie de ce guide, nous allons voir les balises spécifiques à Pokecardex.

CHAPITRE 4
Les balises Pokecardex.

 

Ces balises sont spécifiques à Pokécardex, les voici:




Mais avant de commencer nous aurons besoin pour certaines balises des initiales des séries.

1. Trouver les initiales des séries

 
Bien sûr chaque extension à ses propres initiales, elles sont toutes différentes, une même série en Japonais, n'aura pas les mêmes initiales que celle de l'occident.

Recherchons les initiales de l'extension EX: Iles des dragons pour la carte Coxyclaque numéro 18 qui nous servira d'exemple tout au long de ce guide.


2 façons de faire:

1. A partir de cette page: https://www.pokecardex.com/series

 
Il suffit de parcourir la page jusqu'à la série EX: Iles des dragons et de cliquer sur la série, dans la barre internet, on va avoir:

Code : Tout sélectionner

https://www.pokecardex.com/series/DF

"DF" est l'abréviation de la série.

Voici un GIF animé pour illustrer les explications (cliquez sur la démo pour l'agrandir):

 

2. A partir du gestionnaire de collection: https://www.pokecardex.com/collection

 
Sur cette page, on commence par sélectionner l'extension qui nous intéresse. Ici EX: Iles des dragons

Ensuite il suffit de se rendre sur la carte souhaitée et de placer la souris sur la loupe avec un petit + se trouvant sur la carte.
En bas à gauche de la fenêtre de navigation apparaît le lien vers la carte, pour notre Coxyclaque on voit:

Code : Tout sélectionner

https://www.pokecardex.com/assets/images/sets/DF/HD/18.jpg

Les initiales de l'extension se trouve après "sets/" dans l'adresse internet, ici on voit bien DF.

Voici un GIF animé pour illustrer les explications (cliquez sur la démo pour l'agrandir):

 

Entrons dans le vif du sujet.

2. La balise [Carte]

 

Cette balise sert à afficher une carte(occident) que l'on souhaite mettre en avant.

Utilisation:

Code : Tout sélectionner

[Carte]initiales de la série, numéro de la carte[/Carte]

Exemple avec Coxyclaque numéro 18 de l'extension EX: Iles des dragons

Code : Tout sélectionner

[Carte]DF,18[/Carte]

Résultat:

Carte numéro 18 de la série DF

3. La balise [Cartejp]

 

Cette balise sert à afficher une carte(japon) que l'on souhaite mettre en avant.

Utilisation:

Code : Tout sélectionner

[Cartejp]initiales de la série Japonaise,numéro de la carte[/Cartejp]

Exemple avec Coxyclaque mais cette fois en version Japonaise:

Code : Tout sélectionner

[Cartejp]PCG9,62[/Cartejp]

Résultat:

Carte numéro 62 de la série PCG9

4. Les balises [Liencarte] et [LiencarteHD]

 
Ces balises permettent de créer un lien vers l'image d'une carte particulière et de l'afficher soit en résolution basse (Liencarte), soit en haute résolution (LiencarteHD)

Utilisation:

Code : Tout sélectionner

[Liencarte=initiales de la série, numéro de la carte]saisir votre texte[/Liencarte]

[LiencarteHD=initiales de la série, numéro de la carte]saisir votre texte[/LiencarteHD]

Voici des exemples toujours avec Coxyclaque

Code : Tout sélectionner

[Liencarte=DF,18]Coxyclaque en basse résolution[/Liencarte]

[LiencarteHD=DF,18]Coxyclaque en haute résolution[/LiencarteHD]

Voici le résultat (cliquez sur les liens pour voir la différence)

Coxyclaque en basse résolutionCoxyclaque en basse résolution

Coxyclaque en haute résolution

5. La balise [serie]

 
Cette balise sert à afficher le logo d'une série.

Utilisation:

Code : Tout sélectionner

[serie=initiales de la série][/serie]

Exemple avec l'extension EX: Iles des dragons

Code : Tout sélectionner

[serie=DF][/serie]

Résultat

Merci d'avoir suivi cette visite, j'espère que cet article vous a plu et que maintenant, le BBcode n'aura plus de secret pour vous.

Le Guide.