Catries
Admin
Messages : 24
Date d'inscription : 11/04/2009
 | | Sujet: rappels hTML ✿✿ Jeu 1 Oct - 5:23 | |
| DIV – C’est ce qu’on met en premier dans une balise! Si tu ne le mets pas, ça restera vide. On utilise le plus souvent DIV lorsqu’on veut faire un carré ou un rond, moi j’appelle ça des boîtes ou des formes. Il ne faut pas oublier de fermer la balise! Un code qui commence en DIV se fera comme ça
- Code:
-
<div style=" "> </div>
SPAN – C’est une autre forme de DIV qui se place à l’avant du code, sauf qu’on utilise SPAN plutôt lorsqu'on veux juste faire un code de texte. Il ne faut pas oublier de fermer la balise!
- Code:
-
<span style=" "> </span>
TABLE – Ça c’est pour quand tu veux mettre deux trucs l’un à côté de l’autres et qu’ils se tiennent ensemble sur la même ligne! Il y a une formule à suivre si tu veux mettre deux boîtes ou deux textes ou un texte/une boite l’un à côté de l’autre mais elle commence toujours par TABLE.
Ce que l’on peut retrouver entre les " " d'un DIV. Entre chaque codes, il faut mettre un ; il faut toujours mettre un : après le code pour y inscrire les tailles et/ou couleurs.
WIDTH – Ça c’est la largeur de ta forme! Tu peux la mettre en px (pixels) ou en % (pourcentages)
HEIGHT – Ça c’est la longueur de ta forme! Tu peux la mettre en px (pixels) ou en % (pourcentages). Si tu ne mets aucun HEIGHT, la longueur de ta forme sera en fonction du texte que tu mettras à l’intérieur. Si tu ne mets rien à l’intérieur et que tu omets de mettre un HEIGHT, alors rien n’apparaitra!
BACKGROUND-COLOR – C’est la couleur que tu veux dans le fond de ta forme. Si tu connais le nom des couleurs de forumactif, tu peux mettre le nom de la couleur, mais sinon c’est un code semblable à #FFFFFF (blanc) qu’il faut mettre. Si tu oublies de mettre le # avant un code de couleur, elle ne marchera pas. Mais si c’est le nom d’une couleur il ne faut pas mettre de # !
BACKGROUND-IMAGE – C’est un peu le même principe que plus haut, sauf qu’ici on parle d’une image! Le code intégrale c’est « background-image : url ('url de l’image ici') » Il ne faut pas oublier les apostrophe qui encadrent le lien, sinon ça ne marchera pas!
BORDER – Ici c’est la border de ta forme. À sa suite, tu dois indiquer la taille de ta bordure, sa couleur et si elle est pleine ou pointillée. Donc par exemple ça fait « border : 10px #FFFFFF solid » si tu veux que ta bordure soit d’une épaisseur de 10px, qu’elle soit blanche et pleine. Si tu veux une bordure de 20px, noire et pointillée, ça sera plutôt « border : 20px #000000 dotted »
BORDER-LEFT – C’est tout pareil que le BORDER simple, à la différence qu’ici, c’est lorsque tu veux que ta bordure soit d’un seul côté! BORDER-LEFT signifie que ta bordure sera à gauche, mais si tu veux qu’elle soit à droite, ça sera BORDER-RIGHT, si tu veux qu’elle soit en dessous ça sera BORDER-BOTTOM et pour au-dessus ça sera BORDER-TOP.
BORDER-RADIUS – Les coins arrondis te font envie? Alors c'est ce code qu'il te faut! Comme il y a quatre coin dans un carré, tu dois mettre quatres variables dans le BORDER-RADIUS, chacune de ces variables est attitrées à un coin du carré. De cette manière, si tu veux que le coin droit supérieur soit le seul à être arrondi, c'est le seul que tu modifieras! Par exemple avec « 5px 0px 0px 0px » il n'y aura que ton coin gauche supérieur d'arrondi. Plus tu veux que la courbe soit grosse, plus la variable doit être grande et ce toujours en px (pixels) ! Si tu veux que tout tes coins soient courbés et égaux ne mets qu'une seule variable! Ex: « border-radius: 5px; »
MARGIN – Ça c’est la marge extérieur de ta forme. Si jamais tu veux que les formes autour de celle que tu codes s’éloignent, tu n’as qu’à mettre le nombre de px (pixels) que tu veux et ça fera comme un champ de force autour de ta forme hehe!
MARGIN-LEFT – Comme pour le BORDER-LEFT de tout à l’heure, c’est lorsque tu veux de la marge d’un seul côté. Par exemple, si tu trouves que ta forme est placée trop haut, tu peux la décaler avec un MARGIN-TOP et si tu veux qu’elle aille vers la gauche, tu fais un petit MARGIN-RIGHT. Tout cela en px (pixels) aussi.
PADDING – C’est l’inverse de MARGIN. PADDING représente la marge intérieure de ta forme. Si par exemple tu mets du texte dans ta forme, comme sur une RS, tu ne veux pas que ton texte se rende jusqu’aux extrémités, ça ne fait pas très joli! Alors avec un PADDING en px (pixels) tu peux avoir un bel espace entre tes extrémités et le texte. Cependant! Si tu mets un PADDING de 10px et que tu veux que ta forme ai un WIDTH de 500px, n’oublies pas que tu viens d’ajouter 20px de largeur (10px à gauche et 10px à droite), alors il faudra ajuster ton WIDTH à 480px pour qu’avec ton PADDING tu atteignes le 500px.
PADDING-LEFT – C’est le même principe que MARGIN et BORDER, c’est lorsque tu veux une marge d’un seul côté. Mais là aussi il faut faire attention si tu veux une largeur ou une hauteur bien définie!
COLOR – La couleur de ton texte, en code (#FFFFFF) ou le nom de la couleur si tu la connais.
FONT-FAMILY – C’est carrément la police de ton texte! Par exemple Georgia, Times new roman, etc… Il faut un code spécial si tu veux intégrer une police extérieure à Forumactif, s’il y a lieu demande le moi, mais pour le moment je ne sais pas si ça vaut la peine que je t’explique!
FONT-SIZE – La taille de ton texte, en px (pixels) of course!
FONT-STYLE – Ici c’est si tu veux que ton texte soit en italic (italique) ou en bold (gras).
TEXT-TRANSFORM – Là c’est si tu veux que ton texte soit tout en uppercase (majuscule) ou tout en lowercase (minuscule) !
Dernière édition par Catries le Jeu 1 Oct - 5:25, édité 2 fois | |
|
Catries
Admin
Messages : 24
Date d'inscription : 11/04/2009
| | Sujet: Re: rappels hTML ✿✿ Jeu 1 Oct - 5:24 | |
| Ici un lien utile pour les noms de couleurs ♥
www | |
|
Accueil 