Comme maman Steam 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 BBCode

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

Alignement du texte
On 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 Steam é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 marges
Si vous voulez ajouter une marge à votre message, il existe plusieurs techniques plus ou moins esthétiques. Par exemple, on peut tricher (bouh !) 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:

Trem World est un monde se situant bien loin dans notre système solaire. La magie et ce que nous considérons comme des légendes font partie de l’ordre des choses sur ces terres que se partages humains, elfes et créatures. Les premiers se divisent en plusieurs clans peut souder entre eux : Si la guerre opposant les Ensorceleurs de Demensia au Mages d’Obscaraes vient de cesser, les deux plus grand clans de Trem continues de se détester et il arrive même trop peut rarement que cette haine fasse encore des victimes. Pendant ce temps, les elfes occupent le titre de Gardiens en redoutables guerriers capables de maîtriser une magie restreinte de type élémentaires. Quand au créatures, dragons, sirènes, fées et autre harpies, ils décident de se préoccuper ou non des humains et des elfes.

L'équivalent en BBCode est (sans la couleur):

Code:

[list] Trem World est un monde se situant bien loin dans notre système solaire. La magie et ce que nous considérons comme des légendes font partie de l’ordre des choses sur ces terres que se partages humains, elfes et créatures. Les premiers se divisent en plusieurs clans peut souder entre eux : Si la guerre opposant les Ensorceleurs de Demensia au Mages d’Obscaraes vient de cesser, les deux plus grand clans de Trem continues de se détester et il arrive même trop peut rarement que cette haine fasse encore des victimes. Pendant ce temps, les elfes occupent le titre de Gardiens en redoutables guerriers capables de maîtriser une magie restreinte de type élémentaires. Quand au créatures, dragons, sirènes, fées et autre harpies, ils décident de se préoccuper ou non des humains et des elfes.[/ 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 Steam 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:



On utilise le code suivant:

Code:

<div style="margin-left:30px; margin-right:30px;"> Trem World est un monde se situant bien loin dans notre système solaire. La magie et ce que nous considérons comme des légendes font partie de l’ordre des choses sur ces terres que se partages humains, elfes et créatures. Les premiers se divisent en plusieurs clans peut souder entre eux : Si la guerre opposant les Ensorceleurs de Demensia au Mages d’Obscaraes vient de cesser, les deux plus grand clans de Trem continues de se détester et il arrive même trop peut rarement que cette haine fasse encore des victimes. Pendant ce temps, les elfes occupent le titre de Gardiens en redoutables guerriers capables de maîtriser une magie restreinte de type élémentaires. Quand au créatures, dragons, sirènes, fées et autre harpies, ils décident de se préoccuper ou non des humains et des elfes.</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.

Les fioritures qui servent à rien
L'avantage du CSS, c'est que vous pouvez faire à peu près tout et n'importe quoi, et à peu près n'importe comment. Je vais lister ci-dessous les balises qui peuvent vous être utiles pour donner de la gueule à vos messages, en montrant, comme auparavant, l'équivalent en BBCode et en CSS (s'il existe).

Vous pouvez changer la police du texte. Évidement, cela implique que vous connaissiez le nom de la police et que l'utilisateur l'ait installée sur sa machine. Quand vous cliquez sur le bouton [A] (au-dessus de la zone de saisie des messages) Forumactif vous propose les polices de base, qui sont normalement affichables par tous les forumeurs.

On utilisera les balises:

Code:

[font=NOM_DE_LA_POLICE]Mon texte en Comic Sans Ms[/font]
<span style="font-family:'NOM_DE_LA_POLICE'">Mon texte en Comic Sans Ms</span>

De la même manière, vous pouvez changer la taille du texte. Cette taille peut prendre différentes valeurs, généralement on utilise une taille en pixels, sinon en pourcentage.

Code:

[size=18]Mon texte en grand[/size]
<span style="font-size:18px">Mon texte en grand</span>

C'est tout ce qui me vient à l'esprit pour le BBCode. Mais le CSS offre bien d'autres possibilités...

Mon texte en majuscules: on utilisera "font-variant" avec le mot-clef "small-caps". Il y a d'autres manières de procéder, avec des rendus différents, mais c'est ma préférée. Ce qui nous donne en code:

Code:

<span style="font-variant:small-caps">Mon texte en majuscules</span>

Mon texte encadré: vous pouvez encadrer le texte, ce qui peut être utile pour un titre. Pour cela on utilise "border" en précisant la taille de la bordure (ici 1px, vous pouvez aussi utiliser un mot-clef: thin par exemple) et son type (solid pour un trait, dotted pour des points et dashed pour des pointillés). Vous pouvez aussi ajouter une couleur (en hexa, rvb ou avec un mot-clef comme pour la couleur du texte). Dans l'exemple j'ai utilisé le code suivant (notez l'utilisation d'un padding qui décale le texte pour que la bordure ne soit pas collée aux lettres) :

Code:

<span style="border:1px solid; padding:3px;">Mon texte encadré</span>

Mon texte souligné en pointillé: en fait, j'utilise juste un "border" mais en précisant le mot "bottom" pour n'afficher que le bord du dessous du texte.

Code:

<span style="border-bottom: 1px dotted">Mon texte souligné en pointillé</span>

Mon texte espacé: on utilise "letter-spacing" suivi d'une valeur en pixels ou en pourcentage. J'ai la flemme d'essayer mais "word-spacing" doit marcher aussi, pour espacer les mots et non les lettres.

Code:

<span style="letter-spacing:10px">Mon texte espacé</span>

Mon texte clignotant : on utilise "text-decoration" avec le mot-clef "blink". A noter que "text-decoration" peut servir à d'autre chose comme souligner, barrer du texte, etc.

Code:

<span style="text-decoration:blink">Mon texte clignotant</span>

Mon texte surligné : On ajoute un fond au texte avec "background-color" en précisant une couleur en hexa (comme pour la couleur du texte vous pouvez utiliser un mot-clef ou un code rvb). Il est aussi possible d'ajouter une image, mais je vais pas m'attarder là-dessus. Pour l'exemple j'ai écrit :

Code:

<span style="background-color:#000">Mon texte surligné</span>

Une dernière chose, très pratique pour compléter un long guide, ce sont les balises référentielles. Elles permettent de sauter facilement jusqu’à la ligne de texte qui nous intéresse. Leur utilisation est très simple : il suffit de placer la première balise qui contient le lien de la page html à laquelle vous souhaitez accéder et le nom de votre référence sur les différentes catégories d’une liste, par exemple, et de terminer en plaçant la balise avec le nom de référence à l’endroit voulu.
Exemple :
-Le post sur les BBcode juste au-dessus.
Pour ce faire, j’ai utilisé ces balises :

Code:

 <a href="http://trem-world.1fr1.net/t624-un-peu-de-mise-en-page-tuto #BBcode">Le post sur les BBcode juste au-dessus.</a>

Suivi de :

Code:

 <a name="BBcode"></a>

À l’endroit où je voulais atterrir !

Les tableaux
Les tableaux, ça n'a rien de compliqué une fois que c'est clair dans votre tête, même si à première vue on pensera souvent "OH PUTAIN C'TE BORDEL". Je vais aller au plus simple: le code ne sera pas toujours très rigoureux mais on s'en fou, l'objectif c'est que ça claque à l'écran. Résumé: un tableau contient des lignes. Une ligne contient une à plusieurs cellules. Il est possible de fusionner deux cellules ou plus entre elles, horizontalement ou verticalement. Il est possible de fixer une taille au tableau et aux cellules.

Voilà le tableau dit "de base" :

Ligne 1/Cellule 1	L1/C2
L2/C1	L2/C2

Et le code associé :

Code:

[table border="1px" width="300px"][tr][td]Ligne 1/Cellule 1[/td][td]L1/C2[/td][/tr][tr][td]L2/C1[/td][td]L2/C2[/td][/tr][/table]

Comme vous pouvez le constater, un tableau est représenté par une balise "table", il comprend plusieurs lignes (ici deux), les balises "tr". Les lignes ont dans l'exemple chacune deux cellules, les balises "td". Vous pouvez ajouter autant de cellules et de lignes que vous le désirez mais attention, s'il n'y a pas le même nombre de cellules dans chaque ligne, vous obtiendrez un tableau déformé comme ci-dessous :

Ligne 1/Cellule 1	L1/C2
L2/C1

Pour y remédier, il faut fusionner les cellules à l'aide des mot-clefs "rowspan" (fusion verticale) et "colspan" (fusion horizontale). Il faut les ajouter dans la cellule (balise "td") que vous voulez élargir, en précisant de combien de cellules. Par exemple pour élargir la cellule L2/C1 d'une cellule horizontalement on écrira :

Code:

[table border="1px" width="300px"][tr][td]Ligne 1/Cellule 1[/td][td]L1/C2[/td][/tr][tr][td colspan="2"]L2/C1[/td][/tr][/table]

Ligne 1/Cellule 1	L1/C2
L2/C1

Pour une fois, le code HTML est exactement le même (remplacez juste les [] par <>). Dans sa grande mansuétude, Forumactif met à disposition un bouton "Insérez un tableau" (toujours dans la barre d'édition de message) qui vous évitera le casse tête du débutant. Mais avec l'explication ci-dessus, j'espère que vous comprendrez mieux le code généré.

Taille des tableaux
Dans les exemples ci-dessus, j'ai mis une taille fixe au tableau qui dans le cas contraire prend la largeur du texte. C'est possible soit en ajoutant un paramètre "width" au tableau comme dans l'exemple, soit en ajoutant un style comme dans le tuto précédent. Par exemple pour que votre tableau prenne la largeur du message on écrira :

Code:

[table border=1 style="width:100%;"]...[/table]

Ce qui donnera :

Cellule 1

Cellule 2

Pour qu'il prenne la moitié de la largeur du message, ce sera :

Code:

[table border=1 style="width:50%;"]...[/table]

Ce qui donnera :

Cellule 1

Cellule 2

...et là, c'est la panique, le tableau n'est pas centréééé.

Pour centrer un tableau, il suffit d'ajouter une marge automatique de chaque côté du tableau en utilisant le paramètre "margin" vu précédemment.

Code:

[table border=1 style="margin-left:auto; margin-right:auto;"]...[/table]

Cellule 1

Cellule 2

Évidemment vous pouvez déterminer la longueur du tableau avec le paramètre "height". Vous pouvez aussi, en plaçant les paramètres dans une balise td, modifier la taille d'une cellule. Si je veux que la première colonne de mon tableau fasse presque toute la page et laisser une cellule riquiqui sur le côté, j'écrirai le code suivant :

Code:

[table width=100% border=1][tr][td style="width:95%"]Cellule 1[/td][td style="width:5%"]C2[/td][/tr][/table]

Cellule 1

C2

Important: pour la taille des cellules d'un tableau, il suffit de paramétrer celles de la première ligne pour que les suivantes prennent la même largeur. Si je mets une largeur de 50px à la première cellule du tableau, toutes les cellules de cette colonne feront 50px. Donc dans l'exemple précédent, si je rajoute une ligne toute bête (sans préciser la taille) j'obtiendrai le tableau suivant :

Cellule 1	C2
Cellule 1'	C2'

Et voilaa fin du guide, j’espère qu’il vous aura aidé à appréhender un peu mieux les mystères de l’HTML et du BBcode