<![CDATA[Wiki MSX Village]]> https://msxvillage.fr (C) 2005-2026 PHPBoost fr PHPBoost <![CDATA[Tutoriel BBCode]]> https://msxvillage.fr/wiki/tutoriel-bbcode https://msxvillage.fr/wiki/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 :



Code BBCODE :
[i]Italique[/i]


Italique

Code BBCODE :
[b]Gras[/b]


Gras

Code BBCODE :
[u]Souligné[/u]


Souligné

Code BBCODE :
[s]Barré[/s]


Barré

Code BBCODE :
[b][i]Gras et italique[/i][/b]
ou [i][b]Gras et italique[/b][/i]


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



Code BBCODE :
Texte[sup]exposant[/sup]
Texte[sub]indice[/sub]


Texteexposant

Texteindice



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 :D) pour convertir en hexadécimal !



Code BBCODE :
[color=red]Couleur rouge[/s][/color]
[color=#a89c52]Couleur quelconque[/color]


Couleur rouge

Couleur quelconque



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



Code BBCODE :
[size=10]Taille 10[/size]
[size=20]Taille 20[/size]
[size=30]Taille 30[/size]
[size=49]Taille 49[/size]


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 :



Code BBCODE :
[title=1]Titre 1[/title]
[title=2]Titre 2[/title]
[title=3]Titre 3[/title]
[title=4]Titre 4[/title]




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 :



Code BBCODE :
[align=left]Alignement à gauche[/align]


Alignement à gauche





Code BBCODE :
[align=center]Alignement au centre[/align]


Alignement au centre





Code BBCODE :
[align=right]Alignement à droite[/align]


Alignement à droite







Code BBCODE :
[align=justify]Texte justifié[/align]




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 :



Code BBCODE :
[list]
[*]Elément 1 liste à puces
[*]Elément 2 liste à puces
[*]Elément 3 liste à puces
[/list]




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





Code BBCODE :
[list=ordered]
[*]Elément 1 liste ordonnée
[*]Elément 2 liste ordonnée
[*]Elément 3 liste ordonnée
[/list]




  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 :



Code BBCODE :
[hide]Ceci est un texte caché[/hide]


Caché :
Ceci est un texte caché




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 :



Code BBCODE :
[quote= Jules Cesar]Alea jacta est[/quote]


Jules Cesar :
Alea jacta est






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.





Code BBCODE :
[code=bbcode]Exemple de code en BBCode : 
[i]Texte en italique[/i][/code]




Code BBCODE :
Exemple de code en BBCode : 
[i]Texte en italique[/i]








Notifications





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



Code BBCODE :
[style=success]Succès[/style]
[style=question]Question[/style]
[style=notice]Remarque[/style]
[style=warning]Avertissement[/style]
[style=error]Erreur[/style]




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 :



Code BBCODE :
[block]Intérieur du conteneur bloc[/block]
[fieldset]Intérieur du conteneur bloc-champs[/fieldset]






Intérieur du conteneur bloc


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 :





Code BBCODE :
[block style="width:100px"]Conteneur bloc de 100 pixels de large[/block]
[fieldset legend="Bloc-champs"]Conteneur bloc-champs avec titre[/fieldset]






Conteneur bloc de 100 pixels de large


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 :



Code BBCODE :
[url=http://www.google.fr]Google[/url]


Google



Ce qui crée un lien vers Google.



Code BBCODE :
[url=/forum/index.php]Index du forum[/url]


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 :



Code BBCODE :
[url]http://www.google.fr[/url]


http://www.google.fr



Code BBCODE :
[url]/forum/index.php[/url]


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



Code BBCODE :
[anchor=ancre]ancre[/anchor]


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 :



Code BBCODE :
[url=/articles/articles.php?cat=0&id=82#ancre]remonter au niveau de l'ancre[/url]


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 :



Code BBCODE :
[img]http://www.msx.org/sites/all/themes/mrc2k11/img/msxlogo.png[/img]


msxlogo

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



Code BBCODE :
[img]/upload/msxvillage_da9f0.png[/img]


msxvillage_da9f0

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



Code BBCODE :
[table]
  [row]
    [col]ligne 1 colonne 1[/col]
    [col]ligne 1 colonne 2[/col]
  [/row]
   [row]
    [col]ligne 2 colonne 1[/col]
    [col]ligne 2 colonne 2[/col]
  [/row]
  [row]
    [col]ligne 3 colonne 1[/col]
    [col]ligne 3 colonne 2[/col]
  [/row]
[/table]




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 :



Code BBCODE :
[table]
  [row]
    [col colspan="2"]Deux cellules fusionnées horizontallement[/col]
  [/row]
  [row]
    [col]Cellule bas gauche[/col]
    [col]Cellule bas droite[/col]
  [/row]
[/table]




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




Lignes fusionnées :

Code BBCODE :
[table]
  [row]
    [col rowspan="2"]Deux cellules fusionnées verticalement[/col]
    [col]Cellule haut droite[/col]
  [/row]
  [row]
    [col]Cellule bas droite[/col]
  [/row]
[/table]




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



Code BBCODE :
[table]
  [row]
    [head]intitulé 1[/head]
    [head]intitulé 2[/head]
  [/row]
  [row]
    [col]cellule 1[/col]
    [col]cellule 2[/col]
  [/row]
[/table]






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 :



Code BBCODE :
[math]lim{x right +infty}{sqrt{x}}=+infty[/math]




donnera :



lim{x right +infty}{sqrt{x}}=+infty



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.



Code BBCODE :
--- Ceci est un exemple de sous-titre dans le wiki ---


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 :oups, 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.]]> Thu, 05 Jun 2014 11:45:02 +0200 <![CDATA[Contribuer au site]]> https://msxvillage.fr/wiki/contribuer-au-site https://msxvillage.fr/wiki/contribuer-au-site Fri, 12 Jul 2013 13:52:59 +0200