Tuto de Kayl n°2 - La fiche RP

Tuto n°2


Dans ce tuto, je vais vous expliquer comment créer une vraie fiche de RP *^*
Vous vous souvenez ? Dans le précédent tutoriel, on en était là :

Code:


<div style="border: 5px double #FF0000; background-color: #CCEEFF;">Texte</div>

A présent, on va réduire la largeur en ajoutant l'information "width", suivie du nombre de pixels (px) ou d'un pourcentage qui correspond à la largeur de l'écran de l'utilisateur. Je vous montre :

Avec une valeur en pixels :

Code:


<div style="border: 5px double #FF0000; background-color: #CCEEFF; width: 200px;">Texte</div>


Avec une valeur en pourcentage :

Code:

<div style="border: 5px double #FF0000; background-color: #CCEEFF; width: 50%;">Texte</div>

Pour arrondir les coins, l'information placée entre les guillemets se nomme "border-radius". De même que pour la largeur, on peut écrire la valeur en pixels ou en pourcentages :

Code:

<div style="border: 5px double #FF0000; background-color: #CCEEFF; width: 50%; border-radius: 20px;">Texte</div>

Code:

<div style="border: 5px double #FF0000; background-color: #CCEEFF; width: 50%; border-radius: 15%;">Texte</div>

C'est déjà pas mal, comme ça. Mais maintenant, il faut rajouter des zones pour le titre, le texte, le copyright. C'est pas compliqué, pour ça on va ouvrir plusieurs balises "div" pour définir des informations différentes pour chacun.
Le titre, on le centre, on le souligne et on l'écrit en gros.
L'information "text-align" désigne l'alignement du texte : "center" pour le centrer, "justify" en justifié, "right et left" à droite ou à gauche.
pour choisir la taille, l'information qu'on place entre les guillemets suivie d'un point-virgule est "font-size", la valeur est en pixels.
La balise pour souligner est :

Code:

<u>texte souligné</u>

Code:

<div style="border: 5px double #FF0000; background-color: #CCEEFF; width: 50%; border-radius: 20px;"> <- ça, c'est la base, qui définit tout le code. On doit le fermer tout à la fin. On ouvre donc un autre "div" pour le titre.

<div style="text-align: center; font-size: 26px;"><u>Ici on écrit un titre</u></div> <- on oublie pas de fermer la balise div du titre. On ouvre ensuite une nouvelle balise pour le texte.

<div style="text-align: justify; font-size: 14px;">On écrit le texte ici, et on ferme le div</div>

Et enfin, le copyright. C'est très important, alors on ouvre une dernière balise div :
<div style="text-align: center; font-size: 10px;">Copyright by...</div> on ferme la balise.

Et la première balise que l'on a ouverte, on la ferme en dernier ! -> </div>

Si on reprend sans les explications, ça nous donne :

Code:

<div style="border: 5px double #FF0000; background-color: #CCEEFF; width: 50%; border-radius: 20px;">
<div style="text-align: center; font-size: 26px;"><u>Ici on écrit un titre</u></div>

<div style="text-align: justify; font-size: 14px;">On écrit le texte ici</div>

<div style="text-align: center; font-size: 10px;">Copyright by...</div>
</div>

Et voilà ! Maintenant, vous êtes en mesure de créer votre propre fiche de RP. Je réponds aux questions, parce j'explique comme une merde, et sinon... Le prochain tuto portera sur les images 8D

Tu expliques très bien Kayu. :3

(Okok, je savais déjà faire ça moi donc. )

Merci les gens x)
Luny : eh toi tu connais la base déjà e.e

Je suis tes tutoriels vraiment bien faits et je voulais savoir, comment on modifie la police ?

Merci les gens x)
Zouzou :
La police est une info :

Code:

<div style="font-family: Times;"> Blabla </div>

Par exemple Tu peux mettre d'autres polices, je sais pas lesquelles marchent x)