[LeMoussel]

Voici une petite aide (tutoriel) concernant l'utilisation du "tableau d'écriture" nommé plus communément "formulaire de rédaction de message".

Introduction


Mise en forme du texte




Citations et textes à espacement fixe



Génération de listes



Création de liens


Afficher des images dans les messages


Divers

---

---

Introduction
Qu’est-ce que le BBCode ?
BBcode est une abréviation pour Bulletin Board Code. C'est un langage de marquage du texte qui est utilisé dans les forums pour formater les messages. Le BBCode est une implémentation spéciale du HTML. Le BBCode ressemble au code HTML, les balises sont entre crochets [ et ] au lieu de < et >, et offre une meilleure maîtrise de l’affichage du contenu. Vous pouvez également ajouter les BBCodes en cliquant dans l’interface au-dessus du formulaire de rédaction de message.Gardez à l’esprit que la façon dont votre message s’affichera dépendra du navigateur et du système.

---

---

Mise en forme du texte
Comment utiliser le gras, l’italique et le souligné
Ce texte apparaît en gras
=> Cliquer sur le bouton B

Code: Tout sélectionner

ou encadrer le texte entre [b][/b] pour mettre en gras.
[b]Ce texte apparaît en gras[/b]


Ce texte apparaît souligné
=> Cliquer sur le bouton _u

Code: Tout sélectionner

ou encadrez le texte entre [u][/u] pour mettre en souligné.
[u]Ce texte apparaît en gras[/u]


Ce texte apparaît en italique
=> Cliquer sur le bouton i

Code: Tout sélectionner

ou encadrez le texte entre [i][/i] pour mettre en italique.
[i]Ce texte apparaît en italique[/i]


Ce texte mélange les styles

Code: Tout sélectionner

[b][i]Ce texte[/i][/b] [u]mélange[/u] les [u][i][b]styles[/b][/i][/u]


Changer la couleur
Il est possible de changer la couleur d’un texte en l’encadrant entre les balises [color=][/color]. Vous pouvez spécifier un nom de couleur connu (comme: red, blue, yellow, etc.) ou bien indiquer un code hexadécimal, c.-à-d. #FFFFFF, #000000. Il est plus simple de choisir votre couleur en cliquant sur le bouton 'Couleur de la police'.

Pour du texte rouge

Code: Tout sélectionner

Pour du texte [color=#FF0000]rouge[/color]

Qui n'aime pas le rouge, le jaune et le bleu ?

Code: Tout sélectionner

Qui n'aime pas le [color=red]rouge[/color], le [color=#eeaa00]jaune[/color] et [color=#30f]le bleu[/color]?

Changer la taille du texte
Il est aussi possible de changer la taille du texte de façon analogue avec les balises [size=][/size]. La valeur numérique représentant la hauteur du texte en pourcentage, à partir de 20 (tellement petit que vous ne pourrez pas le voir) jusqu’à 200 (très grand). Par simplicité vous pouvez sélectionner la taille dans la liste déroulante indiquant Normale.

Regardez de Très petite , Petite, puis Grande à Trés Grande !

Code: Tout sélectionner

Regardez  [size=50]de Très petite[/size] [size=85], Petite[/size], [size=150]puis Grande à [/size] [size=200]Trés Grande ![/size]

Centrer un texte
Pour center une partie de votre texte au milieu de la page, il faut utiliser les balises [center ][/center ].

Code: Tout sélectionner

[center]Je suis bien au centre de la page[/center]

Je suis bien au centre de la page

Est il possible de combiner des balises ?
Oui, bien évidemment, vous pouvez écrire pour attirer l’attention:

Code: Tout sélectionner

[size=200][color=red][b]REGARDEZ-MOI ![/b][/color][/size]

REGARDEZ-MOI !

Attention toutefois à ne pas en abuser! Retenez aussi que c’est à vous, l’auteur, de vous assurer que les balises sont correctement fermées.
Par exemple, ceci est incorrect : C’est faux![b] Vous savez pourquoi ?

Code: Tout sélectionner

[b][u]C’est faux![b][/u] Vous savez pourquoi ?

---

---

Citations et textes à espacement fixe
Citer du texte dans les réponses
Il y a deux manières de citer un texte, avec ou sans référence.
Lorsque vous utilisez la fonction de citation pour répondre à un message sur le forum, vous pouvez noter que le texte du message est ajouté à l’intérieur d’un bloc ou appuyer sur le bouton Quote. c'est la citation en aveugle.

Code: Tout sélectionner

[quote]Le texte de M. LeMoussel ira ici[/quote]

Le texte de M. LeMoussel ira ici

La deuxième méthode vous permet de citer avec une référence à une personne ou toute autre référence !
Par exemple, pour citer un texte de "LeMoussel", vous mettrez:

Code: Tout sélectionner

[quote="M. LeMoussel"]Le texte de M. LeMoussel ira ici[/quote]

Le texte de M. LeMoussel ira ici

M. LeMoussel a écrit: sera ajouté automatiquement avant le texte. Souvenez-vous que vous devez encadrer entre "" le nom à citer, ce n’est pas optionnel.

Afficher du code ou des données à espacement fixe
Si vous désirez insérer du code ou quoi que ce soit qui nécessite une police à largeur fixe, par exemple: une police de type Courier, encadrez votre texte entre les balises [code ] police à largeur fixe[/code ] ou appuyer sur le bouton Code:

Code: Tout sélectionner

police à largeur fixe

---

---

Génération de listes
Création d’une liste non ordonnée
Le BBCode gère deux types de listes: ordonnées ou non. Une liste non ordonnée affiche chaque élément de la liste séquentiellement l’un après l’autre, chacun indenté par une puce. Utilisez

Code: Tout sélectionner

[list][/list]

pour créer une liste non ordonnée et définissez chaque élément avec [*].

Par exemple, pour la liste de vos couleurs préférées, utilisez:

Code: Tout sélectionner

[list]
[*]Rouge
[*]Bleu
[*]Jaune
[/list]

Ce qui générera la liste suivante:

• Rouge
• Bleu
• Jaune

Création d’une liste ordonnée
Le deuxième type de liste, la liste ordonnée, vous permet de décider de ce qui s’affiche avant chaque élément.
Pour une liste alphabétique utilisez

Code: Tout sélectionner

[list=a][/list]

Et pour créer une liste ordonnée numérotée utilisez

Code: Tout sélectionner

[list=1][/list]

Comme pour les listes non ordonnées, les éléments sont indiqués avec [*].

Par exemple:

Code: Tout sélectionner

[list=1]
[*]Faire les courses
[*]Acheter un nouvel ordinateur
[*]Jurer quand le PC plante
[/list]

affichera

1. Faire les courses
2. Acheter un nouvel ordinateur
3. Jurer quand le PC plante

et avec

Code: Tout sélectionner

[list=a]
[*]Réponse 1
[*]Réponse 2
[*]Réponse 3
[/list]

vous obtiendrez

1. Réponse 1
2. Réponse 2
3. Réponse 3

---

---

Création de liens
Liens vers un autre site
Le BBCode permet de créer des URI (Indicateurs de Ressources Uniformes) ou URL de différentes façons.
La première est d’utiliser les balises [url][/url], ce que vous taperez après le signe = se comportera comme une URL. Vous pouvez cliquer directement sur le bouton URL pour ajouter ces balises.

Par exemple, pour un lien vers http://www.ville-arnieressuriton.com, vous pouvez utiliser:

Code: Tout sélectionner

[url=http://www.ville-arnieressuriton.com/]Visitez Le site de la commune d'Arnières sur Iton ![/url]

Ce qui générera le lien, Visitez Le site de la commune d'Arnières sur Iton !.
Si vous désirez que l’URL elle-même soit affichée comme un lien, vous pouvez simplement utiliser:

Code: Tout sélectionner

[url]http://www.ville-arnieressuriton.com/[/url]

Ce qui générera le lien, http://www.ville-arnieressuriton.com

De plus, ce forum autorise les "Liens Magiques", ce qui transforme automatiquement les URL correctement écrites en lien sans spécifier de balise ou même "http://".
Par exemple, si vous tapez

Code: Tout sélectionner

www.ville-arnieressuriton.com

un lien http://www.ville-arnieressuriton.com sera affiché automatiquement à la lecture de votre message.

---

---

Afficher des images dans les messages
Ajout d’une image dans un message
Le BBCode permet d’inclure des images dans vos messages à l’aide d’une balise. Il y a deux choses importantes à se rappeler lors de l’utilisation de cette balise qui sont d’une part, que beaucoup d’utilisateurs n’apprécient pas qu’il y ait beaucoup d’images dans les messages et d’autre part, que l’image affichée doit être disponible sur Internet (elle ne peut être uniquement que sur votre ordinateur, sauf si vous avez un serveur Web !). Pour afficher une image, vous devez encadrer son URL entre des balises ou cliquer sur le bouton Img.

Par exemple:

Code: Tout sélectionner

[img]http://www.google.fr/intl/en_ALL/images/logo.gif[/img]

affichera


Comme noté dans la section URL ci-dessus, vous pouvez entourer l’image entre des balises "[url][/url]" si désiré.
Par exemple (cliquer sur l'image pour voir !):

Code: Tout sélectionner

[url=http://www.google.fr/][img]http://www.google.fr/intl/en_ALL/images/logo.gif[/img][/url]

affichera

---

---

Divers
Ajout d’une ligne horizontale de séparation
Pour ajouter une ligne horizontale de séparation , vous pouvez utiliser les balises

Code: Tout sélectionner

[hr][/hr]

Cela produira ceci :

---

---

Cela est surtout utile pour ajouter un peu de structure sur les très longs messages.

Ancre
Une ancre permet de définir des liens dans la page. Elle permet de faire en sorte de se rendre directement sur l'endroit recherché dans la page (voir par exemple les liens du sommaire de cette page, ils mènent directement au paragraphe concerné).

Pour définir une ancre, il faut définir la syntaxe suivante:

Code: Tout sélectionner

[anchor=NomAncre]Texte avec une ancre[/anchor]

Et pour créer un lien vers un endroit précis de la page, il faut mettre nom de l'ancre précédemment définie dans le nom du lien de l'ancre.
Par exemple

Code: Tout sélectionner

[url_anchor=TM]Haut de la Page[/url_anchor]

Ce qui nous donne :

[swimmy]

Merci - Je crois que ça commence à rentrer - Bon, c'est pas du gâteau!

Mais à m'nâge min p'iti gâ, faut t'dire qu'la tête, ch'est pu ch'que ch'était, et faut t'dir' itou queul disque dur* y c'mmence à r'chembler à d'la chauch blanqu' "

Traduction pour les moins de 30 ans: Mais en mon âge, mon petit gars, faut te dire que la tête n'est plus ce qu'elle était, et il faut te dire aussi que le disque dur commence à ressembler à de la sauce blanche.

N.B.* Nos ancêtres normands ne connaissaient pas l'existence du disque dur.

[LeMoussel]

Voilà swimmy le tutoriel complété

Tu as désormais "toutes les billes" pour nous rédiger de superbes articles

Si vous avez besoin d'autres informations sur l'utilisation de ce forum, n'hésitez pas à poser à vos questions.

[swimmy]

MERCI -
ça y est , je mis suis mise.....à tout ce charabia informatique...xhtml...css... et autre petites réjoussance du genre. Merci de m'avoir alléchée par ton tuto.
Bon c'est pas encore le Nirvana, mais je commence à comprendre cette langue étrangère (moi qui ai déjà du mal à comprendre les notices en anglais!!).
Pour le moment, je commence à maîtriser le html, avec la liste des balises sous les yeux bien entendu, car là, la sauce blanche qui me sert de cerveau risquerait de tout mélanger, et au final c'est la page vierge, quand je ne plante pas mon "didi" (ça c'est le gentil surnom de mon ordinateur dont je ne citerai le nom que si la marque me rémunère )
Bref, maintenant, moi aussi, je peux commencer à "m'la péter" (lol) devant mes copains et mes copines.

Je crois que le site merveilleux dont je rêve va me prendre du temps, et que je vais souvent te mettre à contribution.

Tiens justement pour commencer: Je n'arrive pas à entrer les photos qui sont sur mon Didi .

Question 1: Est-ce que à partir de src= je dois mettre le chemin en commençant par C: et continuer toute la filière des dossiers et sous-dossiers jusqu'à la photo choisie? (c'est ce que j'ai déjà fait et je n'obtiens rien)
Question bis: Comment dois-je rédiger le chemin? ( en attachant tout les mots?, tels qu'ils se présentent dans mes dossier?, avec ou sans majuscule? etc....) Je pense que c'est là que je coince.
Exemple: Comment faire avec une image qui s'appelle moi qui est dans un sous-dossier 210407 lui même issu d'un dossier Mes Images faisant partie de mon dossier Mes Documents.

Si tu arrive à me trouver la solution j'te f'rai une grosse bise