Les images en HTML [HTML02]

Cet article se concentre particulièrement sur la manipulation d’images en HTML, mais nécessite cependant d’exploiter d’autres éléments HTML comme les titres et les listes.

Consignes l’exercice

Utilisez du texte de type Lorem Ipsum pour avoir du contenu textuel lors de la réalisation de cette exercice.

Créez un dossier racine local à l’emplacement de votre choix pour stocker les différents fichiers de l’exercice et nommez le html02-racine.

Créez une nouvelle page HTML sous le nom exo2_page1.html en prenant soin de bien placer votre fichier dans le dossier racine créé précédemment.

Saisissez la structure de base suivante dans la page que vous venez de créer :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Titre de la page</title>
    </head>
    <body>
    </body>
</html>

Téléchargez trois images de votre choix sur un des sites ci-dessous et placez-les dans le dossier racine.

Utilisez un des outils suivants (ou un autre de votre choix) pour redimensionner vos trois images afin qu’elles aient toutes les trois une largeur de 250 pixels. Placez bien les images redimensionnées dans votre dossier racine en remplacement des précédentes.

Renommez proprement les trois images. Faites attention à ne pas modifier l’extension des fichiers !

Prenez l’habitude de ne jamais mettre d’accents, de majuscules, d’espaces ou de caractères spéciaux (excepté _ et -) dans les noms de vos fichiers et/ou dossiers.

Complétez la page exo2_page1.html avec le contenu suivant :

Un titre de niveau 1 ;
Un paragraphe ;
La première image placée dans un élément <div></div> ;
Un second paragraphe ;
Les deux autres images placées dans un second élément <div></div>.

<h1>Exercice avec des images</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nulla nibh, ornare sed.</p>
<div>
    <img src="image1.jpg">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nulla nibh, ornare sed.</p>
<div>
    <img src="image2.jpg">
    <img src="image3.jpg">
</div>

Ajoutez un texte alternatif pour les trois images avec l’attribut alt.

La syntaxe générique d’une balise est la suivante :

<commande attribut="valeur" attribut="valeur"></commande>

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

Créez un nouveau dossier intitulé images dans le dossier racine.

Déplacez les trois images dans le dossier images que vous venez de créer.

En déplaçant les images, vous avez brisé le lien entre la page et les images, elles ne s’affichent donc plus lorsque vous visualisez la page dans un navigateur. Réparez donc le problème pour que les images s’affichent à nouveau.

Les images se trouvent désormais dans le dossier images. Il faut donc le préciser dans le lien relatif en ajoutant images/.

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

Créez une nouvelle page exo2_page2.html avec le contenu suivant :

Un titre de niveau 1 ;
Une liste à puce contenant les trois images (une image par ligne).

<h1>Images dans une liste</h1>
<ul>
    <li><img src="images/image1.jpg" alt="Description de l'image"></li>
    <li><img src="images/image2.jpg" alt="Description de l'image"></li>
    <li><img src="images/image2.jpg" alt="Description de l'image"></li>
</ul>

Créez un nouveau dossier intitulé pages dans le dossier racine

Déplacez le fichier exo2_page2.html dans le dossier pages.

En déplaçant la page web, vous avez brisé le lien entre la page et les images, elles ne s’affichent donc plus lorsque vous visualisez la page dans un navigateur. Réparez donc le problème pour que les images s’affichent à nouveau.

Pour accéder aux images en partant de la page, il faut sortir du dossier pages avec ../ puis ouvrir le dossier images avec images/.

<h1>Images dans une liste</h1>
<ul>
    <li><img src="../images/image1.jpg" alt="Description de l'image"></li>
    <li><img src="../images/image2.jpg" alt="Description de l'image"></li>
    <li><img src="../images/image2.jpg" alt="Description de l'image"></li>
</ul>

À l’intérieur du dossier images, créez un nouveau dossier et nommez-le grandes.

Téléchargez 9 images de grande taille (au moins 1000px de large) sur Internet et enregistrez-les dans le dossier images/grandes que vous venez de créer à la question précédente.

Renommez correctement les images en respectant les règles évoquées précédemment.

Créez, dans le dossier pages, une nouvelle page exo2_page3.html avec le contenu suivant :

Un titre de niveau 1 ;
La première des neufs images téléchargées.

<h1>Redimensionnement d'une image en HTML</h1>
<img src="../images/grandes/image_grande_1.jpg">

Ajoutez la propriété width avec la valeur 200 à votre image pour pouvoir réduire sa taille.

Cette manipulation est effectuée dans une but d’entrainement, en pratique, il est déconseillé de redimensionner les images de la sorte. Vous devriez plutôt intégrer les images en taille réelle pour optimiser la vitesse de chargement de vos pages.

<h1>Redimensionnement d'une image en HTML</h1>
<img src="../images/grandes/image_grande_1.jpg" width="200">

Créez, dans le dossier pages, une nouvelle page exo2_page4.html avec le contenu suivant :

Un titre de niveau 1 ;
Les neuf images téléchargées.

<h1>Galerie d'images</h1>
<img src="../images/grandes/image_grande_1.jpg" width="200">
<img src="../images/grandes/image_grande_2.jpg" width="200">
<img src="../images/grandes/image_grande_3.jpg" width="200">
<img src="../images/grandes/image_grande_4.jpg" width="200">
<img src="../images/grandes/image_grande_5.jpg" width="200">
<img src="../images/grandes/image_grande_6.jpg" width="200">
<img src="../images/grandes/image_grande_7.jpg" width="200">
<img src="../images/grandes/image_grande_8.jpg" width="200">
<img src="../images/grandes/image_grande_9.jpg" width="200">

Transformez votre page pour avoir une galerie d’images de trois lignes et de trois colonnes.

Pour que les images s’affichent sur 3 colonnes, il suffit de mettre les images trois par trois dans un paragraphe ou dans un élément <div></div>.

Notez que cette galerie s’affiche bien sur trois colonnes à condition que la fenêtre de votre navigateur fasse plus de 600 pixels de large. Si les trois images de chaque ligne ne rentre pas à l’écran, elles s’afficheront sur plusieurs lignes. Pour réaliser une vraie galerie, il faudra utiliser les CSS.

<h1>Galerie d'images</h1>
<div>
    <img src="../images/grandes/image_grande_1.jpg" width="200">
    <img src="../images/grandes/image_grande_2.jpg" width="200">
    <img src="../images/grandes/image_grande_3.jpg" width="200">
</div>
<div>
    <img src="../images/grandes/image_grande_4.jpg" width="200">
    <img src="../images/grandes/image_grande_5.jpg" width="200">
    <img src="../images/grandes/image_grande_6.jpg" width="200">
</div>
<div>
    <img src="../images/grandes/image_grande_7.jpg" width="200">
    <img src="../images/grandes/image_grande_8.jpg" width="200">
    <img src="../images/grandes/image_grande_9.jpg" width="200">
</div>

Sauf mention contraire*, l'article Les images en HTML [HTML02] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.