Les images en HTML HTML02

Publié le par Julien Crego
Mise à jour le

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 Img2Go

Solution avec Img2Go :

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 second élément <div></div>.
Afficher la solution HTML

Solution HTML :

<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.

Afficher un indice

Indice :

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

<commande attribut="valeur" attribut="valeur"></commande>
Afficher la solution HTML

Solution HTML :

<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.

Afficher la solution HTML

Solution HTML :

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).
Afficher la solution HTML

Solution HTML :

<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.

Afficher la solution HTML

Solution HTML :

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.
Afficher la solution HTML

Solution HTML :

<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.

Afficher la solution HTML :

Solution HTML :

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.
Afficher la solution HTML

Solution HTML :

<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.

Afficher un indice

Indice :

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>.

Afficher la solution

Solution :

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

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.

3 réactions sur “ Les images en HTML [HTML02] ”

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.