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.
Afficher la solution avec Img2GoRenommez proprement les trois images. Faites attention à ne pas modifier l’extension des fichiers !
Attention
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.
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>
.
Ajoutez un texte alternatif pour les trois images avec l’attribut alt
.
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.
Afficher la solution HTMLCré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).
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.
Afficher la solution HTMLÀ 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.
Ajoutez la propriété width
avec la valeur 200
à votre image pour pouvoir réduire sa taille.
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.
Transformez votre page pour avoir une galerie d’images de trois lignes et de trois colonnes.
Afficher un indiceAfficher la solutionSauf 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.
Ce serait bien si vous rajoutiez une correction!!
C’est fait…
Nickel, j’ai réussi toutes les étapes!
Merci beaucoup,
IamMamadou