TUTO : Mise en forme d'un texte. (Balises et astuces)

**Administrateur** Enfant du destin

.

LES TUTOS D'ENKI

MISE EN FORME DE TEXTES POUR FORUMS

SOMMAIRE

I / " Balises BBcode "
II / " Balises variables "
III / " Utilisation du mode WYSWYG "
iV / " Codes HTML utiles "
V / " Codes scripts "

et peut-être d'autres rubriques à venir ...

ENKI a écrit:: Eh bien salut !

Voilà, je prend quelques minutes de mon temps, afin de vous faire profiter de ces petites options appelées balises, très utiles pour donner graphiquement vie à un texte. Je parlerai essentiellement des forums forumactifs, mais ce tuto s'adresse aussi aux autres. Cependant, je ne garantis pas le fonctionnement de ces balises (surtout les "bbcode" et balises "variables"), sur d'autres forums d'autres types. Allez, je vous fait la liste de toutes les balises que je connais ainsi que la façon de les appliquer à votre texte ...

I / LES BALISES BBCODE

UTILISATION DES BALISES BBCODE

-> Une balise s'utilise de cette façon :

Citation :: 1. écrire son texte ...
2. sélectionner tout le texte qui doit être mis en forme ...
3. cliquer sur le raccourci mis en place au dessus de la boite de dialogue de la page de réponse ...

-> ou bien de cette façon (surtout si la balise n'est pas en raccourci) :

Citation :: 1. écrire son texte ...
2. repérer le début et la fin du texte devant être mis en forme ...
3. placer devant, la balise d'ouverture (1e balise de la liste exemple ci-dessous. ex : [color])
4. refermer en plaçant à la fin du texte concerné, la balise contenant le "/" ... (2e balise de la liste exemple ci-dessous. ex en gras sur cette balise couleur : [/color])

... donc, bien faire la différence entre balise d'ouverture et de fermeture des "effets de texte". (fermeture étant repérable grâce au "/" dans la balise) ...

-> ex : [xxx]texte à mettre en forme[/xxx]
mais aussi : [xxx-1][xxx-2]texte à mettre en forme[/xxx-2][/xxx-1] pour mettre plusieurs balises (attention à l'ordre de celles ci, indiquées dans l'exemple).

-> plus d'infos en fin de paragraphe.

LISTE DES BALISES BBCODE

Mettre le texte en gras:

Code:

[b] [/b]

Résultat
Mettre le texte en italique:

Code:

[i] [/i]

Résultat
Souligner le texte:

Code:

[u] [/u]

Résultat

Barrer le texte:

Code:

[strike] [/strike]

~~Résultat~~

Aligner du texte à gauche :

Code:

[left] [/left]

Résultat

Centrer du texte :

Code:

[center] ... [/center]

Résultat
Aligner du texte à droite :

Code:

[right] [/right]

Résultat
Justifier du texte :

Code:

[justify] [/justify]

Résultat

Modifier la couleur du texte:

- Il existe deux façons de procéder ... Il y a comme ceci :

Code:

[color=nom de couleur][/color]

Résultat avec la couleur "red"
Résultat avec la couleur "green"
Résultat avec la couleur "blue"

- liste exemple -> red, yellow, green, blue, white, black, grey, purple, orange, brown, cyan, indigo, olive.
- note -> pour les couleurs de base, ajoutez "light" ou "dark", au nom pour accéder à du bleu clair ou foncé par exemple :

Résultat
Résultat

- ou bien c'est possible d'une autre façon, comme suit :

Code:

[color=#code couleur hexadecimal][/color]

Résultat avec la couleur "#FF3300"
Résultat avec la couleur "#008000"
Résultat avec la couleur "#0033FF"

Vous pouvez spécifier soit un nom de couleur reconnu (par exemple : red, blue, yellow, etc...), soit un code couleur hexadécimal (par exemple : #FFFFFF, #0033FF,...)

Liste des couleurs en hexadécimal facile à trouver avec "google search".
ex : Blanc : #ffffff / Noir : #000000 ...
-> cela permet surtout d'appliquer à son texte, TOUTES les nuances de la palette de couleurs ...

Modifier la taille du texte:

Code:

[size=chiffre] [/size]

Résultat taille 9
Résultat taille 12
Résultat taille 14
Résultat taille 16
Résultat taille 18
Résultat taille 24

Changer la police du texte:

Code:

[font=impact] ... [/font]

Résultat avec la police "Impact"
Résultat avec la police "Comic Sans Ms"
Résultat avec la police "Times New Roman"

ps : les noms des polices dans la balise, s'écrivent avec des espaces si le nom est composé, et en minuscules ...
-> Aucune majuscule n'est prise en compte par le BBcode ... A ce que je sais du moins ...
Liste non-ordonnée (avec puce):

Code:

[list][*]Info 1[*]Info 2[/list]

* Info 1
* Info 2
Liste ordonnée (numérotée) :

Code:

[list=1][*]Info 1[*]Info 2[/list]

1. Info 1
2. Info 2
Liste ordonnée (alphabétique) :

Code:

[list=a][*]Info 1[*]Info 2[/list]

1. Info 1
2. Info 2
Pour afficher une citation sans référence :

Code:

[quote] [/quote]

Citation :

Résultat
Pour afficher une citation avec référence :

Code:

[quote="XXX"] [/quote]

XXX a écrit:

Résultat
Pour afficher un code ou police à pas fixe :

Code:

[code] [/code]

Code:

Résultat
Créer un lien :

Code:

[url]http://mon_adresse[/url]

http://forum.forumactif.com/
Créer un lien sur un texte :

Code:

[url=http://mon_adresse]texte[/url]

Forum exemple
(attention, cliquer ici vous enverra sur la page d'accueil de Newsplanète)
Créer un lien sans BBcode :

Code:

http://mon_adresse (donc, juste taper l'adresse)

https://newsplanete.superforum.fr (ce qui donne immédiatement un lien !)
Créer un lien mail :

Code:

[email][/email]

Resultat@domaine.com
Insérer une image :

Code:

[img]http://adresse de l'image[/img]

Résultat :
Insérer un lien sur une image :

Code:

[url=http://mon adresse ou un lien][img]http://adresse de l'image[/img][/url]

Résultat :

(Attention : cliquer sur l'image renvoie sur Terra, mon forum officiel)
Défilement horizontal :

Code:

[scroll][/scroll]

Résultat
Défilement vertical :

Code:

[updown][/updown]

Résultat
Insérer une ligne :

Code:

Résultat 1[hr]Résultat 2

Résultat 1
Résultat 2

ou, si vous n'avez aucun visible sur le forum où est posté ce sujet :

Résultat 1
___________________________________________________________________

Résultat 2
Mettre en indice :

Code:

x[sub]a+b[/sub]

x_a+b
Mettre en exposant :

Code:

2[sup]ème[/sup] jour

2^ème jour
Effet miroir sur le texte (symétrie verticale) :
(Uniquement compatible pour Internet Explorer et le forum en version phpBB2)

Code:

[flipv] ... [/flipv]

Résultat
Effet miroir sur le texte (symétrie horizontale) :
(Uniquement compatible pour Internet Explorer et le forum en version phpBB2)

Code:

[fliph] ... [/fliph]

Résultat
Effet flou :
(Uniquement compatible pour Internet Explorer et le forum en version phpBB2)

Code:

[blur] ... [/blur]

Résultat
Effet de dégradé :
(Uniquement compatible pour Internet Explorer et le forum en version phpBB2)

Code:

[fade] ... [/fade]

Résultat
Obtenir un nombre aléatoire en précisant un intervalle minimum et maximum :

Code:

[rand]50,100[/rand]

Nombre aléatoire (50,100) :
63
Obtenir un nombre aléatoire en précisant un intervalle maximum :

Code:

[rand]50[/rand]

Nombre aléatoire (1,50) :
19
Cacher du texte :

Code:

[hide][/hide]

Note: le texte sera caché pour les personnes qui n'ont pas posté dans le sujet. En revanche, les administrateurs et les modérateurs verront le texte caché sans avoir à poster dans le sujet.
Masquer du contenu :

Code:

[spoiler][/spoiler]

Spoiler:

-> cliquer sur les spoiler pour les déployer et ainsi avoir accès à leur contenu. Utile pour gagner de la place dans les posts. (visuellement bien sur).

UTILISER PLUSIEURS BALISES BBcode

-> Les balises peuvent être combinées pour divers effets, néanmoins il faut respecter l'ordre d'ouverture et de fermeture de chaque balise.

Exemple de superposition de balises BBcode :

Code:

[size=18][color=red][b]Texte ici[/b][/color][/size]

Résultat

Syntaxe incorrecte :

Code:

[u][b] xxx [/u][/b]

Syntaxe correcte :

Code:

[u][b] xxx [/b][/u]

Tant que vous respecterez les ouvertures/ fermetures de balises, vous pourrez utiliser toutes les combinaisons possibles pour des effets des plus variés

II / LES BALISES DITES "VARIABLES"

UTILISATION DES BALISES VARIABLES

Ces balises, appelées " balises variables", génèrent à la façon des scripts (pour faire simple), des actions spécifiques et relative au forum ou l'on se trouve, voire au membre qui les lit. En voici la liste communiquée à ce jour par forumactif ... mais d'abord, comment utiliser ces balises :

-> Entrez le nom de la balise (liste ci-dessous), et mettez la entre "{" et "}" ... contrairement au bbcode, il n'y a pas besoin d'en mettre deux pour une seule action et ainsi, la technique se simplifie.

Par ex : {USERNAME*} permet de s'adresser au lecteur de la balise ... En effet, untel verra son nom, un autre le sien, moi le mien etc ... Cela marque donc le nom de celui qui le lit.

Par ex : vous êtes connectés en tant que : Invité et vous avez 0 <- j'ai ultilisé les balises variables dans cet exemple, pour vous afficher VOS informations de membre. Informations qui se maintiennent à jour, en fonction du changement de ces dernières ou leur progression.

ps : enlever l'étoile (*) dans la balise pour que la fonction soit active. Ici, dans l'exemple, j'ai effectivement du les ajouter, pour vous permettre de les voir ... Ah oui aussi ! Il faut toujours écrire en majuscule à l'intérieur des balises "{ }" ... Ne me demandez pas pourquoi mais c'est un fait.

LISTE DES BALISES VARIABLES :

# {FORUMURL*} : Adresse Internet du forum
ex : newsplanete.superforum.fr

# {FORUMURLINK*} : Lien du forum
ex : https://newsplanete.superforum.fr

# {FORUMNAME*} : Nom du Forum
ex : ¤ FORUM NEWSPLANETE ¤

# {FORUMNAMELINK*}: Lien du Forum
ex : https://newsplanete.superforum.fr

# {FORUMDESC*} : Description du Forum
ex :

# {FORUMBIRTHDAY*} : Ouverture du forum
ex : Mar 17 Jan - 12:08

# {FORUMAGE*} : Age du forum (jours)
ex : 6688

# {FORUMCOUNTFORUM*} : Nombre de forums/catégories
ex : 86

# {FORUMCOUNTOPIC*} : Nombre de sujets
ex : 1072

# {FORUMCOUNTPOST*} : Nombre de messages
ex : 20026

# {FORUMCOUNTUSER*} : Nombre d’utilisateurs
ex : 156

# : Nombre record d’utilisateurs connectés en même temps
ex : 105

# {FORUMONLINEDATE*} : Date du record de connexions
ex : Jeu 1 Fév - 21:20

# {FORUMLASTUSER*} : Dernier utilisateur enregistré
ex : Fargueverpia

# {FORUMLASTUSERLINK*} : Lien du dernier utilisateur enregistré
ex : https://newsplanete.superforum.fr/u188

UTILISATEURS :

# {USERNAME*} : Nom de l'utilisateur qui lit la balise.
ex : Invité

# {USERLINK*} : Voir le profil de l’utilisateur qui lit la balise, donc finalement son propre profil ... Mouais ...
ex :

# {USERBIRTHDAY*} : Date de naissance de l'utilisateur qui lit la balise.
ex :0

# {USERAGE*} : Age de l'utilisateur qui lit la balise.
ex : 0

# {USERREGDATE*} : Date d'inscription de l'utilisateur qui lit la balise.
ex :

# {USERLASTVISIT*} : Dernière visite de l'utilisateur qui lit la balise.
ex :

# {USERCOUNTPOST*} : Nombre de messages de l'utilisateur qui lit la balise.
ex : 1

# N.B. : A propos des variables {USER...} : elles concerneront à chaque fois l’utilisateur qui les lit sauf lors d’envoi d’un email où les valeurs affichées seront celles de l’expéditeur. (deux fois valent mieux qu'une ! lol)

------------------------

Voilà, je posterai à la suite une aide concernant les bouts de codes html utiles pour la mise en page de textes, de photos, de vidéos etc ... Bien ... Merci de m'avoir lu, et en espérant vous avoir aidé ou simplement renseigné !

Tchuuuuussss !

_________________________

TUTORIEL RÉALISÉ PAR PINGUINO ET ENKI.

Merci à pinguino pour son tuto très complet sur les balises BBcode. Pour ma part, je n'ai fait que l'améliorer en y ajoutant les balises variables et quelques compléments d'explications de ci de là.

**Modérateur** Apprenti Dr.House

merci enki pour le tuto, mais c'est vrai que j'utilise plus le HTML que le BBCode

**Modérateur** Apprenti Dr.House

euh enki, je sais pas pk, mais avec firefox 3.0, quand je copie, derrière le texte, l'image de fond s'éclaircit, c'est normal?

**Administrateur** Enfant du destin

Oui en effet, ça me le fait aussi ... Je suis en train de voir ça avec Sandream ... Le concepteur du script de transparence.

C'est assez énervant c'est vrai ...

**Administrateur** Psychopathe

Wow, sympa le guide complet des balises ! ça nous vaudrait bien une petite page html pour faire un guide !(tiens, d'ailleurs, t'as ressortis les fameuses Variables !)

**Modérateur** Apprenti Dr.House

au fait, question en html, j'ai une image de fond, et je voudrais simplement la décalé de quelques millimètre, quel est le code pour ça en CSS?, car je ne la trouve pas ou alors je fais bouger tout le code HTML aussi.

**Administrateur** Psychopathe

Ben ça, soit du ajoutes des espaces en tapant : & n b s p ; (sans espaces entre les caractères)
Ou alors tu insère une image vide, genre : https://2img.net/i/fa/empty.gif

**Modérateur** Apprenti Dr.House

ah ouai, pas con lol
et pour que le menu reste fixe, le code, c'est :"position:fixed"???

**Administrateur** Psychopathe

Oui, mais n'oublie pas le ; collé après, sinon ça risque de ne pas marcher.

**Modérateur** Apprenti Dr.House

wai je sais merci ;-)

**Administrateur** Psychopathe

De rien, merci

**Administrateur** Enfant du destin

Hey thebest, tu utilises un editeur html pour faire ton site ?????

A en croire tes questions non ... Pourtant, c'est assez pratique pour créer du code.
Après c'est sur qu'on a un bien meilleur résultat a la main, mais ça peut aider pour fabriquer un code m'est d'avis...

au fait :

ZE a écrit:: (tiens, d'ailleurs, t'as ressortis les fameuses Variables !)

Oui, j'ai enfin compris ! lol !

**Modérateur** Apprenti Dr.House

Enki a écrit:: Hey thebest, tu utilises un editeur html pour faire ton site ?????

A en croire tes questions non ... Pourtant, c'est assez pratique pour créer du code.
Après c'est sur qu'on a un bien meilleur résultat a la main, mais ça peut aider pour fabriquer un code m'est d'avis...

non, je n'utilise pas d'éditeur, j'ai appris à la main et je me force pour en apprendre davantage.

**Administrateur** Enfant du destin

Oui, je peux comprendre en effet. Par contre, on apprend aussi avec ... Si tu connais pas un code, tu le créé avec l'éditeur et tu peux le lire et donc le retenir ... Enfin, j'ai toujours eut des méthodes d'apprentissage un peu étranges mais bon ... Moi je fais comme ça ...

Après, je veux surement pas aller aussi loin que toi dans l'apprentissage de cette langue ... Je m'en sers plutôt comme d'un outil quoi ... Mon piètre niveau me suffit pour l'instant ...

**Modérateur** Apprenti Dr.House

ben en fait, je ne veux pas en faire mon métier (du moins pour l'instant, car je vais commencer les études de médecine), mais j'aime bien en apprendre plus sur l'ordi (comme j'ai déjà appris le graphisme en 2D et 3D, un peu de programation, mais pas terrible, etc.)