Forum Eco-Citoyen - Environnement et Ecologie

de **Admin** » Ven Fév 16, 2007 11:08 pm

[bcolor=#FFFFBF]
TUTO POUR L'UTILISATION DES BALISES BBCODE[/bcolor]

[link=23836]I - Les balises BBCode, qu'est ce que c'est ?[/link]

[link=23837]II - A quoi servent elles ?[/link]

[link=23838]III - Comment utiliser les balises ?[/link]

[link=23838]A - Insérer les balises dans un message :[/link]

[link=23839]B - Les balises BBCode de la première ligne :

[/link]

[link=23840]C - Les balises BBCode de la seconde ligne :

[/link]

[link=23841]D - Les balises BBCode de la troisième ligne :

[/link]

[link=23842]E - Les balises BBCode de la quatrième ligne :

[/link]

J'ai passé un peu de temps à faire ce tuto, j'espère donc que vous l'apprécierez à sa jsute valeur ... ;-)

I - Les balises BBCode, qu'est ce que c'est ?

Le BBCode ( Bulletin Board Code) est une implémentation spéciale du HTML, l'activation de l'utilisation du BBCode est déterminée par l'administrateur (vous pouvez aussi le désactiver sur un message en particulier lors de sa composition). Le BBCode en lui-même est similaire au style du HTML, les balises sont contenues dans des crochets [ et ] à la place de <et>, et offrent un meilleur contrôle sur la manière dont quelque chose doit être affichée.

de **Admin** » Sam Fév 17, 2007 8:10 pm

II - A quoi servent elles ?

Les balises BBCode servent en premier lieu à accnetuer vos propos lors de la rédaction de vos messages grâce à l'utilisation, comme dans un traitement de texte, des fonctions "mettre en gras", "souligner", "mettre en italique", "centrer le texte" etc
Mais pas seulement, les balises BBCode vous permettent également de citer des parties de texte ( sans oublier de préciser l'auteur et le lien de la page si nécessaire ), des parties de code.
Vous pouvez également cacher des parties de texte pour rendre un message plus clair, plus lisible ... Enfin vous pouvez désormais insérer des vidéos ou des fichier audio en lecture directe à l'intérieur d'un message !

de **Admin** » Sam Fév 17, 2007 8:11 pm

III - Comment utiliser les balises ?
[marq=right][align=center]
A - Insérer les balises dans un message :[/align][/marq]

Pour insérer des balises dans un message, il faut bien avoir conscience qu'il vous faudra toujours une balise de début et une balise de fin, si vous oubliez l'une ou l'autre, vous risquez d'avoir des problèmes d'affichage.
Dans tous les cas, vous avez besoin d'une balise de départ, qui se compose souvent d'un mot anglais, comme "quote" qui signifie "citer", entre deux crochets [ et ].
Mais aussi d'une balise de fin pour fermer votre BBCode qui est composé de la même façon que la balise de début mais on rajoute un slash avant le mot : "/quote" entre les crochets bien sûr [ et ].

de **Admin** » Sam Fév 17, 2007 8:12 pm

[marq=right][align=center]B - Les balises BBCode de la première ligne :[/align][/marq]

Texte Gras : [spoil]En mettant un texte à l'intérieur de cette balise, votre texte devient plus épais :
Code: Tout sélectionner
[b]Un Texte ici pour l'exemple[/b]

Ce qui donne : Un Texte ici en caractère gras[/spoil]
Texte Italique : [spoil]En mettant un texte à l'intérieur de cette balise, les lettres de votre texte seront penchées vers la droite :
Code: Tout sélectionner
[i]Un Texte ici pour l'exemple[/i]

Ce qui donne : Un Texte en italique[/spoil]
Texte Souligné : [spoil]En mettant un texte à l'intérieur de cette balise, votre texte sera souligné :
Code: Tout sélectionner
[u]Un Texte ici pour l'exemple[/u]

Ce qui donne : Un Texte souligné[/spoil]
Citation : [spoil]En mettant un texte à l'intérieur de cette balise, il apparaitra comme une citation dans un cadre blanc :
Code: Tout sélectionner
[quote]Un Texte ici pour l'exemple[/quote]

Ce qui donne :
Le texte que vous voulez citer
Il est très important de citer les textes et de citer ses sources de manière à conserver le texte original d'une part et à rendre hommage à l'auteur du texte.

- Variante : Vous pouvez également citer l'auteur du texte ou le nom du site Internet d'où provient le texte en ajoutant à la première balise : ="Nom de l'auteur" comme dans l'exemple ci-dessous :
Code: Tout sélectionner
[quote="Nom de l'auteur du texte"]Le texte que vous voulez citer.[/quote]

Ce qui donne :
Nom de l'auteur du texte a écrit:Le texte que vous voulez citer. Désormais, vous voyez le nom de l'auteur dans le bandeau bleu ci-dessus
[/spoil]
Afficher du Code : [spoil]En mettant du code à l'intérieur de cette balise, il apparaitra comme tel dans un cadre blanc. Cela fonctionne avec du code PHP, HTML ou encore des BBCode :
Code: Tout sélectionner
[code]Affichage de code [b]en gras[/b][/code]

Ce qui donne :
Code: Tout sélectionner
Affichage de code [b]en gras[/b]
[/spoil]
Liste : [spoil]En mettant du texte à l'intérieur de cette balise, il apparaitra dans une liste aavec une nouvelle ligne à chaque fois que vous insérerez une étoile entre les crochets [ et ]. Notons également que si vous cliquez sur la balise vous verrez apparaître à côté de celle-ci grisée, la balise étoile :
Code: Tout sélectionner
[list]Titre de la liste : [*] Premièrement [*] Deuxièmement [*] Ennièmement [/list]

Ce qui donne :
- Premièrement
- Deuxièmement
- Ennièmement
[/spoil]
Liste Ordonnée : [spoil]En cliquant sur la balise correspondant à la Liste Ordonnée, vous avez la possibilité, non pas d'avoir des points mais d'avoir une liste ordonnée en fonction du point de départ que vous aurez défini comme dans l'exemple :
Code: Tout sélectionner
[list=a]Titre de la liste : [*] Premièrement [*] Deuxièmement [*] Ennièmement [/list]

Ce qui donne : Titre de la liste :
a. Premièrement
b. Deuxièmement
c. Ennièmement[/spoil]

Insérer une Image : [spoil]Si vous avez le lien URL d'une image que vous souhaitez insérer dans le corps d'un message, vous pouvez le faire simplement avec cette balise :
Code: Tout sélectionner
[img]http://www.eco-citoyen.org/ecocitoyen/images/banners/ban_titre_miroir.jpg[/img]

Ce qui donne :

Si vous souhaitez insérer une image contenue sur votre disque dur ou pour plus de détails, vous pouvez consulter l'excellent TUTO de Zolix ici[/spoil]
Insérer un Lien : [spoil]Pour insérer un lien URL dans un corps de message, rien n'est plus simple, il vous suffit de copier/coller l'adresse URL dans le corps de message !
Si vous souhaitez écrire un texte cliquable qui renvoie à une adresse URL, alors vous pouvez utiliser cette balise de la manière suivante :
Code: Tout sélectionner
[url=http://www.eco-citoyen.org/Forum/]Le Forum Eco-Citoyen[/url]

Ce qui donne : Le Forum Eco-Citoyen

[/spoil]

de **Admin** » Sam Fév 17, 2007 8:13 pm

[marq=right][align=center]C - Les balises BBCode de la seconde ligne :[/align][/marq]

Spoiler : [spoil]Vous allez pouvoir utiliser le spoiler dans le but de cacher un textepour limiter la taille globale de votre message comm ici :
Code: Tout sélectionner
[spoil]J'écrit le texte que je souhaite cacher ici[/spoil]
Opacité : [spoil]Cela va vous permettre de rédiger un texte avec une faible opacité dans le but, par exemple, de différencier ce texte du texte principal de votre message par exemple, pour répondre à un membre ou lorsque vous déviez temporairement du sujet du topic. Le texte apparaitra normalement lorsque la souris passera dessus, faites l'essai plus bas
Code: Tout sélectionner
[fade]Ce texte a une faible opacité[/fade]
Ce qui donne : [fade]Ce texte a une faible opacité[/fade][/spoil]
Insérer un effet arc-en-ciel : [spoil]C'est effet est assez simple à comprendre, il va vous permettre de mettre le texte entre les balises de couleur arc-en-ciel comme ici
Code: Tout sélectionner
[rainbow]Un texte de toute les couleurs[/rainbow]
Ce qui donne : [rainbow]Un texte de toute les couleurs[/rainbow][/spoil]
Balises d'alignement du texte : [spoil]Ces balises sont très connues et vont vous permettre soit de "Justifier", "d'aligner à droite", de "centrer" ou "d'aligner à gauche" comme dans l'exemple suivant :
Code: Tout sélectionner
[align=center]Ce texte est centré[/align]
Ce qui donne :
[align=center]Ce texte est centré[/align][/spoil]

Ancre lien

Ancre cible
Défilement du texte : [spoil]Ces balises vont vous permettre de faire défiler du texte dans quatre directions :
"down" = Défilement du texte de haut en bas
"up" = Défilement du texte de bas en haut
"left" = Défilement du texte de droite à gauche
"right" = Défilement du texte de gauche à droite
Code: Tout sélectionner
[marq=right]Défilement du texte de gauche à droite[/marq]
Ce qui donne : [/spoil][marq=right]Défilement du texte de gauche à droite[/marq]
Insérer une adresse email :[spoil] Cette balise vous permet d'insérer une adresse email dans le corps du message comme son nom l'indique :
Code: Tout sélectionner
[email]webmaster@eco-citoyen.org[/email]
Ce qui donne : webmaster@eco-citoyen.org[/spoil]

de **Admin** » Sam Fév 17, 2007 8:14 pm

[marq=right][align=center]D - Les balises BBCode de la troisième ligne :[/align][/marq]

Insérer une vidéo YouTube : [spoil]Les vidéos YouTube sont devenues incontournables dans la bulle Internet et sont également un très bon moyen de diffuser des vidéos en tout genre. Pour obtenir des vidéos, vous pouvez vous rendre sur leur site : http://www.youtube.com/ .Vous pouvez désormais insérer des vidéos Youtube directement dans vos messages sur le Forum, ainsi, on aura plus besoin d'ouvrir une nouvelle fenêtre pour lire une vidéo, voici comment procéder :
Code: Tout sélectionner
[youtube]http://www.youtube.com/watch?v=4N3N1MlvVc4[/youtube]
Ce qui donne : [youtube]http://youtube.com/watch?v=4N3N1MlvVc4[/youtube][/spoil]
Insérer des fichiers Vidéo ou Audio : [spoil]Pour insérer différents types de fichiers audio ou vidéo, vous allez d'abord devoir définir quel est le type de vidéo que vous voulez insérer. Pour cela, il vous suffit de regarder l'extension, la fin de l'adresse URL du fichier ainsi :
- Pour les fichiers de type : ".avi ou .wmv"
- Pour les fichiers type streaming. ".mp3"
- Pour les fichiers de type Real Media : ".rm ou .rma"
- Pour les fichiers de type Quick Time : ".M4V"
Voici un exemple avec un fichier audio de type .ram, il s'agit de l'émission "CO2 mon amour" :
Code: Tout sélectionner
[ram width=220 height=140]http://www.tv-radio.com/ondemand/france_inter/CO2/CO220070217.ram[/ram]
Ce qui donne : [ram width=220 height=140]http://www.tv-radio.com/ondemand/france_inter/CO2/CO220070217.ram[/ram][/spoil]
Pour mettre le texte en exposant ou en indice : [spoil]Des balises qui peuvent parfois rendre service lorsque l'on veut parler de mètres carrés par exemple. Voici comment l'utiliser :
Code: Tout sélectionner
Voici les 1[sup]er[/sup] et 2[sup]ème[/sup] ... On parle aussi parfois du CO[sub]2[/sub]...
Ce qui donne : Voici les 1[sup]er[/sup] et 2[sup]ème[/sup] ... On parle aussi parfois du CO[sub]2[/sub]... [/spoil]

de **Admin** » Sam Fév 17, 2007 8:14 pm

[marq=right][align=center]E - Les balises BBCode de la quatrième ligne :[/align][/marq]

La Taille : [spoil]Comme son nom l'indique, en cliquant sur la flèche, vous allez pouvoir choisir différentes tailles de police de caractère pour votre texte, par défaut, vous avez :
- Très petit : Taille 7
- Petit : Taille 9
- Normal : Taille 12
- Grand : Taille 18
- Très Grand : Taille 24
Vous pouvez également configurer vous même la taille de votre police en modifiant le chiffre comme dans l'exemple suivant :
Code: Tout sélectionner
[size=15]Ce texte est de taille 15[/size]
Ce qui nous donne : Ce texte est de taille 15[/spoil]
La Police : [spoil]Grâce à cette balise, vous pouvez modifier la police de caractère comme dans n'importe quel traitement de texte, pour ce faire, il vous suffit d'écrire votre texte entre les balises comme dans l'exemple :
Code: Tout sélectionner
[font=Lucida Console]Ce texte est en police "Lucida COnsole"[/font]
Ce qui donne : [font=Lucida Console]Ce texte est en police "Lucida COnsole"[/font][/spoil]
Basculer du mode couleur du texte à couleur d'arrière plan : [spoil]Cette balise va vous permettre de mettre en valeur votre texte non pas en donnant une nouvelle couleur au texte mais à l'arrière plan derrière le texte pour donner un effet surligné. Il faudra donc d'abord cliquer sur cette balise, puis valider la couleur que vous souhaitez mettre en arrière plan et insérer votre texte entre les balise, ainsi on a :
Code: Tout sélectionner
[bcolor=#FFFF40]Ce texte a un effet surligné, n'est ce pas ?[/bcolor]
Ce qui donne : [bcolor=#FFFF40]Ce texte a un effet surligné, n'est ce pas ?[/bcolor]
N'oubliez pas lorsque vous avez fini d'utiliser cette balise de re-cliquer dessus afin de repasser en mode couleur de texte [/spoil]
Insérer un s'eparateur : [spoil]Cette balise va vous permettre de clairement séparer plusieurs parties de votre message en ins'erant une ligne pleine entre vos paragraphes ou chapitre, on aura donc :
Code: Tout sélectionner
Le premier paragraphe [hr] Le deuxième paragraphe
Ce qui donne :
Le premier paragraphe [hr] Le deuxième paragraphe[/spoil]
Insérer un caractère spécial : [spoil]Cette balise bien pratique va vous permettre d'insérer des codes que vous ne pouvez pas insérer par le seul biais de votre clavier. En sélectionnant le caractère spécial que vous voulez insérer, vous voyez en fait apparaitre le code HTML de celui-ci, mais pas de panique, lorsque vous validerez votre message, le caractère spécial apparaitra correctement comme ici :
Code: Tout sélectionner
Mes caractères spéciaux : Æ ≠ √ ∞ © ® ‰
Ce qui donne : Mes caractères spéciaux : Æ ≠ √ ∞ © ® ‰ [/spoil]
Fermer toutes les balises BBCode ouvertes : [spoil]Si cela vous arrive d'ouvrir plusieurs balises dans un seul message, pensez à vérifier si vous avez fermé toutes les balises avant de publier votre message en cliquant sur cette balise. Si rien n'apparait, alors vous avez correctement fermé vos balises, sinon des BBcodes de fermetures de balise apparaitront.[/spoil]
Couleur : [spoil]Pour insérer de la couleur, il vous suffit de vous ballader sur cette palette et de coisir la couleur qui vous plait le mieux et ensuite d'insérer votre texte à l'intérieur des balises.
Code: Tout sélectionner
[color=#8000BF]Ce texte est de couleur violette, n'est ce pas ?[/color]
Ce qui donne : Ce texte est de couleur violette, n'est ce pas ?[/spoil]

de **Akasha** » Dim Fév 18, 2007 12:33 am

Toi... tu sais parler aux femmes !

de **Admin** » Dim Fév 18, 2007 12:37 am

Le premier qui critique mon TUTO, je lui tire la langue

Forum Eco-Citoyen - Environnement et Ecologie

[TUTO] Insérer une balise BBCode

[TUTO] Insérer une balise BBCode

Publicité

Qui est en ligne