De même que les navigateurs ont besoin qu’on leur indique où pointent nos liens, ils nécessitent qu’on leur donne l’endroit où trouver les images qu’on veut faire apparaître sur nos pages web. Avec un traitement de texte (Word, Libre Office…), on clique sur le menu “insérer>une image” et cette image reste dans le document pour de bon. Le web fonctionne différemment. Le navigateur retourne chercher les images d’une page à chaque lecture de celle-ci par un internaute, grâce à l’hypertexte. Ainsi pour élaborer un site, il est recommandé de placer dans un même dossier, non seulement l’ensemble des fichiers .htm (une page web par fichier), mais aussi toutes les images (.png, .gif, .jpg…) qu’on va placer sur les différentes pages. On peut éventuellement les réunir dans un sous-dossier “images”. Rappel : pour les noms de fichiers comme pour les noms de dossiers, évitez les espaces, majuscules et signes diacritiques. Cela réduira le risque de rendre des liens inopérants par des fautes de frappe en recopiant ces noms. De plus, toute l’arborescence de votre site sera matérialisée par des liens, donc simplifiez vous l’écriture de ces liens en ne multipliant pas les niveaux d’arborescence dans votre gestionnaire de fichier.
Donc pour les images :
- <img> (image) est la balise,
- src (source) est l’attribut permettant d’indiquer où trouver le fichier correspondant. Comme pour les liens textuels, différents attributs peuvent être ajoutés. L’un d’eux est particulièrement recommandé :
- alt (texte alternatif), qui permet d’afficher un texte en lieu et place de l’image pour les moteurs de recherche (Google, Yahoo…), mais aussi pour les internautes empêchés. Par exemple, les mal-voyants ont des navigateurs qui leur lisent le contenu des pages par synthèse vocale. A la place des images, ils lisent ce que l’auteur a placé dans l’attribut alt.
- Vous pouvez aussi préciser la hauteur et/ou la largeur à laquelle l’image sera affichée sur votre page. Néanmoins, il est préférable de redimensionner vos images préalablement avec un logiciel graphique, avant de les placer sur votre site. Les images étant plus lourdes que le simple texte, il faut prendre en compte leur temps de chargement à travers les réseaux. Voici un exemple :
<img src=images/paysage.jpg height=75 alt=paysage méditerranée>
La balise <img> ne nécessite pas de balise de fermeture, puisqu’elle insère un contenu, mais n’encadre aucun texte. La plupart des balises HTML peut être utilisée avec des attributs spécifiques à chacune. Mais seules <a> et <img> usent de l’hypertexte.
Chemin absolu, chemin relatif
Vous remarquez que paysage.jpg se trouve dans le répertoire images. C’est la raison pour laquelle on indique au navigateur tout le chemin pour accéder au fichier paysage.jpg. Tout le chemin? Le chemin entier est plutôt de la forme : C:UserspelayolurinDesktopActuEnCoursDicoWebmasterExSiteDicoWebmasterimagespaysage.jpg. Alors pourquoi ne pas avoir indiqué le chemin absolu :
<img src=C:UserspelayolurinDesktopActuEnCoursDicoWebmasterExSiteDicoWebmasterimagespaysage.jpg height=50 alt=paysage méditerranée>
Tout simplement parce si vous déplacez le contenu de votre site (l’ensemble des fichiers qui le constituent) vers un autre dossier, ou que vous le copiez sur un serveur pour le voir en ligne (nous y reviendrons), le navigateur ne reconnaitra plus l’arborescence que vous indiquez ci-dessus, et votre image laissera un cadre vide dans la page où elle était censée s’afficher. Les chemins absolus sont donc à proscrire pour les liens internes à votre site. Réservez les pour les ressources externes. Par exemple :
<p>Pour en savoir plus sur mes loisirs, allez voir <a href=http://bagad-elven.fr/ target=blank>ce site</a> associatif.</p>
Pour vos liens internes, préférez les chemins relatifs. Le navigateur part de l’endroit où se trouve la page de départ, et navigue à partir de là. Si la page de destination se trouve dans le même dossier, indiquez seulement son nom, le navigateur la trouvera. Si le fichier à retrouver est dans un sous-dossier, indiquez le chemin relativement au dossier où est la page de départ : ici on part du dossier contenant tout le site (où se trouve index.htm et les autres pages). images/paysage.jpg donne le reste du chemin.
Vous êtes maintenant en mesure de créer plusieurs pages web et de les articuler en un site à l’aide de liens. Vous pouvez même combiner liens hypertextes et images pour mettre sur pied un menu (toujours les poupées russes), que vous ferez apparaître sur chacune de vos pages. Mais gardez à l’esprit que c’est la technique qui est au service de votre projet, et non l’inverse. Ne vous dispersez pas au gré de votre apprentissage, ayez d’abord une idée précise de ce que vous cherchez à obtenir (vous pouvez puiser des idées sur les sites qui traitent les mêmes thèmes que le vôtre), puis seulement ensuite, recherchez sur la toile la balise qu’il vous faut, l’attribut adéquat. Gardez toujours votre lecteur à l’esprit, imaginez-vous à sa place : l’information est-elle claire et facile à trouver? Vous pouvez développer des trésors d’inventivité technique pour arriver à votre but, mais tout doit avoir l’air simple et fluide pour le visiteur.
Vous avez les rudiments techniques, mais il vous faut réfléchir à l’ergonomie et au design de votre site. Pour faciliter l’élaboration d’une charte graphique unifiée, un second langage, complémentaire d’HTML, vous sera utile. Rendez-vous dans le prochain article…
