PREMIER COURS.

Les codes HTML de fiches sont basés sur deux balises, la balise div et la balise table.

La balise div peut se modifier à l'infini grâce aux différents attributs que l'on peut mettre dans le style comme ceci

Code:

<div style="attribut 1: propriété 1; attribut 2: propriété 2;">Texte, image, ...</div>

! Bien penser à fermer les balises !



▬ La hauteur
La hauteur (height) peut être utilisée en nombre de pixels ou bien en pourcentage.

Code:

<div style="height: 280px;">Texte, image, ...</div>

Code:

<div style="height: 75%;">Texte, image, ...</div>

▬ La largeur
La largeur (width) peut être utilisée en nombre de pixels ou bien en poucentage, tout comme la hauteur.

Code:

<div style="width: 500px;">Texte, image, ...</div>

Code:

<div style="width: 90%;">Texte, image, ...</div>

▬ La couleur
La couleur d'écriture (color) peut être utilisée avec son code significatif (le nom de la couleur en anglais) ou le code hexadécimal(les majuscules/minuscules ne font pas de différence, tu peux mêler et utiliser les deux).

Code:

<div style="color: black;">Texte, image, ...</div>

Code:

<div style="color: #000000;">Texte, image, ...</div>

▬ La couleur de fond
La couleur de fond (background-color) peut être utilisée avec son code significatif (le nom de la couleur en anglais) ou le code hexadécimal, tout comme la couleur d'écriture.

Code:

<div style="background-color: white;">Texte, image, ...</div>

Code:

<div style="background-color: #ffffff;">Texte, image, ...</div>

▬ L'image de fond
L'image de fond (background-image) est répétée sur la hauteur et sur la longueur automatiquement.

Code:

<div style="background-image:url('URL');">Texte, image, ...</div>

▬ La répétition de l'image de fond
Le code de la répétition de l'image de fond (background-repeat) permet de choisir si l'image doit être répétée ou non.

Répéter sur la longueur	repeat-y
Répéter sur la hauteur	repeat-x
Aucune répétition (image placée dans le coin gauche en haut)	no-repeat

Code:

<div style="background-image:url('URL'); background-repeat: no-repeat;">Texte, image, ...</div>

▬ Le contour
Le contour (border) est un attribut qui est composé de trois propriétés: la couleur, le nombre de pixels et le type de bordure. L'ordre n'a pas d'importance. Solid, qui donne une bordure simple, est le plus utilisé; les autres types de bordure sont à voir ici.

Code:

<div style="border: 2px solid #000000">Texte, image, ...</div>

▬ Différence entre style et class
Vous avez sans doute déjà croisés des balises div se trouvant sous la forme :

Code:

<div style="attributs et propriétés">...</div>

ou

Code:

<div class="petitnom">...</div>

Le premier prend en charge directement tous les attributs que vous lui donner, le second vous demandera le nom de la balise d'un code présent dans la feuille de style css. L'utilisation de "class" est un raccourcis. Néanmoins, l'un n'empêche pas l'autre de fonctionner et on peut même combiner les deux balises (

Code:

<div class="petitnom" style="attributs et propriétés">...</div>

) même si, pour le coup, ça n'a pas grande utilité d'allonger un raccourcis....