Aller au contenu
Site Communauté

[TUTO] Faites en plus avec le BBCode

Le PoissonClown

Par Le PoissonClown
dans Tutoriels et astuces

Messages recommandés

Le PoissonClown Capitaine de vaisseau

Le PoissonClown

Posté(e)
Posté(e) (modifié)

Crabonautes, bonjour ! :c_happy:


Dans ce tutoriel, vous allez découvrir des codes qui vous permettront de mettre en forme vos messages sur le forum sans utiliser les fonctions de l'éditeur.
Mieux encore : vous allez pouvoir faire des choses que les boutons de l'éditeur ne permettent pas ! :c_evil:

C'est parti !

BBCode ? C'est quoi ?

Le BBCode est un code de balisage du texte (un peu comme le HTML) qui est mis en place dans certains forums pour mettre en forme et enrichir votre texte de manière plus ou moins avancée.

Il prend la forme de balises comme ceci : 

Je veux écrire [b]ce mot[/b] en gras et [i]celui-là[/i] en italique.

Une balise de BBCode est donc entourée de crochets.

Comment ça s'écrit ?

Vous allez le voir avec les exemples ci-dessous, c'est très simple une fois que l'on a compris le principe.

S'il est nécessaire d'encadrer un mot ou un texte, il vous faudra une paire de balises, la dernière comportant un slash ( / ) juste avant le nom de la balise. C'est ainsi qu'on différencie la balise de départ et de fin.
Dans notre exemple plus haut, la première balise B n'a pas de slash. Elle signifie : « Ici commence un texte en gras ». Et la balise de fin qui contient un slash devant le B, signifie donc : « Ici s'arrête le texte en gras débuté précédemment ».

S'il n'est pas nécessaire d'encadrer quoi que ce soit, il n'y a qu'une seule balise (pour afficher une image par exemple).

Comment ça marche ?

C'est très simple, vous écrivez les balises directement dans le texte.

Si vous testez par vous-même, vous allez certainement me dire : « Mais ça ne marche pas ! Quand j'écris les balises dans mon texte, ça ne produit rien ! » :c_doubtfully:
Et c'est normal, parce que le BBCode n'est appliqué qu'une fois que vous publiez votre message. Les balises ne sont interprétées que lorsque vous envoyez votre message, pas avant.

Autre principe : le BBCode ne fonctionne que sur l'éditeur de messages et non-pas dans les champs de titre ou d'étiquettes.

Les balises !

Assez théorisé, passons à la pratique :


METTRE EN FORME À L'INTÉRIEUR DE SON TEXTE

Pour mettre en forme à l'intérieur de votre texte, voici les balises qui fonctionneront sur le site : 

Texte en [b]gras[/b], [i]italique[/i], [u]souligné[/u], [s]barré[/s], en [sup]exposant[/sup] ou en [sub]indice[/sub], [color=red]en couleur[/color], [font=Courier]avec une police différente[/font].

Résultat :

Texte en gras, italique, souligné, barré, en exposant ou en indice, en couleur, avec une police différente.

Note : la couleur peut s'écrire aussi en hexadécimal (#fff ou #3a8f6d par exemple).
Pour obtenir ces codes, vous pouvez utiliser cet outil en ligne parmi d'autres.


ALIGNER SES PARAGRAPHES 

[right]À droite.[/right][left]À gauche (par défaut).[/left][center]Au centre.[/center]

Résultat :

À droite.

À gauche (par défaut).

Au centre.

Note : Il n'est pas utile de passer à la ligne, les paragraphes sont générés automatiquement avec ces balises.


FAIRE UNE CITATION 

[quote]Texte cité[/quote]

Résultat :

Citation

Texte cité

Note : Mettre un nom d'auteur ne sert à rien, car il n'est pas pris en compte.

Pour du code, c'est la balise suivante : 

[code]Bout de code à afficher[/code]

Résultat : 

Bout de code à afficher


CACHER UN TEXTE (SPOILER) 

[spoiler]Texte à cacher.[/spoiler]

Résultat :

Révélation

Texte à cacher


ÉCRIRE UNE LISTE

Liste à puces : 

[list]
[*]Truc
[*]Machin
[*]Bidule
[/list]

Résultat :

  • Truc
  • Machin
  • Bidule

Pour les listes ordonnées, il suffit de modifier la première balise :

list=1   Pour une liste numérotée
list=a   Pour une liste alphabétique en minuscules
list=A   Pour une liste alphabétique en majuscules
list=I   (lettre i majuscule) Pour une liste numérotée en chiffres romains

Démonstration pour la numérotée :

  1. Truc
  2. Machin
  3. Bidule

L'alphabétique en minuscules :

  1. Truc
  2. Machin
  3. Bidule

L'alphabétique en majuscules :

  1. Truc
  2. Machin
  3. Bidule

Et celle en chiffres romains :

  1. Truc
  2. Machin
  3. Bidule


GÉNÉRER UNE LIGNE DE SÉPARATION 

texte[hr]texte

Résultat :

texte

texte


FAIRE UN LIEN WEB 

Texte [url=http://www.perdu.com]texte du lien[/url] texte.

Résultat :

Texte texte du lien texte.

Note : pas besoin d'encadrer le lien entre guillemets.


INSÉRER UNE IMAGE DÉJÀ EN LIGNE

Pour cela, il vous faut son adresse (URL) directe, qui commence par http et se termine en .jpg ou .png ou .gif : 

[img=http://adresse_de_limage.jpg]

Exemple de résultat :

[image : idée de jeu pour mobile]

Note : idem, pas besoin d'encadrer l'URL entre guillemets.


AJOUTER UNE VIDÉO YOUTUBE OU VIMEO

Collez simplement son adresse (URL) et ajoutez un espace. 

https://youtu.be/4iQETIfbzvk

Résultat :

Note : En réalité, il ne s'agit pas de BBCode pour cette dernière astuce : c'est une fonction du forum.

En revanche, cette dernière fonction est inefficace pour les adresses de vidéos de la plateforme Dailymotion (entre autres).

 

Pour terminer

Vous voilà parés ! :c_sunglasses:

N'hésitez pas à tester des balises que je n'aurais pas listé dans ce tuto. Pour faire vos essais en privé, vous pouvez vous envoyer un message privé à vous-même. Et venez nous faire part de vos trouvailles !

Bonne rédaction à toutes et à tous ! :c_happy:

Modifié par Le PoissonClown
Lien mort pour une image
  • Plusser (+1) 2
Lien vers le commentaire
Le PoissonClown Capitaine de vaisseau

Le PoissonClown

Posté(e)
  • Auteur
Posté(e) (modifié)
il y a 16 minutes, Mreve a dit :

Tu vas voir ! Avec CKEditor je vais te faire de ces présentation ! :c_sunglasses:

Avec BBcode et CKEditor, tu veux dire ? Le combo fatal !!! :rambo:

Edit : mais sur le site de CKEditor l'éditeur ne gère pas le BBcode.

Re-edit : Mais on s'en fiche parce qu'il ne publie rien. Et d'ailleurs, y-a pas besoin, que je suis bête ! Suffit de copier-coller. 9_9

Modifié par Le PoissonClown
Rectification et auto-baffage en bonne et due forme
Lien vers le commentaire
  • 1 année plus tard...
D34 Angel Maistrancier

D34 Angel

Posté(e)
Posté(e)
il y a 1 minute, carmen a dit :

comment tu les insères dans le post ?? 

Avec mes petits gros doigts, je tape sur le clavier Moqueur.gif.8dfba14f06555f51755d0bf241f89769.gif

Blague à part, j'écris les balises comme montré dans le code indiqué dans mon message précédent. La balise de début avant le texte à cacher et la balise de fin après le texte.

  • Ahah 1
Lien vers le commentaire
D34 Angel Maistrancier

D34 Angel

Posté(e)
Posté(e)

hello.gif.c6f86ea3c15f6ff20e4473d13319e433.gif@calisto06

Je crois que tu n'y arrives pas car tu copies (cites) la partie de message qui est entre des balises de "code".

Le "code" sert, justement, à ne pas appliquer le format. C'est pour écrire un script sans qu'il s'exécute.

Essaie simplement d'écrire le texte avec les balises qui vont bien ... tu vas voir, ça va marcher.

Lien vers le commentaire
Invité
Ce sujet ne peut plus recevoir de nouvelles réponses.
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...