NUVA INDEPENDENT ENCYCLOPEDIA

L'encyclopédie BIONICLE indépendante par les fans francophones
 
GalerieDernières imagesConnexionS'enregistrerAccueilRechercher
Derniers sujets
» [Barraki] Takadox
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptySam 14 Juil - 16:13 par 0126

» [Univers Matoran] Karda Nui
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptyDim 20 Mai - 12:56 par maxim21

» [Grande Barrière] Labyrinthe des Ombres
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptyMer 2 Mai - 8:48 par maxim21

» [Tutoriel] Insérer des statistiques sur une fiche
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptyDim 11 Mar - 21:26 par maxim21

» [Tutoriel] Insérer une miniature dans une fiche
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptySam 10 Mar - 21:44 par maxim21

» [Chronologie] Bara Magna
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptyMar 3 Jan - 22:14 par maxim21

» [Général] Batailles et Conflits
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptySam 17 Déc - 22:37 par maxim21

» [Général] Événements
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptyJeu 15 Déc - 22:03 par maxim21

» [Général] Kanohi
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptyMar 6 Déc - 21:29 par maxim21

» [Personnage] Ehlek
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptyMar 6 Déc - 21:27 par maxim21

» [Événement] Grande Guerre
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptyMar 6 Déc - 8:16 par maxim21

» [Linkeurs] Index fiche/lien
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptySam 3 Déc - 22:20 par maxim21

» [Personnage] Karzahni
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptyVen 2 Déc - 21:04 par maxim21

» [Endroit] Univers Matoran
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptyVen 2 Déc - 20:58 par maxim21

» [Skakdi] Vezon
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptyLun 28 Nov - 21:24 par maxim21

» [Histoire] Le Coeur de l'Univers
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptyDim 27 Nov - 21:38 par maxim21

» [Skakdi] Thok
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptyMer 23 Nov - 21:04 par maxim21

» [Skakdi] Vezok
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptyLun 21 Nov - 21:46 par maxim21

» [Skakdi] Hakann
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptyLun 21 Nov - 13:09 par maxim21

» [Fiches] Guide
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptySam 5 Nov - 21:28 par maxim21

» [Linkeurs] Fiches à mettre en lien
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptyMer 5 Oct - 11:53 par maxim21

» [Tutoriel] Créer une nouvelle fiche : comment et où ?
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptyJeu 7 Juil - 19:37 par maxim21

» [Tutoriel] Les Insignes de Confiance, un moyen de vous repérer dans la jungle des éditeurs
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptyJeu 7 Juil - 6:53 par maxim21

» [Tutoriel] Charte graphique des tableaux récapitulatifs
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptyMer 6 Juil - 15:40 par maxim21

» [Tutoriel] Introduction au bbcode, un langage de mise en forme
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptyMer 6 Juil - 15:38 par maxim21

» [Tutoriel] Des notions de bbcode plus avancées
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptyMer 6 Juil - 15:35 par maxim21

» [Tutoriel] Guide pour les Nouveaux Éditeurs
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptyVen 11 Mar - 17:46 par Ackar1034

» [Tutoriel] Devenir NuvaPremium
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptySam 5 Mar - 2:01 par Ackar1034

» [Uploadeurs] Images à mettre dans la Galerie
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptyDim 23 Jan - 20:09 par Piruk

» [Tutoriel] Techniques de Traduction
[Tutoriel] Introduction au bbcode, un langage de mise en forme EmptyVen 31 Déc - 17:56 par Ackar1034

Statistiques
La Nuvapédia totalise actuellement 1599 pages et sujets de discussions créés par 123 membres et réparties dans 207 sections encyclopédiques et de discussions.

La communauté des fans de BIONICLE souhaite la bienvenue à https://nuvapedia.frenchboard.com/u139, notre plus récent inscrit.

Si vous souhaitez vous aussi devenir membre pour nous aider, créez un compte en cliquant ici.
Bienvenue visiteur.
Connexion «
Inscription «
Le deal à ne pas rater :
Enceinte portable JBL Clip 4 Bluetooth Noir à 29€
29 €
Voir le deal

Partagez
 

 [Tutoriel] Introduction au bbcode, un langage de mise en forme

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
MessageSujet: [Tutoriel] Introduction au bbcode, un langage de mise en forme   [Tutoriel] Introduction au bbcode, un langage de mise en forme EmptyMer 6 Juil - 15:38

Introduction au bbcode, un langage de mise en forme

Sur la NIE, un langage est utilisé pour mettre en forme les fiches. Le but de ce tutoriel est de vous apprendre à vous servir de ce langage pour une utilisation basique, utile dans la traduction de nombreuses fiches. Tous les nouveaux membres sont invités à le lire afin de se familiariser à ce langage.

Structure d'une balise bbcode

Dans un langage de mise en forme, on appelle balise un élément textuel qui sera interprété lors de l'affichage.

Hein ? Kézaco ?

Pour simplifier, une balise est une suite de caractère qui ne sera pas affiché mais aura un effet sur la mise en forme de votre texte.
Sous les forums phpBB, le langage de mise en forme utilisé, le bbcode, est constitué de balise commençant par « [ » et finissant par « ] ».

Pour la mise en forme des fiches, nous sommes obligés d'utiliser des balises. Certaines mauvaises langues diront qu'il existe des boutons sur lesquels il suffit d'appuyer pour faire la mise en forme. Je vous déconseille d'utiliser cette méthode : il arrive assez souvent que le résultat final ne soit pas le bon et que la mise en forme devienne un vrai casse-tête à refaire.

Avant tout, une balise s'ouvre puis se ferme. La balise ouvrante est de la forme [balise] et la balise fermante de la forme [/balise]. La balise ouvrante commence la mise en forme et la balise fermante l'arrête.

Ça veut dire que si je veux qu'une balise s'applique sur toute ma fiche, je n'ai pas besoin de la fermer ?

Si, justement. Retenez bien cela : il faut toujours fermer les balises. (Remarquez que généralement, quand je mets quelque chose en gras et en souligné, ça veut dire que c'est important.)

Il existe cependant certaines balises qui n'ont pas besoin d'être fermées car elles désignent un élément ponctuel. Par exemple, pour faire une puce dans une liste, vous ne devez pas fermer de balise car une puce est un figuré ponctuel.

Une image aussi, c'est un figuré ponctuel, non ? Donc ça veut dire que pour insérer une image on n'a pas à fermer de balise ?

Oui, une image est un figuré ponctuel. Néanmoins, c'est une exception. Vous comprendrez mieux pourquoi quand je vous présenterais la balise qui permet d'insérer une image et la manière de l'utiliser.


Les balises du bbcode

Avant tout, je tiens à préciser que cette section ne recense pas toutes les balises bbcode existantes. Seules les balises que vous utiliserez le plus et leurs utilisations les plus courantes seront ici montrées.

Des balises ne nécessitant pas une fermeture

Cette section sera brève, car je ne vais vous présenter qu'une seule balise qui n'a pas besoin d'être fermée.

Code:
[hr]

Cette balise permet d'insérer une grande barre pour séparer deux parties. Leur utilisation n'est pas exigée mais elles peuvent être utiles dans les grandes fiches. Voilà à quoi ressemble la grande barre insérée.




Mais, mais... tu ne présente qu'une grande barre comme élément ponctuel ? Tu avais parlé des puces des listes !

Avant tout, c'est bien si vous vous êtes posé cette question, je suis content de voir que vous suivez. En effet, une puce d'une liste est représentée par une balise qui ne doit pas être fermée. Mais une puce doit forcément être utilisées dans une liste. Cette balise vous sera donc présenté dans la partie Des balises qui s'imbriquent.

Des balises nécessitant une fermeture

Cette section vous présente des balises qui doivent être ouvertes puis fermées obligatoirement. C'est le cas de la majeure partie des balises que vous utiliserez, et cette section est donc l'une des plus importantes.

Code:
[b]Texte[/b]

Cette balise permet de mettre le texte en gras. On obtient donc :
Texte

Code:
[u]Texte[/u]

Cette balise permet de souligner le texte. Notre code donnera donc :
Texte

Code:
[i]Texte[/i]

Cette balise permet de mettre le texte en italique, ce qui donnera ici :
Texte

Code:
[color=######]Texte[/color]

Cette balise permet de colorer le texte. On choisit la couleur en changeant ###### par le nom de cette couleur en anglais dans la plupart des cas. Si on choisit de mettre le texte en violet, on remplacera donc ###### par « purple », ce qui donne :
Texte

Code:
[size=xx]Texte[/size]

Cette balise permet de changer la taille du texte. XX est le nombre de pixels de hauteur des lettres, comme sur les logiciels de traitement de texte (Word, par exemple). Si on met 24, cela donne :
Texte

Code:
[img]url_de_l_image[/img]

Cette balise permet d'insérer une image. Comme je vous l'avais dit, il faut bien une balise ouvrante et une balise fermante pour insérer une image : elles encadrent l'URL de l'image.

Code:
[url=url]texte[/url]

Cette balise insère un lien vers une URL sur un texte. Par exemple, on peut obtenir :
Lien vers la Nuvapédia

Code:
[center]Texte[/center]

Cette balise centre le texte. Ce qui donne :
Texte

Code:
[justify]Texte[/justify]

Cette balise justifie le texte. Pour voir la différence avec un texte-non justifié, je vous propose un exemple (pas la peine de lire, regardez juste la différence au niveau de la mise en forme :

Texte non justifié : Les licences de la plupart des logiciels sont conçues pour vous enlever toute liberté de les partager et de les modifier. A contrario, la Licence Publique Générale est destinée à garantir votre liberté de partager et de modifier les logiciels libres, et à assurer que ces logiciels soient libres pour tous leurs utilisateurs. La présente Licence Publique Générale s'applique à la plupart des logiciels de la Free Software Foundation, ainsi qu'à tout autre programme pour lequel ses auteurs s'engagent à l'utiliser. (Certains autres logiciels de la Free Software Foundation sont couverts par la GNU Lesser General Public License à la place.) Vous pouvez aussi l'appliquer aux programmes qui sont les vôtres.
(Pour information, j'ai pris le premier paragraphe de la Licence Générale GNU pour avoir un petit pavé)

Texte justifié : Les licences de la plupart des logiciels sont conçues pour vous enlever toute liberté de les partager et de les modifier. A contrario, la Licence Publique Générale est destinée à garantir votre liberté de partager et de modifier les logiciels libres, et à assurer que ces logiciels soient libres pour tous leurs utilisateurs. La présente Licence Publique Générale s'applique à la plupart des logiciels de la Free Software Foundation, ainsi qu'à tout autre programme pour lequel ses auteurs s'engagent à l'utiliser. (Certains autres logiciels de la Free Software Foundation sont couverts par la GNU Lesser General Public License à la place.) Vous pouvez aussi l'appliquer aux programmes qui sont les vôtres.

Ce sera tout pour cette section.

Des balises qui s'imbriquent

Cette sous-section est probablement la plus compliquée de tout le tutoriel. Elle vous explique l'utilisation de balises qui ne doivent être utilisées que entre une certaine balise ouvrante et une certaine balise fermante.

Les listes

Les listes permettent de lister différents points. (Élémentaire, me direz-vous.)

En bbcode, on commence une liste avec :
Code:
[list]

et on la termine avec :
Code:
[/list]

Rien de très anormal ni de très extraordinaire jusqu'ici, me direz-vous. D'autant plus que si vous tapez du texte entre ces deux balises, vous vous rendrez compte qu'elles n'ont, apparemment, aucun effet.

Mais, mais... Elles ne servent alors ! Pourquoi est-ce que des tordus ont été imaginer un truc pareil !

À titre d'information, on doit faire cela à cause du langage de mise en forme lu par votre navigateur web (Internet Explorer, Mozilla Firefox, Google Chrome...), le HTML. Cette façon de faire offre de nombreux avantages aux développeurs Web que l'on ne voit pas avec une utilisation basique. C'est aussi important pour la sémantique du Web.

De plus, cette balise a, en fait, un effet : elle vous permet d'utiliser une balise créant une puce :
Code:
[*]

Il faut mettre cette balise à chaque nouvel élément de la liste. L'élément s'arrête au retour à la ligne.

On peut aussi imbriquer des listes dans des listes pour obtenir ça, par exemple :


  • Élément 1
  • Élément 2
    • Sous-élément 1

  • Élément 3

    • Sous-élément 1
    • Sous-élément 2

  • Élément 4


Les tableaux

Les balises des tableaux sont probablement parmi les plus dures à maîtriser. C'est pourquoi je ne vais aborder qu'une utilisation extrêmement basique de ceux-ci. Si vous avez besoin d'aide pour faire un tableau sur une fiche, que ce soit un tableau récapitulatif ou pas, n'hésitez pas à demander à un NuvaLayouteur ou à un NuvaManageur.

Les balises pour commencer et pour achever un tableau sont :
Code:
[table]Reste du code du tableau[/table]

Comme pour les listes, ces balises n'ont aucun effet visible. Néanmoins, elles vous permettent d'utiliser une balise pour créer des lignes de tableau. Pour un tableau à deux lignes, on aura donc :
Code:
[table]
[tr]Code de la première ligne[/tr]
[tr]Code de la deuxième ligne[/tr]
[/table]

Et maintenant, dans chacune des lignes, il faut ajouter des balises pour créer des cellules. Oui, c'est un peu comme une poupée russe.

Pour un tableau de 2x2 cases, on aura donc :
Code:

[table]
[tr][td]Première case[/td][td]Deuxième case[/td][/tr]
[tr][td]Troisième case[/td][td]Quatrième case[/td][/tr]
[/table]

J'ai essayé ton code. Ça donne un truc tout moche !
Première caseDeuxième case
Troisième caseQuatrième case

Je veux un vrai tableau ! Avec des traits, quoi...


C'est tout à fait possible de faire un tableau avec des bordures. Pour cela, il faut ajouter « border=1;" » dans votre balise « table » ouvrante.
Donc, vous devez modifier
Code:
[table]
en
Code:
[table border=1]

Et vous pourrez alors obtenir ça :

Première caseDeuxième case
Troisième caseQuatrième case

Je ne comprends pas. C'est quoi ce code bizarre ? Et pourquoi on ajoute un « border=machin truc » ?

Et bien en fait, on ajoute un attribut. Ça permet de faire plein de trucs supers mais c'est plus compliqué à apprendre et pas trop utile pour des éditions normales.

Utilisation du bbcode dans les fiches

C'est bien beau tout ça, mais moi, quand est-ce que j'utilise quoi ?

Tout d'abord, félicitations. Votre question est tout à fait pertinente. Grâce à cette question, je vais vous montrer quel code mettre à quel endroit dans vos fiches.

Les listes

Sur quasiment toutes les fiches, vous serez amenés à faire des listes, notamment pour les parties « Divers » et « Apparitions ».

C'est le code de base des listes qu'il faut utiliser, il n'y a pas de subtilités comme des listes imbriqués.

Les fiches chronologiques sont en fait une grande liste, et c'est le seul cas où il est possible de trouver des listes imbriquées.

Autres petits détails de mise en forme

Toutes les fiches comportent un tableau récapitulatif. On ne vous demande pas de le mettre vous même car il nécessite un code assez compliqué, mais qui est néanmoins expliqué dans un tutoriel. Ce sont donc les NuvaLayouteurs qui sont chargés de faire ces tableaux.

Remarquez que si vous souhaitez mettre vous-même le tableau récapitulatif, on ne vous en empêchera pas.

Il est assez appréciable que vous mettiez le nom de la fiche en gras la première fois qu'il apparaît dans l'introduction.

Sur certaines fiches, il faut obligatoirement mettre des tableaux, notamment sur les fiches des équipes de Toa. Si vous avez des problèmes pour faire un tableau convenable, ne vous inquiétez pas, c'est normal, tout n'est pas expliqué sur les tableaux dans ce tutoriel. Vous pouvez demander de l'aide à un NuvaLayouteur ou un NuvaManageur qui vous guidera.

Sur ce, je vous félicite, vous avez fini de lire ce tutoriel et êtes fin prêts à utiliser le bbcode dans la plupart des cas que vous rencontrerez. Si ce n'est pas encore fait je vous conseille de lire les autres tutoriels qui vous donneront de précieux conseils pour éditer des fiches.

Sur ce, bonne édition.

Et surtout, n'oubliez jamais : si vous avez un problème de mise en forme, contactez un NuvaLayouteur ou un NuvaManageur.
Revenir en haut Aller en bas
 

[Tutoriel] Introduction au bbcode, un langage de mise en forme

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
NUVA INDEPENDENT ENCYCLOPEDIA-