AccueilPortailFAQRechercherMembresGroupesS'enregistrerConnexion

Harry Potter 2005 :: ~¤~ Créations personnelles ~¤~ :: Codage & Graphisme
Page 1 sur 1
Tutoriel : Le codage
Maître de jeu
PNJ
Arbitre neutre
Spécialité(s) : Aucune spécialité enregistrée actuellement.


Tutoriel : Le codage

Message par : Maître de jeu, Dim 14 Aoû 2016, 12:22


Tutoriel : le codage


En vous baladant dans les volières et fiches de personnages, vous vous êtes certainement rendu compte que certains membres avaient opté pour des mises en page plus élégantes et élaborées que celle de base proposée. Elles sont obtenues grâce à la combinaison de deux langages informatiques complémentaires : le html, qui gère la structure, et le css, qui gère l'apparence. Ce sujet a ainsi pour objectif de vous en expliquer les bases afin que vous puissiez réaliser votre volière et votre fiche par vos propres soins.

Attention, ceci n'est pas un tutoriel détaillé sur le html et le css - vous pouvez facilement en trouver sur internet - mais une synthèse de brèves explications et conseils, pour vous aider à effectuer vos premiers pas dans le vaste univers qu'est le codage. Sachez également que vous ne parviendrez pas à coder la fiche de personnage de vos rêves dès le premier essai : apprendre à coder demande du temps, alors armez-vous de patience et persévérez !

I) La structure

Etape 1 : Schématiser la fiche ou volière

Nous allons considérer que chaque élément d'un codage est un bloc distinct qui occupe une certaine place. Il va donc vous falloir un bloc fond, un bloc titre, un bloc image et ainsi de suite pour chacun des éléments que vous souhaitez voir apparaître dans votre fiche/volière. Afin de mieux visualiser, il est utile de schématiser ce que vous souhaitez obtenir en faisant clairement apparaître sur un dessin chaque bloc.

Citation :
Exemple :

Fond
Titre

Image

Texte


Etape 2 : Traduire le schéma en langage html

Comment fait-on pour coder un bloc ? Rien de plus simple, on utilise la balise div en l'ouvrant (haut du bloc), puis en la refermant (bas du bloc). Un bloc se code ainsi de la façon suivante :

Code:
<div> Texte </div>

Pour former la structure de votre fiche, il va à présent falloir que vous agenciez ces blocs les uns avec les autres. Pour ce faire, vous n'avez que trois choses à retenir :

● Un bloc peut en englober un autre.
● Il suffit d'un retour à la ligne pour placer un bloc en dessous d'un autre.
● Il faut un code spécial pour placer deux blocs côte à côte. Ceci sera expliqué plus tard, vous ne pouvez donc pas pour l'instant.

Citation :
Exemple :

Code:
<div> Fond
<div>Titre</div>
<div>Image</div>
<div>Texte</div>
</div>


Si vous êtes curieux, vous venez probablement de tester votre code pour vous rendre compte de l'allure que prenait votre fiche. Vous avez alors constaté avec déception que cela ne ressemblait absolument pas à votre schéma. En effet, en reprenant le code de l'exemple ci-dessus, ceci s'affiche :

Citation :
Fond
Titre

Image

Texte


Ce rendu est tout à fait normal puisque le html ne s'occupe que de la structure, pas de l'apparence. C'est pourquoi vous allez avoir besoin du css, qui va vous permettre de donner aux blocs l'allure de votre choix.

II) L'apparence

L'utilisation du css

Il y a différentes méthodes pour utiliser le css mais une seule sera expliquée ici : c'est la plus facile à mettre en oeuvre. Elle consiste à intégrer directement les propriétés css à l'intérieur des balises html, de la façon suivante :

Code:
<div style=" "></div>

Les propriétés css s'insèrent entre les guillemets dans un ordre quelconque et doivent toujours être séparés par un point virgule ( ; ).

Les propriétés css

Il existe une multitude de propriétés css, dont les plus courantes ont été regroupées dans le tableau ci-dessous.

SyntaxeDescription
background-color:#20B2AA;Couleur de fond du bloc. Vous pouvez utiliser le code hexadécimal de votre choix.
background-image:url(lienimg);Image de fond du bloc à partir de son url.
border: 1px solid #20B2AA;Contour autour du bloc. Vous pouvez en choisir l'épaisseur, le style et la couleur.
border-radius:10px;Coins du bloc arrondis. Vous pouvez choisir le rayon que vous désirez.
color:#20B2AA;Couleur du texte contenu dans le bloc. Vous pouvez utiliser le code hexadécimal de votre choix.
font-size:12px;Taille des caractères du texte contenu dans le bloc. Vous pouvez choisir la taille de votre choix.
height:200px;Hauteur du bloc. Vous pouvez choisir la taille de votre choix.
margin:10px;Marges autour du bloc. Vous pouvez choisir la taille de votre choix.
padding:10px;Marges entre le contour du bloc et le contenu du bloc. Vous pouvez choisir la taille de votre choix.
width:200px;Largeur du bloc. Vous pouvez choisir la taille de votre choix.

Vous pouvez trouver une liste plus complète [Vous devez être inscrit et connecté pour voir ce lien].

Etape 3 : Mettre en forme la structure

Vous avez à présent toutes les cartes en mains pour mettre en forme votre fiche ou votre volière. Il est conseillé de procéder de haut en bas et de vérifier régulièrement le rendu, afin de repérer rapidement les éventuels bugs. Cette dernière étape relevant entièrement de votre imagination et de vos goûts, il n'est pas possible d'expliquer l’exacte marche à suivre, mais vous trouverez néanmoins ci-dessous un exemple simple de codage.

Citation :
Exemple :


Titre

Ceci est un contenu



Code:
<center><div style="background-image:url(http://i35.servimg.com/u/f35/16/82/86/25/dark_e10.png); border:1px solid #D6D6D6; width:200px; padding:10px; border-radius:10px;">
<div style="width:200px; height:30px; background-color:#D6D6D6; color:#493940; font-size:25px; border-radius:10px; padding-top:5px;">Titre</div>
<div style="width:190px; height:150px; background-color:#D6D6D6; color:#493940; padding:5px; border-radius:10px;">Ceci est un contenu</div>
</div></center>

III) Les trucs et astuces

Où coder ?

Pour coder en toute tranquillité, vous pouvez vous servir de votre messagerie privée : cliquez sur "Nouveau", codez, prévisualisez, continuez !

Attention aux déformations

Lors de la création de votre fiche de personnage ou volière, vous devez veiller à ce que votre codage ne déforme pas la page du forum : la largeur totale de votre codage ne doit pas excéder 600px. Ne vous fiez pas au rendu obtenu dans la fenêtre de prévisualisation car elle est bien plus large que celle d'un message posté. Une astuce simple consiste à encadrer votre code de la façon suivante :

Code:
<div style="width:595px; overflow:hidden;"> CODE </div>

Les polices

La police d'écriture joue un rôle très important dans l'allure d'un codage. Vous en trouverez de nombreuses [Vous devez être inscrit et connecté pour voir ce lien]. Contrairement aux polices que vous seul possédez sur votre ordi, celles-ci, bien utilisées, sont visibles par tout le monde.

Comment les utiliser ?:
 

Mettre plusieurs blocs côte à côte

Afin d'obtenir un rendu plus harmonieux, il peut être intéressant de placer plusieurs blocs sur une seule et même ligne. Or, comme indiqué plus haut, ceci ne fonctionne pas :

Citation :
Bloc 1
Bloc 2


Code:
<div style="border:2px solid white; width:100px; height:50px;">Bloc 1</div><div style="border:2px solid white; width:100px; height:50px;">Bloc 2</div>

Il faut en effet indiquer précisément dans le css que les deux blocs doivent s'aligner. Pour cela, on utilise la propriété display:inline-block.

Citation :
Bloc 1
Bloc 2


Code:
<div style="border:2px solid white; width:100px; height:50px; display:inline-block;">Bloc 1</div><div style="border:2px solid white; width:100px; height:50px; display:inline-block;">Bloc 2</div>

Un rendu équivalent peut-être obtenu avec un tableau. Les deux méthodes comportent chacune leurs avantages et inconvénients.


A vous de jouer !

Revenir en haut Aller en bas
Page 1 sur 1

 Tutoriel : Le codage


Permission de ce forum:Vous pouvez 
Vous ne pouvez pas répondre aux sujets dans ce forum
Harry Potter 2005 :: ~¤~ Créations personnelles ~¤~ :: Codage & Graphisme-

L'univers d'Harry Potter est la propriété de la Warner Bros ainsi que de J.K Rowling.
Tous droits réservés sur ce site ©Copyright HarryPotter2005. Affichage optimisé sous Firefox.