PortailAccueilCalendrierFAQRechercherS'enregistrerMembresGroupesConnexion

Partagez | 
 

 [Tutorial] LeBBCode : Mettre en forme ses messages

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Nachew
Impératrice
Impératrice
avatar

Nombre de messages : 1634
Age : 30
Localisation : Surement pas sous les fesses de Primo !
Date d'inscription : 04/12/2006

MessageSujet: [Tutorial] LeBBCode : Mettre en forme ses messages   Lun 8 Oct 2007 - 18:34

Voila un petit tutorial qui, je l’espère, vous permettra d’être un peu plus à l’aise avec les différentes balises utilisées pour mettre en forme votre texte.

Introduction :

Tout d’abord, il faut savoir que pour donner un effet quelconque à un texte, il est nécessaire de l’encadrer de deux balises :
  • balise d’ouverture : [X]
  • balise de fermeture : [/X]

Nous verrons plus tard par quoi remplacer les « X ».
Pour ceux qui ne le savent pas, il faut maintenir la touche | alt gr | enfoncée en plus d’une autre pour pouvoir écrire ces crochets :
  • [ = | alt gr | + | 5 |
  • ] = | alt gr | + | ° |

(Les « | » sont là pour représenter les touches du clavier)

Il ne doit pas y avoir d’espace entre le texte et ses balises : [X]Texte[/X]

Pour la mise en forme courante, un petit panneau d’outils nous est proposé au dessus de la zone de texte :



Pour utiliser au mieux ces outils, il suffit de sélectionner avec la souris le texte auquel vous voulez appliquer l’effet puis de cliquer sur le bouton souhaité.
Un simple survolage du bouton à l’aide de la souris vous renseignera sur sa fonction.

Général :

Voici les balises qui n’ont pas besoin d’explication particulière :



Petite note pour la citation : Si vous voulez référencier l'auteur du texte cité, utilisez ces balises :


(N'oubliez pas d'encadrer le nom par des guillemets, sinon ça ne fonctionnera pas.)
Ce qui donnera quelque chose comme ça :
Nachew a écrit:
Vous comprenez ce que je vous explique au moins ? x]


Explication sur la fonction « Code » :


Encadrer un texte par ces balises permet de l’afficher dans son état brut, sans mise en forme donc.
Cela peut-être utile pour insérer des codes de programmation ou bien des tablatures de guitare par exemple.
Ici, je peux utiliser cette fonction pour vous afficher les balises sans qu’elles ne modifient l’aspect du texte. (Mais si vous allez comprendre grâce à la suite)


Texte qui remonte façon "Générique" :

Voici une balise qui n'est pas présente dans la "boite à outils" :
Code:
[updown]Texte[/updown]
(Notez l’utilisation de la fonction « code » ;) )


Ce qui donne :
Un texte qui remonte !! Wahou!!! xD


Listes :

Il est possible de faire trois genres de listes :

+ Tout d’abord la liste à puce qui sera ordonnée par l’intermédiaire de petits points.
Chaque nouveau point devra être représenté par ce symbole : [*]
Voici les balises a utiliser :
Code:
 [list][*]Premier point abordé. [*]Second point. [*]Troisième point. [*]Etc…[/list]

Ce qui donne :
  • Premier point abordé.
  • Second point.
  • Troisième point.
  • Etc…


+ Ensuite la liste ordonnée par lettres. Il s'agit du même principe, seul la prepière balise change :
Code:
 [list=A][*]Premier point abordé. [*]Second point. [*]Troisième point. [*]Etc…[/list]
Ce qui donne :
  1. Premier point abordé.
  2. Second point.
  3. Troisième point.
  4. Etc…


+ Et enfin, la liste organisée par chiffres. Pareillement que pour les lettres, il faut changer la première balise :
Code:
 [list=1][*]Premier point abordé. [*]Second point. [*]Troisième point. [*]Etc…[/list]
Ce qui donne :
  1. Premier point abordé.
  2. Second point.
  3. Troisième point.
  4. Etc…



Taille du texte :


Ici le plus simple consiste à sélectionner le texte et à lui appliquer les taille prédéfinies du menu déroulable de la "boite a outils".


Sinan, dans les balises si dessus, il suffit de remplacer le "x" par la taille souhaitée, sachant que :
  • "très petit" correspond à 7
  • "petit" correspond à 9
  • "normal" correspond à 12
  • "grand" correspond à 18
  • "très grand" correspond à 24

A vous de choisir un nombre entre 0 et 29.


Couleur du texte :

Comme pour la taille, on peut choisir une couleur dans le menu déroulant de la "boite à outils".


Sinon, pour un plus grand choix, on peut utiliser le code Hexadécimal des couleurs disponible ici, en remplaçant le "x" dans les balises par le code.
(/!\ : Ne pas oublier le # devant les chiffres.)

Exemple : Pour cette couleur il faut écrire :
Code:
[color=#990033]texte[/color]

Autre petite précision de notre amie Auglyane, on peut également utiliser le nom de la couleur voulue à la place du code hexadécimal. Voici le lien qu’elle nous a gentiment donné pour connaître le nom de votre couleur favorite : ici

Les balises seront alors de la forme :
Code:
[color=nom]texte[/color]


Insérer un lien :

Il y a deux manières d'insérer un lien.


Pour plus de lisibilité, il est conseillé de mettre en valeur votre lien (surtout s'il s'agit d'un lien cliquable) en le mettant en couleur, en le soulignant ou encore en le mettant en gras.


Insérer une image :

Deux sortes d'images ici aussi.

  • Une image toute simple :



    Balises :
    Code:
    [img]coller le lien direct de l'image sous la forme http://blablabla.jpg (ou autre format)[/img]
  • Une image cliquable menant à un site : il s'agit d'une combinaison entre l'insertion d'un lien et d'une image :


    Balises :
    Code:
    [url=coller le lien du site][img]coller le lien direct de l'image sous la forme http://blablabla.jpg (ou autre format)[/img][/url]


Ensuite il existe des sites hébergeant vos images et vous proposant des liens "tout prêt" à copier/coller (en fait ils ont simplement inséré pour vous les balises que nous venons de voir). Mais ceci est une autre histoire, et fera l'objet d'un prochain tutorial. ^^'


Conseils :

  • Il est possible de "mixer" les différents effets, veillez toute fois à refermer chaque balise ouverte, et dans le bon ordre.
    Exemple : C'est bientôt fini !!!
    Voilà le mélange des balises :
    Code:
    [updown][scroll][color=darkred][size=18][b][i]C'est bientôt fini !!![/i][/b][/size][/color][/scroll][/updown]
    Elles se referment donc symétriquement, attention de ne pas écrire :
    Code:
    [updown][scroll][color=darkred][size=18][b][i]C'est bientôt fini !!![/updown][/scroll][/color=darkred][/size][/b][/i]
  • Méfiez-vous si vous notez les balises à la main, le "/" pour la fermeture est vite oublié.
  • Vérifiez toujours par une "Prévisualisation" s'il n'y a rien qui cloche.


*respire*
Vali vala.


Dernière édition par Nachew le Ven 17 Oct 2008 - 23:18, édité 4 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
auglyane
Ancetre
Ancetre
avatar

Nombre de messages : 319
Age : 48
Localisation : au clair de la lune...
Date d'inscription : 10/09/2007

MessageSujet: Re: [Tutorial] LeBBCode : Mettre en forme ses messages   Lun 8 Oct 2007 - 18:46

wahou !

** est admirative **

Superbe, Nach' , complet et compréhensible par tous, ton tutorial !

** vraiment admirative ! **


Ma petite contribution, concernant les couleurs : il est souvent plus facile de se souvenir d'un nom de couleur que de son code hexadécimal. Voici une palette de couleurs avec les noms correspondants : ici (vous pourrez ainsi aisément vous rendre compte que la couleur habituelle de parole d'Augly - le mediumseagreen - est illisible ici, voilà pourquoi elle parle en blanc chez les Jadiens sunny )
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Nachew
Impératrice
Impératrice
avatar

Nombre de messages : 1634
Age : 30
Localisation : Surement pas sous les fesses de Primo !
Date d'inscription : 04/12/2006

MessageSujet: Re: [Tutorial] LeBBCode : Mettre en forme ses messages   Mar 9 Oct 2007 - 16:00

Correct Augly, pour les couleurs cela marche aussi avec les noms (en anglais :p).
Je le rajoute dans le premier message avec ton lien, merci :]
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Contenu sponsorisé




MessageSujet: Re: [Tutorial] LeBBCode : Mettre en forme ses messages   

Revenir en haut Aller en bas
 
[Tutorial] LeBBCode : Mettre en forme ses messages
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Tutorial pour mettre une image sur le forum !!
» Mettre un sims sur une surface lorsqu'il prends une pose .
» Tutorial: peindre avec de la lasure
» Tutorial pour IRC sur le site
» [RESOLUE] Mettre un objet en lévitation

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Le Royaume de Jade :: L'administration Jadienne :: A l'aide !!! :: La caverne d’Ali Bwabwa-
Sauter vers: