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



 

 :: Hrpg :: Ateliers :: L'école Voir le sujet précédent Voir le sujet suivant Aller en bas

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

avatar
Compte Fondateur
Fonda Ariemm
Messages : 424
Date d'inscription : 14/04/2016
Age : 67
Voir le profil de l'utilisateur
Lun 27 Juin - 8:47
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
de notre première partie de code.

Je vais encore vous apprendre quelques nouvelles instructions pour personnaliser votre texte.

- text-align : left; : indique comment est aligner votre texte. ici à gauche. Vous pouvez replacer "left" par right (droite) center (centre) ou justify (justifié)

- font-size : 12px; : indique la taille de la police.

- font-family : georgia; : indique quelle police de texte vous voulez utiliser. /!\ : pour des polices un peu spéciales, je vous conseil d'utiliser Google Fonts. Choisissez votre police parmis les nombreuses proposées, cliquez ensuite sur la petite flèche qui montre la droite ("Quick-use") puis sélectionner le premier code (celui qui commence par "link href") et placez-le au tout début de votre code. Ensuite, à la plce que "georgia" entrez le nom de votre police.

- margin : auto; : cette propriété permet de centrer votre bloc par rapport au bord de l'autre.

- padding-top : 20px; : permet d'appliquer des marges intérieur à votre bloc. ainsi, votre texte ne sera pas tout collé aux bord de votre bloc. Le "top" de padding-top, indique le haut. Si vous voulez mettre votre marge intérieur à droite utiliser padding-right : 20px; , à gauche padding-left : 20px; ou en bas padding-bottom : 20px;.
En réutilisant également les propriété que je vous avez montré dans la partie I ), vous pourrez obtenir ce code :

Code:
<div style="width: 400px; height-min: 180px; font-family: Martel; font-size: 12px; color: black; margin: auto; padding-top: 120px; padding-bottom: 20px;"></div>

Notez que pour pouvoir mettre une valeur à votre "padding-top" il faut prendre en compte la longueur de votre image (ici 100px) et la taille de vos marges normales (pour moi 20px). Additionnez les deux et vous trouverez la valeur a mettre a votre "padding-top".

Vous devez ensuite placer votre nouveau code entre le > et le
Code:
</div>
de votre premier bout de code.

Vous obtenez donc ceci :

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 style="width: 400px; height-min: 180px; font-family: Martel; font-size: 12px; color: black; margin: auto; padding-top: 120px; padding-bottom: 20px;"></div></div>

Nous avons presque terminé. Il reste le titre, que je vais tout de suite vous expliquer.

III ) CRÉATION DU TITRE
Pour créer le titre, nous allons utiliser un autre élément HTML, qui s'utilise à peu près de la même façon que la div. Ce fameux élément est le span. A l'inverse de la div,cette élément n'est pas un "bloc" mais une ligne. C'est-a-dire que certaine instruction CSS qui fonctionnaient avec la div ne pourrons pas être utiliser avec le span. C'est le cas de la largeur et de la longueur. Voici maintenant les nouvelles instructions :

- font-variant : small caps; : affiche votre texte en petite majuscule. /!\ : cela ne marche pas pour toute les polices.

- text-transform : uppercase; : toute les lettres sont en majuscule. Il est possible de remplacer uppercase par capitalize (met une majuscule à chaque début de mot.) ou lowercase (qui, au contraire de uppercase, met toute les lettres en minuscule.)

- letter-spacing: 3px; : modifie l'espacement de lettres.

- word-spacing : 10px; : modifie l'espacement des mots.

- border-top: 2px solid #000000; : encadre votre texte. Ici, il est précisé "top", ce qui signifie que votre texte ne sera encadre qu'en haut, en gros, il sera surmonté d'une ligne. La ligne est caractérisée par les instructions suivantes. 2px indique sa grosseur. solid indique que c'est une trait simple (à l'inverse de dotted, qui donnera des pointillés ou de dashed, qui donnera de tirés.) et #000000 sa couleur.

NOTE SUR LES BORDER : Si vous trouvez votre bordure trop proche de votre texte, il est possible de la repousser avec un padding.

- display: block ; : transforme un élément en ligne comme span en élément bloc, colle la div. Cela permet par exemple a ce que vos bordure fasse toute la largeur de la page au lieux de ne faire que la taille du texte lacé dans le span.

Maintenant, codons votre titre, que vous placerez entre le > de la deuxieme div et le premier
Code:
</div>
(si vous n'avez pas encore de texte. Si vous en avez mis, ce sera entre le > de la deuxième div et le début de votre texte.). Je rappel que cela va être le titre. Vous devez donc, pour un question esthétique, grossir la police et peut-être même changer la police. Je vous laisse vous débrouiller, j'avais expliquer précédemment comment faire.

Code:
<link href='https://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css'><span style ="display: block; font-family: Rokkitt; font-size: 24px; color : black; text-align: center; border-top : 2px solid #000000; padding-top: 10px; text-transform: uppercase;">Votre titre de RP</span>

Il manque un dernier détail. Si vous assemblez votre code comme cela et que vous l'utiliser sans ajouter la dernière modification, vous remarquerez que voûtée texte est collé à votre titre. Pour cela, on a l'habitude de faire un saut de ligne avec "entrée". Sauf que dans un code, cela ne fonctionne normalement pas. Vous devez utiliser la balise de saut ligne qui s'écrit
Code:
<br/>
. Contrairement aux autres balises déjà vues, celle-ci est "auto-fermante". C'est-à-dire qu'elle n'as pas besoin comme pour la div de
Code:
</div>
à la fin pour que la balise fonctionne. Placez juste
Code:
<br/>
là où vous souhaitez faire un saut de ligne.

Voici donc le code une fois fini :

Code:
<link href='https://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css'><link href='https://fonts.googleapis.com/css?family=Martel:400,200' rel='stylesheet' type='text/css'><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 style="width: 400px; height-min: 180px; font-family: Martel; font-size: 12px; color: black; margin: auto; padding-top: 120px; padding-bottom: 20px;"><span style ="display: block; font-family: Rokkitt; font-size: 24px; color : black; text-align: center; border-top : 2px solid #000000; padding-top: 10px; text-transform: uppercase;">Votre titre de RP</span><br/>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></div>

Voilà, si vous souhaitez que votre fiche de rp soit centrer par rapport à la page, utilisez
Code:
<center>
au tout début de votre code et
Code:
</center>
à la fin. Comme ceci :

Code:
<center><link href='https://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css'><link href='https://fonts.googleapis.com/css?family=Martel:400,200' rel='stylesheet' type='text/css'><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 style="width: 400px; height-min: 180px; font-family: Martel; font-size: 12px; color: black; margin: auto; padding-top: 120px; padding-bottom: 20px;"><span style ="display: block; font-family: Rokkitt; font-size: 24px; color : black; text-align: center; border-top : 2px solid #000000; padding-top: 10px; text-transform: uppercase;">Votre titre de RP</span><br/>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></div></center>

Pour finir ce tutoriel, je vous conseil le site "Never Utopia", qui propose un cursus d'apprentissage du codage très bon, de nombreux Libre Service, des tutoriels et surtout, une équipe à l'écoute. Pour vous exercer, si vous souhaiter en apprendre plus sur le codage, je vous conseille "Tryit". Vous pourrez tester vos codes HTML et CSS.


Si vous avez la moindre questions, si vous n'avez pas compris quelque chose, n’hésitez pas à poster à la suite.

Merci d'avoir suivit ce tuto, en espérant qu'il vous à aidé ^^
Revenir en haut Aller en bas
avatar
Etoile de Foudre
Admin Foufoudre
Messages : 398
Date d'inscription : 18/04/2016
Voir le profil de l'utilisateur
Jeu 30 Juin - 14:43
Merci beaucoup Ariemm!



Merci Cendrou!
Revenir en haut Aller en bas
avatar
Compte Fondateur
Fonda Ariemm
Messages : 424
Date d'inscription : 14/04/2016
Age : 67
Voir le profil de l'utilisateur
Jeu 30 Juin - 18:23
De rien, j'espère que ça t'as aider et que j'ai été claire ^^
Revenir en haut Aller en bas
avatar
Etoile de Foudre
Admin Foufoudre
Messages : 398
Date d'inscription : 18/04/2016
Voir le profil de l'utilisateur
Jeu 30 Juin - 18:36
Oui c'est parfait! Merci! :Chapon:



Merci Cendrou!
Revenir en haut Aller en bas
avatar
Nuage du Cerisier
Modo des Archives - Mélo'
Messages : 151
Date d'inscription : 01/06/2016
Age : 15
Voir le profil de l'utilisateur
Jeu 30 Juin - 20:13
Je trouve ça très joli :3




Merci beaucoup Honey ! C'est trop beau !
Merci Lunou:
 
Revenir en haut Aller en bas
Contenu sponsorisé
Contenu sponsorisé
Revenir en haut Aller en bas
Page 1 sur 1
Sujets similaires
-
» Conseils pour réaliser une fiche de RPG
» Fiche de présentation pour RP, libre service ♥.
» Tutoriel pour réaliser des brassards
» Fiche de personnage prédéfini
» Fiche Technique d'Argos

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
La Guerre des Clans forum RPG - Céleste  :: Hrpg :: Ateliers :: L'école-
Sauter vers: