Maîtriser l'intégration d'images HTML

Introduction

La balise HTML <img> est utilisée pour intégrer des images dans les pages web. Il s'agit d'une balise vide, ce qui signifie qu'elle n'a pas de balise de fermeture. L'attribut src est obligatoire et spécifie le chemin ou l'URL de l'image. D'autres attributs optionnels incluent alt, title, height, width, etc. Dans ce laboratoire, vous allez apprendre à utiliser la balise HTML <img> pour insérer des images dans les pages web.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/charset("Character Encoding") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/MultimediaandGraphicsGroup -.-> html/multimedia("Multimedia Elements") html/MultimediaandGraphicsGroup -.-> html/img_maps("Image Maps") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70777{{"Intégration d'images HTML"}} html/head_elems -.-> lab-70777{{"Intégration d'images HTML"}} html/charset -.-> lab-70777{{"Intégration d'images HTML"}} html/layout -.-> lab-70777{{"Intégration d'images HTML"}} html/doc_flow -.-> lab-70777{{"Intégration d'images HTML"}} html/multimedia -.-> lab-70777{{"Intégration d'images HTML"}} html/img_maps -.-> lab-70777{{"Intégration d'images HTML"}} html/inter_elems -.-> lab-70777{{"Intégration d'images HTML"}} html/custom_attr -.-> lab-70777{{"Intégration d'images HTML"}} end

Configurez votre projet

La première étape consiste à créer un nouveau répertoire nommé "html-img-tag-lab", et à l'intérieur créer un fichier nommé "index.html". Ouvrez le fichier dans votre éditeur de code et ajoutez le code suivant à la section <head> :

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML Img Tag Lab</title>
  </head>
  <body></body>
</html>

Ajoutez une image à votre page web

Pour ajouter une image à votre page web, vous aurez besoin d'un fichier image. Pour cet exemple, supposons que vous avez une image nommée "logo.png" dans un dossier nommé "images" dans votre répertoire racine. Pour ajouter cette image à votre page web en utilisant la balise <img>, ajoutez le code suivant à la section <body> :

<img src="images/logo.png" alt="Logo" />

Dans ce code, l'attribut src spécifie le chemin vers le fichier image. L'attribut alt fournit un texte alternatif qui est affiché si l'image ne peut pas être chargée pour une raison quelconque.

Ajoutez des attributs supplémentaires à votre image

Vous pouvez ajouter plusieurs attributs supplémentaires à votre image pour contrôler son apparence et son comportement. Voici un exemple qui montre comment utiliser certains des attributs les plus courants :

<img
  src="images/logo.png"
  alt="Logo"
  width="200"
  height="100"
  title="My Website Logo"
/>

Dans ce code, les attributs width et height contrôlent la taille de l'image. L'attribut title fournit un infobulle lorsque l'utilisateur survole l'image avec la souris.

Utilisez une carte d'image

Une carte d'image est une image qui a des zones cliquables définies, ou "points chauds", qui renvoient à des destinations différentes. Pour créer une carte d'image, vous devez définir les coordonnées de chaque point chaud et l'URL à laquelle il renvoie. Voici un exemple d'une carte d'image :

<img src="images/worldmap.gif" alt="Carte du monde" usemap="#worldmap" />

<map name="worldmap">
  <area
    shape="rect"
    coords="0,0,100,100"
    href="https://www.northamerica.com"
    alt="Amérique du Nord"
  />
  <area
    shape="rect"
    coords="100,0,200,100"
    href="https://www.southamerica.com"
    alt="Amérique du Sud"
  />
  <area
    shape="rect"
    coords="200,0,300,100"
    href="https://www.europa.com"
    alt="Europe"
  />
  <area
    shape="rect"
    coords="300,0,400,100"
    href="https://www.asia.com"
    alt="Asie"
  />
  <area
    shape="rect"
    coords="400,0,500,100"
    href="https://www.africa.com"
    alt="Afrique"
  />
</map>

Dans ce code, l'attribut usemap spécifie le nom de la carte, qui est défini à l'aide de la balise <map>. Chaque balise <area> définit un point chaud en spécifiant sa forme (par exemple, "rect" pour rectangulaire), ses coordonnées et l'URL à laquelle elle renvoie.

Ajoutez une image comme fond

Vous pouvez également utiliser une image comme fond d'un élément HTML, tel que le corps de votre page web. Voici un exemple :

<style>
  body {
    background-image: url("images/background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>

Dans ce code, la propriété background-image spécifie le chemin vers le fichier image, et la propriété background-repeat le définit pour qu'il ne se répète pas. La propriété background-size redimensionne l'image pour couvrir l'ensemble du fond.

Récapitulatif

Félicitations ! Vous avez appris avec succès à utiliser la balise HTML <img> pour ajouter des images à vos pages web. Vous avez également appris à utiliser plusieurs attributs courants pour contrôler la taille et l'apparence de vos images, ainsi qu'à créer une carte d'image et à utiliser une image comme fond.