summilux.net • Guide du BBCode

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.

[url=][/url]

summilux

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

[/url]

Vive le beau site summilux.net !

[url]

[/url]

http://www.summilux.net

[email]

[/email]

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 :

Visiter les revendeurs Leica
Acheter un nouveau Leica
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 :

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

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

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

Aller à: