Insérer et styliser des images en HTML

Introduction

Dans ce laboratoire (lab), vous apprendrez à insérer et à styliser efficacement des images en HTML en utilisant diverses techniques et attributs. Le laboratoire couvre des compétences essentielles telles que l'ajout d'images de base avec une source et un texte alternatif, la définition de dimensions fixes pour les images, l'alignement des images et la création d'infobulles informatives. En suivant les instructions étape par étape, vous acquerrez une expérience pratique dans la manipulation des éléments d'image pour améliorer la conception des pages web et l'expérience utilisateur.

Grâce à des exercices pratiques, vous explorerez différents attributs HTML tels que src, alt, width, height et title pour contrôler la présentation et l'accessibilité des images. Ces compétences sont fondamentales pour les développeurs web qui cherchent à créer des pages web visuellement attrayantes et réactives avec des images correctement intégrées et stylisées.

Ajouter une image de base avec les attributs src et alt

Dans cette étape, vous apprendrez à ajouter des images de base à une page HTML en utilisant la balise <img> et ses attributs essentiels. Les images sont une partie cruciale de la conception web, contribuant à rendre les pages web plus attrayantes visuellement et informatives.

Tout d'abord, créons un fichier HTML pour travailler. Ouvrez le WebIDE et créez un nouveau fichier appelé images.html dans le répertoire ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First Images</title>
  </head>
  <body>
    <!-- We'll add our images here -->
  </body>
</html>

La balise <img> est une balise auto-fermante utilisée pour intégrer des images dans un document HTML. Elle a deux attributs essentiels :

src (source) : Spécifie le chemin vers le fichier image
alt (texte alternatif) : Fournit une description textuelle de l'image

Ajoutons une image à notre fichier HTML :

<body>
  <img
    src="https://file.labex.io/static/images/labex-logo-dark.png"
    alt="LabEx Logo"
  />
</body>

L'attribut src pointe vers l'URL de l'image, et l'attribut alt fournit une description qui :

S'affiche si l'image ne parvient pas à se charger
Aide les lecteurs d'écran à décrire l'image pour les utilisateurs malvoyants
Améliore le référencement (SEO) en fournissant un contexte aux moteurs de recherche

Enregistrez le fichier et ouvrez-le dans un navigateur web pour voir l'image.

Notes : En savoir plus sur Comment prévisualiser des fichiers HTML dans le WebIDE.

LabEx logo dark version

Définir des dimensions fixes pour les images avec les attributs Width et Height

Dans cette étape, vous apprendrez à contrôler la taille des images en utilisant les attributs width et height en HTML. Ces attributs vous permettent de spécifier les dimensions exactes d'une image, ce qui peut aider à améliorer la mise en page de la page et les performances de chargement.

Ouvrez le fichier images.html que vous avez créé à l'étape précédente. Nous allons modifier l'image existante et en ajouter quelques autres pour démontrer différentes techniques de dimensionnement.

HTML propose deux attributs pour définir les dimensions des images :

width : Définit la largeur de l'image en pixels
height : Définit la hauteur de l'image en pixels

Mettons à jour notre image précédente et ajoutons quelques nouveaux exemples :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Dimensions</title>
  </head>
  <body>
    <!-- Original image with fixed dimensions -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="200"
      height="100"
    />

    <!-- Another image with different dimensions -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="300"
      height="150"
    />

    <!-- Image with only width specified -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="250"
    />
  </body>
</html>

Points clés concernant les dimensions des images :

Les dimensions sont spécifiées en pixels
Vous pouvez définir soit la largeur, soit la hauteur, soit les deux
Si seule une dimension est spécifiée, l'image est mise à l'échelle proportionnellement
Définir les dimensions aide à éviter les décalages de mise en page lors du chargement des images

La sortie exemple dans un navigateur web montrera trois images de tailles différentes.

Aligner des images en utilisant l'attribut Align obsolète

Dans cette étape, vous apprendrez à propos de l'attribut align obsolète pour positionner des images en HTML. Bien que la conception web moderne utilise le CSS pour la mise en page, il est important de comprendre cette méthode historique d'alignement d'images.

Ouvrez le fichier images.html des étapes précédentes et modifiez-le pour démontrer différents alignements d'images :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Alignment</title>
  </head>
  <body>
    <p>
      <!-- Left-aligned image -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="LabEx Logo"
        align="left"
        width="150"
        height="75"
      />
      This text will flow around the left-aligned image.
    </p>

    <p>
      <!-- Right-aligned image -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="LabEx Logo"
        align="right"
        width="150"
        height="75"
      />
      This text will flow around the right-aligned image.
    </p>

    <p>
      <!-- Center-aligned image -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="LabEx Logo"
        align="middle"
        width="150"
        height="75"
      />
      This text is aligned with the middle of the image.
    </p>
  </body>
</html>

L'attribut align prend en charge trois valeurs principales :

left : Aligne l'image à gauche, avec le texte qui s'écoule autour d'elle
right : Aligne l'image à droite, avec le texte qui s'écoule autour d'elle
middle : Aligne l'image verticalement avec la ligne de base du texte

Notes importantes :

L'attribut align est obsolète en HTML5
La conception web moderne utilise le float CSS ou les boîtes flexibles (flexbox) pour la mise en page
Cet attribut est conservé pour des raisons historiques

La sortie exemple montrera des images positionnées différemment dans des paragraphes.

Note : La boîte de dialogue Labby peut masquer l'image alignée à droite.

Ajouter des informations d'infobulle avec l'attribut Title

Dans cette étape, vous apprendrez à utiliser l'attribut title pour ajouter des informations d'infobulle aux images. Les infobulles fournissent un contexte supplémentaire ou une description lorsque l'utilisateur survole un élément.

Ouvrez le fichier images.html des étapes précédentes et modifiez-le pour démontrer l'utilisation des infobulles :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Tooltips</title>
  </head>
  <body>
    <!-- Image with a simple tooltip -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="200"
      height="100"
      title="Official LabEx Logo"
    />

    <!-- Image with a more descriptive tooltip -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="200"
      height="100"
      title="LabEx Logo: Learn coding through hands-on labs"
    />

    <!-- Multiple images with different tooltips -->
    <div>
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="Programming Logo"
        width="150"
        height="75"
        title="Web Development"
      />

      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="Cloud Logo"
        width="150"
        height="75"
        title="Cloud Computing"
      />
    </div>
  </body>
</html>

Points clés concernant l'attribut title :

Fournit des informations supplémentaires lors du survol d'une image
Fonctionne avec les images, le texte et la plupart des éléments HTML
Aide à améliorer l'expérience utilisateur en donnant un contexte
S'affiche dans une petite fenêtre contextuelle lorsque la souris survole l'élément

Lorsque vous survolez ces images dans un navigateur web, vous verrez le texte de l'infobulle apparaître.

Résumé

Dans ce laboratoire, les participants ont appris à travailler efficacement avec les images en HTML en maîtrisant les techniques clés d'intégration et de style des images. Le laboratoire a couvert des compétences essentielles telles que l'ajout d'images à l'aide de la balise <img> avec des attributs essentiels comme src et alt, qui garantissent un affichage correct des images et une accessibilité. Les apprenants ont exploré des méthodes pour contrôler les dimensions des images grâce aux attributs width et height, en comprenant comment ces paramètres influencent la mise en page et les performances de la page.

Les exercices pratiques ont guidé les étudiants à travers diverses techniques de manipulation d'images, notamment la définition de tailles fixes pour les images, l'ajout d'informations d'infobulle avec l'attribut title et l'expérimentation de différentes stratégies d'alignement d'images. En travaillant directement avec les éléments d'image HTML, les participants ont acquis des connaissances précieuses sur la création de conceptions de pages web visuellement attrayantes et réactives.