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

Comment insérer une image et créer un lien en HTML ?


Publié le 19/02/2013 • Modifié le 16/11/2022

Temps de lecture : 2 min.

Écrit par Textes rédigés par Pascal Szidon / Illustrations par Lea Taloc

Lis cet article et gagne facilement 10 Lumniz en te connectant !

Il n’y a pas de Lumniz à gagner car tu as déjà vu ce contenu. Ne t’inquiète pas, il y a plein d’autres vidéos, jeux, quiz ou articles intéressants à explorer et toujours plus de Lumniz à remporter.

->   En savoir plus

Insérer une image

Pour insérer une image dans une page web, on utilise une balise <img> : <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
 

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 utilisés sur le Web sont les formats jpg, gif et png. Attention à ne pas utiliser d’images trop lourdes, car cela ralentit le temps de chargement des pages web dans le navigateur.

Faire un lien

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 ouvrante et une fermante, et renseigner l’attribut href de la balise <a> avec l’URL de la ressource vers laquelle on souhaite faire pointer le lien.

Exemple, avec un lien absolu sur un texte et un lien relatif sur une image :

<a href="#;>

la plateforme des parents, des élèves et des enseignants

</a>

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 :

<p id="blablabla">

Ceci est le paragraphe de texte vers lequel on désire faire un lien.

</p>

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

<a href="http://www.exempledesiteweb.com/exemple.html#blablabla">

Texte sur lequel on fait le lien vers le paragraphe

</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 # :

<a href="#blablabla">

Texte sur lequel on fait le lien vers le paragraphe

</a>


Ce contenu est proposé par