Introduction

Présentation du BBCode

Le BBCode est une sorte de traduction du HTML qui permet de l’utiliser de manière simplifiée lors de la composition des messages. Les balises sont contenues entre des crochets "[" et "]" à la place de "<" et ">", et permettent une mise en forme du texte, l’affichage des images, l’insertion de certains caractères spéciaux, la création de liens, la mise en forme de tables.
On peut ajouter du BBCode aux messages manuellement, ou à travers l’interface de boutons cliquables au-dessus de la zone de texte lors de la composition du message. Le guide ci-dessous précise le fonctionnement du BBCode dans le site.

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 le site. Pour ces raisons, il est impossible de poster du code html ou javascript : ils sont effacés lors de l’envoi du “post”.

Les BBCodes [b] (texte gras), [i] (texte italique), [u], texte souligné, [size=, (taille de texte), [color= (couleur de texte), [url] et [url= (lien url), [list] (listes), [img] (affichage d’images), [quote] (citation), sont utilisés dans la plupart des autres logiciels de forum sur d’autres sites. Les autres ont été créés spécifiquement pour notre site et ne fonctionneraient pas réutilisés ailleurs.

Cette notice a été mise à jour le 2 mai 2013.

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 simultanément, encadrant 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 [b][/b] ;

exemple : [b]Salut[/b] donne Salut.

Pour souligner un texte, utilisez [u][/u] ;

exemple : [u]Bonjour[/u] donne Bonjour.

Pour mettre un texte en italique, on utilise [i][/i] ;

exemple : C’est [i]summilux ![/i] donne C’est summilux !

Pour mettre un texte en exposant, les balises sont [s][/s] ;

exemple : Une pièce de 50 m[s]2[/s] photographiée au 1/50[s]e[/s] 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 : [r][/r] ;

exemple : Un [r]texte raturé[/r], 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 (exemple : red, blue, yellow, green, etc.), ou un code couleur hexadecimal, exemple : #FFFFFF, #000000.

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

[color=red]Salut les summiluxiens ![/color]

ou

[color=#FF0000]Salut les summiluxiens ![/color]

les deux donnant le résultat suivant :

Salut les summiluxiens !

La palette de couleurs permet de prévisualiser la couleur choisie sur le fond de message préselectionné :

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 [size=][/size].

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

Ainsi : [size=85]PETIT[/size]
donnera un texte d’environ 10 pixels de haut : PETIT

et : [size=200]ENORME ![/size]
donnera un texte de 24 pixels de haut ENORME !

Haut

Combiner des balises de mise en forme

On peut combiner diverses balises :

[size=18][color=red][b]REGARDEZ MOI ![/b][/color][/size] donnera un texte de 18 pixels, gras et rouge : REGARDEZ MOI !

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

[b][u]Ceci ne fonctionne pas[/b][/u].

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

Pour forcer un retour à la ligne, par exemple en début ou en fin de message pour ajouter une marge basse ou une marge haute à un message, on peut ajouter un saut de ligne forcé. Il se traduit par la balise [br].

Haut

Création de liens

Créer un lien vers une page ou un site

Le BBCode supporte plusieurs méthodes pour créer des liens, plus connus sous le sigle URL.

La première méthode utilise les balises [url=][/url] ; tout ce que vous taperez après le signe = sera considéré comme le nom du lien. Par exemple, pour créer un lien vers summilux on utilise :

[url=http://www.summilux.net]Vive le beau site summilux.net ![/url]

Ceci générera le lien suivant : Vive le beau site summilux.net ! Vous remarquerez que le lien ouvre une nouvelle fenêtre (ou un nouvel onglet suivant le paramètrage du navigateur) ; l’utilisateur peut donc continuer à parcourir les forums s’il le souhaite.

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

[url]http://www.summilux.net[/url]

Ceci donnera le lien suivant : http://www.summilux.net

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.summilux.net dans votre message, celui-ci sera automatiquement converti en www.summilux.net. Ce dernier type de lien n’ouvre pas une nouvelle fenêtre.

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.

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, vous avez sûrement remarqué que le texte en citation est ajouté dans la zone de texte entre [quote=""] et [/quote]. Cette méthode vous permet de citer avec une référence à une personne ou tout autre chose que vous aurez choisi de mettre ! Par exemple, pour citer un texte écrit par M. Dupont, vous devrez entrer :
  
  [quote="M. Dupont a écrit :"]Le texte écrit par M. Dupont devra être placé ici[/quote]
  
  Cela ajoutera automatiquement "M. Dupont a écrit :" avant votre texte. Rappelez-vous que vous devez inclure les guillemets "" autour de la référence que vous citez, ils ne sont pas optionnels.
  
  Voici le résultat :
  
  
  M. Dupont a écrit :

  Texte écrit par M. Dupont
  
  
  


• 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, il montrera simplement citation : avant votre texte :
  
  
  citation :

  Texte écrit par M. Dupont
  
  
  

Haut

Code ou police à pas-fixe

Code

Si vous voulez afficher des lignes de code vous devez placez le texte ou code dans les balises [code][/code], exemple:

[code]echo "Ceci est du code";[/code]

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

Résultat :

Code : Tout sélectionner

echo "Ceci est du 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 essentiellement identiques à leurs équivalents en HTML. Une liste non-ordonnée produit une liste dont les entrées sont les uns 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 vous donne le contrôle sur ce qui va être affiché avant chaque entrée. Pour créer une liste ordonnée, on utilise [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]Liste des choses urgentes à faire :
[*]Visiter les revendeurs Leica
[*]Acheter un nouveau Leica
[*]Montrer sur summilux.net les photos faites avec la nouvelle acquisition

[/list]

donnera ceci :

Liste des choses urgentes à faire :
1. Visiter les revendeurs Leica
2. Acheter un nouveau Leica
3. Montrer sur summilux.net les photos faites avec la nouvelle acquisition

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]

donnera :

1. La première réponse possible
2. La seconde réponse possible
3. 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

Images dans des 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

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ér un espace de 30 pixels.

Exemple de retrait de 30 pixels par rapport à la marge gauche :

[esp30px][img]adresseweb[/img]



Exemple d’espace de 20 pixels entre deux images :

[img]adresseweb[/img][esp20px][img]adresseweb[/img]

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. »

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