Vous souhaitez réaliser une fiche originale, mais vous ne savez pas comment faire ? Ne vous inquiétez pas, on s’occupe de vous.
----------------------------------------------------------------------------------------------------------
Introduction basique
Utiliser le BBC Code (ou le HTLM), c’est très simple. Le BBC code sert à mettre en valeur certaines parties de votre texte en valeur (par exemple en modifiant la couleur ou en le mettant en italique). Pour l’utiliser, il faut juste retenir une chose : les balises doivent être fermées fonctionner correctement. L’endroit où vous les fermez va délimiter la section de votre texte qui sera affecté par les balises. Si vous utilisez deux balises sur un même texte, vous devez fermer la deuxième avant la première.
- Code:
-
Imaginons que vous souhaitiez mettre votre texte en gras et en italique.
La balise pour le gras est la suivante : [b][/b]
La balise pour l’italique est la suivante : [i][/i]
Les balises doivent être fermées et placées dans le bon ordre.
Ce qui donne donc, de manière correcte : [b][i]Exemple[/i][/b]
- Citation :
- Exemple
Note : Certaines des balises montrées dans ce tutoriel sont également disponibles lorsque vous écrivez un message, sous la forme d’icône (au dessus de la zone de saisie de texte). Pour les utiliser, il suffit d’encadrer le texte et de cliquer sur l’icône.
Note bis : Comme Nyjée est pas très douée, elle a mis certains code en HTLM, et d'autres en BBC Code. Ne vous inquiétez pas, les deux se différencient très facilement : Les codes HTLM sont entre <>, les BBC codes entre []. Faire sa fiche en BBC code ou en HTLM ne change fondamentalement rien, mais le HTLM est utilisable à peu près partout.
Il faut jusqte que vous vérifiez que vous avez activé l'option : '' Toujours autoriser le HTLM'' Dans mon profil > préférences.
Mise en forme du texte
Mettre en gras :
- Code:
-
[b]Texte[/b]
- Citation :
- Texte
Mettre en italique :
- Code:
-
[i]Texte[/i]
- Citation :
- Texte
Souligner :
- Code:
-
[u]Texte[/u]
- Citation :
- Texte
Rayer :
- Code:
-
[strike]Texte[/strike]
- Citation :
Texte
Changer la taille de l'écriture
- Code:
-
[size=18]Texte[/size]
A la place du 18, vous pouvez mettre n'importe quel nombre compris entre 1 et 30. Sachant que plus le nombre est petit, plus la taille est petite.
- Citation :
- Texte
Changer la couleur :
La première méthode consiste à utiliser une couleur prédéfinie par le forum : darkred ; red ; orange ; brown ; yellow ; green ; olive ; cyan ; blue ; darkblue ; indigo ; violet ; white ; black. Il faut alors utiliser le code suivant, en choisissant l'une des couleurs de la liste :
- Code:
-
[color=green]Texte[/color]
- Citation :
- Texte
La deuxième méthode utilise le même code, mais, au lieu d'ajouter le nom de la couleur, il faut ajouter son code hexadécimal (code qui permet de définir la couleur - vous trouverez une liste des codes ici)
- Code:
-
[color=#FF0000]Texte[/color]
- Citation :
- Texte
Changer la police :
Pour changer la police, il faut utiliser le code suivant, et y ajouter l'une des polices prédéfinies sur le forum : Arial ; Arial Black ; Comic sans MS ; Courrier New ; Georgia ; Impact ; Times New Roman ; Trebuchet MS ; Verdana
- Code:
-
[font=Georgia]Texte[/font]
- Citation :
- Texte
L'autre solution consiste à écrire votre texte avec une autre police sur Word, ou un générateur de styles (plus fiable), et à le coller. Si vous avez de la chance, votre mise en forme reste. Si vous avez de la chance.
- Citation :
- тєχтє
Centrer le texte :
- Code:
-
[center]Texte[/center]
- Citation :
Texte
Aligner à gauche le texte :
- Code:
-
[left]Texte[/left]
- Citation :
Texte
Aligner à droite le texte :
- Code:
-
[right]Texte[/right]
- Citation :
Texte
Justifier le texte :
- Code:
-
[justify]Texte[/justify]
- Citation :
Texte
Insérer des éléments extérieurs
Insérer une image :
- Code:
-
[img]le-code-de-votre-image[/img]
Insérer un lien :
- Code:
-
[url]Adresse URL de votre lien[/url]
OU [url=Adresse URL de votre lien]Titre de votre lien[/url]
Insérer une image cliquable:
- Code:
-
[url=votre-url][img]le-code-de-votre-image[/img][/url]
Insérer un tableau
Pour insérer un tableau et pouvoir le personnifier au maximun, il faut utiliser le code :
- Code:
-
<TABLE>
<TBODY>
<TR><TD>Case n°1</TD><TD>Case n°2</TD></TR>
<TR><TD>Case n°3</TD><TD>Case n°4</TD></TR>
</TBODY></TABLE>
- Citation :
Case n°1 | Case n°2 |
Case n°3 | Case n°4 |
(Si vous ne voyez pas les traits du tableau, c'est normal, pour le moment, ne vous inquiétez pas)
Ceci est le code de base. Il fonctionne d'une manière très simple : TABLE et TBODY sont les balises qui délimitent votre tableau, TR marque une nouvelle ligne de votre tableau et TD une nouvelle case sur cette ligne. Les balises sont fermées après chaque case. Vous pouvez ainsi multiplier les lignes et les colonnes à votre guise.
Ensuite, vous pouvez rajouter des éléments pour embellir votre tableau.
Mettre un fond
Pour mettre un fond à votre tableau, nous allons agir sur la partie du code TABLE.
Pour l'exemple, je choisis de mettre cette image en fond, ou un fond blanc (code ''FFFFFF'')
Pour rajouter un fond avec une couleur unie,
Il faut rajouter le code bgcolor="FFFFFF" à la balise table
Ici, avec la couleur choisie, ça donne :
- Code:
-
<table bgcolor="FFFFFF">
<TBODY>
<TR><TD>Case n°1</TD><TD>Case n°2</TD></TR>
<TR><TD>Case n°3</TD><TD>Case n°4</TD></TR>
</TBODY></TABLE>
- Citation :
Case n°1 | Case n°2 |
Case n°3 | Case n°4 |
La couleur est modifiable à l'infini ; il suffit de rentrer un code hexadécimal différent pour la changer, à la place de FFFFFF. Liste des codes hexadécimaux ici.
Pour rajouter un fond avec une image
Il faut rajouter le code background="http://wolpeper.com/ciel-ete-vendee.JPG" à la balise table
Ici, avec l'image choisie, ça donne :
- Code:
-
<table background="http://wolpeper.com/ciel-ete-vendee.JPG">
<TBODY>
<TR><TD>Case n°1</TD><TD>Case n°2</TD></TR>
<TR><TD>Case n°3</TD><TD>Case n°4</TD></TR>
</TBODY></TABLE>
- Citation :
Case n°1 | Case n°2 |
Case n°3 | Case n°4 |
L'image est modifiable à l'infini ; pour la changer, il suffit de rentrer l'adresse URL d'une autre image.
Note : Il est ainsi possible de modifier la couleur d'une seule cellule en conséquence, en rajoutant le code non pas à la balise table, mais à la balise TD qui correspond à la case de votre choix.
Code à l'intérieur du tableau :
- Code:
-
<TR><TD bgcolor="FFFFFF">Case n°1</TD><TD>Case n°2</TD></TR>
Définir une bordure
Pour définir une bordure, il faut rajouter un code dans l'entête ''TABLE''.
Vous pouvez utiliser trois codes : cellspacing définit l'espace entre les différentes bordures du tableau;
border définit la largeur de la bordure ;
bordercolor définit la couleur de cette bordure.
- Code:
-
<TABLE cellspacing=5 ; border=2 ; bordercolor=E6FE30>
<TBODY>
<TR><TD>Case n°1</TD><TD>Case n°2</TD></TR>
<TR><TD>Case n°3</TD><TD>Case n°4</TD></TR>
</TBODY></TABLE>
- Citation :
Case n°1 | Case n°2 |
Case n°3 | Case n°4 |
(La bordure extérieure en relief est normale)
Régler la largeur et la hauteur du tableau
Pour régler la hauteur et la largeur du tableau, il faut utiliser les codes Width et Height. Leur valeur peut se régler de deux manières différentes : en % (% par rapport à la page), ou en pixel, sachant que la largeur du forum est légèrement inférieure à 700 pixel.
Il sont ajoutés au code TABLE.
- Code:
-
<TABLE width=600px ; height=200px>
<TBODY>
<TR><TD>Case n°1</TD><TD>Case n°2</TD></TR>
<TR><TD>Case n°3</TD><TD>Case n°4</TD></TR>
</TBODY></TABLE>
- Citation :
Case n°1 | Case n°2 |
Case n°3 | Case n°4 |
Note : Il est ainsi possible de modifier la taille d'une seule cellule en conséquence, en rajoutant le code non pas à la balise table, mais à la balise TD qui correspond à la case de votre choix.
Code à l'intérieur du tableau :
- Code:
-
<TR><TD width=100px ; height=100px>Case n°1</TD><TD>Case n°2</TD></TR>
Choisir l'alignement à l'intérieur du tableau
Pour régler l'alignement à l'intérieur du tableau, il faut ajouter dans la partie TABLE plusieurs codes :
Valign=top(centré en haut), middle(centré au milieu) ou bottom (centré en bas) définit l'alignement vertical à l'intérieur des cellules.
Align=left(gauche) ou right(droite) ou center(centrer) ou justify(justify) pour régler l'alignement horizontal du texte. En revanche, il faut l'ajouter dans les cellules TR ou TD ; l'ajouter dans la partie TABLE reviendrait à définir son alignement face à la page.
- Code:
-
<TABLE valign=middle ; border=1>
<TBODY>
<TR><TD align=center>Case n°1</TD><TD>Case n°2</TD></TR>
<TR><TD>Case n°3</TD><TD>Case n°4</TD></TR>
</TBODY></TABLE>
- Citation :
Case n°1
| Case n°2 |
Case n°3 | Case n°4 |
Note : Il est ainsi possible de modifier l'alignement d'une seule cellule en conséquence, en rajoutant le code non pas à la balise table, mais à la balise TD qui correspond à la case de votre choix.
Code à l'intérieur du tableau :
- Code:
-
<TR><TD valign=middle>Case n°1</TD><TD>Case n°2</TD></TR>
Donner un titre à son tableau
Pour donner un titre à son tableau, il faut insérer une balise CAPTION entre la balise TABLE et la balise TBODY.
- Code:
-
<TABLE border=1>
<CAPTION>Légende</CAPTION>
<TBODY>
<TR><TD>Case n°1</TD><TD>Case n°2</TD></TR>
<TR><TD>Case n°3</TD><TD>Case n°4</TD></TR>
</TBODY></TABLE>
- Citation :
LégendeCase n°1 | Case n°2 |
Case n°3 | Case n°4 |
Fusionner des cellules
Deux codes, Rowspan et colspan, insérés dans la balise TD concernée, permettent respectivement que la cellule s'étende sur plusieurs lignes ou colonne (le numéro correspond au nombre de cellule sur lesquelles doit s'établir la cellule courante, 1 étant le numéro de la cellule elle-même)
- Code:
-
<TABLE border=1>
<TBODY>
<TR><TD rowspan=2>Case n°1</TD><TD>Case n°2</TD></TR>
<TR><TD>Case n°3</TD></TR>
</TBODY></TABLE>
- Citation :
Divers
Pour finir, les codes de mise en page de texte sont applicables à l'écriture du tableau ; chaque fois que vous additionnez plusieurs balises dans une seule balise (TABLE, ou autre), elles doivent être séparées par des ;
- Code:
-
<TABLE border=2 ; bordercolor=FFFFFF>