HTML Premiers pas - Leçon 6 - Images

05/07/2025, by Ivan

Les images sur un site sont un élément très important, sans elles le site paraît gris et peu attrayant. Les images sont utilisées pour la mise en forme du site, pour les galeries photos, ou simplement comme illustrations.

Les images sont insérées à l’aide de la balise IMG (notez que nous écrivons non pas image en entier, mais seulement img). La balise IMG est auto-fermante <img />, c’est-à-dire sans balise fermante.

L’attribut principal de la balise IMG est l’attribut src. Il fonctionne comme href pour un lien, dans src on doit insérer le chemin vers l’image. Le chemin, comme pour les liens, peut être relatif ou absolu.

Voici le code de notre index.html :

<html>
  <head>
    <title>Mon premier document HTML</title>
  </head>
  <body>  
    <h1>Mon premier document HTML</h1>
    <p>
      <a href="files/file.html">Lien vers le deuxième document</a>
    </p>
  </body>
</html>

Créons maintenant un dossier images à côté de ce fichier. Dans ce dossier images, nous copierons le fichier image. Supposons que le nom de l’image soit image.jpg. Insérons la balise img dans le texte index.html.

<html>
  <head>
    <title>Mon premier document HTML</title>
  </head>
  <body>  
    <h1>Mon premier document HTML</h1>
    <p>
      <img />
    </p>
    <p>
      <a href="files/file.html">Lien vers le deuxième document</a>
    </p>
  </body>
</html>

Nous avons inséré la balise, écrivons maintenant le chemin vers l’image, nous écrirons un chemin relatif en commençant par ./

./

Ajoutons maintenant le nom du dossier où se trouve l’image

./images/

Puis le nom du fichier :

./images/image.jpg

Et maintenant, insérons le chemin dans l’attribut src.

<html>
  <head>
    <title>Mon premier document HTML</title>
  </head>
  <body>  
    <h1>Mon premier document HTML</h1>
    <p>
      <img src="./images/image.jpg" />
    </p>
    <p>
      <a href="files/file.html">Lien vers le deuxième document</a>
    </p>
  </body>
</html>

L’image s’affiche maintenant à sa taille d’origine, mais nous pouvons définir sa taille grâce aux attributs hauteur et largeur.

L’attribut largeur de la balise img est width. L’attribut hauteur est height. Nous pouvons définir uniquement la largeur, uniquement la hauteur ou les deux en même temps. Par exemple :

<html>
  <head>
    <title>Mon premier document HTML</title>
  </head>
  <body>  
    <h1>Mon premier document HTML</h1>
    <p>
      <img src="./images/image.jpg" width="200" />
    </p>
    <p>
      <a href="files/file.html">Lien vers le deuxième document</a>
    </p>
  </body>
</html>

Ou uniquement la hauteur :

<html>
  <head>
    <title>Mon premier document HTML</title>
  </head>
  <body>  
    <h1>Mon premier document HTML</h1>
    <p>
      <img src="./images/image.jpg" height="400" />
    </p>
    <p>
      <a href="files/file.html">Lien vers le deuxième document</a>
    </p>
  </body>
</html>

Si vous définissez à la fois la hauteur et la largeur, veillez à ce que les proportions correspondent à celles de l’image originale. Sinon, vous déformerez l’image sur le site.

<html>
  <head>
    <title>Mon premier document HTML</title>
  </head>
  <body>  
    <h1>Mon premier document HTML</h1>
    <p>
      <img src="./images/image.jpg" height="400" width="100" />
    </p>
    <p>
      <a href="files/file.html">Lien vers le deuxième document</a>
    </p>
  </body>
</html>

Types de blocs supplémentaires (EBT) – Nouvelle expérience de Layout Builder❗

❗Types de paragraphes supplémentaires (EPT) – Nouvelle expérience Paragraphes

HTML Premiers pas - Leçon 6 - Images