Si pour une raison x ou y vous êtes amené à rédiger un assez long texte, vous allez vouloir l'ordonner. Vous allez vouloir mettre des titres, peut-être même un sommaire, etc. Comment faire ?
Avant tout, faisons une petite distinction :
Les balises BBCode se démarquent par des crochets
[ ] et ont l'avantage d'être plus simples que le HTML, mais aussi moins portables.
Les balises HTML se démarquent par des chevrons
< > et sont compatibles avec tous les sites internet.
À propos, pour faire le >, il faut rester appuyé sur Shift.
Autre note importante : le BBCode et le HTML ne sont pas compatible entre eux. En d'autres termes, les options HTML ne fonctionnent pas en BBCode, et vice-versa.
N'oubliez pas également que toute balise doit être
fermée.Un [qqch] doit avoir un [/qqch], et idem pour le HTML.
Maintenant pour le sommaire :
Les titres
Il y a deux manières de faire des titres à part en modifiant manuellement la taille du texte (ce que je déconseille) : la manière HTML et la manière BBCode.
En BBCode, il y a les balises h2, h3 et h4, que je déconseille, parce qu'elles ne permettent pas de créer un sommaire qui comporte des liens, voyez au chapitre suivant pour savoir pourquoi.
- Code:
-
[h2]Un titre inintéressant.[/h2]
Ensuite, la manière HTML. Les titres en HTML ne seront pas forcément les mêmes sur tous les sites, mais voici à quoi ils ressemblent sur ce forum :
- Code:
-
<h1>Un méga titre centré</h1>
<h2>Un titre plus modeste</h2>
<h3>Un sous-titre</h3>
Un méga titre centré
Un titre plus modeste
Un sous-sous-titre
Et du texte normal, pour la comparaison.
D'ailleurs, si vous avez vu le tuto sur les couleurs, vous savez qu'en HTML on peut colorer le texte en mettant l'option style, ou avec une classe, et vous savez aussi que cela fonctionne avec toutes les balises HTML. Les h1, h2 et compagnie ne font pas exception !
- Code:
-
<h2 class="feu">Un titre rouge feu !</h2>
<h2 style="color: #FFFFFF;">Un titre bien blanc !</h2>
Un titre rouge feu !
Un titre bien blanc !
Enfin, j'ajouterais ceci : ne mettez pas de retour à la ligne entre votre titre et le texte, ça vous fera un gros écart. C'est dû à la façon dont cet élément est géré en HTML.
- Code:
-
<h2>Titre</h2>Texte sans retour à la ligne.
<h2>Titre</h2>
Texte avec un retour à la ligne.
Titre
Texte sans retour à la ligne.
Titre
Texte avec un retour à la ligne.
Il y a cependant un moyen de le contourner en mettant un display: inline; dans l'option style.
- Code:
-
<h2 style="display: inline;">Un titre sans décalage</h2>
Et le texte qui suit, avec un retour à la ligne.
<h2 style="color: #FFFFFF; display: inline;">Un titre blanc et sans décalage</h2>
Et le texte qui suit, avec un retour à la ligne.
Un titre sans décalage
Et le texte qui suit, avec un retour à la ligne.
Un titre blanc et sans décalage
Et le texte qui suit, avec un retour à la ligne.
Même si je ne conseille pas de le faire, ceux qui veulent absolument mettre un retour à la ligne après le titre peuvent faire ainsi.
Faire un sommaire
Et plus généralement, faire des liens à l'intérieur de la page.
Cela se fait uniquement avec le HTML. Le principe est simple : vous créez le lien avec une balise a accompagnée de l'option href, et vous créez la cible en mettant l'option id dans une autre balise.
Un exemple vaut mieux qu'un long discours :
- Code:
-
[list][*]<a href="#1">Titres</a>
[*]<a href="#2">Faire un sommaire</a>
[*]<a href="#3">Formater le texte</a>
[/list]
<h2 id="1">Les titres</h2>
(le chapitre que vous avez déjà lu)
<h2 id="2">Faire un sommaire</h2>
(le chapitre en cours)
Le résultat est cette page elle-même
Comme je le disais, la cible peut être n'importe quelle balise HTML.
C'est ça qui est génial en HTML : la plupart des options fonctionnent dans toutes la balises. (à part certaines comme le href qui ne fonctionne que dans le balises a)
Autre détail important :
votre identifiant (id) peut être n'importe quoi. Je vous conseille d'ailleurs de mettre autre chose qu'un nombre. Par exemple, si j'avais été consciencieux, j'aurais fait mon sommaire ainsi :
- Code:
-
[list][*]<a href="#titres">Titres</a>
[*]<a href="#sommaire">Faire un sommaire</a>
[*]<a href="#formater">Formater le texte</a>
[/list]
<h2 id="titres">Les titres</h2>
(le chapitre que vous avez déjà lu)
<h2 id="formater">Faire un sommaire</h2>
(le chapitre en cours)
En pratique, quand vous n'êtes pas dans un sujet qui est le vôtre, mettez un identifiant du genre "pseudo_id". En effet, s'il y a plusieurs fois le même id dans la même page, un seul sera pris en compte.
Exemple : GlanVonBrylan_1, GlanVonBrylan_2, etc
Et surtout, n'uobliez pas de mettre un dièse # avant voter identifiant dans le href !
Formater le texte
Commençons par les classiques, en BBCode. Notez qu'ils sont tous disponibles dans la barre d'outils.
- Code:
-
[left]Texte à gauche[/left]
[center]Texte centré[/center]
[right]Texte à droite[/right]
[justify]Texte justifié[/justify]
[b]gras[/b], [i]italique[/i], [u]souligné[/u], [strike]barré[/strike]
Texte à gauche
Texte centré
Texte à droite
Texte justifié
gras,
italique,
souligné,
barréNotez que les raccourcis Ctrl+B, Ctrl+I et Ctrl+U vous permettent (sous Firefox du moins) de placer respectivement les balises de gras, d'italique et de souligné.
Il y a également les balises spoiler, qui cachent du texte, pratique quand vous écrivez un long paragraphe qui n'intéressera pas tout le monde ou que vous voulez cacher la réponse d'une énigme.
- Code:
-
[spoiler]Un simple spoiler.[/spoiler]
[spoiler=Titre]Un spoiler avec un titre[/spoiler]
- Spoiler:
Un simple spoiler.
- Titre:
Un spoiler avec un titre
Il suffit de cliquer sur la barre du spoiler pour afficher son contenu, et de cliquer à nouveau pour le masquer.
Dans le même genre, il y a la balise hide : son contenu ne s'affiche qu'aux admins ou à ceux qui ont posté dans le sujet. Je n'ai aucune idée d'à quoi ça pourrait servir.
Il y a également les balises code, dont je me suis beaucoup servi, qui permettent d'afficher les diverses balises telles quelles au lieu d'appliquer leur effet.
À ce propos, j’ai également créé la classe sousCode qui servent à indenter le texte pour l’aligner avec les balises code :
- Code:
-
<span class="sousCode">Ce texte est indenté!</span>
Ce texte est indenté!Ensuite, il y a les listes.
- Code:
-
Une liste normale[list][*]Premier élément
[*]Deuxième élément[/list]
Une liste numérotée
[list=1][*]Premier élément
[*]Deuxième élément[/list]
Une liste numérotée avec des lettres
[list=a][*]Premier élément
[*]Deuxième élément[/list]
Une liste normale
- Premier élément
- Deuxième élément
Une liste numérotée
- Premier élément
- Deuxième élément
Une liste numérotée avec des lettres
- Premier élément
- Deuxième élément
Pour numéroter votre liste, vous pouvez aussi mettre un A pour avoir des lettres majuscules, ou I (i majuscule) pour avoir des chiffres latins.
- Code:
-
[size=16]Du texte en taille 16[/size]
[font=Georgia]Du texte en police Georgia[/font]
Du texte en taille 16Du texte en police GeorgiaEt du texte normal pour la comparaison.
- Code:
-
On peut aussi mettre des [sub]indices[/sub] et des [sup]exposants.[/sup]
On peut aussi mettre des
indices et des
exposants.Enfin, on peut mettre un séparateur horizontal avec une simple balise hr.
- Code:
-
HTML classique : <hr>
XHTML : <hr />
BBCode : [hr]
HTML classique :
XHTML :
BBCode :
Je préconise la syntaxe XHTML car c'est la seule qui montre bien que c'est une balise particulière qui n'a pas besoin d'être fermée.
Les tableaux
Un partie un peu compliquée.
Notez que la syntaxe du BBCode est strictement identique à celle du HTML en ce qui concerne les tableaux : un met table pour indiquer le tableau, tr pour chaque ligne et td pour chaque cellule. Je recommande cependant la syntaxe BBCode car elle permet d'aérer le code sans que tous les retours à la ligne n'apparaissent.
(j'ai fait des tests avec du HTML et ça laisse un gros bloc de retours à la ligne juste avant le tableau en fait
)
Le principe est simple : vous commencez par mettre les balises table. Entre celles-ci, pour chaque ligne, vous mettez des balises tr. Et entre les balises tr, vous mettez des balises td pour chaque cellule.
- Code:
-
[table border="1"]
[tr]
[td]1re cellule de la 1re ligne[/td]
[td]2e cellule de la 1re ligne[/td]
[/tr]
[tr]
[td]1re cellule de la 2e ligne[/td]
[td]2e cellule de la 2e ligne[/td]
[/tr]
[/table]
1re cellule de la 1re ligne | 2e cellule de la 1re ligne |
1re cellule de la 2e ligne | 2e cellule de la 2e ligne |
Notez que les retours à la ligne entre les balises ne sont pas obligatoires mais aident grandement à la lisibilité :
- Code:
-
Le même tableau en retirant tous les retours à la ligne inutiles :
[table border="1"][tr][td]1re cellule de la 1re ligne[/td][td]2e cellule de la 1re ligne[/td][/tr][tr][td]1re cellule de la 2e ligne[/td][td]2e cellule de la 2e ligne[/td][/tr][/table]
C'est tout de suite moins clair, n'est-ce pas ?
Même si en fait, l'aération du code est faite automatiquement en faisant "Prévisualiser" ou "Envoyer", c'est tout aussi bien de le faire soi-même, ça vous donne une bonne habitude et vous lirez mieux votre code pendant que vous êtes encore en train de l'écrire
Vous aurez également remarqué le border="1" dans la balise table. Cela indique simplement l'épaisseur des bordures (ici de 1 pixel). Si vous ne mettez pas cette option, il n'y aura pas de bordures.
Aussi, vous aurez sûrement remarqué que chaque cellule a sa propre bordure, et l'ensemble de la taille aussi. Si vous voulez éviter cela, mettez simplement l'option class="collapse" :
- Code:
-
[table class="collapse" border="1"][tr][td]1re cellule de la 1re ligne[/td]
[td]2e cellule de la 1re ligne[/td]
[/tr]
[tr][td]1re cellule de la 2e ligne[/td]
[td]2e cellule de la 2e ligne[/td]
[/tr]
[/table]
1re cellule de la 1re ligne | 2e cellule de la 1re ligne |
1re cellule de la 2e ligne | 2e cellule de la 2e ligne |
Voyons maintenant : mettons que vous vouliez mettre un titre à votre tableau : "bah, je vais juste mettre une seule cellule dans la 1re ligne !"
Oups ! Ça ne fonctionne pas. Heureusement, il y a une solution : l'option colspan. Elle permet d'indiquer combien de colonnes occupe la cellule.
- Code:
-
[table border="1"][tr]
[td colspan="3"][center]Titre[/center][/td]
[/tr]
[tr][td]case 1[/td]
[td]case 2[/td]
[td]case 3[/td]
[/tr]
[/table]
Parfait ! Notez qu'il y a l'option inverse, rowspan, qui indique combien de lignes occupe la cellule.
- Code:
-
[table border="10"][tr][td rowspan="3"]Rowspan ![/td]
[td colspan="2"]Colspan ![/td]
[td]Normale.[/td]
[/tr]
[tr][td]Normale 1 ![/td]
[td]Normale 2 ![/td]
[/tr]
[tr][td]Normale 3 ![/td]
[td]Normale 4 ![/td]
[td]Normale 5 ![/td]
[/tr]
[/table]
Rowspan ! | Colspan ! | Normale. |
Normale 1 ! | Normale 2 ! |
Normale 3 ! | Normale 4 ! | Normale 5 ! |
[color=green]Note :[color] Vous risquez d'avoir des résultats pour le moins étrange si vous essayez de faire une cellule occuper plus de ligne qu'il n'y en a (en mettant un rowspan de 3 dans un tableau avec seulement deux paires de balises tr par exemple) ou si vous combinez le rowspan et le colspan.
Aussi, faites attention à mettre les colspan et rowspan dans les td : vous pouvez essayer de les mettre dans un tr, ça ne fonctionnera pas.
Toute dernière chose : les options (pour la balise table) cellspacing (pour l'espacement des cellules entre elles) et cellpadding pour l'espacement entre les bordures de la cellule et le texte de celle-ci.
- Code:
-
cellpadding="30"
[table border="1" cellpadding="30"][tr][td]Ligne 1 - Cellule 1 [/td]
[td]Ligne 1 - Cellule 2 [/td]
[td]Ligne 1 - Cellule 3 [/td]
[/tr]
[tr][td]Ligne 2 - Cellule 1 [/td]
[td]Ligne 2 - Cellule 2 [/td]
[td]Ligne 2 - Cellule 3 [/td]
[/tr]
[/table]
cellspacing="30"
[table border="1" cellspacing="30"][tr][td]Ligne 1 - Cellule 1 [/td]
[td]Ligne 1 - Cellule 2 [/td]
[td]Ligne 1 - Cellule 3 [/td]
[/tr]
[tr][td]Ligne 2 - Cellule 1 [/td]
[td]Ligne 2 - Cellule 2 [/td]
[td]Ligne 2 - Cellule 3 [/td]
[/tr]
[/table]
normal
[table border="1"][tr][td]Ligne 1 - Cellule 1 [/td]
[td]Ligne 1 - Cellule 2 [/td]
[td]Ligne 1 - Cellule 3 [/td]
[/tr]
[tr][td]Ligne 2 - Cellule 1 [/td]
[td]Ligne 2 - Cellule 2 [/td]
[td]Ligne 2 - Cellule 3 [/td]
[/tr]
[/table]
cellpadding="30"
Ligne 1 - Cellule 1 | Ligne 1 - Cellule 2 | Ligne 1 - Cellule 3 |
Ligne 2 - Cellule 1 | Ligne 2 - Cellule 2 | Ligne 2 - Cellule 3 |
cellspacing="30"
Ligne 1 - Cellule 1 | Ligne 1 - Cellule 2 | Ligne 1 - Cellule 3 |
Ligne 2 - Cellule 1 | Ligne 2 - Cellule 2 | Ligne 2 - Cellule 3 |
normal
Ligne 1 - Cellule 1 | Ligne 1 - Cellule 2 | Ligne 1 - Cellule 3 |
Ligne 2 - Cellule 1 | Ligne 2 - Cellule 2 | Ligne 2 - Cellule 3 |
Et voilà ! Vous savez tout (ou presque) ce qu'il y a à savoir sur la mise en forme de vos textes !
Voyez juste dans le post d'en dessous les différentes classes que vous pouvez utiliser.