HTML - Attributs

  »   HTML  »   Tutoriel HTML - Attributs

Les attributs sont utilisés pour personnaliser les balises. Qu'est-ce que je veux dire ? D'une manière ou d'une autre , un jour vous voulez modifier la taille d'une image d'un tableau ou changer la couleur d'une police. Tout ceci est possible avec l'aide des attributs.

La plupart des balises ont leur propres attributs. Nous parlerons de cela lorsque nous les intégrerons dans notre nouvelle balise. Nous apprendrons un ensemble d'attributs génériques qui peuvent être utilisés avec la majorité des balises.

Les attributs sont mis entre les crochets angulaires (<>) de l'ouverture d'une balise.

Les attributs "class" et "id" en HTML

Ces deux attributs sont plus ou moins les mêmes. Ils n'ont pas de rôle strict dans le formattage des éléments mais ils sont utiles dans l'ombre avec l'aide du CSS. Nous parlerons de leur rôle quand le moment sera venu lorsque nous étudierons leur syntaxe et leur fonction en CSS.

L'idée est que lorsque vous voulez mettre en place une classe de balises qui seront utilisées plus tard avec l'aide du CSS, vous pouvez faire la différence entre deux balises identiques mais avec différents attributs. Jetez un oeil au prochain exemple :

html<p id="italicparagraph">Paragraphe type 1, italique </p>
<p id="boldparagraph">Paragraph type 2, gras </p>

HTML - L'attribut "name"

"name" est un peu différent de "id" et "class". Si vous donnez un nom à un élément celui-ci devient une variable de script pour JavaScript, ASP et PHP. Quelque chose que l'on rencontre très souvent dans les formulations et autres champs de texte interactifs.

html<input type="text" name="TextField" />

Demo

Cet attribut n'a pas d'effet sur l'apparence de la zone de texte, même s'il joue un rôle en arrière plan il est très important.

HTML - attribut "title"

Cet attribut est utilisé rarement . Il ajoute un titre (un pop-up) à chaque contenu de l'élément. Cet attribut ne doit pas être oublié. Vous pouvez nommer presque tout comme vous voulez. La visualisation apparait quand vous vouz arrêtez avec votre souris pour quelques secondes au-dessus du contenu.

html<h2 title="Je suis un attribut titre!!">Un titre quelconque</h2>

Demo

Un titre quelconque

Passer avec votre souris au-dessus du titre supérieur pour que vous puissiez voir la magie de l'attribut "title". L'attribut apportera à votre site un peu d'interaction pour ceux qui le visitent. N'omettez pas ce détail.

HTML - attribut "align"

Si vous voulez aligner d'une autre manière certains éléments de votre page vous avez à votre disposition l'attribut "align". Vous pouvez aligner à gauche, à droite ou au centre de la page presque tous les éléments. Par défaut les éléments s'aligneront à gauche, sauf lorsque qu'un autre alignement est spécifié.

html<h2 align="center">Titre centré </h2>

Demo

Titre centré

D'autres exemples:

html<h2 align="left">Titre aligné à gauche </h2>
<h2 align="center">Titre centré </h2>
<h2 align="right">Titre aligné à droite </h2>

Demo

Titre aligné à gauche

Titre centré

Titre aligné à droite

Les valeurs par défaut des attributs

La plupart des balises ont des attributs standards. Cela signifie que si vous ne spécifiez pas d'autres attributs, le navigateur le fera pour vous. Par exemple un paragraphe s'alignera par lui-meme sur la gauche, sauf lorsque que vous spécifiez une autre façon; meme chose pour un tableau. Tant que vous vous entrainez vous apprendrez bien plus d'autres choses à propos des valeurs par défaut de certaines balises.

Attributs génériques

Vous devez garder en tête que les attributs sont utilisés pour mettre en forme les éléments d'une page internet. J'ai indiqué ici quelques uns des attributs les plus couramment utilisés en HTML :

AttributOptionsFonction
alignright, left, centerAlignement horizontal
valigntop, middle, bottomAlignement vertical
bgcolorvaleur numérique, hexadecimale, ou RGBUn arrière plan derrière un élément.
backgroundURLUne image derrière un élément.
idDéfini par l'utilisateurNomme un élément qui sera utilisé en CSS.
classDéfini par l'utilisateurClasse un élément qui sera utilisé en CSS
widthValeur numériqueSpécifie la largeur dun tableau, d'une image ou d'une zone de tableau.
heightValeur numériqueSpécifie la hauteur d'un tableau,
titleDéfini par l'utilisateur"pop-up" un titre d'un élément