Akira Saïto
Kyūdaime Kazekage
Messages : 370
Date d'inscription : 31/01/2013
Age : 29
Feuille Shinobi
EXP:
![[Tutoriels] Les Bases du Codage Left_bar_bleue](https://2img.net/i/fa/i/left_bar_bleue.jpg)  ![[Tutoriels] Les Bases du Codage Empty_bar_bleue](https://2img.net/i/fa/i/empty_bar_bleue.jpg)  (0/2000)
![[Tutoriels] Les Bases du Codage Empty](https://2img.net/i/fa/empty.gif) |  Sujet: [Tutoriels] Les Bases du Codage Lun 27 Jan - 20:27 | |
| LES BASESTutoriels
Hola ! o/
Bon ! Je vais vous parler ici rapidement des bases du codage afin que tous puissent l'utiliser un minimum sans se retrouver dans un remake d'Hiroshima dans son post. Ne vous inquietez pas , je ne vais pas vous parler chinois ou utiliser des termes d'un autre monde . On va faire ça simple o/. Mes explications seront rapides et se cantonnerons au strict minimum. N'hésitez pas à relire et à pratiquer , c'est comme ça que l'on progresse. Possibilité de creer des post pour un suivi d'aide au codage 
Bref pour simplifier , si vous voyez des [ c'est du bbcode , si vous voyez < c'est du html (sauf exceptions mais laissons les exceptions de coté , c'comme les verbes irréguliers on en veut pas)
Donc voila , après avoir vu la différence entre les deux , si vous avez bien suivi , nous allons nous concentrer sur le HTML  (Eh oui , le bbcode n'est pas suffisant pour de gros codages)
____________________
Voici un paragraphe casse-pied mais essentiel a comprendre le html  :
Le html sert avant tout à faire apparaître un élément à l'écran . Attribuez lui les valeurs que vous voulez , sans les balises html elles n’apparaîtront pas. Le html sert donc , et a faire apparaître , et a attribuer une valeur ? Oui et non . Il se complète avec du CSS qui lui gère les valeurs ( "size: 12px;" ). Si vous avez bien suivi , le css va definir les valeurs et le html va les afficher. L'un ne va pas sans l'autre:
- Code:
-
<span style="font-size: 32px; ">LES BASES</span>
-"span style" vise la nature de l'élément codé (vous aurez "td" et "tr" pour les tableaux par exemple. "div" est le plus communément utilisé car plus simple et englobe plus de choses) Span est appliqué pour des modifications de police (taille , couleur, nom de police etc)
- font-size: 23px; défini la valeur de l'élément. Vous l'aurez remarqué, l'appellation des valeurs a tendance à être en anglais , pratique ! Mais pourquoi le ";" à la fin ? Il marque la fin de la rédaction de la-dite valeur, indispensable à chaque fin de chaque valeur si vous voulez que votre code fonctionne
- /span signale que le changement que vous appliquez prend fin à cet endroit. Si vous venez à l'oublier, le code pourrait ne pas marcher du tout voir pire ! Déformer le corps du forum (clin d'oeil à ceux qui ne ferment pas les balises de tableaux , sisi les fameux td qu'on oublie en fin de post et qui dérègle tout les posts XD)
OUIOUI je m’arrête la avec la partie lourdasse des explications mdr Mais si vous intégrez bien ceci vous devriez ne plus faire d'erreurs et lire les codes plus facilement (sauf faute d'inattention) .
__________________________________________________ II - Nos fiches RPJe passe de suite à ce qui vous interesse . Je ne vais pas vous faire un cours a fond sur les méandres du codages , je le sais , vous vous en foutez XD.
► Les éléments principaux d'une fiche sont : L'encadrement , le fond , l'image d'en-tête.
Donc , pour faire simple , nous allons mettre l'encadrement et le fond dans la même balise ! Et si vous avez bien tout lu , quelle balise html supporte plusieurs elements tranquilou ... C'est div !
- Code:
-
<div style="valeurs"> Element </div>
Etant donné que nous voulons que tout notre rp ait ces valeurs , la première sera en tete de post , et /div tout à la fin. Jusque la rien de bien compliqué. Il va a présent falloir rédiger les-dites valeurs , à savoir :
- La taille de notre surface (qui s'exprime en pixels ou en pourcentage du corps du forum "300px ou 50%") que ce soit en hauteur (height) ou en largeur (width). Ici nous donnerons donc une largeur de 85% et aucune longeur. Pourquoi ? Pour que la longueur s'adapte a la longueur du rp. (/!\ L'avantage du pourcentage est que la largeur s'adaptera automatiquement aux modifications du forum !)
Ainsi
- Code:
-
width: 85%;
- L'arrière plan . Vous pouvez inserer une image ou seulement une couleur. L'on va rester sur la couleur , je détaillerai tout les css dans un prochain post. Donc l'arrière plan en anglais se dit background , jusque la tout va bien. Et bien en css la couleur se dit en lettres et en chiffres précédé d'un " # "  (cf palettes de couleurs html disponible sur internet). Je choisi un des gris disponible
- Code:
-
background: #BAA7A7;
- Les bordures ! Bah oui sinon c'est pas jolijoli. Et devinez quoi ... la valeur c'est "border" o/ Je vous conseille d'aller voir le tuto du css lorsqu'il sera fait car cet élément peut accepter plusieurs valeurs ! epaisseur , couleur , apparence etc.. Ici je souhaite les memes valeurs sur les quatres bordures , 2px d'épaisseur de couleur, et pleine (solid) (flemme de chercher une couleur donc ce sera du 000000)
- Code:
-
border-top: 2px solid #000000; border-right: 2px solid #000000; border-bottom: 2px solid #000000; border-left: 2px solid #000000;
etcetc
Il suffira apres de tout mettre à la suite :
- Code:
-
<div style=" width: 85%; background: #BAA7A7; border-top: 2px solid #000000; border-right: 2px solid #000000; border-bottom: 2px solid #000000; border-left: 2px solid #000000;"> Element </div>
Ce qui donne:
Element
______________________________________________
Vous avez compris le principe ?
Vous pouvez alors voir toute l'étendue des possibilités qu'offre le codage. Les div de nos fiches rps incluent d'autre valeurs tel que padding (l'éloignement des élements par rapport au bordures de notre code), le margin (eloignement du code par rapport aux bords de l'élément dans lequel il se trouve), le shadow (l'ombre de l'élément) , le border-radius (l'arrondi des angles de notre encadrement) etcetc
L'on peut même être plus précis : Border-top pour ne modifier que le bord du haut de l'élément, margin-left pour modifier que la marge de gauche etc...
Une fois apprivoisé les codes n'ont rien de barbares , si ce n'est que le moindre oubli peut complètement le foirer x). Si vous désirez vous lancer dans la création d'une fiche a partir de ce que j'ai commencé plus haut , n'hésitez pas à creer un post je vous suivrai dans la démarche.
/!\ A ne pas oublier :
- Code:
-
<div style=" valeur;"> Element</div>
Va coder le corps de la fiche
Pour coder l'écriture :
- Code:
-
<span style="taille police etc;"> Ecriture </span>
Ainsi , le tout se présentera :
- Code:
-
<div style="valeur;">
autre
<span style="valeur;"> Ecriture avec les valeurs que vous avez choisi</span>
autre
</div>
Suivrons des tutoriels plus précis sur chaque facette du codage , celui ci n'est qu'une introduction. L'objectif est que vous soyez capables de coder vous mêmes votre propre fiche ! A lire et a relire à tête reposée car , même lorsque l'on à l'habitude , coder la tête fatiguée , ça donne des maux de tête atroces x') Si vous n'avez pas compris quelque-chose , postez à la suite
|
|
