Le Pirate • GUIDE : le BBCode

Présentation du BBCode: Le BBCode permet la mise en forme des messages. Le logiciel du forum, des pages et galeries, le traduit ensuite en html pour l’affichage en ligne.

Les BBCodes servent non seulement à produire un langage plus simple que celui du html, mais constituent aussi une sécurité pour le site, car, en cas d’utilisation d’un code html défectueux, cela peut décomposer l’affichage de toute la page d’une part, mais aussi, l’on pourrait, en utilisant certains codes, détruire des données du site. Pour ces raisons, il est impossible de poster du code html ou javascript : ils sont effacés lors de l’envoi du “post”.

Vous trouverez ici les BBCodes habituels dans les forums, et d’autres mis au point spécifiquement pour nous : alignement à droite, au centre, redimensionnement des images, tables, sauts de ligne, espaces insécables... permettant de faire presque tout ce que l’on veut comme mise en page.

Le mode d’emploi pour le BBCode est accessible depuis l’interface de composition des messages, en dépannage.

Cette notice a été mise à jour le 19 juillet 2014.; Haut

Mise en forme générale des messages

Couleur générale du message: En dehors de l’utilisation des BBCodes qui permettent de mettre en forme le texte dans ses détails, des mises en forme générales du message sont possibles, déterminant un fond, ainsi qu’un cadre et la couleur par défaut du texte.

Voyez ce mode d’emploi.; Haut

Boutons d’insertion de BBCode

Utilisation des boutons d’insertion: Ces balises peuvent être créées automatiquement au moyen de boutons et menus disposés au-dessus de la fenêtre de composition des messages.

Un mode d’emploi succinct s’affiche en survolant le bouton avec la souris.

Lors du "clic" sur l’un des boutons, le code correspondant est collé dans la zone de composition du message.

S’il n’y a pas de texte sélectionné, les balises d’ouverture et de fermeture sont collées, le curseur étant positionné au milieu.

Si un texte est sélectionné, les balises d’ouverture et de fermeture seront collées ensemble autour de la sélection.; Haut

Mise en forme du texte

Créer du texte en gras, italique, souligné, etc.: Les balises de style du texte sont les suivantes :

Pour mettre du texte en gras, placez-le entre
exemple : Salut donne Salut.

Pour souligner un texte, utilisez
exemple : Bonjour donne Bonjour.

Pour mettre un texte en italique, on utilise
exemple : C’est pirate ! donne C’est pirate !

Pour mettre un texte en exposant, les balises sont
exemple : Une pièce de 50 m2 photographiée au 1/50e de seconde donne : Une pièce de 50 m2 photographiée au 1/50e de seconde.

Pour écrire un texte barré, on dispose de ces balises :
exemple : Un texte raturé, ce qui donne : Un texte raturé; Haut

Changer la couleur du texte: La couleur du texte se règle en le plaçant entre les balises [color=][/color].

Vous pouvez spécifier soit un nom de couleur reconnu en html (exemple : red, blue, yellow, green, etc.), ou un code couleur hexadecimal, exemple : #FFFFFF, #000000 (ne pas oublier le "#" sinon le code ne fonctionne pas).

Par exemple, pour créer du texte en rouge, vous pouvez utiliser :

Salut les piratiens !

ou

Salut les piratiens !

les deux donnant le résultat suivant :

Salut les piratiens !

La palette de couleurs permet de prévisualiser la couleur choisie sur le fond de message préselectionné et de coller automatiquement le code correspondant :; Haut

Changer la taille du texte: Le changement de la taille du texte se fait de la même manière que pour la couleur en utilisant .

Cette balise comprend une valeur numérique représentant la taille pourcentage de la taille de police de base dans les messages. Cette taille par défaut est de 12 pixels.

Ainsi : PETIT
donnera un texte d’environ 10 pixels de haut : PETIT

et : ENORME !
donnera un texte de 24 pixels de haut ENORME !; Haut

Combiner des balises de mise en forme: On peut combiner diverses balises :

REGARDEZ MOI ! donnera un texte de 18 pixels (1,5 fois 12 pixels), gras et rouge : REGARDEZ MOI !

Il faut faire attention de fermer correctement les balises, sinon elles ne fonctionneront pas :

Ceci ne fonctionne pas.; Haut

Alignement à gauche, centré, ou à droite

Alignement du texte: Par défaut, le texte est aligné à gauche.

On peut le centrer en le plaçant entre les balises [centre][/centre].

Ainsi : [centre]un texte très intéressant centré dans le message[/centre]
donnera :

un texte très intéressant centré dans le message

On peut aussi l’aligner à droite en le plaçant entre les balises [droite][/droite] :

[droite]un texte très intéressant aligné à droite dans le message[/droite]
donnera :

un texte très intéressant aligné à droite dans le message

Bien sûr, on peut aussi insérer des photos entre les balises [centre] et [/centre], ou [droite] et [/droite].; Haut

Caractères spéciaux

Espace insécable: Pour éviter un retour à la ligne, par exemple avant ":" ou ";", mais aussi entre deux mots, on peut ajouter une espace insécable.

C’est la balise qui donne cette espace.; Haut

Espace fine: Si l’on est tatillon, on peut utiliser une espace fine avant les ":", ";", "!" et "?".

C’est la balise qui donne cette espace.; Haut

Saut de ligne: Le saut de ligne [br] permet d’ajouter des lignes vides en début ou fin de messages, ou en tout endroit dans le texte.
C’est particulièrement utile en début ou fin de messages car les "retours-charriot" entrés au moyen de la touche 'entrée' en début ou fin de messages sont effacés lors de l’envoi des 'posts' de messages.; Haut

Création de liens

Créer un lien vers une page ou un site: Le BBCode propose plusieurs méthodes pour créer des liens URL.

La première méthode utilise les balises . On entre après le signe "=" l’url du du lien, et entre les balises le texte formant le lien. Par exemple, pour créer un lien vers le pirate on utilise :

Vive le beau site pirate !

Ceci générera le lien suivant : Vive le beau site pirate !

Si vous voulez que le lien affiche directement l’URL, vous pouvez simplement utiliser :

[url]http://www.pirate-photo.fr[/url]

Ceci donnera le lien suivant : http://www.pirate-photo.fr

Notez qu’une URL reconnaissable est directement transformée en un lien cliquable sans insertion de balise BBCode ou http://. Par exemple, en tapant www.pirate-photo.fr ou http://www.pirate-photo.fr dans votre message, celui-ci sera automatiquement converti en www.pirate-photo.fr.

La même chose s’applique aux adresses e-mail; vous pouvez soit spécifier une adresse e-mail explicitement, par exemple :

[email]personne@domaine.rf[/email]

qui donnera personne@domaine.rf, ou soit en tapant personne@domaine.rf dans votre message qui sera automatiquement converti lorsque vous le lirez.

Certaines url du site peuvent être récupérées automatiquement, en particulier celles des sujets (“topics”) et messages (“posts”), en cliquant que les petites icônes en forme de chevrons disposées sur la page :

comme lien vers le sujet :

comme lien vers le message :

Lors d’un clic sur la zone, elle est sélectionnée automatiquement. Il ne reste qu’à la copier et à remplacer dans le code le titre du sujet ou la mention “message de xx” par celle que vous souhaitez voir figurer.

Le premier code affiché donne un lien simplifié pour usage interne au site, l’autre, un code comprenant l’url complète pour utilisation dans un autre site utilisant le BBCode.; Haut

Citations d’autres messages

Citation dans les réponses: Il y a deux méthodes pour citer un texte, avec ou sans référence.
Lorsque vous utilisez la fonction Citer pour répondre à un message sur le forum, le texte en citation est ajouté dans la zone de texte entre [quote=""] et [/quote]. Le système affichera le texte cité dans un bloc, précédé de la mention "machin a écrit". Par exemple, pour citer un texte écrit par M. Dupont, vous devrez écrire :

[quote="M. Dupont a écrit :"]Le texte écrit par M. Dupont devra être placé ici[/quote]

Cela ajoutera M. Dupont a écrit : avant le bloc de texte cité. N’oubliez pas d’inclure les guillemets " " autour de votre appel de citation, car sans eux cela ne fonctionnerait pas.

Voici le résultat :

M. Dupont a écrit :
Texte écrit par M. Dupont

Vous pouvez bien entendu mettre tout texte que vous souhaitez comme introduction à la citation.

La seconde méthode vous permet de citer quelque chose sans faire référence à l’auteur. Pour l’utiliser, placez le texte entre les balises [quote] et [/quote]. Lorsque vous lirez votre message :

Texte écrit par M. Dupont; Haut

Affichage de code

Affichage de codes

Pour afficher un fragment de code html, BBCode ou autre, il faut disposer le texte entre les balises [code][/code]. Par exemple :

[code]echo "Ceci est un fragment de code " . $code;[/code]

Les codes html ou BBCodes placés entre les balises [code][/code] sont affichés non décodés.

Résultat :

Code : Tout sélectionner: echo "Ceci est un fragment de code " . $code;

Haut

Création de Listes

Créer une liste non-ordonnée

Le BBCode supporte deux types de listes, les listes non-ordonnées, et les listes ordonnées. Elles sont semblables à leurs équivalents en HTML. Une liste non-ordonnée produit une liste dont les entrées sont les unes en-dessous des autres et indentées avec une puce. Pour créer une liste non-ordonnée, utilisez [list][/list] et définissez chaque entrée à l’intérieur de la liste en utilisant [*]. Par exemple, pour établir une liste de vos couleurs favorites, vous pouvez utiliser:

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

Cela donnera la liste suivante:

Rouge
Bleu
Jaune

Haut

Créer une liste ordonnée

Le second type de liste permet de numéroter chaque entrée. Pour créer une liste ordonnée, vous devez utiliser [list=1][/list] pour créer une liste numérotée ou alternativement [list=a][/list] pour une liste alphabétique. Comme pour les listes non-ordonnées, les entrées sont spécifiées en utilisant [*]. Par exemple :

[list=1] [*]Se connecter au beau site pirate [*]Télécharger de belles photos [*]Boire un bon jus d’oranges pressées [/list]

donnera ce qui suit :

Se connecter au beau site pirate
Télécharger de belles photos
Boire un bon jus d’oranges pressées

Alors que pour une liste alphabétique, on utilise :

[list=a] [*]La première réponse possible [*]La seconde réponse possible [*]La troisième réponse possible [/list]

qui donnera :

La première réponse possible
La seconde réponse possible
La troisième réponse possible

Haut

Afficher des images dans un message

Ajouter une image à un message: Les balises d’affichage d’images [img] ont plusieurs variantes.

L’affichage de base est [img]adresseweb[/img]

On affiche la photo ci-dessous ainsi :

[img]http://www.lesite.fr/repertoire/nomdelimage.jpg[/img].; Haut

Positionner l’image de différentes manières: [imgg]adresseweb[/img] donne une image à gauche, le texte entré à la suite étant affiché à sa droite

et voici le texte suivant, qui est disposé à droite il est vraiment disposé à droite et se déploie le long de la photo, c’est une merveille. Répétons : et voici le texte suivant, qui est disposé à droite il est vraiment disposé à droite et se déploie le long de la photo, c’est une réelle merveille. Répétons : et voici le texte suivant, qui est disposé à droite il est vraiment disposé à droite et se déploie le long de la photo, c’est une vraie merveille. Répétons : et voici le texte suivant, qui est disposé à droite il est vraiment disposé à droite et se déploie le long de la photo, c’est une véritable merveille. Répétons : et voici le texte suivant, qui est disposé à droite il est vraiment disposé à droite et se déploie le long de la photo, c’est une merveille. Répétons : et voici le texte suivant, qui est disposé à droite il est vraiment disposé à droite et se déploie le long de la photo, c’est une merveilleuse nouvelle. Répétons : et voici le texte suivant, qui est disposé à droite il est vraiment disposé à droite et se déploie le long de la photo, c’est une merveilleuse chose. Répétons : ouf, on arrête.

[imgd]adresseweb[/img] donne une image à droite, le texte entré à la suite étant affiché à sa gauche

et voici le texte suivant, qui est disposé à gauche il est vraiment disposé à gauche et se déploie le long de la photo, c’est une merveille véritable. Répétons : et voici le texte suivant, qui est disposé à gauche il est vraiment disposé à gauche et se déploie le long de la photo, c’est un grand avantage. Répétons : et voici le texte suivant, qui est disposé à gauche il est vraiment disposé à gauche et se déploie le long de la photo, c’est une merveille. Répétons : et voici le texte suivant, qui est disposé à gauche il est vraiment disposé à gauche et se déploie le long de la photo, c’est pratique. Répétons : et voici le texte suivant, qui est disposé à gauche il est vraiment disposé à gauche et se déploie le long de la photo, c’est une merveille. Répétons : et voici le texte suivant, qui est disposé à gauche il est vraiment disposé à gauche et se déploie le long de la photo, c’est merveilleux. Répétons : et voici le texte suivant, qui est disposé à gauche c’est admirable.; Haut

Redimensionner les images: On peut également afficher une photo avec un coefficient de réduction.

On écrit par exemple ainsi :

[img10]adresseweb[/img] de qui donne un affichage de 10% de la largeur du message.

On peut aussi réduire en donnant la largeur en pixels.

On écrit alors :

[img150px]adresseweb[/img] de qui donne un affichage de 150 pixels de largeur.; Haut

Positionner et redimensionner à la fois: Notez qu’on peut cumuler à l’envie, par exemple :

[imgd150px]adresseweb[/img] de qui donne un affichage de 150 pixels de largeur calé à droite.

va nous donner une image de 150 pixels de largeur, positionnée à droite, avec le texte qui se déroule à sa gauche. On peut recommencer... et voici le texte suivant, qui est disposé à gauche il est vraiment disposé à gauche et se déploie le long de la photo, c’est une merveille. Répétons : et voici le texte suivant, qui est disposé à gauche il est vraiment disposé à gauche et se déploie le long de la photo, c’est une merveille. Répétons : et voici le texte suivant, qui est disposé à gauche il est vraiment disposé à gauche et se déploie le long de la photo, c’est une merveille. Répétons : et voici le texte suivant, qui est disposé à gauche il est vraiment disposé à gauche et se déploie le long de la photo, c’est une merveille. Répétons : ouf, on arrête.; Haut

Variantes pour les photos hébergées sur notre serveur: VARIANTE POUR AFFICHAGE DE PHOTOS HÉBERGÉES SUR NOTRE SERVEUR : la balise [imp]

Notez le "p" qui remplace le "g".

Ce système de balises est utilisé uniquement pour afficher les photos hébergés sur le site.

Elles sont insérées automatiquement depuis les boutons et .

Elles permettent d’utiliser des adresses beaucoup plus courtes, ce qui est plus agréable pour composer son message à l’écran.

Pour cette même photo que ci-dessus, cela s’écrit alors ainsi :

[imp]10002/oeufpaques.jpg[/img]

L’adresse est réduite et ne comporte que "10XXX" (numero de votre répertoire de fichiers image) et le nom_de_fichier.jpg

Cette balise doit aussi, comme toutes les autres, être terminée par [/img].

Vous pouvez l’assaisonner exactement comme la balise [img] soit :

[impd] : à droite

[impg] : à gauche

[imp50] : 50% de la largeur de message

[imp200px] : 200 pixels de large

[impd200px] : à droite et 200 pixels de large

etc...

Lorsque vous êtes connecté, ces balises sont fournies au-dessous des images affichées dans les albums, accessibles en cliquant sur les imagettes de l’index des albums.

Exemple : affichage de la photo ci-dessus. Lorsque vous êtes connecté, vous voyez ceci :

Ces balises sont créées sous cette forme lorsque vous insérez des photos dans vos messages depuis l’interface de post.; Haut

Image dans un Popup: Les images peuvent être présentées dans des Popups.

[pop]adresseweb-de-l-image[/pop] donne une petite image de 100 px de large, formant lien vers un Popup.

Exemple :

On peut aussi utiliser [pop=adresseweb-de-l-image]lien vers le popup[/pop] donne un lien vers un Popup,

ce qui donne : lien vers le Popup

________________________________________

Ces balises [pop] [/pop] et [pop= ] [/pop] sont les balises par défaut, et, sur le même principe que pour les balises d’images, elles sont remplacées par un affichage simplifié pour les photos hébergées dans les albums du site.

[popp] [/pop] et [popp= ] [/pop].

Lorsque vous êtes connecté, ces balises sont fournies au-dessous des images affichées dans les albums, accessibles en cliquant sur les imagettes de l’index des albums.

Exemple : affichage de la photo ci-dessus. Lorsque vous êtes connecté, vous voyez ceci :

Ces balises sont aussi insérées sous cette forme automatiquement lorsque vous insérez des photos dans vos messages depuis l’interface de post, en réglant l’option correspondante, insertion d’image ou de PopUp.; Haut

Superposer deux textes ou deux images

Superposer deux textes: On peut superposer deux textes en utilisant le code [superpir] qui a deux variantes. Le deuxième texte s’affiche lors du survol de la souris.

L’affichage de base est [superpir]premier texte[]deuxième texte[/superpir]

Ce qui donne (passez la souris au-dessus du texte) :

Il faut confronter des idées vagues avec des images claires.
Jean-Luc Godard.

La deuxième possibilité permet de choisir une couleur : [superpir_darkred]premier texte[]deuxième texte[/superpir]

Cette couleur peut être indiquée par son nom générique html (red, green, bleu, firebrick, etc.) ou son code hexadécimal (#de4000 par exemple) ; cela donne :

L’ennemi est bête : il croit que c’est nous l’ennemi alors que c’est lui !
Pierre Desproges.

Bien sûr, on peut utiliser sur ces textes les autres mises en forme (italique, souligné, gras) :

La télévision est faite pour ceux qui n’ayant rien à dire, tiennent absolument à le faire savoir.
Pierre Dac.

Les code de mise en forme doivent être placés à l’extérieur des balises et les encadrer :

[superpir]premier texte[]deuxième texte[/superpir].

Lors de la génération du code, au moment du post, ou de la prévisualisation, le système donne un code de référence qui s’insère entre les deux textes dans les crochets :

[superpir]premier texte[gkdljr]deuxième texte[/superpir]. Ne vous en inquiétez pas et ne le modifiez pas !; Haut

Superposer deux images: Pour superposer deux images, le code est identique à celui utiliser pour superposer deux textes :

[superpir]10014/nomdephoto1.jpg[]10014/nomdephoto2.jpg[/superpir]

Les adresses des photos comportent votre n° de répertoire personnel (ici 10014), et le nom de fichier, suivant le même principe que pour afficher un code d’affichage d’image [imp350px450px]10014/nomdephoto.jpg[/img].

Cela donne par exemple :

‹ passez la souris sur la photo

Bien sûr, il faut que les deux photos fassent exactement les mêmes dimensions pour que cela soit correctement affiché.; Haut

Retraits d’alignement

Espaces réglables et retraits d’alignement: La balise [esp10px] permet de créer un retrait de 10 pixels, soit par exemple en marge gauche avant de disposer une image, ou autre exemple entre deux images.

Cette taille en pixel est réglable, et vous pouvez indiquer [esp30px] pour créer un espace de 30 pixels.

L’espace réglable en pixels est utile pour régler finement des intervalles entre des photos.

Exemple, [esp10px] inséré entre les deux images donnera ceci :

infos sur l’image dans les albums
infos sur l’image dans les albums

et [esp40px] inséré entre les deux images donnera cela :

infos sur l’image dans les albums
infos sur l’image dans les albums; Haut

Création de tables

Création de tables simples: Vous pouvez créer de petites tables dans vos messages, et y disposer du texte comme des images.

Ces tables peuvent être simples, ou comporter plusieurs colonnes.

Pour une table simple, on utilise les balises [table] et [/table].

Réglage des largeurs de tables :

[table50] [/table] crée une table (ou tableau) qui fait 50% de la largeur du message.

[table700px] [/table] crée une table qui fait 700px de largeur.

On peut ne pas fixer de dimension. Par défaut la table s’adapte au contenu.; Haut

Création de tables avec colonnes

Pour créer des tables comportant des colonnes, on utilise la balise [cel].

[table] texte et blabla [cel] pour une deuxième colonne [cel] et une troisième pourquoi pas [/table]

Réglage des largeurs de colonnes :

Si on ne donne pas de taille de largeur aux colonnes, elles s’adaptent suivant le contenu, et en fonction de la taille donnée ou non à la table.

Ci-dessous : [table870px] texte et blabla ou une image [cel] texte et blabla ou une image [cel] texte et blabla ou une image [/table]

après l’usage de la perspective symbolique (où les personnages adoptent la taille de leur importance dans la représentation), la codification de la perspective humaniste européenne se développe en Ombrie, au milieu du XVe siècle, sous l’influence de l’œuvre de Piero della Francesca : d’intuition, de moyen technique, la perspective se fait théorie mathématique. Cependant, dès 1435, Alberti, dans son De la Peinture fait l’éloge « des visages peints qui donnent l’impression de sortir des tableaux comme s’ils étaient sculptés. »

Mais on peut aussi fixer les largeurs de colonnes :

[cel50] crée une colonne qui fait 50% de la largeur de la table (ou tableau).

[cel200px] crée une colonne qui fait 200px de largeur.

Pour des réglages fins, tenez compte du fait qu’il y a des marges latérales de 8 pixels, et, entre deux cellules, de 15 pixels.

Haut

Tables comportant plusieurs lignes: [li] permet éventuellement d’ajouter une ou plusieurs lignes cette ou ces lignes devront avoir le même nombre de colonnes que la première, disposées de la même manière.

Il n’est pas utile de redonner les dimensions : elles seront calées sur celles de la première ligne.; Haut

Affichage de vidéos

Affichage de vidéos: Vous pouvez afficher des vidéos dans vos messages.
Voyez le mode d’emploi détaillé.; Haut

Pièces jointes

Insertion et types des pièces jointes: On peut insérer des pièces jointes dans les messages.
Voir la notice des pièces jointes.; Haut

Mise à jour de la notice

Date de dernière mise à jour: Notice mise à jour le 7 décembre 2016; Haut