Chapitre 40 | Insérer une image dans une page HTML

Insérer une image dans une page HTML

Objectifs

Dans ce chapitre, l’objectif est d’apprendre à insérer une image dans une page HTML et à travailler sur sa mise en forme avec des styles CSS. Seules des propriétés simples et adaptées au niveau débutant seront utilisées pour se concentrer sur les bases.

Structure

Étape 1 : Préparation de l’image

Télécharger une image :

download sample image

Nommer l’image : la sauvegarder sous le nom image1.jpg et la placer dans le même dossier que le fichier index.html. (donc à coté de index.html dans le répertoire chapitre-7)

Étape 2 : Ajouter l’appel de l’image dans le fichier HTML

<!-- Ajout d'une image avec alt obligatoire -->
    <img src="image1.jpg" alt="Description de l'image, par exemple un paysage">

L’image est insérée dans le fichier index.html à l’aide de la balise <img>.

Explication et rappel :

src="images/image1.jpg" : indique où se trouve la source (src) de l’image à afficher. Le chemin relatif ici signifie que l’image est dans un dossier nommé images, au même niveau que le fichier index.html.
alt="Description de l'image" : fournit une description textuelle de l’image, utile pour les lecteurs d’écran et les cas où l’image ne peut pas être chargée. [iSEO IMPORTANT]. Alt peut etre vide mais doit toujours etre présent.

Voici le code mis à jour :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Chapitre 7 : Insérer une image</title>
    <link rel="stylesheet" href="style/style.css">
</head>
<body>
    <h1>Bienvenue sur notre page</h1>
    <p>Ceci est un exemple de paragraphe stylisé.</p>

    <!-- Ajout d'une image avec alt obligatoire -->
    <img src="image1.jpg" alt="Description de l'image, par exemple un paysage">

    <p>Voici une image insérée avec la balise IMG.</p>
</body>
</html>

Attribut alt [SEO IMPORTANT]

Obligatoire, même si son contenu est vide : alt="".
Permet de fournir une description de l’image pour les utilisateurs ne pouvant pas la voir (par exemple, les lecteurs d’écran).

Étape 3 : Ajouter des styles CSS

Premier exercice : redimensionner l’image sans modifier son ratio

Dans le fichier style/style.css, ajouter les règles suivantes :

/* Redimensionnement de l'image */
img {
    max-width: 300px; /* Limite la largeur de l'image à 300 pixels */
    height: auto; /* Conserve le ratio de l'image */
}

Deuxième exercice : aligner l’image avec `text-align`

Pour aligner une image au centre, à gauche ou à droite, on modifie l’alignement de son parent. Bien que cette méthode ne soit pas idéale, elle est utilisée ici pour simplifier les manipulations.

Dans le fichier CSS, ajouter :

/* Redimensionnement de l'image */
img {
    max-width: 300px; /* Limite la largeur de l'image à 300 pixels */
    height: auto; /* Conserve le ratio de l'image */
}


/* Aligner l'image */
.gauche {
    text-align: left; /* Aligne l'image à gauche */
}

.droite {
    text-align: right; /* Aligne l'image à droite */
}

.centre {
    text-align: center; /* Centre l'image */
}

Dans le fichier HTML, tester ces alignements :

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <title>Chapitre 7 : Insérer une image</title>
    <link rel="stylesheet" href="style/style.css">
</head>

<body>
    <h1>Le parent aligne l'enfant</h1>



    <!-- Alignement des images -->
    <p class="centre">
        lorem
        <br> <!-- pour retourner à la ligne -->
        <img src="image1.jpg" alt="">
    </p>

    <p class="droite">
        lorem
        <br> <!-- pour retourner à la ligne -->
        <img src="image1.jpg" alt="">
    </p>

    <p class="gauche">
        lorem
        <br> <!-- pour retourner à la ligne -->
        <img src="image1.jpg" alt="">
    </p>
</body>

</html>

Remarque : cette méthode utilisant text-align n’est pas idéale. Une méthode moderne comme Flexbox sera vue plus tard pour un alignement plus propre.

Troisième exercice : appliquer des effets visuels

Ajouter des styles pour appliquer des effets simples au parent(paragraphe) ou à l’enfant (l’image).

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <title>Chapitre 7 : Insérer une image</title>
    <link rel="stylesheet" href="style/style.css">
</head>

<body>
    <h1>effet sur le parent ou l'enfant</h1>



    <!-- Alignement des images -->
    <p class="centre img-grayscale img-ombre ">
        lorem
        <br> <!-- pour retourner à la ligne -->
        <img src="image1.jpg" alt="">
    </p>

    <p class="droite">
        lorem
        <br> <!-- pour retourner à la ligne -->
        <img class="img-grayscale" src="image1.jpg" alt="">
    </p>

    <p class="gauche ">
        lorem
        <br> <!-- pour retourner à la ligne -->
        <img class="img-ombre" src="image1.jpg" alt="">
    </p>
</body>

</html>

/* Redimensionnement de l'image */
img {
    max-width: 300px; /* Limite la largeur de l'image à 300 pixels */
    height: auto; /* Conserve le ratio de l'image */
}


/* Aligner l'image */
.gauche {
    text-align: left; /* Aligne l'image à gauche */
}

.droite {
    text-align: right; /* Aligne l'image à droite */
}

.centre {
    text-align: center; /* Centre l'image */
}

/* Effets visuels */
.img-grayscale {
    filter: grayscale(100%); /* Convertit l'image en niveaux de gris */
}

.img-ombre {
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5); /* Ajoute une ombre portée */
}

Exercice : Placer l’image dans un dossier `images` et modifier l’appel relatif

Dans cet exercice, l’objectif est de déplacer l’image utilisée précédemment dans un dossier dédié nommé images. Cela implique de modifier le chemin relatif dans le code HTML pour que l’image soit correctement chargée.

Préambule

Veuillez créer un dossier « projet ».

Étape 1 : Organisation des fichiers

Créer un dossier nommé images à la racine du projet.
Déplacer le fichier image1.jpg dans ce dossier. La structure du projet sera désormais la suivante

Étape 2 : Modifier le chemin relatif dans le code HTML

Le chemin relatif correspond à l’emplacement d’un fichier par rapport à celui où se trouve le fichier HTML (index.html dans ce cas).
Puisque l’image est maintenant dans un sous-dossier appelé images, le chemin relatif doit être mis à jour dans la balise <img>.

Voici la modification du code HTML :

<img src="images/image1.jpg" alt="Description de l'image">

Explication :
- images/ : indique que le fichier est dans un sous-dossier nommé images.
- image1.jpg : correspond au nom du fichier dans ce dossier.

Le reste du fichier HTML reste inchangé.

Étape 3 : Tester l’affichage de l’image

Sauvegarder les modifications apportées au fichier index.html.
Ouvrir le fichier index.html dans le navigateur pour vérifier que l’image s’affiche correctement.
- Si l’image ne s’affiche pas, vérifier l’orthographe du chemin et s’assurer que le fichier est bien dans le dossier images.

Remarque importante : types d’images

Il existe deux types d’images à intégrer dans une page web :

Les images porteuses de sens (sémantiques) : ce sont des images qui font partie intégrante du contenu de la page (comme une illustration accompagnant un article). Elles sont insérées directement avec la balise <img> dans le code HTML, comme dans cet exercice.
Les images décoratives : ce sont des images qui ne font pas partie du contenu mais servent uniquement à améliorer l’apparence ou l’ambiance visuelle (comme des motifs ou des textures). Ces images sont généralement insérées en arrière-plan via le CSS, dans un conteneur.

La méthode d’intégration des images décoratives sera abordée plus tard, après l’introduction des conteneurs et de leur manipulation dans CSS.