Bonjour, Bonjour !

Il vous parait souvent plaisant de coloré vos textes avec quelques codes. Certes, c'est très beau, mais encore faut-il savoir le faire et savoir respecter quelques règles.
Oui, je fait ce post sur un coup de tête, n'en déplaise à certain, après m'être cassé les dents à lire certain rp ou à expliquer les subtilités du codage à quelque néophyte qui pensait bien faire en abusant du copier/coller.

• La lisibilité

Spoiler:

Désolé Tôken de prendre un de tes posts en exemple, mais il y a du bon et du moins bon.

Moi, personnellement, je refuse de lire ça, je trouve ça illisible. Il est important d'aéré le texte et pas le compresser ainsi. Il ne faut pas hésiter à revenir à la ligne à plusieurs reprise.
Les propriété tel que line-height, font-size, size ect ... sont normalisé sur le forum, pas la peine d'y toucher. Exceptions faites d'un cri qui peut être écris plus gros ou d'un chuchotement qui peut être écrit plus petit.
Ici, on notera cependant quelques bonne chose comme le padding qui permet de décoller le texte du bords et le choix des couleurs qui est très important.

• Bien coder

C'est très simple de codé. Cela reviens juste à faire un peu mise en page en somme. Dans un post rp, il n'y a rien de plus bête. Une balise div est le tour est joué. Rien de plus, rien de moins.

Code:

<div style="Votre Code Ici"> Votre Texte Ici </div>

Tout ce joue ensuite sur le code que l'on appelle CSS. Il se remplit comme suit :

propriété1: valeur1; propriété2: valeur2;

La propriété cible une caractéristique, la valeur la modifie. Un conseil : révisé vos cours d'anglais pour mieux comprendre. Le terrible monde des codeur est exclusivement en anglais.
Voici une liste de propriété utile :

• width :
  C'est la largeur de votre div. Elle s'exprime généralement en px (pixel), C'est une valeur fixe et si vous en donner une trop grande, vous déformerez le forum et on aime pas ça ...
  mais je conseil d'utiliser les % plutôt. C'est un pourcentage par rapport à la largeur de votre post : 80%, c'est 80% de div, 20% d'espace vide quelque soit la taille de la page..
  il existe d'autre unité de mesure, mais elle nous intéresse pas.
  
  on écrira donc " width : 80%; " par exemple
  
  
• margin:
  C'est la marge extérieur. Elle s'exprime aussi en px ou en %, mais ici, l'important, c'est d'avoir notre div au centre du post et pour ça, on a droit à un joker : le "auto" alors, n'allons pas chercher plus loin :
  
  on écrira " margin : auto; "
  
  
• padding:
  C'est la marge intérieur cette fois-ci. tuojours en px ou en %. Cette fois, il sera plus pratique d'utiliser une valeur en px. A vous de juger combien vous en voulez, mais je vous conseil de rester entre 10 et 50 px. Plus votre div est large, plus il est conseiller de mettre une marge intérieur grande.
  
  On écrira donc " padding : 20px; "
  
  
• background-color:
  C'est la couleur en arrière plan, tout simplement. Elle est exprimé en hexadécimale (codage RVB) ou en mot clef (nom de la couleur), aider vous de ce petit lien : http://www.commentcamarche.net/contents/html/htmlcouleurs.php3
  
  on écrira par exemple : " background-color : darkgreen; "
  
  
• color:
  c'est une propriété un peu piège car elle désigne la couleur du texte et seulement du texte. Elle est en hexa ou en mot clef
  
  on écrira par exemple : " color : lightgreen; "
  
  
• border:
  C'est simplement la bordure de notre div. On pourra préciser la couleur, l'épaisseur et le type de bordure.
  La couleur est en hexa ou en mot clef
  L'épaisseur se désigne en px.
  Le type de bordure se désigne en mot clef : none : pas de bordure (par défaut)
  hidden : bordure cachée, solid : ligne pleine, double : ligne double (nécessite une taille de bordure de 3px minimum), dashed : en tirets, dotted : en pointillés.
  
  On écrira donc : " border : green 3px dotted; " par exemple
  
  On peut aussi différencier la bordure droite, la gauche, le haut et le bas ! on utilisera alors les propriété border-right, border-left, border-top et border-bottom à la place du simple border qui gère les quatre à la fois.
  
  
• text-align:
  Ici, on définira l'alignement du texte. left par défaut, right pour coller le texte au côté gauche, center pour l'avoir au milieu et justify pour étirer le texte d'un bout à l'autre de la ligne. Ce dernier est le plus souvent utilisé d'ailleurs.
  
  On écrira : " text-align: justify; "
  

Voici donc un petit exemple pour englober tout ce que je vous ai raconté :

Code:

<div style="width: 70%; margin: auto; padding: 20px; background-color : darksalmon; color :chocolat; border-top: 4px double brown; border-bottom: 4px double brown; text-align : justify;">
...
.</div>

Et voilà en quelque seconde un code magnifique ! et je vous interdit de discuter le choix des couleurs !

Rien ne vous empêche ensuite de jouer avec les balise de forum actif comme bon vous semble pour faire vos description en italique, vos paroles en couleurs ou ajouter des images à l'intérieur du div . Prenez garde à ne pas laisser les balises se mélanger, c'est une erreur courante.

Si l'envie vous prend d'approfondir vos connaissances, faites le correctement, le Site du Zéro est un bon guide pour débutant.
Les plus aguerri me reprocherons sans doute de ne pas expliquer plus de propriété que cela, mais elle ne sont pas essentiel et finirons sans doute en abus ou seront mal utilisé.

Spoiler:

Sur ce, je vous souhaite bon codage, et amusez vous bien à essayer différentes combinaisons, mais souvenez vous qu'on est ici sur un forum rp et que le codage n'est pas noté lors des évaluation du staff. Un rp sans la moindre balise est aussi bien qu'un code riche. L'important, c'est d'être lisible !

Si vous avez des questions, n'hésité pas à me les poser. J'ai quelque diplôme dans le domaine, autant faire partager mes connaissance !
J'enrichirait ce sujet si j'en sent le besoin !

Merci de votre attention.

Bon, dans ce cas je vais changer mon code *O*

Merci pour ce post extrêmement utile ;) Je le déplace dans la section " Astuces "