Page 1 sur 1

les outils de mise en forme de vos postes

Posté : 21 juil. 2024, 12:08
par Lolo
lesoutilsdemiseenforme.jpg



Je vais vous présenter les différents éléments qui composent la barre d'outils de mise en forme de votre contenu, leurs fonctions et comment les utiliser.
Voici donc la barre de menu en question qui est juste au-dessus de la zone de texte lorsque vous créez un sujet ou répondez à un message.


outils-mise-en-forme.jpg


Lorsque vous passez votre souris sur l'élément vous avez une brève description et comment c'est utilisé de manière générale.
Voyons chaque élément en détails.


outils-mise-en-forme1.jpg
= pour mettre votre texte en gras. Ce qui donne ceci : texte en gras mais lors de la rédaction de votre texte vous allez voir ceci

Code : Tout sélectionner

[b]texte en gras[/b]
les "b" sont des balises, mises entre [] (ouverture) et [/] (fermeture) tout ce qui se trouve entre les 2 sera mis en gras. Bien évidemment lorsque vous posterez vous ne verrez plus les balises et votre texte sera en gras.
Il en sera de même pour toutes les balises présentées.


outils-mise-en-forme2.jpg
= vous permet de mettre votre texte en italique : votre texte en italique
Vous pouvez combiner le texte gras et en italique comme ceci ce qui donne

Code : Tout sélectionner

[b][i]comme ceci[/i][/b]

outils-mise-en-forme3.jpg
= vous permet de souligner votre texte comme ceci, ce qui donne

Code : Tout sélectionner

[u]comme ceci[/u]

outils-mise-en-forme4.jpg
= vous permet de faire des citations. Si vous voulez citer un texte il vous suffit de faire ceci

Code : Tout sélectionner

[quote]votre citation ligne 1
votre citation ligne 2
etc.[/quote]
ce qui donnera
votre citation ligne 1
votre citation ligne 2
etc.
vous pouvez également mettre du texte en gras etc.


outils-mise-en-forme5.jpg
= il sert à placer différentes lignes de code, par exemple du HTML, PHP, etc.
Par exemple

Code : Tout sélectionner

<?php
echo "Bienvenue sur le forum Le web à Lolo";
?>

outils-mise-en-forme6.jpg
= permet de faire des listes de ce genre
  • ligne 1
  • ligne 2
  • ligne 3
  • etc.
pour éviter à chaque début de ligne de taper [*] il vous suffit de cliquer sur
outils-mise-en-forme8.jpg

Vous pouvez également faire une sous-liste par exemple
  • ligne 1
  • ligne 2
    • ligne 2-1
    • ligne 2-2
  • ligne 3
pour faire ce genre de liste voici le code, vous allez vite comprendre

Code : Tout sélectionner

[list]ligne 1
[*]ligne 2
[list]ligne 2-1
[*]ligne 2-2[/list]
[*]ligne 3[/list]

outils-mise-en-forme7.jpg
= pour faire des listes numérotées. Exemple
  1. ligne 1
  2. ligne 2
  3. ligne 3
  4. etc.
comme pour le bouton juste au dessus, le fonctionnement est identique sauf que vous devez mettre le chiffre 1 après list=
Exemple pour faire des sous-liste numérotées
  1. ligne 1
  2. ligne 2
  3. ligne 3
    1. ligne 3-1
    2. ligne 3-2
  4. ligne 4
et le code est

Code : Tout sélectionner

[list=1]ligne 1
[*]ligne 2
[*]ligne 3
[list=1]ligne 3-1
[*]ligne 3-2[/list]
[*]ligne 4[/list]

outils-mise-en-forme8.jpg
= c'est l'élément de liste que nous avons vu sur les 2 derniers boutons de liste.


outils-mise-en-forme9.jpg
= c'est l'élément qui vous permet d'ajouter une image dans votre rédaction.
Ce bouton ne vous servira qu'a ajouter une image via un lien internet. Par exemple sur un site externe, vous copiez l'adresse de l'image d'un autre site puis vous la collez ici. Par exemple

Image

le code est comme ceci

Code : Tout sélectionner

[img]https://www.liendevotreimage.com/votreimage.jpg[/img]
Si vous voulez ajouter une image qui passe par notre système de stockage de fichier il vous faudra alors en dessous de cette zone de texte aller sur Fichiers joints puis envoyer votre image et ensuite sur la ligne où vous voulez mettre votre image vous cliquez sur Insérer dans le message.
Vous pouvez aussi centrer votre image en surlignant tout le code et cliquer sur le bouton centrer.


outils-mise-en-forme10.jpg
= ce bouton vous permet de créer des liens internet, par exemple
https://www.lewebalolo.com même si en réalité lorsque vous ajoutez votre lien sans cliquer sur le bouton le forum reconnait le protocole https:// et sait que c'est un lien et le transforme directement.
Là où il pourra vous être utile c'est lorsque les liens sont trop long et je vous conseils de vous en servir car un lien trop long ce n'est vraiment pas esthétique. Voici un exemple
texte que vous voulez
Pour faire ce genre de lien vous procédez comme ceci

Code : Tout sélectionner

[url=https://www.lewebalolo.com]texte que vous voulez[/url]

outils-mise-en-forme11.jpg
= palette de couleur, pour l'utiliser vous pouvez surligner le texte que vous voulez colorer et vous cliquez sur le bouton pour ouvrir la palette et il ne vous reste plus qu'a choisir la couleur. Exemple
votre texte
en code sa donne

Code : Tout sélectionner

[color=#0040FF]votre texte[/color]
vous pouvez également mixer un peu le tout comme ceci
ceci est votre texte
un mot en gras, un autre en italique et de plusieurs couleurs, bref tout est faisable pour ainsi dire. Le code est

Code : Tout sélectionner

[b][color=#0040FF]ceci[/color][/b] [color=#8040BF]est[/color] [i][color=#BF8000]votre[/color][/i]

outils-mise-en-forme12.jpg
= vous pouvez modifier la taille de votre texte.
votre texte
votre texte
votre texte
Ne jouez pas trop avec ça, sa peut devenir vite moche :heureux:
La taille maximale est de 130. Je vous conseils de ne pas monter au dessus de 130.


outils-mise-en-forme13.jpg
= si vous voulez copier un texte, vous le surlignez puis cliquez sur ce bouton et collez avec le bouton du dessous.


outils-mise-en-forme14.jpg
= coller le texte précédemment copié avec le bouton du dessus.


outils-mise-en-forme15.jpg
= lorsque vous rédigez un message avec une mise en forme de texte en gras etc. ce sont des balises qui permettent ça. Si vous voulez en supprimer, vous pouvez le faire à la main ou alors sélectionnez le texte avec les balises puis cliquer sur ce bouton pour les supprimer.


outils-mise-en-forme16.jpg
= met une couleur de fond à votre texte. Par exemple Forum Le web à Lolo et le code est celui-ci

Code : Tout sélectionner

[highlight=yellow]Forum Le web à Lolo[/highlight]
vous remplacez "yellow" (jaune) par la couleur que vous voulez. Soit avec le nom de la couleur en anglais soit avec le code hexadécimal de type #FFFF00 qui est celui de la couleur jaune par exemple. Pour le rouge c'est soit "red" ou #FF0000. Vous trouverez facilement des tableaux de couleurs sur internet avec leur code hexadécimal, vous aurez plus de choix avec ceci. Évitez les couleurs flashi et illisible merci.


outils-mise-en-forme17.jpg
= vous permet de centrer votre texte, image, lien. Exemple
[centrer]centrer votre texte[/centrer]
Vous pouvez le centrer, aligner à gauche (pas besoin de mettre cette balise pour la gauche étant donné que c'est déjà de base) ou aligner à droite.


outils-mise-en-forme18.jpg
= normalement vous n'en aurez pas l'utilité. Vous permet de mettre du texte à gauche ou à droite, pas grosse différence avec le bouton d'alignement vu précédemment.


outils-mise-en-forme19.jpg
= permet de barrer le texte. exemple : texte barré


outils-mise-en-forme20.jpg
= vous permet de mettre un exposant comme par exemple cm2 ou encore m3


outils-mise-en-forme21.jpg
= vous permet de mettre du texte en indice, pas grande utilité. Exemple : texte2


outils-mise-en-forme22.jpg
= vous permet de faire du texte lumineux par exemple texte lumineux.
La couleur de base du texte est blanc mais vous pouvez combiner le bouton de couleur de texte avec, ce qui donnerait ceci
texte lumineux
Voici le code utilisé

Code : Tout sélectionner

[glow=red][color=#FFFF00]texte lumineux[/color][/glow]
vous pouvez modifier la couleur rouge (red) comme vu pour la balise "highlight" plus haut, c'est le même principe. Petit conseils, si vous utilisez cette balise, faites pour que ce soit bien lisible.


outils-mise-en-forme23.jpg
= ajoute une ombre à votre texte. texte d'exemple et remplacez "blue" par la couleur que vous voulez.


outils-mise-en-forme24.jpg
= idem que juste au-dessus mais l'ombre du texte est moins prononcée.


outils-mise-en-forme25.jpg
= votre texte apparaitra et disparaitra comme ceci : votre texte


outils-mise-en-forme26.jpg
= vous permet d'ajouter une vidéo. Une fenêtre s'ouvre et remplissez les champs demandés.



Si vous rencontrez des problèmes n'hésitez pas à demander :clindoeil: