Images HTML : Apprenez à intégrer et styliser avec src, alt et dimensions

Introduction

Les images sont un élément fondamental des pages web modernes, rendant le contenu plus attrayant et visuellement agréable. En HTML, les images sont intégrées dans un document à l'aide de la balise <img>. Cette balise est puissante et dispose de plusieurs attributs pour contrôler la source, la taille et l'accessibilité de l'image.

Dans ce laboratoire, vous apprendrez à afficher une image sur une page web. Vous commencerez par insérer une image de base, puis vous ajouterez progressivement des attributs pour fournir un texte alternatif, définir ses dimensions, ajouter une infobulle (tooltip) et, enfin, en faire un lien cliquable.

L'environnement a été préconfiguré avec un fichier index.html et un fichier image nommé labex.svg dans le répertoire ~/project. Un serveur web est également en cours d'exécution, vous permettant de prévisualiser vos modifications en temps réel dans l'onglet "Web 8080".

Insérer la balise img avec l'attribut src pour la source de l'image

Dans cette étape, vous apprendrez à ajouter une image à votre page HTML. La balise <img> est utilisée pour intégrer une image. C'est une balise vide, ce qui signifie qu'elle n'a pas de balise de fermeture. L'attribut le plus important de la balise <img> est src, qui spécifie le chemin d'accès à l'image que vous souhaitez afficher.

Tout d'abord, ouvrez le fichier index.html situé dans le répertoire ~/project en utilisant l'explorateur de fichiers sur la gauche.

Maintenant, ajoutez la balise <img> à l'intérieur de la section <body>, juste en dessous du commentaire . Définissez l'attribut src sur labex.svg, qui est le fichier image fourni dans votre répertoire de projet.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img src="labex.svg" />
  </body>
</html>

Après avoir ajouté le code, enregistrez le fichier. Pour voir le résultat, basculez vers l'onglet Web 8080 dans la barre supérieure de l'environnement de laboratoire. Vous devriez voir le logo LabEx affiché sur la page.

Ajouter l'attribut alt pour la description de l'image

Dans cette étape, vous allez ajouter l'attribut alt à votre balise <img>. L'attribut alt fournit un texte alternatif pour une image. Ce texte est affiché si l'image ne peut pas être chargée pour une raison quelconque. Plus important encore, il est utilisé par les lecteurs d'écran pour décrire l'image aux utilisateurs malvoyants, rendant ainsi votre site web plus accessible.

Modifiez la balise <img> dans votre fichier index.html pour inclure un attribut alt. Un bon texte alt doit être une description concise de l'image.

<img src="labex.svg" alt="LabEx Logo" />

Votre fichier index.html complet devrait maintenant ressembler à ceci :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img src="labex.svg" alt="LabEx Logo" />
  </body>
</html>

Enregistrez le fichier. Vous ne verrez aucun changement visuel dans l'onglet Web 8080 car l'image se charge correctement. Cependant, l'ajout de l'attribut alt est une bonne pratique cruciale pour le développement web.

Définir les attributs width et height pour la taille de l'image

Dans cette étape, vous apprendrez à contrôler la taille de votre image à l'aide des attributs width et height. Par défaut, un navigateur affiche une image dans ses dimensions d'origine. La spécification de la width et de la height vous permet de redimensionner l'image et aide le navigateur à réserver l'espace approprié pour celle-ci avant son chargement, évitant ainsi que la mise en page de la page ne se décale.

Définissons la largeur de notre image à 200 pixels et la hauteur à 50 pixels. Ajoutez les attributs width et height à votre balise <img> dans index.html.

<img src="labex.svg" alt="LabEx Logo" width="200" height="50" />

Le fichier index.html complet sera maintenant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img src="labex.svg" alt="LabEx Logo" width="200" height="50" />
  </body>
</html>

Enregistrez le fichier et basculez vers l'onglet Web 8080. Vous remarquerez que l'image a été redimensionnée aux dimensions que vous avez spécifiées.

Utiliser l'attribut title pour l'infobulle de l'image

Dans cette étape, vous allez ajouter un attribut title à la balise <img>. L'attribut title fournit des informations supplémentaires sur un élément. Pour les images, ces informations sont généralement affichées sous forme d'infobulle lorsque l'utilisateur passe sa souris sur l'image.

Ajoutons un titre à notre image pour donner aux utilisateurs un indice sur ce qui se passera s'ils cliquent dessus (ce que nous implémenterons à l'étape suivante). Ajoutez l'attribut title à votre balise <img> dans index.html.

<img
  src="labex.svg"
  alt="LabEx Logo"
  width="200"
  height="50"
  title="Go to LabEx Homepage"
/>

Votre fichier index.html devrait maintenant contenir le code suivant :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img
      src="labex.svg"
      alt="LabEx Logo"
      width="200"
      height="50"
      title="Go to LabEx Homepage"
    />
  </body>
</html>

Enregistrez le fichier et actualisez l'onglet Web 8080. Maintenant, déplacez votre curseur de souris sur l'image. Une petite boîte avec le texte "Go to LabEx Homepage" devrait apparaître.

Encapsuler l'image dans une balise a pour un lien d'image cliquable

Dans cette dernière étape, vous allez rendre l'image un lien cliquable. Pour ce faire, vous devez encapsuler la balise <img> dans une balise d'ancrage <a>. La balise <a> définit un hyperlien, et son attribut href spécifie l'URL de la page vers laquelle le lien pointe.

Encapsulez votre balise <img> existante avec une balise <a>. Définissez l'attribut href de la balise <a> sur https://labex.io.

<a href="https://labex.io">
  <img
    src="labex.svg"
    alt="LabEx Logo"
    width="200"
    height="50"
    title="Go to LabEx Homepage"
  />
</a>

Votre fichier index.html final ressemblera à ceci :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <a href="https://labex.io">
      <img
        src="labex.svg"
        alt="LabEx Logo"
        width="200"
        height="50"
        title="Go to LabEx Homepage"
      />
    </a>
  </body>
</html>

Enregistrez le fichier et accédez à l'onglet Web 8080. Vous remarquerez que le curseur de la souris se transforme en pointeur lorsque vous survolez l'image, indiquant qu'il s'agit d'un lien. Cliquer sur l'image tentera de naviguer vers la page d'accueil de LabEx.

Résumé

Félicitations pour avoir terminé le laboratoire ! Vous avez appris avec succès à travailler avec des images en HTML.

Dans ce laboratoire, vous avez abordé les concepts clés suivants :

Intégrer une image à l'aide de la balise <img>.
Spécifier la source de l'image avec l'attribut src.
Fournir un texte alternatif pour l'accessibilité avec l'attribut alt.
Contrôler les dimensions de l'image avec les attributs width et height.
Ajouter une infobulle avec l'attribut title.
Faire d'une image un lien cliquable en l'encapsulant dans une balise <a>.

Ce sont des compétences essentielles pour créer des pages web riches et interactives. Vous pouvez désormais ajouter et gérer des images en toute confiance dans vos futurs projets HTML.