Les images

un lien

Photo par Leonardo Yip publiée sur Unsplash

La balise image

Les images sont devenues un pilier central d'internet. Lorsque Tim BERNERS-LEE invente le web, les images ne sont là que pour illustrer le texte. De nos jours, les images sont utilisées aussi bien comme illustration que comme décoration ou comme fond.

La balise pour ajouter une image est très simple : il s'agit de la balise img.. Elle a une particularité par rapport aux balises que nous avons vu jusqu'ici. Il n'y a pas une balise ouvrante et une balise fermante. Il n'y a qu'une seule balise. On parle de balise orpheline. C'est assez normal quand on y réfléchit. Pour une balise de paragraphe par exemple, le paragraphe est ce qui est compris entre la balise ouvrante et la balise fermante. Il commence à la balise ouvrante et se termine à la balise fermante. Il en va de même pour les titres ou les liens. Mais une image, elle ne va pas "de là à là"!

À faire vous même

Ouvrez le code source de cette page est trouvez les différentes balises <img> dans la page. Quels sont les attributs ?

Les attributs

Vous avez du trouver au moins trois attributs sur les images de cette page :

  • L'attribut class est un attribut qui indique les propriétés de style. Nous en reparlerons
  • L'attribut source indique à quel endroit est placé l'image. Cela peut être une adresse absolue sur internet (par exemple http://lycee.educinfo.org/ressources/fiche-rentree/assets/img/html.jpg
  • L'attribut alt. Il s'agit du texte qui est affichée si l'image ne peut pas être chargée ou pour des terminaux qui n'affichent pas les images (par exemple les terminaux Braille pour les déficients visuels.
Insertion d'image
  1. Vous allez trouver l'adresse absolue (l'URL) de l'image qui orne le début de cette page. Vous pouvez par exemple faire un clic droit et "ouvrir dans un nouvel onglet" sur cette image
  2. Notez son adresse
  3. Incorporez là dans le document HTML qui vous est proposé
  4. Incorporez une autre image de votre choix trouvée sur internet
  5. Si vous êtes en classe, appelez le professeur pour vérifier.

Ajouter un style

Vous avez remarqué ? l'image que vous avez inséré dépasse sans doute de votre zone de travail. Elle est trop grande. Par défaut, une image est affichée en pleine résolution, quitte à "dépasser" sur les bords. Les propriétés de style que nous verrons avec les CSS peuvent permettre d'y remédier. On peut ajouter à l'image le code suivant : 

<img src="..." alt="..." style="display:block;margin:auto;max-width:85vw;">

Les différents éléments de style sont séparés par des point-virgules. Voici la signification des 3 élèments présents :

  • display est le plus difficile à comprendre. Un élément HTML peut être inline, ce qui signifie qu'il est inséré dans le flux comme une lettre (c'est le cas par défaut pour les images). Un élément de type block est un bloc comme une division ou un paragraphe. C'est indispensable pour centrer une image
  • margin indique les marges de l'élément HTML. Ici, ce sont des marges automatiques qui vont centrer l'image
  • max-width comme son nom l'indique donne la largeur maximum de l'image. Ici, 85vw indique 85% de la largeur de la page (vw signifie view width).
À faire vous même

Reprenez l'exemple précédent et rajouter l'attribut de style ci dessus pour centrer une image sur 85% de la largeur au maximum.

Adresse absolue et relative

L'attribut src de la balise img indique où se trouve l'image que l'on utilise. Cette adresse peut être donnée de deux façons :

  • Par une adresse absolue, qui est une adresse compléte sur internet. Pour l'image du début de la page, c'est http://lycee.educinfo.org/ressources/fiche-rentree/assets/img/html.jpg
  • Par une adresse relative. On donne l'adresse de l'image par rapport à la page HTML qui appelle cette image. Par exemple, dans notre cas, l'adresse relative sera : ressources/fiche-rentree/assets/img/img.jpg
À faire vous même

Reprenez l'exemple précédent et modifiez l'attribut src pour donner une adresse relative

La plupart du temps, ce sont les adresses relatives qui sont utilisées. C'est d'ailleurs ce que vous allez utiliser dans votre projet.

À retenir
  • Une image est définie par la balise img
  • Deux attributs sont obligatoiress : src qui indique l'adresse de l'image et alt qui est le texte alternatif au cas où l'image n'est pas affichée
  • Le chemin de l'image peut être relatif ou absolu. Si l'image est sur le même site, on utilise en général l'adresse relative
  • On peut ajouter un style à une image pour gérer son positionnement et sa dimension.