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:
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.