Réaliser une fiche de RP simple - [TUTORIEL CODAGE]

Bonjour à tous!
Comme le titre l'indique, je vais vous expliquer comment faire une fiche de RP simple mais efficace de ce type :

Aperçut:

Il faut bien savoir que je ne vous apprend ici pas à coder mais seulement à réaliser une petite fiche de RP très simple qui, si vous n'avez aucune expérience de codage, vous apprendra à vous servir de quelques éléments de codage afin de connaître le stricte minimum et si vous en savez déjà quelque chose, vous fera pratiquer et peut-être apprendre quelque chose ^^.
La première chose à faire avant de commencer ce tutoriel et de choisir les paramètres suivant : la largeur de votre fiche de RP, la couleur du fond/de la police et la taille des marges. Ainsi, vous aurez un maximum de liberté lorsque vous réaliserez votre fiche de RP. Je rappelle tout de même que la largeur de votre fiche de RP ne dois pas être trop élevé pour éviter de déformer la page du forum. Je vous conseille 600px ou moins.
Dans mon tutoriel, j'utilise une largeur de 440px et une marge de 20px.

I ) CRÉER LE FOND DE LA FICHE
Pour créer le fond de votre fiche de RP, vous allez devoir utiliser un élément de codage très pratique : la

Code:

<div>

. Cet élément est tout simplement un élément "bloc" dans lequel vous allez pouvoir placer votre texte. Par exemple :

Code:

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate ante vel molestie cursus. Ut eu tortor urna. Nam blandit dolor sit amet nibh venenatis, quis gravida mauris pharetra. Donec pellentesque tristique mauris, sit amet vulputate tellus lobortis eu. Ut iaculis nisi faucibus, rutrum elit vitae, vehicula leo. Nulla mattis magna lectus, a fermentum arcu venenatis vestibulum. Donec imperdiet, mauris in ornare venenatis, lectus lorem rutrum felis, dignissim mollis eros nibh id orci. </div>

Vous remarquerez que si vous mettez ce code dans un message et que vous l'envoyer, il ne se passe tout simplement rien. Seul votre texte apparaît. C'est tout à fait normal car vous n'avez pas ajouté de "style" à votre bloc. Je m'explique, il est possible de "personnaliser" un bloc en ajoutant "style=" à la suite de votre div. Comme ceci :

Code:

<div style="ensuite, mettez ici les instruction concernant l'apparence de votre div">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate ante vel molestie cursus. Ut eu tortor urna. Nam blandit dolor sit amet nibh venenatis, quis gravida mauris pharetra. Donec pellentesque tristique mauris, sit amet vulputate tellus lobortis eu. Ut iaculis nisi faucibus, rutrum elit vitae, vehicula leo. Nulla mattis magna lectus, a fermentum arcu venenatis vestibulum. Donec imperdiet, mauris in ornare venenatis, lectus lorem rutrum felis, dignissim mollis eros nibh id orci. </div>

NOTE : Il est important que vos instructions de personnalisation soient entre guillemet et séparées entre elles par un point virgule.

Une petite chose à savoir concernant ces "instructions de personnalisation" : il s'agit en faite d'instructions CSS (et oui, comme la feuille de style CSS du panneau d'administration de forumactif, pour ceux qui sont admin/fonda ^^) En théorie, un "bon code" ne doit pas mélanger le HTML (langage utilisé pour les structures de page web, vous l'avez utilisé pour la "div") et le CSS comme je vous l'apprend dans ce tutoriel. En effet, le HTML est dans la page web, et le CSS dans sa feuille de style, point. Mais pour une petite fiche de RP, cette technique est bien meilleure : les membres normaux du forum n'ont pas accès au panneau d'administration du forum pour pouvoir mettre leur CSS dans la feuille de style. En bref, pas d'inquiétude, vous pouvez faire votre fiche de RP comme cela, personne ne viendra vous cracher dessus ^^

C'est bien beau tous ça mais vous ne savez pas quoi mettre à la place du "ensuite, mettez ici les instruction concernant l'apparence de votre div". Maintenant, je vais vous montrer quelques instructions CSS pour personnaliser votre div :

- La plus importante en premier. Elle permet d'imposer une largeur à votre bloc : width : 440px;
à la place de 440px, vous pouvez mettre la largeur que vous souhaitez (je rappelle, 600px maximum pour une fiche de rp, sinon, cela risque de déformer la page du forum!)

- La longueur minimale de votre bloc. height-min : 200px
On s'en servira pour que votre bloc ne fasse pas moins du nombre de pixel que vous avez indiqué. En revanche, votre bloc pourra s'allonger afin que le texte ne dépasse pas de votre bloc et reste toujours dedans.

- Couleur d'arrière plan : background-color : #000000;
à la place de #000000, vous pouvez mettre n'importe quel code de couleur ou nom (white : blanc, black :noir...). Pour les codes des couleur, je vous conseil ce site et pour les noms, ce site. personnellement, j'utilise plus les code que les noms ^^"
A savoir : votre couleur d'arrière-plan sera toujours derrière l'image d'arrière plan.

- Image d'arrière plan : background-image : url(adresse de l'image);
Rien de spécial à expliquer ici si ce n'est que pour le type de fiche de RP que l'ont va créer dans ce tuto, l'image d'arrière plan sera plutôt de type en-tête.

- background-position : top center; indique le placement de votre image de fon. Ici votre image est en haut et centrée. Vous pouvez aussi mettre bottom, pour qu'elle soit en bas, left (elle sera à gauche) ou right (elle sera à droite).

- background-repeat : no-repeat; : indique si votre image se répète dans votre bloc, ici, non. Pour qu'elle se répète, vous pouvez mettre repeat-all.

Pour le moment, on se contentera de cela.
Bien, revenons à notre arrière plan de fiche de RP. Vous allez devoir lui donner une largeur et une image de fond avec couleur de fond. Pensez que l'image devra faire la largeur de votre fiche de RP pour que le rendue soit esthétique. C'est là qu'intervient un logiciel de retouche photo. Pour redimensionner, si nécessaire et recadrer. Si vous n'en avez pas, je pense que vous pourrez passer une commande dans un atelier. Pensez également à la longueur de votre image. Ici, on souhaite une image de type "bannière", veillez donc à ce qu'elle ne soit pas trop longue. Retenez aussi la longueur de votre image. Nous en aurons besoin plus loin.
Donc, vous allez devoir utiliser le "width", le "height-min" et le "background-image" pour cette première étape.

Voici le code que vous devez obtenir à la fin (avec vos propre valeur, bien entendue.)

Code:

<div style="width: 440px; height-min: 200px; background-image: url(http://i35.servimg.com/u/f35/19/45/86/33/fiche_11.jpg); background-position: top-center; background-repeat: no-repeat; background-color: #93876c;"></div>

II ) LA ZONE DU TEXTE DE RP
Nous allons maintenant créer l'espace où sera écrit votre texte. Pour cela, nous allons aussi utiliser une div, que nous placerons entre les > et le

Merci beaucoup Ariemm!

De rien, j'espère que ça t'as aider et que j'ai été claire ^^

Oui c'est parfait! Merci! :Chapon:

Je trouve ça très joli :3