TUTO FORUMS : Balises et mise en forme du texte ...

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 ...

-> 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.

• 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)

  
  http://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) :

  55

  
  
  
• Obtenir un nombre aléatoire en précisant un intervalle maximum :
  
  

  Code:

  [rand]50[/rand]

  
  

  Nombre aléatoire (1,50) :

  25

  
  
  
• 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).

-> 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

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.








# {FORUMURL*} : Adresse Internet du forum
ex : terradelta.1fr1.net

# {FORUMURLINK*} : Lien du forum
ex : https://terradelta.1fr1.net

# {FORUMNAME*} : Nom du Forum
ex : TERRA

# {FORUMNAMELINK*}: Lien du Forum
ex : https://terradelta.1fr1.net

# {FORUMDESC*} : Description du Forum
ex :

















# {FORUMBIRTHDAY*} : Ouverture du forum
ex : Ven 22 Déc - 0:22

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

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

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

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

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

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

# {FORUMONLINEDATE*} : Date du record de connexions
ex : Mer 13 Aoû - 7:34

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

# {FORUMLASTUSERLINK*} : Lien du dernier utilisateur enregistré
ex : https://terradelta.1fr1.net/u153


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 : 19


# 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à.

Il manque les codes "police du texte" et "centrer texte". A moins que ce ne soit un bug.

Merci pour ce récap, ça fait réviser

En effet, je pense qu'au cas où, ça peut aider ... EN fait le texte n'est pas finit et oui, il y a un gros bug que je ne sais éviter ... Étrange ? Oui, je dirai ... un peu !

EN fait ya plein d'autres balises et bouts de codes html sympas pour du texte ou des images etc ... En plus forumactif en a inséré de nouvelles ... C'est pour ça qu'il était utile de donner la liste de toutes les balises bbcode, html ou encore script, que l'on peut utiliser sur les fofos.

Je poursuivrai quand j'aurai un moment ...



PREMIER POST EDITE ... AJOUT DE CODES MANQUANTS
TUTO A SUIVRE ...

La variable USERAGE a un défaut ou ... ? J'ai 18 ans, or, ça me dit que j'en ai 19.
(je sais, c'est minime, mais je me pose la question moi :/ )

http://img12.imageshack.us/my.php?image=screengx1.png

Eh bien en effet, il y a un bug étrange ...

Moi j'ai mon age pourtant ...

Je sais pas à quoi c'est dut et je pense qu'on ne le saura probablement jamais .............