Et si on codait ?

Voici un petit cours pour apprendre aux débutants à créer leur propre modèle de post Rp sous format HTML. Avec cela, vous partirez sur les bases principales du codage qui vous permettront d’être assez autonome (vous n’aurez plus à passer 36 commandes). Pour écrire au format html, vous pouvez utiliser un traitement de texte, notepad++, mais vous pouvez tout aussi bien l’écrire sur la partie « réponse » du forum. C’est pareil, tout est une question de confort. Si vous aimez ordonner un peu plus vos codes, faites-le sur notepad++ ou bien un traitement de texte.
• LES BALISES
Il est nécessaire d’utiliser des balises pour créer votre codage de post RP. On utilise des balises ouvrantes pour entamer votre petite création

Code:

<div style="

et des balises fermantes à la fin

Code:

</div>

. Ces div vous permettent de créer un élément, par exemple, un arrière-plan (background), ou une bordure. Vous viendrez certainement à en utiliser de nombreuses fois.
On utilise aussi des balises pour mettre votre texte en gras ou en italique. Pour mettre en gras, vous pouvez utiliser

Code:

<strong>

(balise ouvrante) et

Code:

</strong>

(balise fermante).
Exemple :  Naruto et Sasuke sont rivaux.
On met en gras :

Code:

<strong>Naruto et Sasuke sont rivaux.</strong>

Ce qui donne : Naruto et Sasuke sont rivaux.
Vous serez certainement tenté d’écrire avec le bbcode

Code:

 [b] et [/b]

pour mettre votre texte en gras, mais sachez qu’il faut éviter de mélanger du bbcode avec du html. Favorisez donc l’usage de la balise strong.
Il en est de même pour la balise qui permet de mettre votre texte en italique. On utilise

Code:

<em>

 pour ouvrir et

Code:

</em>

pour refermer votre élément. (pas de bbcode avec

Code:

[i] et [/i]

!)
Exemple :

Code:

 <em> Naruto et Sasuke sont rivaux.</em>

Ce qui donne : Naruto et Sasuke sont rivaux
Vous avez les premières bases des balises. Ces dernières sont très importantes, et sachez qu’il vaut mieux les écrire en minuscule, même si dans la majorité des cas, l’écrire en minuscule/majuscule mène au même résultat.
• Création du post RP.
> Etablir le background de votre code
Le background de votre post Rp représente en gros le fond/l’arrière-plan : il s’agit du cadre qui contient tout votre texte, vos images, etc. En bref, vous devez à tout prix établir votre background en premier lieu.
On va donc commencer par une balise de type

Code:

<div style=" et </div>

. Les div, comme dit précédemment, sont très importantes pour commencer quoi que ce soit ! Elles sont ESSENTIELLES.
On commence donc par cette « formule » :

Code:

<div style="background-color:red;width:550px; height:500px;"/></div>

Ce qui donne :

C'est du chinois pour vous ? Explications :
background-color vous permet d'établir la couleur de votre fond. Ici, j'ai choisi du rouge, donc j'ai mis 2 petits points après le background-color, puis j'ai écrit le nom de la couleur choisie en anglais. Vous pouvez trouver également écrire la couleur sous forme de code couleur HTML (référez-vous ici http://www.code-couleur.com/). J'aurais pu laisser "red", ou écrire le code couleur

Code:

#A44040

à la place. Les deux sont bons.

Le mot width désigne la largeur de votre fond. Ici, j'ai voulu que la largeur soit à 550 pixels. le mot height désigne la hauteur, qui est ici de 500 pixels. A vous de tester des nombres pour ajuster votre code !
On sépare évidemment les éléments couleur du background, largeur, et hauteur par un point virgule ! Et oui, sinon, ce serait mélangé. Il faut les séparer par un point-virgule (pas de point, ou de virgule tout court). Ensuite, une fois cette petite partie terminée, vous inscrivez un dernier point virgule final (après la dernière donnée écrite, ici, il s'agit de height). Puis, vous refermez la balise avec une apostrophe (on a commencé par

Code:

<div style="

donc, on termine par une apostrophe, un slash, puis un guillemet comme ceci : "/>
Par la suite, vous écrivez

Code:

</div>

pour terminer la partie !

> Introduire une image dans notre background.

On reprend notre joli fond rouge, mais on désire y intégrer un gif (celui-là : http://media0.giphy.com/media/zAtjMmiiQLMtO/giphy.gif ).
Il y a rien de bien difficile, avec notre code

Code:

<div style="background-color:red;width:550px; height: 500px;"/></div>

Il faut savoir où placer le lien du gif ! Il ne faut pas le placer après la balise fermante de la div, sinon le gif sera situé en-dessous du fond RP, et non pas à l'intérieur. Vous devez le situer entre ;"/> et < /div>

Il n'y a pas 36 manières d'intégrer une image, voici le secret :

Code:

<img src="http://media0.giphy.com/media/zAtjMmiiQLMtO/giphy.gif"/>

Ce sera toujours cette formulation.
On la place donc entre le ;"/> et < /div> du code de départ, pour que cela donne :

Code:

<div style="background-color:red;width:550px; height: 500px;"/><img src="http://media0.giphy.com/media/zAtjMmiiQLMtO/giphy.gif"/></div>

Soit :

Nous avons notre gif sur le background, c'est sympathique ! Maintenant, rajoutons un texte.

On reprend notre code, et on rajoute une nouvelle Div style à l'intérieur de la Div style du background ! Bah oui, le texte est un élément à part du background, donc on doit créer une nouvelle div à chaque nouvel élément ! Il n'y a que l'incrustation d'une image dans votre background qui ne nécessite pas de div. Mais pour un texte, mieux vaut l'utiliser si vous voulez le personnaliser comme il le faut. Votre nouvelle div doit être située après l'insertion de votre gif et avant la balise fermante < /div> du background, sinon, votre texte sera hors du cadre. Testez par vous-même.

Code:

<div style="background-color:red;width:550px; height: 500px;"/><img src="http://media0.giphy.com/media/zAtjMmiiQLMtO/giphy.gif"/><div style="font-family:georgia; font-size: 25px; color:white;margin-left:20px;text-shadow: 0px 0px 5px;"/>Sakura, disciple de Tsunade</div></div>

Comme vous pouvez le constater, on a une div style pour le background, une div style à l'intérieur pour le texte, une balise fermante < /div> pour le texte, et la dernière < /div> fermante pour notre background.
Vous écrivez votre texte avant la < /div> fermante du texte !  

Maintenant, pour plus de précisions :

Font-family définit la police utilisée. Ici, j'ai utilisé la police GEORGIA.
font-size détermine la taille de votre texte. J'ai utilisé une taille de 25 px.
color:white, est tout simplement la couleur blanche que j'ai choisie. Vous pouvez mettre celle que vous voulez, et utiliser un code couleur HTML (cf le site cité plus haut).
text-shadow me permet d'appliquer une ombre à mon texte. Faites varier la valeur de pixels comme vous le souhaitez.
padding-left me permet de faire un alinéa à mon texte. Vous avez constaté qu'il y a un petit écart entre le prénom de Sakura et le bord du background. Je trouve cela plus esthétique de faire un alinéa, donc j'utilise la fonction margin-left qui me permet de faire un écart par la gauche. J'indique donc une valeur (ici 20 pixels d'écart), et le tour est joué. Vous pouvez tenter de faire un écart par la droite (padding-right), par le bas (padding-bottom) et par le haut (padding-top). Essayez tout et n'importe quoi ! C'est comme cela qu'on apprend à bien manier la chose. Vous pouvez aussi utiliser plusieurs padding en même temps. Par exemple, vous pouvez faire un alinéa par la gauche et par le haut, si vous désirez un texte un peu éloigné de la gauche et graaaandement éloigné du haut.

Ensuite, je trouve que le gif de Sakura est pas très esthétiquement bien placé. J'aimerais qu'il soit un peu plus centré et éloigné du haut. Je vais donc modifier le STYLE du gif. On reprend notre code :

Code:

<div style="background-color:red;width:550px; height: 500px;"/><img src="http://media0.giphy.com/media/zAtjMmiiQLMtO/giphy.gif"/><div style="font-family:georgia; font-size: 25px; color:white;padding-left:20px; text-shadow: 0px 0px 5px;"/>Sakura, disciple de Tsunade</div></div>

Qui va devenir :

Code:

<div style="background-color:red;width:550px; height: 500px;"/><img src="http://media0.giphy.com/media/zAtjMmiiQLMtO/giphy.gif" style="margin-top:20px; margin-left: 25px;"/><div style="font-family:georgia; font-size: 25px; color:white;padding-left:20px; text-shadow: 0px 0px 5px;"/>Sakura, disciple de Tsunade</div></div>

Ici, on rajoute tout simplement le mot style après l'insertion du gif, puis on met un = et un apostrophe ". Le principe est le même que pour le texte, sauf qu'on utilise margin-top et margin-left, au lieu de padding-top et padding-left. En général, j'utilise padding pour le texte, et margin pour les images et autres. Margin-left m'a permis de centrer mon gif, et margin-top m'a permis de laisser aussi de l'écart sur le haut.

Maintenant qu'on a notre fond, notre image et notre titre de RP, on va pouvoir créer l'élément permettant d'inscrire le récit de notre RP. On doit créer une nouvelle div style de texte, car on ne voudrait pas forcément que notre texte Rp soit blanc, écrit en georgia, équipé d'une ombre, et qu'il soit aussi gros que le titre "Sakura, disciple de Tsunade". On doit différencier le titre du Rp du reste du texte.

On rajoute à notre code :

Code:

<div style="background-color:red;width:550px; height: 500px;"/><img src="http://media0.giphy.com/media/zAtjMmiiQLMtO/giphy.gif" style="margin-top:20px; margin-left: 25px;"/><div style="font-family:georgia; font-size: 25px; color:white;padding-left:20px; text-shadow: 0px 0px 5px;"/>Sakura, disciple de Tsunade</div>
<div style="font-family:trebuchet ms; color:#330000;font-size:10px;padding:20px;text-align:justify;"/>Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RPTexte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RPTexte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP</div></div>

font-family m'a permis de choisir une police trebuchet ms pour le texte Rp, j'ai choisi une couleur grâce à "color", et font-size m'a permis de choisir une toute petite taille de texte de 10 pixels. Evidemment, je veux qu'il y ait un alinéa du texte de 20 px donc j'utilise du padding  (vous êtes libre d'écrire simplement padding si vous désirez un écart de 20 px à droite, à gauche, en haut et en bas à la fois). Cela permet de ne pas écrire tout le temps padding-right:20px, padding-top:20px, padding-left:20px etc....

Ensuite, j'ai mis mon texte en justifié par esthétisme. Pour cela, vous devez simplement rajouter un text-align (l'alignement du texte quoi) et écrire en anglais le mot justifié.

Vous connaissez maintenant les premières bases pour créer un code RP ! Je vais vous apprendre quelques trucs pour terminer, afin de personnaliser un peu plus votre code : les bordures.

Ici, notre code a des coins carrés et ne comporte aucune bordure. Je voudrais bien que mon background ait des coins arrondis de 20px, et que mon gif ait des coins arrondis de 20px seulement en haut à droite, et en bas à gauche. Je voudrais aussi une jolie bordure pour mon background !

Je modifie donc mon code, pour obtenir :

Code:

<div style="background-color:red;width:550px; height: 500px; border-radius:20px;"/><img src="http://media0.giphy.com/media/zAtjMmiiQLMtO/giphy.gif" style="margin-top:20px; margin-left: 25px;border-radius: 0px 20px 0px 20px;"/><div style="font-family:georgia; font-size: 25px; color:white;padding-left:20px; text-shadow: 0px 0px 5px;"/>Sakura, disciple de Tsunade</div>
<div style="font-family:trebuchet ms; color:#330000;font-size:10px;padding:20px;text-align:justify;"/>Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RPTexte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RPTexte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP</div></div>

Si vous observez bien, vous constaterez que j'ai modifié la div style du background, et celle de l'image (logique, puisque c'était ce que je voulais). J'ai ajouté un mot appelé "border-radius". Border désigne le bord et radius désigne l'arrondissement de ces mêmes bords.
Dans mon background, je voulais que tous les coins soient arrondis de 20px donc j'ai inscrit : border-radius:20px

Dans la div style de mon gif, j'ai dû indiquer des valeurs précises pour chaque coin, puisque je voulais en arrondir certaines et pas d'autres. J'ai donc écrit border-radius: 0px 20px 0px 20px soit 2 coins arrondis de 20px et 2 coins non arrondis (0px). A vous de modifier les valeurs comme vous le souhaitez pour vous expérimenter !

Il ne manque plus que ma bordure associée au background. C'est pas dur.

Code:

<div style="background-color:red;width:550px; height: 500px; border-radius:20px; border: solid 2px white;"/><img src="http://media0.giphy.com/media/zAtjMmiiQLMtO/giphy.gif" style="margin-top:20px; margin-left: 25px;border-radius: 0px 20px 0px 20px;"/><div style="font-family:georgia; font-size: 25px; color:white;padding-left:20px; text-shadow: 0px 0px 5px;"/>Sakura, disciple de Tsunade</div>
<div style="font-family:trebuchet ms; color:#330000;font-size:10px;padding:20px;text-align:justify;"/>Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RPTexte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RPTexte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP</div></div>

Dans ma div style du background, j'ai rajouté le mot border. Ensuite, j'ai choisi mon type de bordure : en continu (solid). J'ai choisi l'épaisseur de ma bordure (2px) ainsi que sa couleur blanche (white).

Vous pouvez tester d'autres types de bordures. Les plus célèbres sont :

dotted (pointillé)
dashed (tirets)
solid (continu)
double (double)
groove (rainurée)
ridge (relief)
inset (relief intérieur)
outset (relief extérieur)

Si je veux, je peux aussi mettre une bordure (dashed par exemple)  à mon gif. Le code deviendra :

Code:

<div style="background-color:red;width:550px; height: 500px; border-radius:20px; border: solid 2px white;"/><img src="http://media0.giphy.com/media/zAtjMmiiQLMtO/giphy.gif" style="margin-top:20px; margin-left: 25px;border-radius: 0px 20px 0px 20px; border: dashed 2px white;"/><div style="font-family:georgia; font-size: 25px; color:white;padding-left:20px; text-shadow: 0px 0px 5px;"/>Sakura, disciple de Tsunade</div>
<div style="font-family:trebuchet ms; color:#330000;font-size:10px;padding:20px;text-align:justify;"/>Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RPTexte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RPTexte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP</div></div>

Il existe d'autres personnalisations pour votre background, texte, ou image. Vous pouvez rajouter box-shadow: 0px 5px 0px (par exemple) dans votre div style de background pour lui ajouter une ombre ! Il faut toutefois différencier box-shadow et text-shadow (qui, lui, ne s'applique qu'au texte !). N'allez donc pas écrire text-shadow pour mettre une ombre à votre image.

On peut aussi centrer notre code Rp (ici, il est tout à gauche). Vous devez entourer TOUT votre codage par les balises

Code:

 <center> et </center>

Pour terminer, un dernier truc. Vous vous souvenez que nous avions décidé que la hauteur de notre background serait de 500px ? Si notre texte est trop long, il va déborder du background. Vous pouvez alors retirer "Height" de la div style de background, pour que la hauteur du code s'adapte à la quantité de votre texte.

Comme ceci :

Code:

<div style="background-color:red;width:550px; border-radius:20px; border: solid 2px white;"/><img src="http://media0.giphy.com/media/zAtjMmiiQLMtO/giphy.gif" style="margin-top:20px; margin-left: 25px;border-radius: 0px 20px 0px 20px; border: dashed 2px white;"/><div style="font-family:georgia; font-size: 25px; color:white;padding-left:20px; text-shadow: 0px 0px 5px;"/>Sakura, disciple de Tsunade</div>
<div style="font-family:trebuchet ms; color:#330000;font-size:10px;padding:20px;text-align:justify;"/>Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RPTexte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RPTexte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RPTexte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RPTexte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RPTexte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RPTexte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP Texte RP</div></div>

Voilà pour les bases des codes RP ! Pour d'éventuelles questions, la MP est là.