Si vous avez bien observé l’exemple précédent vous avez pu y déceler deux vilains petits canards …
La balise <img … /> et la balise <a … >, elles nous permettent de découvrir le principe des attributs de balise que nous pouvons essayer de classer en trois catégories :
- attribut fonctionnel
- attribut sémantique
- attribut de mise en forme
Les attributs apparaissent dans la balise sous la forme suivante <nombalise attribut=’valeur-de-l’attribut’>
Les attributs fonctionnels
Ce sont ceux qui sont indispensable au fonctionnement de la balise par exemple :
- la balise <img…> ne peut fonctionner sans l’attribut src qui précise l’emplacement et le nom du fichier de l’image
- pour définir un hyperlien la balise <a…> ne peut rien faire si l’attribut href ne contient pas le nom de la page de destination
- …
Les attributs sémantiques
Ils ne sont pas indispensables au fonctionnement de la balise, mais peuvent apporter à l’internaute des informations textuelles complémentaires
Ils sont en particulier très utiles comme aide à la navigation aux personnes souffrant de handicap, et ils sont généralement pris en compte par les moteurs de recherche
Pour certains d’entre-eux et avec certains navigateurs ils permettent également l’affichage sous forme « d’info-bulle » quand le pointeur de la souris passe sur la zone concernée
- l’attribut alt (pour alternative) permet d’ajouter des informations sur une image, et s’afffiche en clair au cas ou l’image cible n’est pas disponible
- l’attribut title permet d’ajouter des informations sur presque toute les balises
- l’attribut summary permet d’expliquer le contenu d’un tableau de données
Les attributs de mise en forme
Ceux là sont totalement contraires à l’esprit HTML !!! (séparation du fond et de la forme). Et comme nous le verrons dans le chapitre feuille de style il convient de les ELIMINER au seul profit de l’attribut class
Ils permettent de préciser pour chaque balise les attributs de police de caractère, de taille, de couleur, d’espacement, de position …
Mais c’est bien uniquement pour vous faire plaisir que vous trouverez un exemple ci-dessous dans la première balise <h1>
Voilà ci dessous notre page HTML exemple où des attributs ont été rajoutés (mis en évidence en gras) :
<html>
<head>
<title>page de test html sans feuille de style</title>
</head>
<body>
<h1 align= »center » style= »font-size: 200%; font-family: Arial;font-weight: bold; color: green; background-color: red; »>voici le titre de premier niveau</h1>
<h2>ici le premier sous titre de niveau 2</h2>
<p>voila un simple paragraphe </p>
<p>et un second dans lequel est imbriqué un lien hypertexte vers <a href= »http://www.3w3t.com/ » title= »ce lien revient à l’accueil »> l’accueil du site 3w3t </a></p>
<p>et ici une image du drapeau français
<img src= »fr.gif » alt= »voila le drapeau de la france il est bleu blanc rouge » title= »voila le drapeau de la france il est bleu blanc rouge » /></p>
<h2>ici le second sous titre de niveau 2</h2>
<p>exemple de tableau</p>
<table summary= »ce tableau ne contient pas de données interessantes, c’est un exemple »>
<tr>
<th>titre de la colonne 1</th>
<th>titre de la colonne 2</th>
<th>titre de la colonne 3</th>
</tr>
<tr>
<td>valeur de la ligne 1 colonne 1</td>
<td>valeur de la ligne 1 colonne 2</td>
<td>valeur de la ligne 1 colonne 3</td>
</tr>
<tr>
<td>valeur de la ligne 2 colonne 1</td>
<td>valeur de la ligne 2 colonne 2</td>
<td>valeur de la ligne 2 colonne 3</td>
</tr>
</table>
</body>
</html>
Lorsque un internaute charge cette page avec son navigateur il voit ceci
Vous trouverez dans la page ressource les liens vers les sites de référence listant toutes les balises et leurs attributs
Publier un commentaire