[Bbcodes] Utilisation des balises

[Hotaru]

Bonjour à tous !

Vous trouverez dans ce topic le récap des bbcodes disponibles dans notre forum.

Certaines balises peuvent s'imbriquer entre elles si vous souhaitez par exemple donner plusieurs styles à votre texte. Dans ce cas, il faut respecter l'ordre des balises : elles ne doivent pas se croiser, mais se suivre, ou s'imbriquer (si c'est ce que vous souhaitez faire, une balise doit toujours se fermer à l'intérieur d'une autre).

La plupart de ces balises peuvent s'insérer dans votre post à l'aide des boutons correspondants, juste au dessus de votre zone de texte. N'oubliez pas de sélectionner votre texte au préalable, sinon ils ne se positionneront pas au bon endroit ^^

Sommaire

Cliquez sur la rubrique qui vous intéresse pour y aller plus rapidement :

1. Mise en forme du texte

• Centrer
  
• Aligner à droite
  
• Gras
  
• Italique
  
• Souligné
  
• Barré
  
• Liste simple
  
• Liste ordonnée
  
• Couleur du texte
  
• Titre 1
  
• Titre 2
  
• Tableau
  
• Texte caché (spoiler)
  
• Colonnes

2. Insertion d'éléments externes

• Insertion d'un lien hypertexte
  
• Insertion d'une image
  
• Insertion d'une petite miniature cliquable
  
• Insertion d'une miniature de taille moyenne cliquable, avec légende
  
• Insertion d'une grande image cliquable, avec légende
  
• Insertion de musique
  
• Insertion de vidéo Youtube
  
• Insertion d'une barre de progression

1. Mise en forme du texte

Centrer

Contenu caché

Code: Tout sélectionner

[center]Votre texte[/center]

Exemple :

Hello !

Î Aller en haut Î

Aligner à droite

Contenu caché

Code: Tout sélectionner

 [droite]Votre texte[/droite]

Hello !

Î Aller en haut Î

Gras

Contenu caché

Code: Tout sélectionner

 [b]Votre texte[/b]

Exemple :
Hello !

Î Aller en haut Î

Italique

Contenu caché

Code: Tout sélectionner

 [i]Votre texte[/i]

Exemple :
Hello !

Î Aller en haut Î

Souligné

Contenu caché

Code: Tout sélectionner

 [u]Votre texte[/u]

Exemple :
Hello !

Î Aller en haut Î

Barré

Contenu caché

Code: Tout sélectionner

 [barrer]Votre texte[/barrer]

Exemple :
Hello !

Î Aller en haut Î

Liste simple

Contenu caché

Code: Tout sélectionner

 [list]Texte 1
Texte 2
Texte 3
Texte 4
...[/list]

Exemple :

Texte 1
Texte 2
Texte 3
Texte 4
...

Î Aller en haut Î

Liste ordonnée

Contenu caché

Vous avez la possibilité d'ajouter une numérotation à vos listes. Il suffit d'indiquer à la liste si vous souhaitez une liste de type 1. / 2. / 3. ou bien a. / b. / c.

Code: Tout sélectionner

 [list=1][*]Texte 1
[*]Texte 2
[*]Texte 3
[*]Texte 4
[*]Texte 5
[*]Texte 6
[*]Texte 7[/list]

Exemple :

1. Texte 1
2. Texte 2
3. Texte 3
4. Texte 4
5. Texte 5
6. Texte 6
7. Texte 7

Code: Tout sélectionner

 [list=a][*]Texte 1
[*]Texte 2
[*]Texte 3
[*]Texte 4
[*]Texte 5
[*]Texte 6
[*]Texte 7[/list]

Exemple :

1. Texte 1
2. Texte 2
3. Texte 3
4. Texte 4
5. Texte 5
6. Texte 6
7. Texte 7

Î Aller en haut Î

Couleur du texte

Contenu caché

Ce bbcode permet de modifier la couleur de votre texte sélectionné. Vous pouvez indiquer des couleurs simples comme "red", "blue", "green", ou bien des codes couleurs héxadécimaux de type "#000000".

Code: Tout sélectionner

 [color=red]Votre texte[/color]

Code: Tout sélectionner

 [color=#FF0000] Votre texte [/color]

Exemple :
Votre texte

Î Aller en haut Î

Titre 1

Contenu caché

Vous permet de mettre en forme un titre rapidement.

Code: Tout sélectionner

 [h1]Votre titre[/h1]

Exemple :

Votre titre

Î Aller en haut Î

Titre 2

Contenu caché

Ce bbcode fonctionne de la même façon que le précédent, seulement la mise en forme est différente.

Code: Tout sélectionner

 [h2]Votre titre[/h2]

Exemple :

Votre titre

Î Aller en haut Î

Tableau

Contenu caché

Là, il va falloir utiliser plusieurs balises, que nous allons imbriquer :

Code: Tout sélectionner

[table][tr][th]Votre titre 1[/th][th]Votre titre 2[/th][/tr]
[tr][td]Votre texte 1[/td][td]Votre texte 2[/td][/tr][/table]

Aperçu :

Votre titre 1	Votre titre 2
Votre texte 1	Votre texte 2

Balises en détail :

Tableau :

Code: Tout sélectionner

[table]lignes et colonnes de votre tableau[/table]

Ligne :

Code: Tout sélectionner

 [tr][/tr]

Colonne avec une mise en forme prédéfinie :

Code: Tout sélectionner

 [th][/th]

Colonne simple :

Code: Tout sélectionner

 [td][td]

Vous l'avez compris, il y a un ordre à respecter afin que votre tableau s'affiche correctement :

1. commencez par indiquer que vous voulez insérer un tableau à l'aide des balises "table"
2. dans cette balise, précisez que vous souhaitez une ligne à l'aide des balises "tr"
3. à l'intérieur de cette balise, séparez les colonnes par des balises "th" ou "td", selon le rendu que vous souhaitez donner.

Î Aller en haut Î

Texte caché

Contenu caché

Code: Tout sélectionner

 [spoiler]Votre texte[/spoiler]

Î Aller en haut Î

Colonnes

Contenu caché

Code: Tout sélectionner

[col=Nombre de colonnes]Votre texte[/col]

Exemple :

Lorem ipsum dolor sit amet, consectetur 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. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.

Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.

Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.

Î Aller en haut Î

2. Insertion d'éléments externes

insertion d'un lien hypertexte

Contenu caché

Code: Tout sélectionner

[url=Votre lien url]Votre texte[/url]

Exemple :
Rubrique "Présentations"

Î Aller en haut Î

Insertion d'une image

Contenu caché

Avec ce bbcode, vous pouvez insérer une image dans votre post. Notez tout de même que si votre image est trop grande pour le forum, elle sera tronquée. Cette méthode n'est donc pas privilégiée pour les grands formats. Pour remédier à ces situations, d'autres options s'offrent à vous plus bas.

Code: Tout sélectionner

[img]Url de votre image[/img]

Exemple :

Credit : Kakashi, par Senjith.

Î Aller en haut Î

Insertion d'une petite miniature cliquable

Contenu caché

Ce bbcode vous permet d'insérer une miniature (hauteur : 150px) avec un seul lien url. Plus besoin de créer, puis d'uploader une seconde image plus petite. Vous pouvez afficher plusieurs miniatures par ligne. L'image en taille réelle s'ouvre dans une nouvelle page, ou un nouvel onglet, en fonction des paramètres de votre navigateur.

/!\Attention, il ne faut pas laisser d'espace à l'intérieur des balises.
/!\N'utilisez pas d'images trop lourdes, vous risquez de faire ralentir le chargement de la page...

Code: Tout sélectionner

 [imgvignette]Url de votre image[/imgvignette]

Exemple :

Credits (de gauche à droite) : Heisuke, Shu, Chad

Î Aller en haut Î

Insertion d'une miniature de taille moyenne cliquable, avec légende

Contenu caché

Même principe que le bbcode précédent, avec une miniature plus grande (hauteur : 250px), et une légende.
L'image en taille réelle s'ouvre dans une nouvelle page, ou un nouvel onglet, en fonction des paramètres de votre navigateur.

/!\Attention, il ne faut pas laisser d'espace à l'intérieur des balises.
/!\N'utilisez pas d'images trop lourdes, vous risquez de faire ralentir le chargement de la page...
/!\ Il faut préciser une légende, sinon ce bbcode ne s'affichera pas correctement.

Code: Tout sélectionner

[imgcapmed]Url de votre image, texte de votre légende[/imgcapmed]

Exemple :

Illustration de Lucy, par melidu34

De Troie à Moi, par Misscube

Î Aller en haut Î

Insertion d'une grande image cliquable, avec légende

Contenu caché

Même principe que le bbcode précédent, avec une miniature encore plus grande (largeur : 500px). Une seule image est visible par ligne, et elle est automatiquement centrée horizontalement. L'image en taille réelle s'ouvre dans une nouvelle page, ou un nouvel onglet, en fonction des paramètres de votre navigateur.

/!\Attention, il ne faut pas laisser d'espace à l'intérieur des balises.
/!\N'utilisez pas d'images trop lourdes, vous risquez de faire ralentir le chargement de la page...
/!\ Il faut préciser une légende, sinon ce bbcode ne s'affichera pas correctement.

Code: Tout sélectionner

 [imgcapbig]Url de votre image, texte de votre légende[/imgcapbig]

Exemple :

Kotoko Ashikaga, par Sadae-Chan

Î Aller en haut Î

Insertion de musique

Contenu caché

Code: Tout sélectionner

 [mp3]Url de votre musique[/mp3]

Exemple :

Credits : LIION - Can You Feel the Sound (Radio Edit)

Î Aller en haut Î

Insertion de vidéo Youtube

Contenu caché

Code: Tout sélectionner

 [youtube]ID de la vidéo[/youtube]

Exemple :


À savoir :

2 façons de trouver l'ID d'une vidéo Youtube :

1. aller sur la vidéo souhaitée, puis cliquer sur "Partager". L'ID est la partie qui se trouve après le dernier "/" ;
2. ou bien dans la barre d'adresse, copier la partie se trouvant après "=".

Î Aller en haut Î

Insertion d'une barre de progression

Contenu caché

Code: Tout sélectionner

 [progress]Nombre entre 1 et 100[/progress]

Exemple :

60%

Î Aller en haut Î