Version HTML ?

Aide
Index de l'aide

BBCode

Aide détaillée des balises (cliquez sur le bouton correspondant) :

Couleur           
           
         

Définition

Le BBCode est un moyen de mettre en forme du texte sans utiliser le langage HTML (langage dans lequel sont écrit toutes les pages internet).
Le principe consiste à entourer le texte à mettre en forme de balises spéciales qui seront converties en HTML a l'affichage.
Par exemple, entourer un texte de balises [b]...[/b] fera apparaitre le texte en gras (b pour Bold en anglais). Il existe aussi des balises spéciales qui n'ont pas de balises de fermeture. Dans ce cas là, elle est de la forme : [tab=3/]. (le slash a la fin permet d'indiquer la fermeture de la balise)

Sur Cercledefaeries, vous avez accès a un certains nombre de balises qui sont représentées par les boutons du formulaire de saisie de textes.

Utilisation

Il y a 3 manières d'utiliser le bbcode :

  • Manuellement

en écrivant les balises à la main. Par exemple :

ceci est un texte [b]en gras[/b]


écrira :

ceci est un texte en gras


  • Au cours de la rédaction

Lorsque vous écrivez, si vous voulez que le prochain texte soit en gras, vous cliquez une fois sur le bouton "B", et [b] s'ajoutera automatiquement en fin de texte et le bouton "B" sera entouré de pointillés rouge pour indiquer que la balise bbcode n'est pas fermée. Vous pouvez écrire alors du texte qui sera en gras, puis quand vous avez terminé, recliquez sur le bouton "B" et [/b] sera ajouté au texte. La bordure rouge du bouton disparaitra également.
  • Apres la rédaction

Une fois votre texte rédigé, vous selectionnez avec la souris ou le clavier la zone a mettre en gras et vous cliquez sur "B", les balises viendront automatiquement entourer le texte selectionné.

Description des options

Note : la description de chaque option est suivie d'un encadré correspondant à un exemple concret et au bbcode correspondant

Couleur : permet de changer la couleur du texte.

ceci est un [font=aqua]texte en bleu clair[/font]
ceci est un texte en bleu clair


Il est également possible d'indiquer une couleur spécifique directement avec les codes couleurs HTML (de la forme #RRVVBB ou RR,VV et BB sont des nombres hexadécimaux (1) représentant les teneurs en Rouge, Vert et Bleu)

permet de centrer un texte

[center]texte centré[/center]

texte centré

permet d'aligner un texte a droite

[right]texte aligné à droite[/right]

texte aligné à droite

affiche un titre

[titre]Le titre[/titre]

Le titre


Le titre est automatiquement centré

affiche un sous titre

[sstitre]Le sous-titre[/sstitre]
Le sous-titre

permettent de mettre du texte en gras, italique, souligné ou barré :

Un exemple de texte en [b]gras[b] [i]italique[/i] [u]souligné[u] ou [s]barré[s]. Toutes les balises peuvent etre [i][u]combinées[/u][/].
Un exemple de texte en gras italique souligné ou barré. Toutes les balises peuvent etre combinées.

permet d'afficher un spoiler, c'est à dire un texte qui révele tout ou partie de l'intrigue d'une oeuvre. Le texte s'affiche caché et ne s'affiche que si l'on passe la souris
dessus.

Ce film est génial, d'ailleurs, [spoiler]l'assassin est le concierge ![/spoiler]
Ce film est génial, d'ailleurs,  l'assassin est le concierge ! 

affiche une citation d'un auteur ou un encadré.

Voici une citation d'Hamlet : [quote=Hamlet scène IV acte 3]non ![/quote]
Voici une citation d'Hamlet : Hamlet scène IV acte 3 a dit :

non !


Il est possible d'indiquer des styles supplémentaires pour l'encadré du genre : [quote=auteur,background-color=...,margin=...]. Tout les styles CSS sont supportés.
Si l'auteur n'est pas indiqué, la phrase "xx a dit:" ne s'affiche pas.

permet de définir une liste.

[liste]1er element de la liste
2eme element de la liste
3eme element de la liste[/liste]

  • 1er element de la liste
  • 2eme element de la liste
  • 3eme element de la liste


Il est possible d'imbriquer les listes

et permette d'afficher un texte plus grand ou plus petit que la taille normale.

Un [big][big]tres grand[/big][/big] texte qui se fait [small][small]tout petit[/small][/small]
Un tres grand texte qui se fait tout petit

et permettent de définir un paragraphe.
Ce sont des balises essentielles. En effet, c'est grace à elle que les alinéas sont automatiquement créé lorsqu'une ligne est sautée.
On peut utiliser [p=noalinea] pour définir un paragraphe qui n'aura pas d'alinéa.

[p]Un petit texte avec
plusieurs lignes

et un 2eme
paragraphe[/p]

Un petit texte avec
plusieurs lignes

et un 2eme
paragraphe

permet de décaler un texte d'un certain pourcentage vers la droite.

[pmarge=50%]Voici un texte décalé a 50%[/pmarge]

Voici un texte décalé a 50%

permet d'afficher un espace insécable comme en HTML
cela permet de forcer un espace unitaire entre 2 éléments de texte ou d'image

Voici un texte suivi d'une image[nbsp/][nbsp/]avec nbsp
Voici un texte suivi d'une image  avec nbsp

permet de décaler efficacement du texte comme une tabulation

Voici
[tab=1/]un
[tab=2/]texte
[tab=3/]decalé
Voici
    un
        texte
            decalé


Il est également possible d'indiquer non pas un nombre mais une chaine de caractere. Dans ce cas là, le décalage est égal au nombre de caractere de la chaine.

permet d'interdire le retour a la ligne sur une portion de texte.

[nobr]si on a un texte tres long on peut vouloir qu'il s'affiche sur une seule ligne[/nobr]
si on a un texte tres long on peut vouloir qu'il s'affiche sur une seule ligne

et affiche des crochets ouvrants et fermants... c'est tout bête, mais si on utilise de simples crochets c'est considéré comme une balise et ca affichera des erreurs...

[open/]...[close/]
[...]

affiche une image.

[img=editorCommon/img/image.png]texte de remplacement[/img]
texte de remplacement


Si l'adresse de l'image ne commence pas par http, il s'agit d'une image locale : il faut alors donner l'adresse a partir de la racine du site. Si ca commence par http, l'image sera affichée depuis le site distant.
Attention : Si l'image est locale et que sa hauteur est superieure a 350pixels, elle sera automatiquement redimensionnée a 350 pixels ET un lien sera créé en plus de l'image pour voir l'image a taille réelle.

créé un lien.

[link=aide]Index de l'aide[/link]
Index de l'aide


Comme pour les images, il faut indiquer l'adresse a partir de la racine du site pour les liens locaux et si on indique un lien pointant sur un autre site, le lien s'ouvrira dans une nouvelle fenetre.

créé une ancre pour un lien

au sein de la meme page
[ancre=test/]<= Ici se trouve une ancre de nom test ! (c'est toujours invisible)
<= Ici se trouve une ancre de nom test ! (c'est toujours invisible)


Pour faire un lien vers une ancre, il faut utiliser linkancre (la balise suivante)

créé un lien vers une ancre posée dans la page

[linkancre=test]Lien vers l'ancre test posée au dessus ![/linkancre]
Lien vers l'ancre test posée au dessus !

Donne une définition d'un mot du texte

l'[def=HTML]HyperText Markup Language[/def] c'est facile !
l'HTML (2) c'est facile !

affiche la liste des définitions de la page (actuellement 2 ;o)

[defliste/]

N.d.A.

(1) : un nombre hexadécimal est compris entre 00 et FF : 01,02,... ,08,09,0A,0B, 0C,0D,0E,0F,10,11,... ,19,2A,...
(2) : HyperText Markup Language

affiche un lien vers la page personnelle du faerien

Ma page personnelle est [faerien=Fladnag][/faerien] ou [faerien=Fladnag]ici[/faerien]
Ma page personnelle est Fladnag ou ici


Si on indique pas de texte entre les balises, c'est le pseudo qui est utilisé comme au dessus

Affiche un lien pour écrire au faerien

Ecrivez moi sur [mailto=Fladnag][/mailto] ou [mailto=Fladnag]ici[/mailto]
Ecrivez moi sur ou ici


Si on indique pas de texte, c'est l'image par defaut qui est utilisée

affiche la signature d'un texte :

Signature classique :[sign][faerien=Fladnag][/faerien][/sign]
Signature classique :



Page générée en 131 ms - 246 connectés dont 3 robots
2000-2018 © Cercledefaeries