Apprendre le HTML : insérer une image et créer un lien

Publié le - Mis à jour le 27-09-2017

Comment insérer une image en HTML

Voyons à présent comment insérer une image dans une page web. On utilise une balise <img> :

  1. <img src="http://www.exempledesiteweb.com/image.jpg" alt="exemple de texte alternatif"/>

La balise <img> a deux attributs obligatoires, l’attribut src et l’attribut alt.
 

L’attribut src

balise img

src signifie « source ». On doit le renseigner avec l’URL de l’image qui indique où se trouve l’image sur le web. Il est en effet possible d’afficher dans une page web une image se trouvant sur un autre serveur que celui qui héberge cette page.

Dans ce cas, on doit renseigner l’attribut src avec une url absolue, alors qu’on peut le renseigner avec une URL relative si l’image est hébergée sur le même serveur que la page web qui fait appel à elle et que l’on est en train de coder.
 

L’attribut alt

alt signifie « texte alternatif ». On doit le renseigner avec un texte court décrivant l’image. Le texte alternatif est utile aux personnes malvoyantes ou non voyantes, qui utilisent des outils de lecture d’écran par synthèse vocale pour prendre connaissance du contenu des pages web. Ils donnent aussi des informations sur les images aux moteurs de recherche.
 

Les formats d’image sur le web

Concluons cette approche de la balise <img> par un récapitulatif des formats d’image utilisés sur le web (il s’agit des formats jpg, gif et png) et par une petite mise en garde : attention à ne pas utiliser d’images trop lourdes, car cela ralentit le temps de chargement des pages web dans le navigateur.
 

Comment faire un lien en HTML

Maintenant que nous savons insérer du texte et des images, que nous connaissons la différence entre une URL relative et une URL absolue, apprendre à faire des liens entre des pages web va être d’une très grande simplicité.

Pour, sur une portion de texte ou sur une image, faire un lien pointant vers une autre ressource sur le web, il suffit d’enserrer la portion de texte concernée ou la balise <img> appelant l’image concernée entre deux balises <a>, une balise ouvrante et une balise fermante, et renseigner l’attribut href de la balise <a> avec l’URL de la ressource vers laquelle on souhaite faire pointer le lien. Illustrons cela par deux exemples, celui d’un lien absolu sur un texte et celui d’un lien relatif sur une image :

  1. <a href="http://education.francetv.fr/">
  2. la plateforme des parents, des élèves et des enseignants
  3. </a>
  1. <a href="/dossier/le-html-par-lui-meme-2-2-o30298">
  2. <img src="../bundles/ftvenapp/images/global/francetfv-education-logo-mini.jpg " alt="francetfv-education-logo-mini éducation"/>
  3. </a>
  • lien relatif à partir de la racine du site francetvéducation vers la page d’accueil du présent dossier. Le lien est placé sur l’image du logo de francetvéducation, appelée par un lien relatif à la page courante.
  • résultat : 
    Image Contenu

Les ancres HTML

 

Nous venons de voir comment faire un lien pointant vers une autre page web. Un tel lien pointe par défaut vers le haut de la page web visée. Mais il est également possible de faire un  lien pointant vers un endroit précis de cette page web, ou un lien pointant vers un endroit précis de la page courante.

Pour cela, il faut créer ce qu’on appelle une « ancre HTML » à l’endroit précis de la page vers lequel on veut faire pointer son lien. Pour créer une ancre HTML, il suffit d’attribuer un attribut id (identifiant) à la balise HTML ouvrante par laquelle commence la portion de contenu précise vers laquelle on veut faire le lien, et de renseigner cet attribut avec une expression de son choix.

Par exemple, si l’on veut cibler dans la page exemple.html à la racine du site www.exempledesiteweb.com un paragraphe précis, il faudra attribuer à la balise <p> ouvrante un attribut id que l’on renseignera avec n’importe quelle expression de son choix :

  1. <p id="blablabla">
  2. Ceci est le paragraphe de texte vers lequel on désire faire un lien.
  3. </p>

Ensuite, on fera un lien direct vers ce paragraphe de la manière suivante, en utilisant un # :

  1. <a href="http://www.exempledesiteweb.com/exemple.html#blablabla">
  2. Texte sur lequel on fait le lien vers le paragraphe
  3. </a>

Bien sûr, cela nécessite de pouvoir changer le code du site www.exempledesiteweb.com pour y placer l’ancre. Il faut donc en être l’administrateur ou en faire la demande à son administrateur.

Mais on peut selon le même principe créer un lien interne dans la page courante, si on veut par exemple faire en haut d’une longue page un menu renvoyant aux différentes sections de cette page. Cette fois, on fera le lien vers le paragraphe de la manière suivante, en commençant par # :

  1. <a href="#blablabla">
  2. Texte sur lequel on fait le lien vers le paragraphe
  3. </a>

Auteur :

Recommandations