[Tuto] Balises utiles: album d'images, renvoi sur un point d'article, tableau,..

[Saïmiri]

Bonsoir tout le monde,

Certains d'entre vous me demandent régulièrement le code de balises afin de mettre en forme leurs textes.

J'ai donc décidé de créer un tuto à cet effet afin de regrouper toutes les balises qui pourraient vous être utiles lors de vos rédactions ainsi que l'explication de celles-ci.

J'espère que ça vous servira autant qu'à moi!


Voici les différentes balises présentes dans ce tuto (cliquez sur celle qui vous intéresse et vous accéderez directement au contenu du point):
1. Balise renvoyant sur un autre point de votre article
2. Balises permettant de réduire la taille des vidéos sur l'écran
3. Balise permettant d'insérer une image
4. Balise permettant d'insérer un album d'images
5. Balise permettant d'insérer un tableau




1. Balise renvoyant sur un autre point de votre article

Lorsque votre article est long, il peut être judicieux d'y insérer un menu permettant d'accéder directement à un point de celui-ci.

Ceci est possible grâce à la balise [*anchor] (sans l'*).

Pour l'utiliser, il faut d'abord écrire les points de votre menu en ajoutant la balise [*iurl=#nomdevotrepoint] (sans l'*) suivie du nom du point (pas d'espace ni de majuscules ou d'accents). Bien sûr, n'oubliez pas de fermer la balise en écrivant [/*iurl] (sans l'*).


Prenons l'exemple du menu de ce tuto:
1. Balise renvoyant sur un autre point de votre article
2. Balises permettant de réduire la taille des vidéos sur l'écran
3. Balise permettant d'insérer une image

Pour obtenir le résultat ci-dessus, voici le code à encoder:

Code: [Sélectionner]

[iurl=#autrepoint]1. Balise renvoyant sur un autre point de votre article[/iurl]
[iurl=#reductionvideo]2. Balises permettant de réduire la taille des vidéos sur l'écran[/iurl]
[iurl=#image]3. Balise permettant d'insérer une image[/iurl]

Une fois ceci écrit, il faut indiquer au forum l'endroit où ces liens devront renvoyer précisément dans l'article.

Pour ce faire, placez-vous à l'endroit voulu sur votre texte (juste au dessus de là où vous désirez atterrir) et inscrivez:

Code: [Sélectionner]

[anchor=autrepoint][/anchor]
Vous pouvez écrire le nom du point entre les deux balises si vous le désirez.
Par exemple:

Code: [Sélectionner]

[anchor=autrepoint]Autre Point[/anchor]
Si votre lien renvoie juste au-dessus ou en dessous d'une image, vous pouvez laisser le contenu de la balise vide:

Code: [Sélectionner]

[anchor=autrepoint][/anchor]

Vous pouvez bien sûr ajouter des couleurs à vos titres en sélectionnant le texte à colorer puis en cliquant sur "changer la couleur" et en choisissant celle que vous désirez.

Exemple:
1. Balise renvoyant sur un autre point de votre article
2. Balises permettant de réduire la taille des vidéos sur l'écran
3. Balise permettant d'insérer une image

Code: [Sélectionner]

[iurl=#autrepoint][color=#FF7EE6]1. Balise renvoyant sur un autre point de votre article[/color][/iurl]
[iurl=#reductionvideo][color=#FF7EE6]2. Balises permettant de réduire la taille des vidéos sur l'écran[/color][/iurl]
[iurl=#image][color=#FF7EE6]3. Balise permettant d'insérer une image[/color][/iurl]




2. Balises permettant de réduire la taille des vidéos sur l'écran

Lorsque vous voulez afficher une vidéo sur le forum, il vous suffit de copier le lien et de le coller dans votre article à l'emplacement désiré comme ceci:

Code: [Sélectionner]

https://youtu.be/3U2V1RCOs0Q(Je vous conseille cependant de la centrer pour que ça soit plus joli.)

Comme vous pouvez le constater, la vidéo prend tout l'espace disponible en largeur de votre article.
Cela pourrait atténuer l'effet que vous voulez donner à votre texte.
C'est pourquoi il existe une balise appelée [*youtube] (sans l'*) permettant de réduire la taille d'une vidéo.


Voici comment l'utiliser:
Vous écrivez [*youtube] (sans l'*) et ensuite uniquement le nom de votre vidéo sur internet (c'est tout ce qui se trouve après un "=" ou un "/" puis vous refermez la bannière en écrivant [/*youtube] (sans l'*).

Exemple avec la balise youtube:

Code: [Sélectionner]

[youtube]3U2V1RCOs0Q[/youtube](Je vous conseille de la centrer pour que ça rende mieux à l'écran)

Vous voyez? La taille de la vidéo a été réduite d'environ un tiers.
Comment ça c'est pas suffisant?


Pas d'inquiétude, vous pouvez encore réduire la taille de vos vidéos avec la balise [*youtubemini] (sans l'*).

Voici comment l'utiliser:
Vous écrivez [*youtubemini] (sans l'*) et ensuite uniquement le nom de votre vidéo sur internet (c'est tout ce qui se trouve après un "=" ou un "/" puis vous refermez la bannière en écrivant [/*youtubemini] (sans l'*).

Exemple avec la balise youtubemini:

Code: [Sélectionner]

[youtubemini]3U2V1RCOs0Q[/youtubemini](Je vous conseille à nouveau de la centrer pour que ça rende mieux à l'écran)





3. Balise permettant d'insérer une image

Lorsque vous publiez une image sur le forum, il est important que le lien de celle-ci reste valide années après années.
Il existe une chose toute simple pour cela: Le gestionnaire d'images du forum.

Il se trouve en dessous de chaque post que vous écrivez (excepté les mps) et ressemble à ceci:

Mais comment ça marche?
Préalablement, enregistrez l'image désirée sur votre pc.

Ensuite, c'est très simple à utiliser. Il vous suffit de cliquer sur "Choisissez un fichier" puis, vous sélectionnez l'image que vous voulez publier sur le forum et vous cliquez sur ouvrir.

Vous verrez donc le nom de votre image apparaître comme ceci:

Vous pouvez alors cliquer sur "Envoyer".

Enfin, il vous reste à cliquer sur "Intégrer le BBCODE IMG" après vous être placé à l'endroit où vous désirez insérer votre image:

Le code générant votre image sur le forum apparaît donc.
(Je vous conseille de centrer votre image afin que ça rende mieux à l'écran (sauf si vous avez un intérêt à ce que ce soit excentré)





4. Balise permettant d'insérer un album d'images

Lorsque vous devez insérer plusieurs images, il est préférable de créer un album d'images sur lesquelles nous pourrons cliquer pour passer de l'une à l'autre afin d'éviter une trop grande succession d'images sur votre article.

Pour ce faire, vous il existe la balise [*carousel].


Voici comment l'utiliser:
Ecrivez [*carousel] (sans l'*) puis le lien de chacune des images qui composeront votre album et enfin, n'oubliez pas de fermer la balise [/*carousel] (sans l'*).

Voici un exemple:




http://www.pafteam.com/forum/uploads/member_1123/1494966258.png


Voici le code utilisé:

Code: [Sélectionner]

[carousel]
[img]http://www.pafteam.com/forum/uploads/member_3/1492878342.png[/img]
[img]http://www.pafteam.com/forum/uploads/member_1123/1497713633.png[/img]
[img]http://www.pafteam.com/forum/uploads/member_1123/1497713661.png[/img]
http://www.pafteam.com/forum/uploads/member_1123/1494966258.png
[/carousel]

Bah oui mais moi jvoulais du texte!

Pour insérer du texte sous vos images histoire de les présenter un petit peu, c'est un poil plus compliqué mais pas infaisable .

Votre balise de base sera toujours [*carousel] (sans l'*) qui contiendra plusieurs balises appelées [*carousel_img] (sans l'*). Ces balises carousel_img contiendront chacune une balise [*src] (qui comportera elle-même la balise [*img] avec le lien d'une image (voir point précédent pour son fonctionnement) et une balise [*title] permettant d'écrire votre texte.

Je vois que je vous ai perdu.

Rien de tel qu'un petit exemple pour vous aider à visualiser:

   
      
   
   
      
   
   
      
   
   http://www.pafteam.com/forum/uploads/member_1123/1494966258.png
      
   


Voici le code utilisé:

Code: [Sélectionner]

[carousel]
[carousel_img]
[src][img]http://www.pafteam.com/forum/uploads/member_3/1492878342.png[/img][/src]
[title]Le trombinoscope des Empafés présents à la DH 2017 à Tours ![/title]
[/carousel_img]
[carousel_img]
[src][img]http://www.pafteam.com/forum/uploads/member_1123/1497713633.png[/img][/src]
[title]La belle photo de 0Connors[/title]
[/carousel_img]
[carousel_img]
[src][img]http://www.pafteam.com/forum/uploads/member_1123/1497713661.png[/img][/src]
[title]La belle photo de Bekeno0[/title]
[/carousel_img]
[carousel_img]
[src]http://www.pafteam.com/forum/uploads/member_1123/1494966258.png[/src]
[title]Merci à vous tous ![/title]
[/carousel_img]
[/carousel]




5. Balise permettant d'insérer un tableau

Alors ici on attaque un gros morceau car le forum n'est pas très pratique pour nous aider à compléter un tableau sans s'y perdre dans les balises.

La première chose à faire lorsque vous voulez créer un tableau est de cliquer sur cet icône (qui s'appelle "Insérer un tableau"):

Celui-ci vous générera ces quelques lignes de codes que je vais vous expliquer:

Code: [Sélectionner]

[table]
[tr]
[td][/td][td][/td]
[/tr]
[/table]
[*table] et [/*table](sans l'*) sont les balises principales. Le tableau entier en fait (la première balise pour le commencement du tableau et la deuxième pour la fin de celui-ci).
[*tr] (sans l'*) et [/*tr] (sans l'*) correspondent à une ligne (horizontale) du tableau.
[*td] et [/*td] correspondent à une colonne (verticale) du tableau.


Un petit exemple avec les personnes qui participeront à un événement IRL et les jours pendant lesquels elles seront présentes:
(Pour faciliter les choses, je ne mets aucune couleur dans ce tableau afin de simplifier au maximum le code)

Pseudo	Jeudi	Vendredi	Samedi	Dimanche
Saïmiri	-	X	X	-
Jojo	X	X	X	X
Tempusago	-	X	-	-

Voici le code utilisé:

Code: [Sélectionner]

[table]
[tr][td]Pseudo[/td][td]Jeudi[/td][td]Vendredi[/td][td]Samedi[/td][td]Dimanche[/td][/tr]
[tr][td]Saïmiri[/td][td]-[/td][td]X[/td][td]X[/td][td]-[/td][/tr]
[tr][td]Jojo[/td][td]X[/td][td]X[/td][td]X[/td][td]X[/td][/tr]
[tr][td]Tempusago[/td][td]-[/td][td]X[/td][td]-[/td][td]-[/td][/tr]
[/table]

Ce n'est pas toujours évident de s'y retrouver. C'est pourquoi je vous conseille de créer un tableau sur un autre programme, de faire une impression d'écran, de couper l'image avec Paint ou tout autre programme pour qu'elle ne contienne que votre tableau, l'enregistrer sur votre pc comme une image et ensuite l'héberger comme vu au point 3 de ce tuto.



Nous voilà à la fin de ce tuto.

N'hésitez pas à m'en faire part si vous avez des questions ou d'autres propositions de tutoriels.

Je remercie BuldoZ et Ephis pour la création et l'explication de ces différentes balises qui me facilitent la vie!