Comme maman Koss se fait un peu chier, elle a décidé de partager un peu ses connaissances du BBCode, HTML et CSS pour votre plus grand plaisir. Elle aurait bien balancé du javaScript avec, mais il semble que forumactif ait désactivé cette option.
C'est kwa le BBCode?Le BBCode c'est ces balises bizarres avec des mots encapsulés dans des [][/] qui permettent d'égayer un peu vos messages en passant le texte en
gras, en
italique, en
couleur, d'afficher des images, des URL... il faut savoir que ces balises ne sont qu'une traduction de l'HTML et que, par conséquent, on peut faire la même chose avec des balises HTML (qui elles entourent les mots de <> >). Vous pouvez même faire plus de choses avec l'HTML mais attention, il faut décocher l'option "désactiver le HTML" dans votre profil/message pour que le code soit interprété correctement.
Les balises basiques en BBCodePour mettre du texte en gras: - Code:
-
[b][/b] | Pour mettre du texte en italique: - Code:
-
[i][/i] |
Pour souligner du texte: - Code:
-
[u][/u] | Pour barrer du texte: - Code:
-
[strike][/strike] |
Il existe d'autres balises notamment pour afficher du texte défilant :
- Code:
-
[scroll][/scroll] et [updown][/updown]
Mais vous pouvez découvrir tout cela en testant les boutons étranges situés au-dessus de la division de texte, celle où vous saisissez vos messages.
La couleurPour colorer votre texte, il suffit de glisser les mots à colorer entre deux balises BBCode ou HTML en précisant la couleur au format souhaité. La couleur peut-être un mot-clef, un code hexadécimal ou un code rvb. Par exemple, pour la couleur
rouge on aura soit le mot "red", soit "#F00" ou encore "rgb(255,0,0)", ce qui est interprété de manière identique par votre navigateur. Il existe différent mot-clefs en plus des couleurs traditionnelles, par exemple
lightblue,
aqua,
silver... l'hexadécimal et le rvb offrent un plus grand choix de teintes que vous pouvez retrouver dans n'importe quel logiciel d'édition d'image ou sur un
site nuancier.
Pour colorer un texte avec du BBCode, vous pouvez utiliser la balise:
- Code:
-
[color=CODE_COULEUR][/color]
En HTML on utilisera plutôt :
- Code:
-
<span style="color:CODE_COULEUR"></span>
<div style="color:CODE_COULEUR"></div>
La balise span étant utilisée pour une ligne de texte et div plutôt pour un paragraphe.
Alignement du texteOn peut faire à peu près tout et n'importe quoi avec du texte, le centrer, le justifier, ajouter une/plusieurs marge(s)...
En BBCode, on utilisera les balises suivantes pour changer l'alignement du texte :
- Code:
-
[center]Mon texte est centré[/center]
[left]Mon texte est aligné à gauche[/left]
[right]Mon texte est aligné à droite[/right]
[justify]Mon texte est justifié[/justify]
La balise préférée de maman Koss étant bien sûr la balise justifiée, qui aligne tout comme dans un beau bouquin avec des vraies pages.
L'équivalent HTML maintenant:
- Code:
-
<div style="text-align:center">Mon texte est centré</div>
<div style="text-align:left">Mon texte est aligné à gauche</div>
<div style="text-align:right">Mon texte est aligné à droite</div>
<div style="text-align:justify">Mon texte est justifié</div>
Pour aligner tout votre message, vous devrez enfermer le texte complet dans l'une des balises précédentes.
Ajout de margesSi vous voulez ajouter une marge à votre message, il existe plusieurs techniques plus ou moins esthétiques. Par exemple, papa Ellhann triche (bouh le vilain) en utilisant une balise BBCode, la balise de listage. Cette balise est normalement faite pour faire une liste à puce, où chaque élément est décalé sur la droite, ce qui nous donne donc un alinéa sur tout le texte, comme ci-dessous:
Mass Effect est un jeu de rôle (RPG) de Science-fiction développé par BioWare exclusivement sur XBox360 et maintenant sur PC. La version du jeu PC est disponible depuis le 5 juin 2008 en Europe et en France. Le jeu démarre en l'an de grâce 2183 et vous incarnez un humain, soldat d'élite, nommé Commandant Shepard.
L'équivalent en BBCode est (sans la couleur):
- Code:
-
[list]Mass Effect est un jeu de rôle (RPG) de Science-fiction développé par BioWare exclusivement sur XBox360 et maintenant sur PC. La version du jeu PC est disponible depuis le 5 juin 2008 en Europe et en France. Le jeu démarre en l'an de grâce 2183 et vous incarnez un humain, soldat d'élite, nommé Commandant Shepard.[/list]
Note: Si vous choisissez cette méthode mais que vous cliquez sur le bouton "list" en haut, il vous ajoutera une puce symbolisée par la balise [*]. Vous pouvez l'enlever si vous ne voulez pas afficher le gros point noir.Maman Koss préfère lorsqu'il y a une marge des deux côtés du texte, alors elle utilise une méthode barbare avec les tableaux, ou les divisions, la seconde option étant plus simple je vous épargnerai le bidouillage. Donc, pour avoir ça en HTML:
Mass Effect est un jeu de rôle (RPG) de Science-fiction développé par BioWare exclusivement sur XBox360 et maintenant sur PC. La version du jeu PC est disponible depuis le 5 juin 2008 en Europe et en France. Le jeu démarre en l'an de grâce 2183 et vous incarnez un humain, soldat d'élite, nommé Commandant Shepard.
On utilise le code suivant:
- Code:
-
<div style="margin-left:30px; margin-right:30px;">Mass Effect est un jeu de rôle (RPG) de Science-fiction développé par BioWare exclusivement sur XBox360 et maintenant sur PC. La version du jeu PC est disponible depuis le 5 juin 2008 en Europe et en France. Le jeu démarre en l'an de grâce 2183 et vous incarnez un humain, soldat d'élite, nommé Commandant Shepard.</div>
Vous remarquerez le mot-clef "margin" qui indique le décalage de toute la division, "left" et "right" qui indiquent de quel côté décaler le texte et les chiffres qui représentent la valeur du décalage. Ici on décale le texte des deux côtés de 30 pixels. Vous pouvez modifier cette valeur pour diminuer/augmenter la marge ou utiliser des pourcentages. Vous pouvez aussi ajouter une marge en haut et en bas du message en ajoutant un "margin-top" et un "margin-bottom", dans ce cas n'oubliez pas les ";" qui séparent chacune de ces indications. Si vous assignez deux fois une valeur à un même mot-clef, seule la dernière valeur sera prise en compte.