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>
Retrouvez et téléchargez 3 images de petites tailles (250×250 pixels maximum) sur Internet. Placez les 3 images téléchargées dans le dossier racine.
Remarque
Sur Google Images, vous pouvez affichez la taille des images en cliquant sur le bouton Outils, puis Plus d’outils et Afficher les tailles. Vous pouvez également filtrer les images par taille et/ou licence d’utilisation.
Renommez 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 seul é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.
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)
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.
À l’intérieur du dossier images, créez un nouveau dossier et nommez-le grandes.
Téléchargez 9 images de grande taille (environ 1000px de large) sur Internet et enregistrez-les dans le dossier images/grandes que vous venez de créer à la question précédente.
Site ressource : http://www.pixabay.com
Renommez correctement les images en respectant les règles évoquées précédemment.
Créez, dans le dossier racine, 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 racine, 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 indice