Tutoriel BBCode

Introduction

Le BBCode est le "langage" utilisé pour la mise en page dans tout le site.



Son utilisation est assez simple : chaque outil de mise en forme pour un élément (texte, lien ou image) a un code particulier qu'il faut lui appliquer. Pour le faire, on entoure l'élément de cette façon : [commande]élément[/commande]. Il est aussi possible d'imbriquer les commandes (en appliquant 2 mises en forme sur le même élément), il faut alors bien faire attention à respecter l'ordre : [commande1][commande 2]élément[/commande 2][/commande 1]. Dans la pratique, ces commandes qui entourent un élément sont appelées balises.



Nous allons voir les éléments les plus courants pour la mise en forme sur MSX Village :

Mise en forme du texte

On va commencer par la mise en forme du texte, c'est ce qui est le plus simple. On va commencer par les mises en forme "de base" (gras, italique...). Pour chaque balise, vous avez en-dessous le résultat à l'écran :





Italique



Gras



Souligné



Barré



Gras et italique

ou Gras et italique



Vous pouvez aussi placer un texte en exposant (légèrement au-dessus) ou en indice (légèrement en-dessous) :





Texte^exposant

Texte_indice



Il est aussi possible de changer la couleur de la police : pour ça 2 méthodes : soit en indiquant le nom (anglais) de la couleur que vous souhaitez utiliser, soit via un code hexadécimal de 6 chiffres, de la forme #rrvvbb avec rr : valeur de la composante rouge, vv : valeur de la composante verte et bb : valeur de la composante bleue. Pour une couleur particulière, je vous invite donc à utiliser votre logiciel de dessin préféré (ou Paint) qui vous donneront les valeurs qui vont bien, puis une calculatrice scientifique (ou votre propre talent ) pour convertir en hexadécimal !





Couleur rouge

Couleur quelconque



La taille du texte est également modifiable (avec un nombre uniquement entre 0 et 49) :





Taille 10

Taille 20

Taille 30

Taille 49

Mise en forme d'un plan

Pour avoir une jolie présentation bien aérée, rien de tel que de réaliser un bel alignement et placer quelques titres, listes, blocs, conteneurs et autres joyeusetés.

Titres

Il est possible de définir un texte en titre ou sous-titre. Sa police, taille, encadrement, etc pourront varier en fonction du titre choisi. Il existe 4 niveaux de titres en BBCode :

Titre 1

Titre 2

Titre 3

Titre 4

Alignements

4 types d'alignements existent et sont possibles avec le BBCode : alignement à droite (l'alignement standard), alignement à droite, centré et justifié. Voici la syntaxe des balises à utiliser et leurs résultats à l'écran :

Alignement à gauche

Alignement au centre

Alignement à droite

Texte justifié

Listes

Les listes à puce peuvent être pratiques lorsqu'on énumère des choses. Les puces peuvent d'ailleurs être remplacés par des chiffres. Voici l'exemple d'utilisation dans les deux cas :

• Elément 1 liste à puces
• Elément 2 liste à puces
• Elément 3 liste à puces
  
  

1. Elément 1 liste ordonnée
2. Elément 2 liste ordonnée
3. Elément 3 liste ordonnée
   
   

Texte caché, citation, insertion de code

Si vous voulez cacher un texte, une balise est là pour ça :









Le contenu du texte s'affiche en cliquant dessus.





De même, si vous voulez citer quelqu'un (que ce soit dans le forum ou une citation célèbre ) vous pourrez aussi utiliser la balise suivante :











Lorsque vous avez besoin d'éditer un listing, vous pouvez utiliser une balise particulière : la balise code. Vous pourrez spécifier certains langages, la syntaxe sera alors prise en compte et il y aura une coloration spéciale en fonction du langage utilisé. Si le langage de programmation n'est pas reconnu, vous pourrez choisir "text", il n'y aura pas de coloration.

Notifications

3 types de notifications sont disponibles, elles sont utiles lorsqu'il y a un texte à mettre en valeur :







Succès

Question

Remarque

Avertissement

Erreur

Conteneurs

Il y a 2 types de conteneurs : les blocs et les blocs-champs. Les premiers sont juste un cadre, une zone de texte. Le deuxième également, à ceci près qu'il se présente comme un intercalaire, et que le fond est différent de l'arrière-plan habituel. A l'intérieur de ces zones, vous pourrez utiliser bien évidemment la mise en page que vous souhaitez, avec les balises vues ici. Voici comment est codé et apparaît un conteneur :

Intérieur du conteneur bloc-champs

Vous avez des possibilités d'adaptation pour ces blocs : vous pouvez en adapter la taille, définir un intitulé... Voici deux exemples pour illustrer le propos :

Bloc-champs

Conteneur bloc-champs avec titre

Liens, images et tableaux

Il vous est aussi possible d'insérer des liens, des images et des tableaux :

Liens

Vous avez la possibilité d'insérer des liens, internes comme externes, via la balise "url". Pour les liens externes, l'adresse complète est nécessaire, pour les liens internes au site, la partie "http://www.msxvillage.fr" n'est pas nécessaire. Voici donc 2 exemples, avec un lien externe et un lien interne :





Google



Ce qui crée un lien vers Google.





Index du forum



Dans les deux cas, vous n'êtes pas obligé de mettre un texte de remplacement pour le lien, même si c'est plus "propre" de procéder ainsi (certains liens étant assez longs, on y gagne en lisibilité). Vous pouvez donc procéder ainsi :





http://www.google.fr





/forum/index.php



Pour aller plus loin :



Vous pouvez créer des pseudos-liens internes pour un article qui serait assez long, ces pseudo-liens sont appelés ancres et permettent de naviguer plus facilement dans un long document.



Ici par exemple, je vais créer une ancre, donc un point de repère dans mon document :





ancre



Maintenant, si je crée un lien qui pointe vers cette ancre, je serai placé à l'endroit exact du document où elle est située :





remonter au niveau de l'ancre

Image

Pour insérer une image,il faut auparavant connaître où elle est stockée ! Si elle est stockée sur un site en externe, il vous faut mettre l'adresse complète pour la trouver, y compris chez les hébergeurs d'images type imageshack.

Si c'est une image que vous hébergez ici, elle se trouvera a priori dans le répertoire "upload" du site : c'est là que sont mis par défaut tous les fichiers que vous joignez, que ce soit dans le forum ou dans les dossiers. Pour info (et pour faire un peu de rangement), il se peut que les administrateurs du site se "permettent" de déplacer les images ailleurs, ce sera alors à eux de s'assurer que les liens soient toujours bons.



Je vais vous faire 2 exemples, l'un avec image externe, l'autre avec image en interne :







( image qui se situe sur la page d'accueil chez nos éminents collègues de MRC)







(image piquée dans le dossier upload de notre site)

Tableaux

Il y a pas mal de choses à voir sur les tableaux. Pour faire un tableau il faut plusieurs balises : d'abord une pour créer le tableau : la balise "table", une pour créer les lignes : "row", et enfin une pour créer les colonnes : "col".



Pour le premier exemple, je vous mets un tableau basique, de 3 lignes et 2 colonnes :

ligne 1 colonne 1	ligne 1 colonne 2
ligne 2 colonne 1	ligne 2 colonne 2
ligne 3 colonne 1	ligne 3 colonne 2

Vous pouvez aussi avoir l'utilité de fusionner des cellules, colonnes ou lignes. Voici la méthode :



Colonnes fusionnées :

Deux cellules fusionnées horizontallement
Cellule bas gauche	Cellule bas droite

Lignes fusionnées :

Deux cellules fusionnées verticalement	Cellule haut droite
	Cellule bas droite

Là on tape plus fort : fusion horizontale ET verticale :

Quatre cellules fusionnées verticalement		Cellule haut droite
		Cellule milieu droite
Cellule bas gauche	Cellule bas milieu	Cellule bas droite

Attention, dans ce cas précis, il faut impérativement utiliser "colspan" avant "rowspan"



Si vous voulez mettre des intitulés à vos lignes et colonnes, il vous faudra utiliser la balise "head" :

intitulé 1	intitulé 2
cellule 1	cellule 2

Formules mathématiques

Vous avez aussi la possibilité de faire apparaître à l'écran des formules mathématiques. Pour ce faire, c'est la balise "math" qu'il faut employer. Les éléments à l'intérieur de cette balise utilisent le code de Latex, si vous voulez connaître les possibilités, cliquez ici



Pour exemple :







donnera :

Spécificités du wiki

Le wiki permet d'avoir une mise en page plus standardisée, avec une table des matières générée automatiquement si on respecte la syntaxe qui suit, ainsi qu'une méthode différente au niveau des liens entre articles du wiki.



Pour le wiki donc, inutile d'utiliser les balises title vues précédemment. Pour créer automatiquement un titre, il suffit d'encadrer l'intitulé par deux à six tirets et un espace.





donnera

Ceci est un exemple de sous-titre dans le wiki

Vous irez voir dans la table des matières tout en haut, ce sous-titre est bien à l'écran. Je ne fais pas d'autre exemple pour ne pas pourrir la mise en page !



En ce qui concerne les liens inter-articles du wiki, inutile d'utiliser les balises url. Ici on utilise la balise "link". Dans la première partie de cette balise, vous mettez le titre de l'article vers lequel vous voulez établir un lien (vous obtenez le titre grâce à l'adresse de page : par exemple pour la page me concernant, on est sur http://www.msxvillage.fr/wiki/wiki.php?title=granced-membre-fondateur, le titre de la page est donc "granced-membre-fondateur"



Malheureusement, il m'est impossible de présenter la syntaxe, vu que la balise link est automatiquement transformée en balise url , donc je vais détailler :

- d'abord première partie de la balise, on met link=titre de l'article entre crochets, par exemple : link=granced-membre-fondateur

- ensuite on met le texte du lien, sans crochets, par exemple : fiche de granced

- enfin, on ferme la balise, avec un /link entre crochets.



Voici le résultat :



fiche de granced



Si vous cliquez sur le lien ci-dessus vous êtes immédiatement renvoyé vers ma fiche.