Aide au Codage

Généralités

Alors, avant de commencer à t'expliquer il faut que je précise quelque chose ; il y a deux types de codage :
- Le HTML : Mise en forme du texte (Couleur, taille,...)
- Le CSS : Mise en forme de la page (agencement, image, bordures,...)

Une balise se fait sous la forme :

Code:

<Balise>  TON TEXTE  </balise>

Si tu as plusieurs balise à mettre : (Toujours emboîte, sinon le code risque de planté)

Code:

<Balise><balise 2>  TON TEXTE  </balise 2></balise>

Les deux grandes balises de base :

Code:

<span> Ta ligne </span>

Code:

<div>Ton paragraphe </div>

L'avantage de la balise DIV est de pouvoir organiser le contenue intérieur. Lorsque tu utilise SPAN tu t'occupe de l'apparence d'une ligne seulement, tu ne peut pas tout faire avec : marge externe (espace avec l'extérieur), interne (entre bordure et texte par exemple) et alignement.


Note : Tu as vu ici comment indiquer quel type de texte (Ligne/paragraphe) tu veux modifier/ mettre en page. Dans le post suivant je vais écrire comment faire les modifications maintenant.

Code:

<span style="modification 1: valeur1; modification 2: valeur2; modification 3: valeur 3"> Je m'appelle Orlanne </span>

-> style=                         Indique que tu va faire une Modification
-> " "                              Indique les types de modifications
-> Modification1                Indique quel type de modification (couleur, taille, gras,...)
-> Valeur1                       Indique la valeur de la modification (blanc, bleu, 16px,...)
-> ;                               Sépare les modifications : il ne faut pas les oublier
-> :                               Informe que tu va donner la valeur de la modification : ne pas confondre avec ";"







je m'appelle Emeline => je m'appelle Emeline

Code:

<span style="color: #AC0303; font-family: Georgia; font-size: 14px; text-transform: capitalize">je m'appelle Emeline</span>

-> color: #AC0303 = la couleur du texte est #AC0303 (http://code-couleur.com/)
-> font-family: Georgia = la police du texte est Georgia (tu aurait pu mettre Arial par exemple)
-> font-size: 14px = La taille est de 14px (Taille 14 sur word si tu préfère)
-> text-transform: capitalize = Mon texte change : tout en majuscule, minuscule, ou juste les premières lettres en majuscule (comme ici). Valeurs : UPPERCASE, Capitalize, lowercase (c'est un peu plus compliqué celui-ci)




Note : Ici je t'ai montrée quelques codes. Une fois ce sujet maîtriser tu devrais être capable de personnalisé une phrase de façon simple.  


A Faire :
- Indique moi (par mp par exemple) ceux que tu veux pouvoir faire avec une ligne que je te donne le nom des modifications et leurs valeurs.
- Essaye (à toi de voir) de modifier une petite phrase.

Code:

<div style="modification 1: valeur1; modification 2: valeur2; modification 3: valeur 3"> Je m'appelle Orlanne </div>

-> style=                         Indique que tu va faire une Modification
-> " "                              Indique les types de modifications
-> Modification1                Indique quel type de modification (couleur, taille, gras,...)
-> Valeur1                       Indique la valeur de la modification (blanc, bleu, 16px,...)
-> ;                               Sépare les modifications : il ne faut pas les oublier
-> :                               Informe que tu va donner la valeur de la modification : ne pas confondre avec ";"













-> border: 3px solid #941ADB = bordure de taille 3px, contour solide, couleur #941ADB. Valeurs : solid (solide), dotted (point), dashed (tiret), inset (creusé), outset (bombé), groove (relief), ridge
-> width: 300px = Largeur du paragraphe (ici de la bordure puisque l'on en a mit une mais elle peut être absente). Valeur : XX px (pixels) ou XX % (% de la page utilisé).
-> height: 200px = Hauteur du paragraphe (voir width, c'est exactement la même chose et les mêmes valeurs).
-> margin: auto = Crée un espace sur l'extérieur de la limite paragraphe (matérialisé par la bordure si on en met une). Auto = aligne au centre. Une valeur en px définit l'écart même si le cadre n'est pas centré. Tu peux combiner un margin: auto (qui met la même valeur partout) avec un margin-top par exemple (définir la marge au dessus). top (haut), bottom (bas), left (gauche), right (droite).
-> padding-top: 15px; padding-left: 10px; padding-right: 20px = Voir margin. La différence est que le contenue du paragraphe se décolle du cadre (marge intérieur).


Note : Normalement ici tu peut faire une mise en page simple d'un paragraphe.

A Faire :
- Indique moi (par mp par exemple) ceux que tu veux pouvoir faire avec une ligne que je te donne le nom des modifications et leurs valeurs.
- Essaye (à toi de voir) de modifier une petite phrase.