Base du web #1 | cours HTML

Bienvenue à ce troisième blogue sur les bases de HTML, nous allons parlé d’image.

Dans les blogues précédents, nous avons commencé les leçons concernant la structure de base d’un site web. Ensuite, nous avons vu comment créer un lien HyperText ainsi que la base des attributs. Il est temps de vous montrer comment embellir votre contenu en y ajoutant des images.

Aujourd’hui, il est plutôt rare de consulter un site internet ne contenant aucune image. Visuellement plus attirant, l’ajout d’une image est fort simple: il suffit d’utiliser la balise « img ». Cette balise nécessite quelques attributs spécifiques pour que l’image puisse s’afficher à l’écran. Il y a une multitude d’attributs disponibles pour les balises « img », mais nous allons porter l’attention aujourd’hui vers ceux-ci : « src », « alt », « height » et « width ».

Commençons par cet exemple :

<img src="sourire.gif" height="50" width="50" alt="Bonhomme Sourire">

À l’intérieur de la balise « img », vous avez la possibilité d’insérer plusieurs attributs, mais un seul est primordial: la « src ». Cette balise indique le nom et le chemin de l’image. Elle ne s’affichera pas si cette balise « src » est absente. Si votre image n’est pas dans le même répertoire que votre site principal, il faudra le spécifier avec l’attribut « src ».

Exemple:

<img src="image/sourire.gif">
<img src="http://www.example.com/sourire.gif">

Les autres attributs dans la balise d’image sont optionnels, mais très pratiques. La balise « alt » est parmi les plus importantes pour les moteurs de recherche. Il faut comprendre que ceux-ci ne prennent pas en considération les images, ils vont plutôt se fier au nom du fichier de l’image et à l’attribut « alt ». Dans le cas de notre exemple, le mot « sourire » apparait autant dans le nom du fichier que dans l’attribut « alt », ce qui augmentera les chances que Google place une importance en ce mot.

Pour terminer, nous avons les attributs « height » et « width », qui signifient, en français, hauteur et largeur. Si nous omettons de placer les attributs de hauteur et de largeur, l’image va s’afficher comme elle est, c’est-à-dire à sa dimension originale. Si vous placez seulement un ou l’autre des attributs, l’image va garder son ratio original. Par contre, si vous inscrivez les deux attributs, le fureteur va automatiquement ajuster l’image à la grandeur demandée. Dans ce cas, il faut être vigilant, car il est possible d’avoir comme résultat des images disproportionnées.

Je vous remercie de suivre les articles de notre blogue sur le HTML, la prochaine fois concernera les listes ordonnées et désordonnées.

Voir la leçon sur You Tube, et pour les intéresser, voici les informations officiel de la balise sur mozilla.