AccueilAccueilCalendrierFAQRechercherMembresGroupesConnexionS'enregistrer

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

Voir le sujet précédent Voir le sujet suivant Aller en bas
Auteur Message
Enki
Administrateur
Enfant du destin

avatar

Masculin

Age : 38 Date d'inscription : 10/12/2007 Nombre de messages : 721 Localisation : TERRA Loisirs : Beaucoup trop ...

MessageSujet: TUTO : Mise en forme d'un texte. (Balises et astuces) Sam 19 Juil - 15:59

.


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)

    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]

    xa+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 : newsplanete.superforum.fr

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

# {FORUMNAMELINK*}: Lien du Forum
ex : ¤ FORUM NEWSPLANETE ¤

# {FORUMDESC*} : Description du Forum
ex :

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

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

# {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 : 155

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

# {FORUMONLINEDATE*} : Date du record de connexions
ex : Jeu 24 Déc - 8:15

# {FORUMLASTUSER*} : Dernier utilisateur enregistré
ex : L'Etre et Sa Lumière

# {FORUMLASTUSERLINK*} : Lien du dernier utilisateur enregistré
ex : L'Etre et Sa Lumière


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 : Invité

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


Dernière édition par Enki le Sam 19 Juil - 17:45, édité 3 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://terradelta.free.fr
thebestofevanescence
Modérateur
Apprenti Dr.House

avatar


Age : 28 Date d'inscription : 04/02/2006 Nombre de messages : 4739 Localisation : Bastogne Loisirs : Tennis et jeux video

MessageSujet: Re: TUTO : Mise en forme d'un texte. (Balises et astuces) Lun 21 Juil - 9:10

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


never forget the 23th of june 2008
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
thebestofevanescence
Modérateur
Apprenti Dr.House

avatar


Age : 28 Date d'inscription : 04/02/2006 Nombre de messages : 4739 Localisation : Bastogne Loisirs : Tennis et jeux video

MessageSujet: Re: TUTO : Mise en forme d'un texte. (Balises et astuces) Lun 21 Juil - 9:27

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


never forget the 23th of june 2008
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Enki
Administrateur
Enfant du destin

avatar

Masculin

Age : 38 Date d'inscription : 10/12/2007 Nombre de messages : 721 Localisation : TERRA Loisirs : Beaucoup trop ...

MessageSujet: Re: TUTO : Mise en forme d'un texte. (Balises et astuces) Lun 21 Juil - 12:45

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

------------------------------------------------------------------------------------
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://terradelta.free.fr
ze_chaofan
Administrateur
Psychopathe

avatar

Masculin

Age : 25 Date d'inscription : 30/08/2007 Nombre de messages : 1923 Localisation : En face de toi...Ah ah, je t'ai bien eu ! ... Ouais, bon OK, c'était nul... je sors. Loisirs : Sauver le monde ! Argh, non, oublie ce que je viens de dire, je trahit ma couverture... chut...

MessageSujet: Re: TUTO : Mise en forme d'un texte. (Balises et astuces) Lun 21 Juil - 14:11

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 !)
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://sosforum.forumactif.fr/
thebestofevanescence
Modérateur
Apprenti Dr.House

avatar


Age : 28 Date d'inscription : 04/02/2006 Nombre de messages : 4739 Localisation : Bastogne Loisirs : Tennis et jeux video

MessageSujet: Re: TUTO : Mise en forme d'un texte. (Balises et astuces) Lun 21 Juil - 14:30

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


never forget the 23th of june 2008
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
ze_chaofan
Administrateur
Psychopathe

avatar

Masculin

Age : 25 Date d'inscription : 30/08/2007 Nombre de messages : 1923 Localisation : En face de toi...Ah ah, je t'ai bien eu ! ... Ouais, bon OK, c'était nul... je sors. Loisirs : Sauver le monde ! Argh, non, oublie ce que je viens de dire, je trahit ma couverture... chut...

MessageSujet: Re: TUTO : Mise en forme d'un texte. (Balises et astuces) Lun 21 Juil - 14:34

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://illiweb.com/fa/empty.gif
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://sosforum.forumactif.fr/
thebestofevanescence
Modérateur
Apprenti Dr.House

avatar


Age : 28 Date d'inscription : 04/02/2006 Nombre de messages : 4739 Localisation : Bastogne Loisirs : Tennis et jeux video

MessageSujet: Re: TUTO : Mise en forme d'un texte. (Balises et astuces) Lun 21 Juil - 14:36

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


never forget the 23th of june 2008
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
ze_chaofan
Administrateur
Psychopathe

avatar

Masculin

Age : 25 Date d'inscription : 30/08/2007 Nombre de messages : 1923 Localisation : En face de toi...Ah ah, je t'ai bien eu ! ... Ouais, bon OK, c'était nul... je sors. Loisirs : Sauver le monde ! Argh, non, oublie ce que je viens de dire, je trahit ma couverture... chut...

MessageSujet: Re: TUTO : Mise en forme d'un texte. (Balises et astuces) Lun 21 Juil - 14:38

Oui, mais n'oublie pas le ; collé après, sinon ça risque de ne pas marcher.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://sosforum.forumactif.fr/
thebestofevanescence
Modérateur
Apprenti Dr.House

avatar


Age : 28 Date d'inscription : 04/02/2006 Nombre de messages : 4739 Localisation : Bastogne Loisirs : Tennis et jeux video

MessageSujet: Re: TUTO : Mise en forme d'un texte. (Balises et astuces) Lun 21 Juil - 14:47

wai je sais merci ;-)
_________________


never forget the 23th of june 2008
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
ze_chaofan
Administrateur
Psychopathe

avatar

Masculin

Age : 25 Date d'inscription : 30/08/2007 Nombre de messages : 1923 Localisation : En face de toi...Ah ah, je t'ai bien eu ! ... Ouais, bon OK, c'était nul... je sors. Loisirs : Sauver le monde ! Argh, non, oublie ce que je viens de dire, je trahit ma couverture... chut...

MessageSujet: Re: TUTO : Mise en forme d'un texte. (Balises et astuces) Lun 21 Juil - 14:52

De rien, merci Smile
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://sosforum.forumactif.fr/
Enki
Administrateur
Enfant du destin

avatar

Masculin

Age : 38 Date d'inscription : 10/12/2007 Nombre de messages : 721 Localisation : TERRA Loisirs : Beaucoup trop ...

MessageSujet: Re: TUTO : Mise en forme d'un texte. (Balises et astuces) Mar 22 Juil - 8:46

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

------------------------------------------------------------------------------------
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://terradelta.free.fr
thebestofevanescence
Modérateur
Apprenti Dr.House

avatar


Age : 28 Date d'inscription : 04/02/2006 Nombre de messages : 4739 Localisation : Bastogne Loisirs : Tennis et jeux video

MessageSujet: Re: TUTO : Mise en forme d'un texte. (Balises et astuces) Mar 22 Juil - 11:14

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


never forget the 23th of june 2008
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Enki
Administrateur
Enfant du destin

avatar

Masculin

Age : 38 Date d'inscription : 10/12/2007 Nombre de messages : 721 Localisation : TERRA Loisirs : Beaucoup trop ...

MessageSujet: Re: TUTO : Mise en forme d'un texte. (Balises et astuces) Mar 22 Juil - 17:34

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

------------------------------------------------------------------------------------
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://terradelta.free.fr
thebestofevanescence
Modérateur
Apprenti Dr.House

avatar


Age : 28 Date d'inscription : 04/02/2006 Nombre de messages : 4739 Localisation : Bastogne Loisirs : Tennis et jeux video

MessageSujet: Re: TUTO : Mise en forme d'un texte. (Balises et astuces) Mer 23 Juil - 15:44

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


never forget the 23th of june 2008
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Contenu sponsorisé






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

Revenir en haut Aller en bas

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

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Permission de ce forum: Vous ne pouvez pas répondre aux sujets dans ce forum
¤ FORUM NEWSPLANETE ¤ :: LOISIRS :: INFORMATIQUE :: TUTORIELS -
Créer un forum | © phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit