Formatage du texte avec le BBcode
Présentation
Ce site internet possède un petit formulaire pour aider les utilisateurs à mettre en forme un message. Celui-ci se présente de cett façon à chaque fois que vous souhaitez rédiger un message:

Formulaire de mise en forme sur InfoWebMaster
Vous l'avez peut-être remarqué, il est divisé en plusieurs partie. Tout en haut, vous avez les boutons pour mettre en forme votre message de la façon que vous souhaitez. Juste en dessous il y a la liste des smiley que vous pouvez insérer dans vos messages.
Balises d'effet sur le texte
Mettre en gras
Pour mettre en gras il faut utiliser l'icône suivant:
.
Cet icône fait apparaitre le code suivant sur le formulaire:
BBcode:
[b]Texte en gras[/b]
Résultat obtenu:
Texte en gras
Mettre en italique
Pour mettre en italique il faut utiliser l'icône suivant:
.
Cet icône fait apparaitre le code suivant sur le formulaire:
BBcode:
[i]Texte en italique[/i]
Résultat obtenu:
Texte en italique
Souligner
Pour souligner un texte il faut utiliser l'icône suivant:
.
Cet icône fait apparaitre le code suivant sur le formulaire:
BBcode:
[u]Texte souligné[/u]
Résultat obtenu:
Texte souligné
Barrer
Pour barrer un texte il faut utiliser l'icône suivant:
.
Cet icône fait apparaitre le code suivant sur le formulaire:
BBcode:
[s]Texte barré[/s]
Résultat obtenu:
Texte barré
Balises pour ajouter des éléments
Ajouter un lien
Pour jouter un lien il faut utiliser l'icône suivant:
.
Cet icône fait apparaitre le code suivant sur le formulaire:
BBcode:
[url]http://www.infowebmaster.fr[/url]
Résultat obtenu:
Néanmoins avec le code ci-dessus vous ne pouvez que utilisez des adresses internet. Pour personnalisé le texte inclus dans le lien il faut utilisez le code de cette façon:
BBcode:
[url=http://www.infowebmaster.fr]Site pour webmaster[/url]
Résultat obtenu:
Ajouter une image
Pour ajouter un lien il faut utiliser l'icône suivant:
.
Cet icône fait apparaitre le code suivant sur le formulaire:
BBcode:
[img]http://www.infowebmaster.fr/img/logo/bouton_infowebmaster_80x15.png[/img]
Résultat obtenu:
Insérer une citation
Pour insérer une citation il faut utiliser l'icône suivant:
.
Cet icône fait apparaitre le code suivant sur le formulaire:
BBcode:
[citation=AUTEUR]Citation diverse[/citation]
Résultat obtenu:
Citation : AUTEUR
Citation diverse
Néanmoins, pour vraiment bien utiliser cette option il faut préciser le nom de l'auteur, comme dans l'exemple ci-dessous:
BBcode:
[citation=Jeff tardif]Qui se rappelle du nom du deuxième homme a avoir mis un pied sur la lune? Personne… Vous devez arriver premier.[/citation]
Résultat obtenu:
Citation : Jeff tardif
Qui se rappelle du nom du deuxième homme a avoir mis un pied sur la lune? Personne… Vous devez arriver premier.
Balises pour aligner le contenu
Centrer
Pour centrer un élément (texte, image,...) il faut utiliser l'icône suivant:
.
Cet icône fait apparaitre le code suivant sur le formulaire:
BBcode:
[centrer]Texte à centrer[/centrer]
Résultat obtenu:
Justifier du texte
Pour centrer un élément (texte, image,...) il faut utiliser l'icône suivant:
.
Cet icône fait apparaitre le code suivant sur le formulaire:
BBcode:
[justifier]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor.[/justifier]
Résultat obtenu:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor.
Aligner à droite
Pour aligner le texte à droite il faut utiliser l'icône suivant:
.
Cet icône fait apparaitre le code suivant sur le formulaire:
BBcode:
[align_droite]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor.[/align_droite]
Résultat obtenu:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor.
Faire flotter un élément à droite
Pour faire flotter un élément de votre page à droite il faut utiliser l'icône suivant:
.
Cet icône fait apparaitre le code suivant sur le formulaire:
BBcode:
[flotter_droite][img]http://www.infowebmaster.fr/img/logo/bouton_infowebmaster_80x15.png[/img][/flotter_droite]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor.
Résultat obtenu:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor.
Balises de titre
Titre principale
Pour ajouter un titre principale il faut utiliser l'icône suivant:
.
Cet icône fait apparaitre le code suivant sur le formulaire:
BBcode:
[h2]Titre principale[/h2]
Résultat obtenu:
Titre principale
Sous-titre
Pour ajouter un titre principale il faut utiliser l'icône suivant:
.
Cet icône fait apparaitre le code suivant sur le formulaire:
BBcode:
[h3]Sous-titre[/h3]
Résultat obtenu:
Sous-titre
Sous-titre secondaire
Pour ajouter un titre principale il faut utiliser l'icône suivant:
.
Cet icône fait apparaitre le code suivant sur le formulaire:
BBcode:
[h4]Sous-titre secondaire[/h4]
Résultat obtenu:
Sous-titre secondaire
Balises de liste à puces
Liste ordinaire
Pour ajouter un titre principale il faut utiliser l'icône suivant:
.
Cet icône fait apparaitre le code suivant sous la même forme que le code ci-dessous:
BBcode:
[liste][puce]Puce numéro 1[/puce][/liste]
Résultat obtenu:
Pour ajouter des puces dans cette liste il convient de faire ceci:
BBcode:
[liste]
[puce]Puce numéro 1[/puce]
[puce]Puce numéro 2[/puce]
[puce]Puce numéro 3[/puce]
[/liste]
Résultat obtenu:
- Puce numéro 1
- Puce numéro 2
- Puce numéro 3
Liste numérotée
Pour ajouter un titre principale il faut utiliser l'icône suivant:
.
Cet icône fait apparaitre le code suivant sur le formulaire:
BBcode:
[point][puce]Puce numéro 1[/puce][/point]
Résultat obtenu:
Pour ajouter d'autres puces il convient d'utiliser un code tel que celui-ci:
BBcode:
[point]
[puce]Puce numéro 1[/puce]
[puce]Puce numéro 2[/puce]
[puce]Puce numéro 3[/puce]
[/point]
Résultat obtenu:
- Puce numéro 1
- Puce numéro 2
- Puce numéro 3
Balises indice et exposant
Mettre en indice
Pour mettre en indice un élément il faut utiliser l'icône suivant:
.
Cet icône fait apparaitre le code suivant sur le formulaire:
Résultat obtenu:
1232
Mettre en exposant
Pour mettre en exposant un élément il faut utiliser l'icône suivant:
.
Cet icône fait apparaitre le code suivant sur le formulaire:
Résultat obtenu:
1023