[Aide] Le BBCode
5 participants
- ZeubossMembre du Panthéon
[Aide] Le BBCode
Sam 13 Oct 2007, 22:01
Le BBCode
Voici un guide sur une chose dont vous avez sans doute déjà entendu parler si vous avez déjà fréquenté des forums auparavant. Sinon, je vous conseille de lire ce guide : il s'agit du BBCode.
C'est le code que les forums utilisent pour décorer les messages : il permet de décorer un message (rouge, gras, italique, centré...) mais aussi de faire plusieurs choses, hors du design, qui peuvent vous être utiles (insertion d'images, création de tableaux, etc)
Ce tutoriel sera divisé en trois parties : une première sur l'initiation au BBCode, une seconde sur les codes les plus fréquents, et une dernière sur les codes moins fréquents mais qui peuvent être utiles.
Partie I : Initiation au BBCode
Ayant déjà répondu à la question "A quoi ça sert" dans l'introduction, je vais vous faire une liste plus complète des choses que vous pouvez faire à l'aide du BBcode :
- Modifier la taille du texte ;
- Modifier la couleur du texte ;
- Modifier la police tu texte ;
- Modifier la décoration du texte (italique, gras, souligné, barré) ;
- Modifier l'alignement du texte (Gauche, droit, centré, justifié) ;
- Créer un lien hypertexte ;
- Insérer une ligne automatiquement ;
- Créer une liste (oui, comme la liste que vous lisez en ce moment même )
- Insérer des Smileys ;
- Insérer une image ;
- Insérer du flash ou des vidéos ;
- Et d'autres modifications de texte (Mettre en indice, en exposant, déroulement de texte... voir "Autres" pour les connaître).
D'abord, parlons du mode d'édition du texte. Le principe est simple : il y a deux modes d'édition du texte : le mode où vous voyez le BBcode, qui est le mode normal, et le mode où vous voyez le texte tel qu'il sera affiché (pour les pages web, les programmeurs ont donné le nom "What You See Is What You Get/WYSIWYG", traduit en français par "tel écrit tel écran" aux logiciels qui permettent de faire ainsi). Vous pouvez basculer le mode d'édition du texte en cliquant sur le bouton A/A parmi les boutons au-dessus. Si le bouton est rouge, vous êtes en mode WYSIWYG. Sinon, vous êtes en mode normal. Cependant, il serait préférable que vous passiez en mode "normal" si vous voulez apprendre le BBcode. Certes, c'est moins charmant, mais vous verrez, d'ici peu, vous y serez tellement habitués que vous ne pourrez vous en passer
Cette partie servira à présenter le BBCode plus en profondeur à ceux qui ne le connaissent pas. Vous pourrez sans doute la passer si vous avez déjà de l'expérience dans le BBcode, et dans le (X)HTML/CSS.
Pourquoi les connaisseurs de (X)HTML/CSS, ? Raison simple : le BBCode a tout - ou presque (voir Autres -> Aléatoire) - emprunté au HTML et au CSS : c'est une forme simplifiée du HTML, basée sur le système de langage de balise.
Néanmoins - voilà la différence fondamentale entre le BBcode et et le HTML - l'usage du BBcode n'est pas obligatoire pour créer un message, tandis qu'en HTML, il y aura toujours besoin de balises : paragraphe, body, pour ne citer que les indispensables. Tandis qu'en BBcode, il n'est pas obligatoire de mettre des balises, car les balises sont souvent utilisées uniquement quand il y a besoin de modifier l'aspect du texte (comme l'usage du CSS dans le HTML). En fait, il existe moins de balises qui correspondent à des balises HTML (Image insérée, ligne insérée, animation flash insérée, etc) que des propriétés/valeurs en CSS (italique, gras, souligné, rouge, taille 18 pixels, centré...).
Si vous maîtrisez le HTML, vous pouvez également en avoir l'usage dans vos messages pour les quelques fonctionnalités qui pourraient être absentes du BBcode.
Maintenant, il faut que vous sachiez comment marche les balises BBcode.
En HTML, il y a deux types de balises : les balises par paires ( par exemple), avec une première balise pour marquer le début de la partie concernée et une seconde pour marquée la fin, et les balises seules (la balise d'image par exemple) qui servent souvent à faire une insertion (retour à la ligne, barre, image...). Le BBcode fonctionne uniquement avec des balises par paires (sauf pour le cas "insertion de ligne", mais c'est le seul).
Voyons maintenant comment insérer du BBcode dans un message. Par exemple, supposons que j'aie envie de mettre un morceau de texte en italique.
Dans le mode WYSIWYG, ce sera simple : il vous faudra simplement sélectionner le morceau de texte et cliquer sur le bouton "i", et votre texte apparaîtra en italique. Mais, comme je vous l'ai dit, on s'intéressera plus particulièrement dans ce tuto au mode normal (eh oui, je suis sadique ) donc, dans le mode normal, vous avez deux solutions : soit vous faites comme dans le mode WYSIWYG et deux balises apparaîtront autour du texte. Dans l'autre méthode, vous tapez directement le code dedans. Pourquoi apprendre le BBcode alors que c'est plus simple de cette manière, me direz-vous ? Eh bien, ce sera plus pratique d'avoir des connaissances en BBcode si vous avez fait une manipulation par erreur et si vous voulez la modifier, ou si vous vous trouvez sur un forum qui ne propose pas toutes les options présentes ci-dessus avec des boutons (et même, il y a quelques options que vous ne trouverez pas parmi ces boutons et que vous apprendrez au cours du tuto :wink2: )
Enfin bref. Vous devriez donc voir ça sur votre zone de saisie :
- Code:
[i]texte en italique[/i]
Néanmoins, je peux vous assurer que vous verrez votre texte ainsi : texte en italique. La preuve, en tapant ce message, j'ai moi-même le code devant les yeux, alors que vous, devant l'écran, vous voyez un texte en italique
Vous pouvez remarquer que la formation d'une balise : la première est entourée de crochets, et contient la valeur dedans. La seconde est similaire, mais la valeur est précédée d'un slash ( "/" ).
Notez également que vous pouvez choisir de désactiver le BBcode en bas de votre message, tout comme le HTML et les smileys (le HTML peut être impossible à activer sur certains forums). Le HTML est automatiquement désactivé, mais si vous l'activez, il peut y avoir un petit problème avec les polices (voir première partie -> Polices). Je vous apprendrez également quelques balises HTML et propriétés CSS simples pour contourner quelques faiblesses du BBcode.
Maintenant que vous savez comment maîtriser le BBcode, je vais vous apprendre les différentes choses que vous pourrez faire avec. Mais avant, je dois finir cette partie sur une petite Nota Bene : vous pouvez utiliser plusieurs balises BBcode à la fois, mais faites attention à l'ordre des balises, qui peux faire varier l'effet sur le texte.
Par exemple, si vous voulez mettre un texte en italique et en souligné, il y a deux solutions :
- Code:
[u][i]texte souligné 1[/i][/u][i][u]texte souligné 2[/u][/i]
Aussi, si une balise (prenons par exemple souligné) commence entre deux balises italiques (par exemple) la balise jumelle devra elle aussi se trouver entre les eux balises italiques. Dans le cas contraire, le code ne marchera PAS. Faites donc attention à l'ordre des balises.
Partie II : Les premiers BBCodes
Bon, bah on s'attaque à la grande partie, grâce à laquelle vous serez à peu près omniscient sur les méthodes nécessaires pour mettre en forme votre message
Dans cette partie-là, vous apprendrez surtout à modifier le texte. Vous verrez également quelques trucs comme l'insertion d'images. Voici la liste des choses que vous apprendrez, plus précisément :
- Modifier la taille du texte ;
- Modifier la couleur du texte ;
- Modifier la police tu texte ;
- Modifier la décoration du texte (italique, gras, souligné, barré) ;
- Modifier l'alignement du texte (Gauche, droit, centré, justifié) ;
Décoration du texte
Je vous ai montré comment mettre du texte en italique dans la partie précédente. Voici donc les quatre propriétés que vous apprendrez ici :
gras ; italique ; souligné ;
Voici les codes pour chacun d'entre eux :
- Code:
[b]gras[/b] ; [i]italique[/i] ; [u]souligné[/u] ; [strike]barré[/strike]
Taille du texte
Vous allez apprendre un nouveau type de balise : ce sont les balises où l'ont met une valeur à la propriété.
C'est-à-dire ?
Eh bien, avec les balises précédentes, vous pouviez mettre un texte en gras, italique, souligné, etc. Mais il y avait une balise pour chacun.
Maintenant, vous allez découvrir que vous pouvez affecter presque autant de valeurs que vous voulez à une seule balise.
La balise en question est la suivante :
- Code:
[size=16]texte[/size]
Vous avez sans doute remarqué que le "size", dans la première balise, est suivie d'un signe (=) et d'une valeur (16). le = sera présent dans toutes les balises de ce genre, et la valeur pourra varier (dans ce cas, ce sera un nombre entier positif allant de 1 à 29 (néanmoins, dans la plupart des autres cas, la valeur peut être illimitée).
La valeur que vous affectez correspond à la taille en pixel des caractères (les pixels sont les petits points qui composent votre écran). Voici quelques exemples de taille :
Taille 8
Taille 10
Taille 12 (par défaut)
Taille 14
Taille 18
Taille 24
Ce sont les tailles les plus fréquentes, mais vous pourrez changer si vous voulez. Pour cela, il vous suffit de mettre le nombre que vous voulez devant "size=".
Les polices de caractère
Ah, cette partie-là risque d'être problématique
Enfin, commençons par le concret. pour changer de police - vous avez déjà vu la méthode pour changer de taille, c'est à peu près pareil, c'est toujours le système de balise avec une valeur. Voici le code :
- Code:
[font="arial"]texte en arial[/font]
[font="Times New Roman"]texte en Times New Roman[/font]
[font="Voya Nui"]Texte avec la police Voya Nui[/font]
Et voici le résultat :
texte en arial
texte en Times New Roman
Texte avec la police Voya Nui
Un problème avec la dernière police ? Voire avec la seconde ?
Voici le problème. Pour qu'une police s'affiche correctement, il faut que l'internaute la possède. Bien sûr, à peu près tout le monde possède les polices standard (Times New Roman, Arial, etc) mais il y a moins de chances pour que votre camarade internaute soit en possession de la police typée gothique ou autre que vous venez d'avoir.
Heureusement, il y a quelques solutions. La première, si vous utilisez Windows, est la suivante : télécharger un logiciel qui s'appelle Megafonts. pour faire simple, ce logiciel vous permet d'installer plus de 1000 polices de caractère automatiquement. Sans plus attendre, voici le lien de téléchargement : http://www.01net.com/telecharger/windows/Bureautique/police/fiches/29193.html
Pour les quelques malheureux qui préféreraient Linux ou Mac, pas de panique, il y a un site où vous trouverez des milliers de polices gratuites. Le voici donc : http://www.dafont.com . Il vous suffit de chercher la police que vous voulez installer sur le site, et vous aurez plusieurs polices proposées (pas toutes, mais il y a de fortes chances pour que celle que vous désirez s'y trouve, étant donné que ce site est un des principaux dans ce genre de téléchargements). Une fois la police téléchargée, vous devrez suivre le protocole suivant : vous extrairez d'abord les fichiers (à l'aide d'un logiciel ou du système d'exploitation) et vous ferez un copier-coller du fichier .ttf (la police) dans l'endroit où sont stockées les polices sur votre ordinateur (Panneau de Configuration/Polices ou /Fonts sur windows par exemple). Vous pourrez faire ainsi avec toutes les polices qui sont générées par Megafonts, bien sûr ce sera plus long, mais, désolé, c'est le seul moyen
Dernier petit problème : certaines polices sont faites pour être affichées en grand - ou, du moins, la qualité sera un peu perdue si elles sont trop petites. il suffira d'élever la taille. Mais éviter de la mettre en trop grand, pour ceux qui n'ont pas votre police de caractère.
Dernière petite remarque : si vous ne désactivez pas le HTML, l'effet de police peut ne plus être généré. Pourquoi ? Je n'en sais rien, c'est peut-être un bug de forumactif.
Vous pouvez éventuellement utiliser l'alternative HTML qui correspond. Il suffit de remplacer :
- Code:
[font="arial"]texte[/font]
- Code:
<span font-family="arial">texte</span>
Re: [Aide] Le BBCode
Mer 07 Nov 2007, 16:18
L'alignement du texte
Bon, je suppose que vous commencez à en avoir marre des longs bouts de texte, n'est-ce pas ? Fort heureusement, cette partie est loin d'être aussi longue que les deux précédentes ^^
Donc, cette partie sera sur l'alignement du texte. De quoi s'agit-il il s'agit de positionner le texte à droite, à gauche, centré ou justifié.
Comme pour la décoration du texte, et contrairement à la police et à la taille, il y a une balise pour chaque type de positionnement, et non pas une balise avec plusieurs valeurs possibles (contrairement au CSS correspondant aussi). Voici donc les balises :
Effet rendu :
Comme vous pouvez le constater, rien ne change quand le texte aligné à gauche, car c'est l'alignement par défaut. Aussi, j'ai mis un grand paragraphe de texte (faux-texte en latin) pour vous montrer l'effet du texte justifié. Je l'ai fait car l'effet sera plus visible sur un grand paragraphe de texte : le texte occupe un maximum l'espace qui lui est donné.
Une petite note de fin : il est impossible de mettre deux alignements différents dans un même bloc de texte, sur une même ligne. Raison simple : si les textes se croisaient à un moment, ce serait problématique pour lire ^^
Si vous le faites, sachez que votre message fera un passage à la ligne dans ce cas.
La couleur du texte
J'espère que ce petit chapitre sur l'alignement du texte ne vous fera pas oublier ce que nous avions fait sur les polices et les tailles, car le principe de la valeur ajoutée revient.
Enfin. Voici la balise qu'il faut ajouter si vous voulez voir votre texte en rouge, par exemple :
Pour vous en persuader, voici le résultat : texte rouge.
Et voici la liste des valeurs qui pourront être à la place de red : darkred (rouge foncé), red (rouge), orange (orange), brown (marron), yellow (jaune), green (vert foncé), olive (vert kaki), cyan (bleu clair), blue (bleu), darkblue (bleu foncé), indigo (indigo), violet (violet, quoique plutôt rose), purple (plus proche de violet).
Vous remarquerez peut-être qu'il y a un petit problème...
Eh oui. Votre ordinateur peut vous afficher 256*256*256 couleurs (256 teintes de rouge, de vert et de bleu), c'est-à-dire très précisément 16 777 216 couleurs, et on ne vous en propose même pas une quinzaine dans cette liste.
D'un côté, comprenez que chez forumactif, ce n'est pas l'activité la plus plaisante de donner plus de 16 millions de noms à chacune des couleurs qui peuvent être affichées sur votre machine, alors il faudra régler ce problème.
Heureusement, il existe une solution : l'hexadécimal. ne vous inquiétez pas, pas besoin d'être un professionnel confirmé pour comprendre ça : chaque couleur possède un code hexadécimal, qui ressemble à ça : #3FD2E4. Chaque caractère va de 1 à 9 ou de A à F, ce qui donne 16 possibilité pour chaque caractère (d'où le nom hexadécimal). Le nombre de possibilité est donc de 16*16*16*16*16*16=256*256*256, c'est-à-dire... Eh oui, vous l'avez deviné, le problème est résolu Comme, cependant, vous ne devinerez pas le code hexadécimal tout seul, on a pensé à vous : il existe un petit logiciel, la "boîte à couleur", qui vous permet de sélectionner une couleur et d'obtenir son code hexadécimal. Voici le lien pour la télécharger : http://pourpre.com/colorbox/
Partie III : D'autres balises utiles
Création de Liste
On commence cette partie avec quelque chose d'assez simple : les listes. Néanmoins, il faudra que vous sachiez qu'il y a besoin de deux types de balises, pour la première fois.
Voilà donc comment vous ferez pour créer une liste en BBcode : il y aura les balises "list", qui marqueront le début et la fin de la liste. Il y aura également les balises [*] qui marqueront une nouvelle puce.
Voici donc une liste simple :
et le résultat :
Vous savez maintenant créer une liste simple. On va créer une liste un peu plus élaborée, de ce type :
puce 2, première rangée
Voici le code qui correspond :
Vous l'aurez compris, il s'agit d'"insérer" une liste entre deux puces. Cependant, faites attention, si vous passez à la ligne, il y aura un écart entre les puces de premier rang et de second rang.
Vous pouvez également faire une liste numérotée à partir de a ou 1. Il vous suffit de mettre "list=a" ou "list=1" au lieu de "list" tout court.
Insertion de Spoiler, citations, codes, et texte "cachés"
Là, vous allez apprendre des codes qui ont un effet spécial : en effet, les textes seront mis dans des cadres gris sans bordure.
Mais avant, je vais vous expliquer plus particulièrement leurs différences :
Les citations sont simplement des textes cités, pour préciser qu'ils ne sont pas dans le message à la base. Il y a également moyen de dire qui a écrit la citation grâce au BBcode, et on peut citer directement un message entier en cliquant sur "citer" lorsqu'on se trouve sur le topic de discussion.
Les Spoilers sont des textes écrits dans un cadre qui sont cachés et ne s'afficheront que lorsqu'on cliquera dessus. A la base, un spoiler est une information qui ne doit pas être révélée directement, c'est pourquoi le spoiler est d'abord caché sur les forums.
Les codes - c'est ce que j'utilise depuis tout à l'heure pour vous montrer les BBcodes et codes HTML. lorsqu'un code est entre ses balises, ce n'est pas son effet mais le code qui s'affiche, balises HTML et BBcode désactivées ou non. Vous ne vous en servirez probablement pas, ou rarement, mais c'est toujours ça d'appris.
Et les textes "cachés" ? eh bien, ce sont simplement des textes qui sont visibles sur le message, dans un cadre similaire aux cadres des spoilers et citation, mais ne sera pas contenu lorsque vous citerez le message qui le contient. A quoi ça sert ? A vrai dire, je n'en sais strictement rien moi même, mais bon O.o
Voici donc les codes que vous devrez retenir pour cette partie-là :
Et voici les rendus :
Insertion de tableaux
Dans cette partie-là, on va apprendre quelque chose d'un peu plus complexe : la création de tableau. Pourquoi complexe ? Parce qu'il y a trois balises à retenir et deux-trois corrections à faire à un tableau de base.
D'abord, il faut que vous appreniez les trois balises : "table", "tr" et "td". La première balise, "table", sert à indiquer le début et la fin du tableau. la seconde, "tr", marque le début et la fin d'une ligne du tableau. Enfin, la troisième, "td", marque la présence d'une case de tableau dans une ligne. Attention, vous devez mettre autant de case dans chaque ligne, sans quoi une case de la ligne sera remplie par le motif de contour.
Vous devez mettre deux balises "table" par tableau. Vous pouvez mettre autant de rangée "tr" que vous voudrez. Vous pouvez également mettre autant de cellules "td" que vous voulez, mais attention à ne pas en mettre plus dans une rangée que dans une autre.
Voici donc le code pour un tableau de base :
Et le Résultat :
Petit problème, comme vous le constatez : ça n'a pas vraiment une tête de tableau. Raison simple, les bords ne sont pas apparents. Pour régler ce problème, il faudra rajouter "border=1" devant "table" dans la première balise. (et encore, vous avez de la chance, en HTML, par défaut, le texte est en police 14 et les cases sont séparées ^^)
Voici donc le nouveau code et le nouveau tableau :
Insertion d'images et de flash
Voici une partie dans laquelle je mettrai quelques liens et précisions pour la compléter.
Je vais d'abord vous apprendre à faire quelques distinctions entre images, gifs, vidéos, musique et flash.
Les images : les images, je pense que ce n'est pas vraiment la peine de vous expliquer. C'est ce que vous pourrez créer ou modifier avec Paint, mais aussi avec des logiciels sans doute plus performants comme The Gimp, Paint Shop Pro, Photoshop... Les extensions de fichier qui correspondent sont .jpg, .bmp, .png, .gif, .tiff, .svg, etc. Elles s'insèrent dans un message en mettant le lien de l'image entre deux balises "img". Il faut cependant que l'image soit sur internet. Heureusement pour vous, j'ai fait un petit tutoriel sur comment prendre/mettre une image sur internet : https://bionifigs.forumpro.fr/forum-d-aides-f8/aide-inserer-une-image-t522.htm
Les gifs animés : les gifs animés sont comme des images, à l'exception qu'ils répètent une même succession d'image et ne sont supportés que par le format .gif . Certains logiciels permettent d'en créer (Gif Animator, Gif Movie Gear, etc) mais je ne vais pas non plus vous en faire la liste ;P
les animations flash : Les animations flash sont de petites animations interactives faites avec le logiciel flash (vous en avez très certainement déjà entendu parler, vous avez besoin de Flash Player pour lire les jeux flash sur internet). Contrairement aux gifs et aux images, elles peuvent ne pas être statiques, et être interactives (on peut cliquer dessus, entendre de la musique, etc). Vous pouvez les insérer en entourant le lien du fichier entre les balises flash. Ces fichiers sont au format .swf .
Les musiques et vidéos : là-dessus, ça risque d'être un peu difficile. Les vidéos et musiques que vous lisez, par exemple, avec VLC ou Windows Media Player - généralement aux formats .mp3, .wma, et .mp4, .wmv, .avi, etc - ne peuvent PAS être lues par le navigateur que vous utilisez.
Bien heureusement (comme toujours) certains ont imaginé une solution. Il s'agit de sites où l'ont peut héberger une vidéo qui sera converti en un fichier flash qui marchera comme un lecteur de vidéos. Et oui, vous l'avez deviné, il s'agit des sites comme Youtube et Dailymotion, mais aussi Deezer pour la musique. Généralement, devant chaque vidéo que vous lisez, il y a un code HTML qui permet d'afficher la vidéo sur les sites et les forums. Sur ce forum, cela ne posera pas de problème, étant donné que vous pouvez activer le HTML.
Vous pouvez toujours héberger un fichier .avi, . wma, etc. et donner le lien, mais il proposera à l'utilisateur de lire le fichier ou de l'enregistrer, mais pas de la lire sur le navigateur, mais bon.
Voici donc un exemple d'image et un exemple d'animation flash :
http://cristgaming.com/pirate.swf (désolé, c'est la seule chose que j'ai pu trouver ^^)
http://www.choosetoys.co.uk/images/LegoBionicleGlatorianVoroxSand.jpg
Voilà comment les intégrer :
Voici le résultat pour l'image (je n'ai pas mis le flash pour cause de "trop bruyant", mais vous pouvez le mettre si ça vous chante là où vous voulez ^^) :
Vous pouvez également régler la taille de l'animation flash en mettant, entre parenthèse, à côté de "flash" dans la première balise, la hauteur et la largeur en pixels de l'animation. Attention, si vous voulez que la taille soit proportionnelle, les longueurs doivent aussi être proportionnelles, et si vous agrandissez, vous pourriez perdre de la qualité.
Bon, je suppose que vous commencez à en avoir marre des longs bouts de texte, n'est-ce pas ? Fort heureusement, cette partie est loin d'être aussi longue que les deux précédentes ^^
Donc, cette partie sera sur l'alignement du texte. De quoi s'agit-il il s'agit de positionner le texte à droite, à gauche, centré ou justifié.
Comme pour la décoration du texte, et contrairement à la police et à la taille, il y a une balise pour chaque type de positionnement, et non pas une balise avec plusieurs valeurs possibles (contrairement au CSS correspondant aussi). Voici donc les balises :
- Code:
[left]Texte Aligné à gauche[/left]
[right]Texte aligné à droite[/right]
[center]Texte centré[/center]
[justify]Morceau de texte justifié : Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.[/justify]
Effet rendu :
Texte Aligné à gauche
Texte aligné à droite
Texte centré
Morceau de texte justifié : Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.
Comme vous pouvez le constater, rien ne change quand le texte aligné à gauche, car c'est l'alignement par défaut. Aussi, j'ai mis un grand paragraphe de texte (faux-texte en latin) pour vous montrer l'effet du texte justifié. Je l'ai fait car l'effet sera plus visible sur un grand paragraphe de texte : le texte occupe un maximum l'espace qui lui est donné.
Une petite note de fin : il est impossible de mettre deux alignements différents dans un même bloc de texte, sur une même ligne. Raison simple : si les textes se croisaient à un moment, ce serait problématique pour lire ^^
Si vous le faites, sachez que votre message fera un passage à la ligne dans ce cas.
La couleur du texte
J'espère que ce petit chapitre sur l'alignement du texte ne vous fera pas oublier ce que nous avions fait sur les polices et les tailles, car le principe de la valeur ajoutée revient.
Enfin. Voici la balise qu'il faut ajouter si vous voulez voir votre texte en rouge, par exemple :
- Code:
[color=red]texte rouge[/color]
Pour vous en persuader, voici le résultat : texte rouge.
Et voici la liste des valeurs qui pourront être à la place de red : darkred (rouge foncé), red (rouge), orange (orange), brown (marron), yellow (jaune), green (vert foncé), olive (vert kaki), cyan (bleu clair), blue (bleu), darkblue (bleu foncé), indigo (indigo), violet (violet, quoique plutôt rose), purple (plus proche de violet).
Vous remarquerez peut-être qu'il y a un petit problème...
Eh oui. Votre ordinateur peut vous afficher 256*256*256 couleurs (256 teintes de rouge, de vert et de bleu), c'est-à-dire très précisément 16 777 216 couleurs, et on ne vous en propose même pas une quinzaine dans cette liste.
D'un côté, comprenez que chez forumactif, ce n'est pas l'activité la plus plaisante de donner plus de 16 millions de noms à chacune des couleurs qui peuvent être affichées sur votre machine, alors il faudra régler ce problème.
Heureusement, il existe une solution : l'hexadécimal. ne vous inquiétez pas, pas besoin d'être un professionnel confirmé pour comprendre ça : chaque couleur possède un code hexadécimal, qui ressemble à ça : #3FD2E4. Chaque caractère va de 1 à 9 ou de A à F, ce qui donne 16 possibilité pour chaque caractère (d'où le nom hexadécimal). Le nombre de possibilité est donc de 16*16*16*16*16*16=256*256*256, c'est-à-dire... Eh oui, vous l'avez deviné, le problème est résolu Comme, cependant, vous ne devinerez pas le code hexadécimal tout seul, on a pensé à vous : il existe un petit logiciel, la "boîte à couleur", qui vous permet de sélectionner une couleur et d'obtenir son code hexadécimal. Voici le lien pour la télécharger : http://pourpre.com/colorbox/
Partie III : D'autres balises utiles
Création de Liste
On commence cette partie avec quelque chose d'assez simple : les listes. Néanmoins, il faudra que vous sachiez qu'il y a besoin de deux types de balises, pour la première fois.
Voilà donc comment vous ferez pour créer une liste en BBcode : il y aura les balises "list", qui marqueront le début et la fin de la liste. Il y aura également les balises [*] qui marqueront une nouvelle puce.
Voici donc une liste simple :
- Code:
[list]
[*]puce 1
[*]puce 2
[*]puce 3
[/list]
et le résultat :
- puce 1
- puce 2
- puce 3
Vous savez maintenant créer une liste simple. On va créer une liste un peu plus élaborée, de ce type :
- puce 1, première rangée
- puce 1, deuxième rangée
- puce 2, deuxième rangée
Voici le code qui correspond :
- Code:
[list]
[*]puce 1, première rangée[list][*]puce 1, deuxième rangée
[*]puce 2, deuxième rangée[/list][*]puce 2, première rangée
[/list]
Vous l'aurez compris, il s'agit d'"insérer" une liste entre deux puces. Cependant, faites attention, si vous passez à la ligne, il y aura un écart entre les puces de premier rang et de second rang.
Vous pouvez également faire une liste numérotée à partir de a ou 1. Il vous suffit de mettre "list=a" ou "list=1" au lieu de "list" tout court.
Insertion de Spoiler, citations, codes, et texte "cachés"
Là, vous allez apprendre des codes qui ont un effet spécial : en effet, les textes seront mis dans des cadres gris sans bordure.
Mais avant, je vais vous expliquer plus particulièrement leurs différences :
Les citations sont simplement des textes cités, pour préciser qu'ils ne sont pas dans le message à la base. Il y a également moyen de dire qui a écrit la citation grâce au BBcode, et on peut citer directement un message entier en cliquant sur "citer" lorsqu'on se trouve sur le topic de discussion.
Les Spoilers sont des textes écrits dans un cadre qui sont cachés et ne s'afficheront que lorsqu'on cliquera dessus. A la base, un spoiler est une information qui ne doit pas être révélée directement, c'est pourquoi le spoiler est d'abord caché sur les forums.
Les codes - c'est ce que j'utilise depuis tout à l'heure pour vous montrer les BBcodes et codes HTML. lorsqu'un code est entre ses balises, ce n'est pas son effet mais le code qui s'affiche, balises HTML et BBcode désactivées ou non. Vous ne vous en servirez probablement pas, ou rarement, mais c'est toujours ça d'appris.
Et les textes "cachés" ? eh bien, ce sont simplement des textes qui sont visibles sur le message, dans un cadre similaire aux cadres des spoilers et citation, mais ne sera pas contenu lorsque vous citerez le message qui le contient. A quoi ça sert ? A vrai dire, je n'en sais strictement rien moi même, mais bon O.o
Voici donc les codes que vous devrez retenir pour cette partie-là :
- Code:
[quote]citation simple[/quote]
[quote="Zeuboss"]Citation de Zeuboss (attention aux guillemets)[/quote]
[spoiler]texte en spoiler (cliquer pour voir le texte)[/spoiler]
[code][b]texte codé[/b][/code]
[hide]texte "caché"[/hide]
Et voici les rendus :
citation simple
Zeuboss a écrit:Citation de Zeuboss (attention aux guillemets)
- Spoiler:
- texte en spoiler (cliquer pour voir le texte)
- Code:
[b]texte codé[/b]
Insertion de tableaux
Dans cette partie-là, on va apprendre quelque chose d'un peu plus complexe : la création de tableau. Pourquoi complexe ? Parce qu'il y a trois balises à retenir et deux-trois corrections à faire à un tableau de base.
D'abord, il faut que vous appreniez les trois balises : "table", "tr" et "td". La première balise, "table", sert à indiquer le début et la fin du tableau. la seconde, "tr", marque le début et la fin d'une ligne du tableau. Enfin, la troisième, "td", marque la présence d'une case de tableau dans une ligne. Attention, vous devez mettre autant de case dans chaque ligne, sans quoi une case de la ligne sera remplie par le motif de contour.
Vous devez mettre deux balises "table" par tableau. Vous pouvez mettre autant de rangée "tr" que vous voudrez. Vous pouvez également mettre autant de cellules "td" que vous voulez, mais attention à ne pas en mettre plus dans une rangée que dans une autre.
Voici donc le code pour un tableau de base :
- Code:
[table]
[tr]
[td]Rangée 1 - Cellule 1[/td] [td]Rangée 1 - Cellule 2[/td]
[/tr]
[tr]
[td]Rangée 2 - Cellule 1[/td] [td]Rangée 2 - Cellule 2[/td]
[/tr]
[/table]
Et le Résultat :
Rangée 1 - Cellule 1 | Rangée 1 - Cellule 2 |
Rangée 2 - Cellule 1 | Rangée 2 - Cellule 2 |
Petit problème, comme vous le constatez : ça n'a pas vraiment une tête de tableau. Raison simple, les bords ne sont pas apparents. Pour régler ce problème, il faudra rajouter "border=1" devant "table" dans la première balise. (et encore, vous avez de la chance, en HTML, par défaut, le texte est en police 14 et les cases sont séparées ^^)
Voici donc le nouveau code et le nouveau tableau :
- Code:
[table border=1]
[tr]
[td]Rangée 1 - Cellule 1[/td] [td]Rangée 1 - Cellule 2[/td]
[/tr]
[tr]
[td]Rangée 2 - Cellule 1[/td] [td]Rangée 2 - Cellule 2[/td]
[/tr]
[/table]
Rangée 1 - Cellule 1 | Rangée 1 - Cellule 2 |
Rangée 2 - Cellule 1 | Rangée 2 - Cellule 2 |
Insertion d'images et de flash
Voici une partie dans laquelle je mettrai quelques liens et précisions pour la compléter.
Je vais d'abord vous apprendre à faire quelques distinctions entre images, gifs, vidéos, musique et flash.
Les images : les images, je pense que ce n'est pas vraiment la peine de vous expliquer. C'est ce que vous pourrez créer ou modifier avec Paint, mais aussi avec des logiciels sans doute plus performants comme The Gimp, Paint Shop Pro, Photoshop... Les extensions de fichier qui correspondent sont .jpg, .bmp, .png, .gif, .tiff, .svg, etc. Elles s'insèrent dans un message en mettant le lien de l'image entre deux balises "img". Il faut cependant que l'image soit sur internet. Heureusement pour vous, j'ai fait un petit tutoriel sur comment prendre/mettre une image sur internet : https://bionifigs.forumpro.fr/forum-d-aides-f8/aide-inserer-une-image-t522.htm
Les gifs animés : les gifs animés sont comme des images, à l'exception qu'ils répètent une même succession d'image et ne sont supportés que par le format .gif . Certains logiciels permettent d'en créer (Gif Animator, Gif Movie Gear, etc) mais je ne vais pas non plus vous en faire la liste ;P
les animations flash : Les animations flash sont de petites animations interactives faites avec le logiciel flash (vous en avez très certainement déjà entendu parler, vous avez besoin de Flash Player pour lire les jeux flash sur internet). Contrairement aux gifs et aux images, elles peuvent ne pas être statiques, et être interactives (on peut cliquer dessus, entendre de la musique, etc). Vous pouvez les insérer en entourant le lien du fichier entre les balises flash. Ces fichiers sont au format .swf .
Les musiques et vidéos : là-dessus, ça risque d'être un peu difficile. Les vidéos et musiques que vous lisez, par exemple, avec VLC ou Windows Media Player - généralement aux formats .mp3, .wma, et .mp4, .wmv, .avi, etc - ne peuvent PAS être lues par le navigateur que vous utilisez.
Bien heureusement (comme toujours) certains ont imaginé une solution. Il s'agit de sites où l'ont peut héberger une vidéo qui sera converti en un fichier flash qui marchera comme un lecteur de vidéos. Et oui, vous l'avez deviné, il s'agit des sites comme Youtube et Dailymotion, mais aussi Deezer pour la musique. Généralement, devant chaque vidéo que vous lisez, il y a un code HTML qui permet d'afficher la vidéo sur les sites et les forums. Sur ce forum, cela ne posera pas de problème, étant donné que vous pouvez activer le HTML.
Vous pouvez toujours héberger un fichier .avi, . wma, etc. et donner le lien, mais il proposera à l'utilisateur de lire le fichier ou de l'enregistrer, mais pas de la lire sur le navigateur, mais bon.
Voici donc un exemple d'image et un exemple d'animation flash :
http://cristgaming.com/pirate.swf (désolé, c'est la seule chose que j'ai pu trouver ^^)
http://www.choosetoys.co.uk/images/LegoBionicleGlatorianVoroxSand.jpg
Voilà comment les intégrer :
- Code:
[flash]http://cristgaming.com/pirate.swf[/flash]
[img]http://www.choosetoys.co.uk/images/LegoBionicleGlatorianVoroxSand.jpg[/img]
Voici le résultat pour l'image (je n'ai pas mis le flash pour cause de "trop bruyant", mais vous pouvez le mettre si ça vous chante là où vous voulez ^^) :
Vous pouvez également régler la taille de l'animation flash en mettant, entre parenthèse, à côté de "flash" dans la première balise, la hauteur et la largeur en pixels de l'animation. Attention, si vous voulez que la taille soit proportionnelle, les longueurs doivent aussi être proportionnelles, et si vous agrandissez, vous pourriez perdre de la qualité.
- Exo-batMembre d'Élite
Re: [Aide] Le BBCode
Mer 07 Nov 2007, 16:27
J'ai commencer a programmer le BCcode, sur mon site ^^ .
- ZeubossMembre du Panthéon
Re: [Aide] Le BBCode
Jeu 06 Mar 2008, 17:10
J'ai édité le topic, de manière à le rendre plus propre. je finirais bientôt avec le flash et les vidéos.
Re: [Aide] Le BBCode
Sam 08 Mar 2008, 20:18
Ah?Intéressant!C'est un langage fastoche!Exo-bat a écrit:J'ai commencer a programmer le BCcode, sur mon site ^^ .
Re: [Aide] Le BBCode
Sam 08 Mar 2008, 22:07
Bah c'est ce que j'utilise pour les images des articles/topics que j'affiche pour le portail. Sinon les images prendraient trop de place.
Re: [Aide] Le BBCode
Dim 09 Mar 2008, 08:05
Ouaip,mais bon Exo-Bat,tu utilises quel IDE ou éditeur pour faire un site en BBCode?
J'ai Notepad++ et il ne propose pas le BBCode!
J'ai Notepad++ et il ne propose pas le BBCode!
- ZeubossMembre du Panthéon
Re: [Aide] Le BBCode
Ven 22 Mai 2009, 20:46
UP : Le topic est en cours de modification et de complétion. La partie "tableau" va être complétée, la partie "insertion d'images, vidéos..." va être rénovée et une partie "autres BBcode" va être créée.
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum