Tutoriel HTML-partie 7

Leçon 7 : Les attributs


Vous pouvez ajouter des attributs à beaucoup d'éléments.
Qu'est-ce qu'un attribut ?


Comme vous le savez, les éléments structurent le document HTML et indiquent au navigateur comment présenter le site Web (par exemple,
dit au navigateur de faire un saut de ligne). Certains éléments peuvent recevoir plus d'information. Cette information supplémentaire est appelée un attribut.
Exemple 1 :

Mon affinité avec HTML





Les attributs s'inscrivent toujours au sein de la balise ouvrante, et ils sont suivis par un signe égal et la valeur de l'attribut entre des guillemets. Ici le point-virgule sert à séparer plusieurs instructions de style. Nous y reviendrons plus tard.
Qu'est-ce que c'est ?


Il existe beaucoup d'attributs différents. Le premier que vous aller voir est « style ». Avec l'attribut style, vous pouvez ajouter une mise en page à votre site. Par exemple, une couleur d'arrière-plan :
Exemple 2 :













Ici la page sera complètement rouge dans le navigateur, faites-le et voyez vous-même. Nous expliquerons bientôt en détails comment le système de couleurs fonctionnent.
Notez que quelques balises et attributs ont une orthographe américaine, par exemple, « color » et non « colour ». Il faut faire attention à utiliser la même orthographe que la nôtre dans les exemples de ce tutoriel, sinon les navigateurs ne pourront pas comprendre votre code. Également, n'oubliez jamais le guillemet final de l'attribut.
Comment la page est-elle devenue rouge ?


Dans l'exemple précédent, nous avons demandé la couleur d'arrière-plan "#ff0000". C'est un code de couleur pour rouge en nombre hexadécimal (HEX). Chaque couleur est associée à un nombre hexadécimal. Voici quelques exemples :
Blanc : #ffffff
Noir : #000000 (des zéros)
Rouge : #ff0000
Bleu : #0000ff
Vert : #00ff00
Jaune : #ffff00
Un code de couleur hexadécimal se compose d'un caractère « # » et de six chiffres ou lettres. Il existe plus de 1000 codes HEX, et il n'est pas facile de déterminer quel code HEX est associé telle couleur particulière. Pour faciliter les choses, nous avons réalisé un tableau des 216 couleurs les plus courantes :

216 Web Safe Colour Chart




Vous pouvez également utiliser les noms anglais des couleurs les plus courantes, à savoir "white", "black", "red", "blue", "green" et "yellow" (N.d.T. blanc, noir, rouge, bleu, vert et jaune).
Exemple 3 :





Assez pour les couleurs. Revenons aux attributs.
Quels éléments ont des attributs ?


On peut appliquer plusieurs attributs à la plupart des éléments.
Vous utiliserez souvent des attributs dans des balises comme « body » et rarement, par exemple, dans une balise « br » puisqu'un saut de ligne ne s'ajustent normalement pas.
Tout comme pour les éléments, il y a beaucoup d'attributs différents. Certains attributs sont taillés sur mesure pour un seul élément particulier tandis que d'autres s'utilisent avec plusieurs éléments différents. Et vice versa : certains éléments peuvent uniquement contenir un seul type d'attribut tandis que d'autres peuvent en contenir plusieurs.
Cela peut sembler embrouillé mais une fois familiarisé avec les différents attributs, c'est en réalité très logique, et vous verrez rapidement qu'ils sont très faciles à utiliser et qu'ils offrent beaucoup de possibilités.
Ce tutoriel introduira les attributs les plus importants.
De quelles parties un élément est-t-il constitué exactement ?


Généralement, un élément se compose d'une balise ouvrante avec zéro à plusieurs attributs, d'un contenu et d'une balise fermante. Aussi simple que ça. Voir l'illustration ci-dessous.