BBCode du site

Le CMS PHPBoost utilisé sur le site Drak-Infos gère la mise en forme des messages du forum, articles, commentaires, etc... avec un "langage" simplifié. En effet, qui n'a jamais entendu parler du BBCode ? C'est un langage inventé, qui permet de faciliter la mise en forme d'un message et qui permet entre autres de mettre du texte en gras, de le souligner, de faire un lien ou bien d'autres choses encore. Il permet à des utilisateurs ne connaissant pas du tout l'html de formater leur messages.

Présentation



Quand vous rédigez un post, article, message ou quoique ce soit sur ce site vous arriverez obligatoirement à ce tableau de commandes:


Les "commandes" -(boutons) sont regroupées par fonction, voici les plus utilisées et, qui font l'objet d'un développement dans cette page:
  1. Les smilleys (émoticons) que tout le monde utilise.
  2. Alignement pour centrer le texte, le placer à droite ou le justifier, par défaut l'alignement est à gauche.
  3. La mise en forme gras italique, souligné, barré mis en couleur la taille ou la police.
  4. Disposition du texte : mettre en citation, en tableau ou une liste.
  5. Placer un lien : le lien d'une image hébergée ou vers une page web.

D'autres fonctions sont accessibles ainsi que des combinaisons, elles sont décrite plus bas.
Si vous avez besoin d'une aide n'hésitez pas à solliciter le forum.
Niveau fonctionnement, pour ceux qui sont intéressés, des expressions régulières reconnaissent les balises BBcode et remplacent ce language à balises à crochets [] par les balises XHTML et CSS correspondantes.
Nous allons voir par l'intermédiaire de cet article comment mettre en forme un message, valable sur toutes les pages de PHPBoost contenant l'éditeur de texte.
Veillez à bien respecter un ordre d'ouverture et de fermeture des balises lorsque vous en imbriquez une dans l'autre :
Code :
[b][i]Texte[/b][/i]
est à proscrire et à remplacer par :
[b][i]Texte[/i][/b]

Effectivement vous allez me dire : "mais ça marche aussi!".
Certes, mais cela n'est absolument pas bon pour les navigateurs et la page ne sera plus compatible au standard XHTML 1.0 Strict du W3C.
Veillez aussi à ne pas intercaler d'espaces à l'intérieur des crochets [] qui correspondent à la balise, cela empêcherait tout simplement le fonctionnement de la mise en forme.

Smileys



Pour égayer vos messages, rien de mieux que d'y insérer quelques smileys histoire d'illustrer des réactions récurrentes.
Pour cela vous devez placer le curseur à l'endroit où vous voulez insérer le smiley, à l'intérieur de la zone de texte.
Ensuite vous cliquez sur le bouton dans la barre BBCode pour afficher la collection de smileys disponibles (une vingtaine d'origine plus ceux éventuellement rajoutés) et cliquez sur le smiley qui vous intéresse.
Un code va donc s'afficher à l'endroit où vous aviez placé le curseur.
Et oui vous l'aurez compris le smiley ne s'insère pas directement mais cela insère un "code smiley" qui est propre à chaque smiley, qui sera remplacé par le smiley à l'affichage du message.
Vous pourrez donc au bout d'un certain temps et avec de l'habitude ne plus avoir à cliquer sur le bouton smiley car vous aurez retenu les codes correspondants. D'ailleurs pourquoi des caractères si bizarres ?
Effectivement les caractères correspondant aux smileys peuvent être compliqués mais pour cela on a une explication évidente. Par exemple pour le smiley sourire si le code était sourire, dès que le mot sourire apparaîtrait dans le message il serait remplacé par le smiley correspondant.
Et puis pour allez encore plus loin vous allez remarquer quelque chose si ce n'est pas déjà fait.
Par exemple justement le smiley sourire :)
Son code est :
Code :
:)

Et bien faites faire un quart de tour dans le sens horaire et vous verrez vite qu'il forme un visage souriant (avec les deux points : les yeux, et la parenthèse : la bouche).
Vous pouvez faire ça avec beaucoup de smileys classiques comme le clin d'œil par exemple.

Mise en forme du texte



Vous vous demandez comment j'ai mis en page cet article ? Simplement, grâce au BBCode ! En effet le BBCode dérive de l'HTML par sa syntaxe.

Mises en forme de base : gras , italique, souligné et barré



Pour mettre un texte en gras vous n'aurez qu'à l'encadrer par la balise b comme le montre cet exemple :
Code :
[b]Texte à mettre en gras[/b]

Cet exemple affichera:
Texte en gras
Pour l'insérer plus facilement vous pouvez sélectionner le texte que vous voulez mettre en gras et vous cliquez sur , il s'entourera automatiquement des bonnes balises.
Vous pouvez faire de même avec les balises i, s, b qui correspondent à :
  • I : italique ( )
  • S : souligné ( )
  • B : barré ( )

BBcode étant par défaut en Anglais les résultats à l'édition seront :
Code :
[b] pour = bold (gras en Anglais) votre édition donnera :[b]texte en gras[/b]
[i] change peu = italic votre édition donnera :[i]texte italique[/i]
[u] signifie underline = souligné votre édition donnera :[u]texte souligné[/u]
[s] signifie strike = barré votre édition donnera :[s]texte baré[/s]

Taille du texte



Pour modifier ces propriétés, le principe est le même. On va encadrer le texte désiré par d'autres balises. L'icône de la balise est :
Code :
[size=25]Texte[/size]

Cet exemple affichera :
Texte
La balise size, admet en argument un chiffre entre 0 et 49
Quelques exemples :
Taille 5
Taille 9
Taille 25
Taille 35
Taille 49
[size=50]Taille 50[/size] Celle la ne marche pas comme prévu.

Couleur



L'icône de la balise est :
Dans color vous mettrez la couleur du texte (en anglais pour les principales couleurs, ou alors en hexadécimal pour les connaisseurs). Liste des couleurs disponibles: red, green, blue, yellow, purple, olive, black, white, grey etc.
Code :
[size=25][color=red]Texte[/color][/size]
[size=25][color=#FF6600]Texte[/color][/size]

Cet exemple affichera :
Texte
Texte

Alignement



Pour l'alignement d'un texte le principe est encore une fois le même. En utilisant les boutons gauche, centré, droite et justifié, vous pourrez aligner le texte qui sera entouré des balises où vous voudrez dans la page.
Les icônes de la balise sont :
  • gauche :
  • centré :
  • droite :
  • justifié:

Code :
[align=right]Exemple de texte aligné à droite[/align]

Cet exemple affichera :

Exemple de texte aligné à droite


Élément flottant



Nous avons déjà vu la balise align, elle permet de positionner des éléments.
L'avantage de la balise float c'est qu'elle permet de mettre plusieurs éléments à la même hauteur, par exemple si on veut insérer une image sur la droite, si on lui demande de se positionner à droite par la balise float le texte ne viendra pas se mettre sur l'image mais il l'entourera.
A noter qu'il est possible de faire flotter à droite ou à gauche mais pas au centre.
Les icônes de la balise sont :
  • gauche :
  • droite :

Code :
[float=right]Elément flottant à droite[/float]

Cet exemple affichera :

Elément flottant à droite


Les titres



L'icône de la balise est :
La balise title sert à créer des titres. Sélectionnez votre texte à mettre en titre, cliquez sur l'icône et choisissez le niveau de titre.
Code :
[title=1]titre 1[/title]
[title=2]titre 2[/title]
[title=3]titre 3[/title]
[title=4]titre 4[/title]

Cet exemple affichera :

titre 1


titre 2


titre 3


titre 4


Les conteneurs



L'icône de la balise est :
Les balises block et fieldset servent à créer un cadre autour d'un texte. Sélectionnez votre texte à encadrer, cliquez sur l'icône et choisissez le type de cadre.
Code :
[block]ce texte est encadré[/block]
[fieldset]ce texte est aussi un texte encadré[/fieldset]

Cet exemple affichera :
ce texte est encadré

Ce texte est aussi un texte encadré.

A noter que la balise fieldset peut aussi s'utiliser avec l'attribut "legend" pour mettre un titre:
Code :
[fieldset legend="titre"]ce texte est encadré avec un titre[/fieldset]

Cet exemple affichera :
titre
Ce texte est encadré avec un titre.

Les styles



L'icône de la balise est :
Les styles de texte permettent de bien mettre en évidence une zone de texte sous forme de question, remarque, attention et erreur. La balise utilisée est style.
Voici comme exemple les 4 styles disponibles :
Code :
[style=question]question[/style]
[style=notice]remarque[/style]
[style=warning]attention[/style]
[style=error]erreur[/style]

Cet exemple affichera :
question
remarque
attention
erreur

Autres balises utiles



Liens



L'icône de la balise est :
Pour faire un lien vers une page web quelconque, vous devez suivre la démarche suivante. Vous devez d'abord insérer la balise lien qui est url. Vous mettez le texte ou l'image qui serviront de support pour le lien. Ensuite vous revenez à l'ouverture de la balise url et vous remplacez url par url=votre page.
Voici un exemple :
Code :
[url=http://www.phpboost.com]PHPBoost[/url]
[url=http://www.phpboost.com]http://www.phpboost.com[/url]

Cet exemple affichera :
PHPBoost
http://www.phpboost.com
Lors du clic sur l'icône de la balise, l'adresse du lien vous est demandée et le curseur est positionné automatiquement pour ajouter le texte du lien.

Images



L'icône de la balise est :
L'ajout d'image permet d'expliquer un problème, montrer des créations graphiques, images drôles/intéressantes, etc...
Pour cela vous pouvez insérer une image en spécifiant son adresse internet dans les balises img.
Voici un exemple :
Code :
[img]http://ladressedevotrehébergeur/nomdelimage.png[/img]

Cet exemple affichera :

Combinons avec ce que nous avons appris avant, nous allons centrer l'image :
Code :
[align=center][img]http://ladressedevotrehébergeur/nomdelimage.png[/img][/align]

Cet exemple affichera :


Il est également possible de fixer les propriétés de style de l'image (la largeur ou la hauteur par exemple) directement dans la balise. Exemple avec une largeur à 30% :
Code :
[img style="width:30%;"]http://ladressedevotrehébergeur/nomdelimage.png[/img]

Vous savez donc maintenant ajouter des images à vos messages.

Texte sur l'image


Pour écrire sur une image, il vous suffit de faire cela (voir block ):
Cliquez sur le bouton : -conteneur- Sélectionnez : bloc
Code BBCODE :
[block style="background-image:url(LIEN DE L'IMAGE); width:760px; height:650px;"]Texte par dessus[/block]

ATTENTION de laisser un espace entre block et style ! Cette remarque est valable pour tout -style- intégré.
Code BBCODE :
background-image:url(https://i11.servimg.com/u/f11/19/43/21/05/rosa10.jpg)
est l'élément ou vous devriez mettre le lien de l'image
Code BBCODE :
width:520px
520px est la largeur en pixel.
Code BBCODE :
height:298px;
indique la hauteur.
Code TEXT :
[b][color=#FFFFFF]Rosa le film[/color][/b]

«Rosa le film» étant pour cet exemple, le texte qui sera par dessus l'image : ici il est en couleur blanc et en gras => important sur fond sombre
Rosa le film


Afficher une image :
L'icône de la balise est :

L'ajout d'image permet d'expliquer un problème, montrer des créations graphiques, images drôles/intéressantes, etc...
Pour cela vous pouvez insérer une image en spécifiant son adresse internet dans les balises "img".
Code BBCODE :
[img]http://hebergeur.web/25/410/01/mon-image.jpg[/img]


On peut également uploader une image directement ici, mais mon espace n'est pas illimité donc préférez l'hébergeur.

Lightbox



L'icône de la balise est :
Cette balise permet d'ajouter un effet sur une image. Elle permet d'afficher la miniature d'une image dans un texte et de l'afficher en taille réelle lorsqu'on clique dessus.
Voici un exemple :
Code :
[lightbox=http://ladressedevotrehébergeur/nomdelimage.png][img style="width: 50px;"]http://ladressedevotrehébergeur/nomdelimage.png[/img][/lightbox]

Cet exemple affichera :

Lors du clic sur l'icône de la balise, l'adresse de l'image en taille réelle vous est demandée et le curseur est positionné automatiquement pour ajouter l'image miniature (avec la balise img décrite au paragraphe précédent) ou le texte à afficher.

Images hébergées


Ils vous permettent d'accéder rapidement à l'adresse d'un hébergeur d'images avec ou sans inscription.
Les icônes sont : | | |
Le principe reste le même que insérer un lien ou une image, il vous suffit de coller l'adresse de votre image entre les balises :
Code BBCODE :
[img]https://i37.servimg.com/u/f37/19/43/21/05/rosa10.jpg[/img]

Ce sujet est développé un peu plus dans notre forum qui est "souvent" la principale raison d'afficher une image .

Texte caché



L'icône de la balise est :
La balise hide permet d'afficher une zone de texte caché. Il suffit de cliquer dessus pour afficher le contenu. Elle peut être utilisée pour un article de questionnaire donnant ainsi la réponse à la question.
Exemple :
Code :
[hide]Cliquez sur la zone de texte pour afficher le texte.[/hide]

Cet exemple affichera :
Caché :
Cliquez sur la zone de texte pour afficher le texte.

Citation



L'icône de la balise est :
La balise quote (citation en anglais) est souvent utilisée pour citer le message d'un autre membre, mais peut avoir d'autres utilisation très pratiques.
Elle peut être utilisé simplement pour citer un texte :
Code :
[quote]Texte sans auteur particulier à citer[/quote]

Cet exemple affichera :
Citation :
Texte sans auteur particulier à citer

Maintenant, vous pouvez citer l'auteur du message (ça ne doit pas forcément être le pseudo d'un membre, ça peut être le nom d'un site ou d'un auteur...)
Code :
[quote=CrowkaiT]Message dont l'auteur est CrowkaiT[/quote]

Cet exemple affichera :
CrowkaiT :
Message dont l'auteur est CrowkaiT

Tableau de base



PHPBoost permet de faire des tableaux en BBCode.
Cette balise supporte les imbrications infinies et elle permet une personnalisation presque totale puisqu'elle permet de définir au tableau des propriétés graphiques en CSS* (voir Wiki: - CSS).
La création d'un tableau n'est pas une opération simple à comprendre.
La balise table de PHPBoost suit la même logique que la création de tableaux en HTML, seules les balises ne portent pas le même nom.
Pour mieux expliquer cet article va progresser pas à pas avec de nombreux exemples.
Nous allons faire un tableau qui contient une seule cellule. Voilà le code source :
Tableau de base : une ligne et une colonne
Tableau à une cellule


Code BBCODE :
[table]
[row]
[col]
Tableau à une cellule
[/col]
[/row]
[/table]


Explications :
  • table : marque le début du tableau quand /table signale sa fin.
  • row : marque le début d'une ligne du tableau /row en délimite la fin
  • col : marque une colonne donc /col vous l'avez compris !

Il faut comprendre que la construction d'un tableau se fait d'abord selon les lignes, puis pour chaque ligne on définit des colonnes, ce qui définit pour chaque intersection une cellule.
Faisons maintenant un tableau à deux cellules sur la même ligne :
Tableau de base : une ligne et deux colonnes
cellule de gauchecellule de droite


Code BBCODE :
[table]
[row]
[col]
Cellule de gauche
[/col]
[col]
Cellule de droite
[/col]
[/row]
[/table]


Il est donc important de remarquer que pour rajouter une cellule il suffit de rajouter une colonne dans la ligne.
Ajoutons maintenant une deuxième ligne :
Tableau à deux lignes et deux colonnes

Cellule haut gauche

Cellule haut droite

Cellule bas gauche

Cellule bas droite

Code BBCODE :
[table]
[row]
[col]
Cellule haut gauche
[/col]
[col]
Cellule haut droite
[/col]
[/row]
[row]
[col]
Cellule bas gauche
[/col]
[col]
Cellule bas droite
[/col]
[/row]
[/table]


Explication de tout cela:
Quand vous sélectionnez un tableau de:
2 lignes (row) rangée ou ligne
et 2 colonnes (col) vous obtenez dans votre éditeur ceci:
Code BBCODE :
[table]
[row]
[col][/col]
[col][/col]
[/row]
[row]
[col][/col]
[col][/col]
[/row]
[/table]
?? pas clair ! Comparez avec le tableau çi dessus
Il conviendrait mieux de comprendre ceci:
Code BBCODE :
[table]
[row][col]Haut gauche[/col][col]Haut droite[/col][/row]
[row][col]Bas gauche[/col]Bas droite[col][/col][/row]
[/table]

Tableau en couleur



Ces fondamentaux intégrés il devient très facile de modifier et afficher des tableaux plus élaborés ou moins "standards" par exemple.
Ligne 1colonne 1 Ligne 1colonne 2 Ligne 1colonne 3
code :
style="background:#F873FF"
code :
[color=#xxx]couleur texte[/color]
code :
style="background:#000000"+[color=#xxx]couleur texte[/color]

Obtenu en insérant du style=background et du texte color:
Code BBCODE :
[table]
[row]
[col style="background:#F873FF"]Ligne 1colonne 1[/col]
[col][color=#0000FF]Ligne 1colonne 2[/color][/col]
[col style="background:#000000"][color=#FFFFFF]Ligne 1colonne 3[/color][/col]
[/row]
[row]
[col]style="background:#F873FF"[/col]
[col][color=#xxx]couleur texte[/color][/col]
[col]style="background:#000000"+[color=#xxx]couleur texte[/color][/col]
[/row]
[/table]

Il ne faut pas que les couleurs se fondent car évidement le texte deviendrait invisible ce qui n'est pas le but.
Plus élaboré encore faire disparaître les bordures.
Code BBCODE :
[table]
[row]
[col style="border-top: 0px;border-left: 0px;border-bottom: 0px;border-right: 0px;background-color: #FBFBFB;"]texte: colo1[/col]
[col style="border-top: 0px;border-left: 0px;border-bottom: 0px;border-right: 0px;background-color: #FBFBFB;"]texte: colo2[/col]
[/row]
[/table] 

Petite explication : il existe 4 bordures dans nos tableaux haut (top) bottom (bas) droite (right) et gauche (left) en mettant la valeur 0 px (en épaisseur) elles disparaissent donc :
texte: colo1 texte: colo2

Ne reste plus que les couleurs à harmoniser, car le but est de faire ressortir le texte ou donner un degré d'importance.

Différentes bordures de tableaux


Cela peut aider à faire ressortir un tableau ou une cellule.
Il existe plusieurs solution : Si nous y mettons une couleur elle apparaîtrons en bleu, rouge, noir comme on veut sous condition d'indiquer l'épaisseur exemple : 2px
Mais nous pouvons également modifier son tracé : none (sans) solid,double, dotted, dashed, groove, ridge, inset, outset, hidden et inerit.
None Pas de bordure.
Solid Trait simple.
DoubleTrait double.
DottedTrait pointillé.
DashedTirets.
GrooveRainure.
Ridge Bourrelet.
Inset En creux.
OutsetEn relief.
HiddenCaché. Le résultat visuel est le même que pour None mais la gestion des espaces est différente.
InheritMêmes valeurs que celles de l'élément parent.

Code BBCODE :
[table]
[row]
[col style="border-top: 2px dotted red;border-left: 2px solid black;border-bottom: 2px solid blue;border-right: 0px;background-color: #FBFBFB;"]colo1[/col]
[col style="border-top: 2px solid #FF0000;border-left: none;border-bottom:double black;border-right: 2px solid #000000;background-color: #FBFBFB;"][b][color=#008000]colo 2[/color][/b][/col]
[/row]
[/table]

colo1 - variante pointillé color red
botttom solid blue
colo 2 - variante solid color #000000
bottom double black

Il est évident que cela devient de plus en plus compliqué si l'on choisit de faire un grand tableau avec beaucoup de couleurs et en y intégrant du texte, images et lien. Donc ce modèle est a prendre en compte pour un petit tableau ou une notation "vite fait".
Je crois que sur le gros travail cela deviendrait vite fastidieux.
Une autre solution consiste donc à le faire directement en HTML.

Un tableau neutre



Dans le même ordre d'idée, on peut rendre le tableau (son encadrement) invisible, a condition d'utiliser la bonne couleur de fond ici : #FBFBFB.
texte: colo1 texte: colo2

Ce qui donne en BBcode :
Code BBCODE :
[table]
[row]
[col style="border-top: 0px;border-left: 0px;border-bottom: 0px;border-right: 0px;background-color: #FBFBFB;"]texte: colo1[/col]
[col style="border-top: 0px;border-left: 0px;border-bottom: 0px;border-right: 0px;background-color: #FBFBFB;"]texte: colo2[/col]
[/row]
[/table]

Petite précision : border «top» indique la bordure haut (top), border «left» la gauche, «right» celle de droite, et «bottom» celle du bas. Il est donc possible de ne faire apparaître que une ou deux bordures en ne plaçant pas la commande border-bottom:0px; la bordure du bas sera visible .

Dimensions des colonnes d'un tableau



Si le texte dans une cellule est plus important que dans les autres la cellule aura tendance à s'élargir rendant parfois le tableau peu compréhensible. la solution consiste donc d'imposer une taille -fixe- à la colonne (ou à toutes) en insérant la commande : width: suivit d'une valeur en pourcentage: x% ou px: xpx .
Mon avis il est plus simple d'utiliser le pourcentage : 50% pour deux colonnes - 33% pour trois colonnes -25% pour quatre etc...
texte: colo1 le texte et un peu plus long mais reste dans la taille indiquée de 33% .Le texte effectue simplement un retour à la ligne.
On peut donc continuer à écrire dans la cellule.
Tout en conservant les bordures neutres.
texte: colo2 texte: colo2

Code BBCODE :
[table]
[row]
[col style="border-top: 0px;border-left: 0px;border-bottom: 0px;border-right: 0px;background-color: #FBFBFB;width:33%;"]texte: colo1 le texte et un peu plus long mais reste dans la taille indiquée de 33%. Le texte effectue simplement un retour à la ligne.
On peut donc continuer à écrire dans la cellule.
Tout en conservant les bordures neutres.[/col]
[col style="border-top: 0px;border-left: 0px;border-bottom: 0px;border-right: 0px;background-color: #FBFBFB;"]texte: colo2[/col]
[col style="border-top: 0px;border-left: 0px;border-bottom: 0px;border-right: 0px;background-color: #FBFBFB;"]texte: colo2[/col]
[/row]
[/table]

J'ai volontairement indiqué que sur une seule colonne nous pourrions le préciser sur toutes ou créer des dimensions différentes a condition que l'ensemble obtienne la valeur de 100% précisément.

Fusion d'une colonne


Cet xemple montre la fusion de 5 cellules : col rowspan="5" ou le nombre nécessaire à votre fusion .
Note : Pour que le tableau s'affiche correctement il faut impérativement supprimer 4 (sur les cinq) cellules de la colonne gauche : [row][col] [/col][/row]
Code BBCODE :
[table]
[row]
[col rowspan="5"]Colonne fusionnée[/col]
[col]cellule 1[/col]
[/row]
[row]
[col]cellule 2[/col]
[/row]
[row]
[col]cellule 3[/col]
[/row]
[row]
[col]cellule 4[/col]
[/row]
[row]
[col]cellule 5[/col]
[/row]
[/table]

Colonne fusionnée cellule 1
cellule 2
cellule 3
cellule 4
cellule 5

Listes



Pour créer une liste il faut d'abord la déclarer. Pour cela il faut utiliser la balise
Code BBCODE :
[list]
.
Ensuite il faut déclarer chaque élément de la liste en utilisant [*].
Voilà un exemple de liste basique :
  • élément 1
  • élément 2
  • élément 3

dont le code source est :
Code BBCODE :
[list][*]élément 1
[*]élément 2
[*]élément 3[/list]


Liste numérotée




Pour faire une liste numérotée il faut passer l'argument ordered.
  1. Elément 1
  2. Elément 2
  3. Elément 3

Code BBCODE :
[list=ordered]
[*]Elément 1
[*]Elément 2
[*]Elément 3[/list]

<h3 class="formatter-title wiki-paragraph-3" id="paragraph-imbrication">Imbrication</h3>

Il est possible d'imbriquer les listes.
  • Elément 1
  • Elément 2
    • Sous liste 1
    • Sous liste 2
  • Elément 3

Code BBCODE :
[list][*]Elément 1
[*]Elément 2
[list][*]Sous liste 1
[*]Sous liste 2[/list]
[*]Elément 3[/list]

Personnalisation supplémentaire



Il est possible de donner un style supplémentaire à chaque liste.
Pour cela il suffit de mettre du CSS.
Voici un exemple :
  1. Elément 1
  2. Elément 2

Code BBCODE :
[list=ordered style="list-style-type: upper-roman;"]
[*]Elément 1
[*]Elément 2[/list]

Vous retrouverez les propriétés CSS disponibles pour les listes dans ce récapitulatif du Site du Zér0 : Propriétés des listes

Insérer du code



Pour afficher du BBCode sans qu'il soit interprété comme par exemple plus haut dans cet article (tous les autres langages y compris le HTML sont bloqués par mesure de sécurité), il faut utiliser la balise BBCode nommée code. Le code ne sera pas interprété, et il sera coloré si le langage est supporté et reconnu par le colorateur syntaxique.
L'icône de la balise est :
Voici un exemple:
Code :
<?php echo 'Bonjour cher membre'?>

On peut également précisé le type de code que l'on vas y insérer :

Préciser le type de code inséré



En précisant le type de code que l'on veux colorer, on met toute les chances de notre côtés pour que l'interpréteur syntaxique gère au mieux la couleur.
Exemple :
Si c'est du code php, l'on peut mettre directement :
Code BBCODE :
[code=php]<?php echo 'Bonjour cher membre'; ?>[/code]

Cet exemple affichera :
Code PHP :
<?php echo 'Bonjour cher membre'; ?>

Afficher les lignes



Pour insérer les lignes a côtés du code, il va falloir insérer un argument supplémentaire dans la balise BBCode.
Procéder comme suit :
Code BBCODE :
[code=php,1]<?php 
echo 'Bonjour cher membre'; 
?>[/code]

Cet exemple affichera :
Code PHP :
  1. <?php
  2. echo 'Bonjour cher membre';
  3. ?>

Multimédia



Flash



L'icône de la balise est :
La balise flash swf permet d'intégrer des animations flash directement dans PHPBoost, celle-ci peut prendre deux arguments : largeur et hauteur.
Code :
[swf=largeur,hauteur]url de l'animation[/swf]

Exemple :
Code :
[swf=155,250]http://www.phpboost.com/phpboost/pub.swf[/swf]

Vidéos



L'icône de la balise est :
Pour savoir comment utiliser la balise flash pour insérer des vidéos, merci de lire l'article approprié.

Son



L'icône de la balise est :
Vous pouvez bien sur insérer du son sur phpboost. La balise utilisée est sound.
Il faut cependant noter que le lecteur lit uniquement les fichiers .mp3. De plus la lecture optimale se fait pour les fichiers encodés à 44,100kHz. Dans les autres cas, la lecture ne se fera pas normalement.
Exemple :
Code :
[sound]http://art.macp3.info/VRAC/mp3/tagadatsointsoin.mp3[/sound]

Cet exemple affichera :

Source: Musique composée par Kak Miortvi Pengvin. Fichier distribué sous licence Creative Commons BY-NC-ND 2.0.

Insérer des expressions mathématiques



L'icône de la balise est :
La balise math permet d'insérer des expressions mathématiques. Vous trouverez tous les détails sur l'article approprié (explication et démonstration).

Ancres



Qu'est-ce qu'une ancre?



Une ancre permet de définir des lieux dans la page. Elle permet de faire en sorte de se rendre directement sur l'endroit recherché dans la page (voir par exemple les liens du sommaire de cette page, ils mènent directement au paragraphe concerné).
L'icône de la balise est :

Créer une ancre



Pour définir une ancre, il faut définir la syntaxe suivante:
Code :
[anchor=nom-ancre]Titre[/anchor]

J'ai volontairement choisi cet exemple avec le titre du sujet prèsent :
Code :
[anchor=les_ancres]Ancres[/anchor]

Faire pointer un lien vers une ancre



Pour créer un lien vers un endroit précis de la page, il faut mettre avant tout l'adresse de la page, puis mettre un dièse et le nom de l'ancre précédemment définie.
Nous utiliserons donc l'exemple -Ancre- citè au dessus:
Code :
[url=/wiki/bbcode-du-site#les_ancres]Créer des ancres en BBCode avec PHPBoost[/url]

L'adresse pointant vers l'ancre doit contenir l'adresse de la page -un dièse #-le nom de l'ancre.
Cet exemple affichera :
Créer des ancres en BBCode avec PHPBoost
Il faut donc un -point de chute, et un lien pointant vers celui-çi.

Flux RSS



Depuis la 4.0, il est possible d'ajouter un flux RSS interne au site via le BBCode.
Il faut utiliser cette balise :
Code BBCODE :
[feed cat"x" number="x"]NOM DU MODULE[/feed]

Vous avez la possibilité de personnaliser l'affichage :
  • cat="numéro de la catégorie du flux dans le module"
    Pour connaitre le numéro de la catégorie du flux, allez dans le module souhaité, allez dans la catégorie souhaitée et cliquez sur cette icone , vous allez être redirigé vers une page avec ce type d'adresse : /syndication/rss/forum/4
    Cela correspond au module forum et la catégorie est la n° 4.
    Si vous souhaitez afficher tous les flux d'un module, dans ce cas ne mettez pas cat"x"
  • number="nombre de flux à afficher"

Exemple pour afficher les 5 derniers flux du module téléchargement de la catégorie 3 :
Code BBCODE :
[feed cat"3" number="5"]download[/feed]

Utiliser un style dans du BBCode et html sur ce site



En premier lieu il est nécessaire d'utiliser l'Anglais:(pas de le parler couramment hin!) background, font, color, size et de connaître les couleurs HTML inutile de les connaître par cœur utilisez KcoloChooser (Linux) ou cette page : Codes couleurs html .
Le BBcode à cette particularité : pour qu'il fonctionne il faut que l'admin du site ou du forum active les fonctions, ou qu'il soit disponible dans le CMS. Si il n'y as pas de soucis dans l'affichage des gras,italique, souligné, texte centré etc... il n'en est pas toujours de même avec les "fantaisies' genre texte clignotant, en dégradé, qui défile et autre joyeusetés qui piquent les yeux quand trop c'est trop. A cela plusieurs raisons : un choix d'admin ou une conformité W3c (norme web) dans le CMS: c'est le cas ici, vous ne trouverez donc pas de bouton texte : clignote ou défile . en même temps est-ce indispensable ?

Couleur du texte



Revenons à nos boutons: la coloration du texte
Il ne propose que 40 couleurs suffisantes et de base, un choix du développeur , mais vous pouvez avoir envie de changer la couleur du texte. Rien de plus simple vous modifiez uniquement le code couleur - les 6 chiffres et lettres après le dièse #:
Remarquez le dièse #suivit de F04343 pour la
Code BBCODE :
[color=#F04343]Couleur orange F04343[/color]

Couleur orange F04343
Code BBCODE :
[color=#F873FF]Couleur rose F873FF[/color]

J'ai modifié en F873FF pour obtenir la Couleur rose F873FF

Taille du texte


Le principe reste valable pour la taille du texte:
Code BBCODE :
[size=15]quinze pixels[/size]

quinze pixels
Code BBCODE :
[size=18]Dix-huit Pixels[/size]

dix-huit pixels

Citation


Ou une citation :
Citation :
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Code BBCODE :
[quote]Lorem ipsum dolor sit amet, consectetuer adipiscing elit.[/quote]

En plaçant le signe égale avant Dupont: = Dupont comme ceci quote=Dupont vous obtenez:
Dupont :
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Code BBCODE :
[quote= Dupont]Lorem ipsum dolor sit amet, consectetuer adipiscing elit.[/quote]

Code HTML



insert html :
Disponible sur ce site - UNIQUEMENT aux personnes désignées.
Ce n'est pas possible pour des raisons évidentes de sécurité.

Si vous cliquez sur ce bouton le code apparaitra sous forme inactif passif :
Code BBCODE :
[html]<div style="padding:5px;background:#0000FF;border:2px solid #B7D3DD;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px; box-shadow: 0px 0px 5px #91A7AF;">
Sans effet.</div>[/html]


Par contre personne ne vous empêche d'apprendre, par curiositè, comment tout cela fonctionne !

- Vous vous dites oh là! Vous avez tord c'est plus simple qu'il n'y parait.
Il existe des éditeurs html payant et gratuit avec Mandriva vous disposez de Kompozer et de Blue griffon librement et gratuitement.
A partir de là tout est permis ou presque si on se donne un peu de peine à comprendre le pourquoi du comment.
En BBCode si j'écris Bonjour
Je dois faire ceci :
Code BBCODE :
[b][color=#3366FF]Bonjour[/color][/b]

En html c'est quasiment la même chose:
Bonjour
Code HTML :
<font color="#3366FF"><b>Bonjour</b></font>

Code HTML :
<i>Voici</i> <u>un texte</u> écrit en <font color="#ff0000">HTML</font color>

Voici un texte écrit en HTML
On remarque une grande similitude d'encodage : B pour gras, I pour italic, U pour souligné seuls les crochets [ et ] du BBCode sont remplacé par < et>
que chaque "commande" est arrêté par un </???>de son nom /b,/i,/u /fontcolor
Avec un peu de temps on arrive à faire quelques bricoles permettant de mettre en évidence du texte.

Faire un lien en HTML


Le principe reste identique a BBCode, mais là il s'agit de placer <a href= adresse>Nom affiché</a>
*href signifie hypertexte référence : il est placé aprés la balise <a qui elle se ferme à la fin du texte </a>
[url=/]Qui pointe vers un lien[/url]
Code HTML :
<a href="www./lien_web.html">Texte du lien</a> 

mais on peut également remplacer le texte du lien par une image ce qui donnera :
Code HTML :
<a href="www./lien_web.html" ><img src="/emplacement/image.png"/></a>

Pensez également à l'importance des guillemets, mais dans l'ensemble ce n'est -a ce niveau- qu'une façon de voir la chose...
Ce sujet vous intéresse ? Vous aimeriez en apprendre plus encore?
je vous conseille de visiter ce site: Cours de HTML

Zone de test



- Pensez aussi qu'une -Zone de tests- est disponible pour les inscrits, dans le forum : Zone de tests .
Vous pourrrez directement tester les combinaisons BBCode et demander éventuellement une aide précise.
Cette page a été vue 2682 fois