Qu’est-ce qu’un attribut en html?

Dans mon intro sur les page web, on a vu la notion de balise:

  • <h1>titre de niveau 1</h1>
  • <h2>titre de niveau 2</h2>
  • <p>paragraphe</p>
  • <a>lien hypertexte</a>

Mais des balises, il en existe des dizaines ! Elles permettent de créer/d’insérer:

  • des tableaux (<table><tr><td></td><td></td></tr></table>)
  • des listes (<ul><li></li><li></li><li></li></ul>)
  • des formulaires (<form ></form> <label></label>  <input > etc.)
  • des images (<img>)

Un attribut c’est une propriété d’une balise qui va venir la qualifier plus spécifiquement. Et donc les attributs ne sont pas tous obligatoires. C’est pas facile comme ça, hein ?

Alors, on va imaginer une balise “simple”:
la balise <véhicule > </véhicule > ; ses attributs pourraient être:

  • motorisation (animale, humaine, à moteur)
  • type (roulant, volant, naviguant)
  • classe (1, 2, 3 ,4 ,5, etc.)
  • marque (Renault, Peugeot, Citroën, etc;)
  • nom (Clio, Mégane, 205, 308, C3, etc.)
  • etc.

Ainsi, nous pourrions avoir la balise suivante:

<véhicule motorisation: à moteur; type: roulant; classe: 1; marque; Renault; nom: Clio> </véhicule>

mais aussi la balise <véhicule type: à moteur> </véhicule>

Si maintenant on se projette en html sur la balise image <img>, sachant que celle-ci peut notamment avoir les attributs suivants:

  • src: chemin de l’image
  • width: longueur de l’image
  • height: largeur de l’image
  • alt: texte alternatif en cas de non affichage de l’image
  • title: titre de l’image
  • class: la liste des styles CSS  applicables à cette balise

En écrivant dans le code de cette page la ligne suivante:

<img class="alignnone size-full wp-image-3763" src="http://www.lespetitspois.fr/wp-content/uploads/2016/09/vert.jpg" alt="vert" width="299" height="401" />

nous obtiendrons cette image:

vert

On verra par la suite qu’il est  possible d’aller très loin dans la mise en forme d’un texte html  justement grâce à ces attributs.

Mais ce sera une prochaine fois.

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Merci de renseigner le captcha ! * Time limit is exhausted. Please reload CAPTCHA.