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

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 html02_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 lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Titre de la page</title>
    </head>
    <body>

    </body>
</html>

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

Imaginez rapidement une thématique pour le contenu de votre exercice. Exemples : les animaux d’Australie, les jeux vidéo, les cafetières, etc.

Téléchargez trois images en rapport avec votre thème sur un des sites ci-dessous et placez-les dans votre 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 html02_page1.html avec le contenu ci-dessous. Vous pouvez vous aider d’un site comme https://fr.wikipedia.org pour trouver le texte à insérer ou l’imaginer vous-même.

Un titre de niveau 1 contenant le thème que vous avez choisi ;
Un paragraphe d’introduction de votre thème ;
Une des images téléchargées précédemment que vous placerez dans un élément <div></div> ;
Un second paragraphe en rapport avec votre thème ;
Les deux autres images placées dans un second élément <div></div>.

<h1>Les animaux de l'Arctique</h1>
<p>La faune de l'Arctique est caractérisée par son adaptation aux conditions arides sévissant au-delà du cercle polaire arctique, avec même des organismes (ex : tardigrades) qui semblent pouvoir être congelés et décongelés sans dommage.</p>
<div>
    <img src="ours_polaire.jpg">
</div>
<p>Les parties terrestres de l'Arctique forment un cercle autour du pôle de plus de huit millions de km2, soit 6&nbsp;% des terres émergées et sont réparties entre les pays arctiques que sont la Russie, le Canada, les États-Unis (l'Alaska), le Groenland (province autonome du Danemark), l'Islande, la Norvège, la Suède et la Finlande. </p>
<div>
    <img src="macareux.jpg">
    <img src="renard_polaire.jpg">
</div>

<h1>Les animaux de l'Arctique</h1><p>La faune de l'Arctique est caractérisée par son adaptation aux conditions arides sévissant au-delà du cercle polaire arctique, avec même des organismes (ex : tardigrades) qui semblent pouvoir être congelés et décongelés sans dommage.</p><div>    <img src="ours_polaire.jpg"></div><p>Les parties terrestres de l'Arctique forment un cercle autour du pôle de plus de huit millions de km2, soit 6&nbsp;% des terres émergées et sont réparties entre les pays arctiques que sont la Russie, le Canada, les États-Unis (l'Alaska), le Groenland (province autonome du Danemark), l'Islande, la Norvège, la Suède et la Finlande. </p><div>    <img src="macareux.jpg">    <img src="renard_polaire.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>

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

<img src="ours_polaire.jpg" alt="Un ours polaire marchant sur la banquise">

<img src="ours_polaire.jpg" alt="Un ours polaire marchant sur la banquise">

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/ours_polaire.jpg" alt="Un ours polaire marchant sur la banquise">

<img src="images/ours_polaire.jpg" alt="Un ours polaire marchant sur la banquise">

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

Un titre de niveau 1 contenant le texte Galerie d’images de… votre thème .
Une liste à puce contenant les trois images (une image par ligne).

<h1>Galerie d'images d'animaux de l'Arctique</h1>
<ul>
    <li><img src="images/ours_polaire.jpg" alt="Un ours polaire marchant sur la banquise"></li>
    <li><img src="images/macareux.jpg" alt="Un couple de macareux"></li>
    <li><img src="images/renard_polaire.jpg" alt="Un renard polaire en train de chasser"></li>
</ul>

<h1>Galerie d'images d'animaux de l'Arctique</h1><ul>    <li><img src="images/ours_polaire.jpg" alt="Un ours polaire marchant sur la banquise"></li>    <li><img src="images/macareux.jpg" alt="Un couple de macareux"></li>    <li><img src="images/renard_polaire.jpg" alt="Un renard polaire en train de chasser"></li></ul>

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

Déplacez le fichier html02_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>Galerie d'images d'animaux de l'Arctique</h1>
<ul>
    <li><img src="../images/ours_polaire.jpg" alt="Un ours polaire marchant sur la banquise"></li>
    <li><img src="../images/macareux.jpg" alt="Un couple de macareux"></li>
    <li><img src="../images/renard_polaire.jpg" alt="Un renard polaire en train de chasser"></li>
</ul>

<h1>Galerie d'images d'animaux de l'Arctique</h1><ul>    <li><img src="../images/ours_polaire.jpg" alt="Un ours polaire marchant sur la banquise"></li>    <li><img src="../images/macareux.jpg" alt="Un couple de macareux"></li>    <li><img src="../images/renard_polaire.jpg" alt="Un renard polaire en train de chasser"></li></ul>

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

Téléchargez 6 nouvelles images de grande taille (au moins 1000px de large) sur le web sur votre thématique 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 html02_page3.html avec le contenu suivant :

Un titre de niveau 1 contenant le texte Redimensionnement d’image de… votre thème.
La première des 6 images téléchargées.

<h1>Redimensionnement d'une image d'animal d'Arctique</h1>
<img src="../images/grandes/ours_polaire_02.jpg">

<h1>Redimensionnement d'une image d'animal d'Arctique</h1><img src="../images/grandes/ours_polaire_02.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 d'animal d'Arctique</h1>
<img src="../images/grandes/ours_polaire_02.jpg" width="200">

<h1>Redimensionnement d'une image d'animal d'Arctique</h1><img src="../images/grandes/ours_polaire_02.jpg" width="200">

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

Un titre de niveau 1 contenant le texte Galerie final de… votre thème.
Les 6 images téléchargées pour l’exercice.

<h1>Galerie finale d'animaux de l'Arctique</h1>
<img src="../images/ours_polaire.jpg">
<img src="../images/macareux.jpg">
<img src="../images/renard_polaire.jpg">
<img src="../images/grandes/ours_polaire_02.jpg">
<img src="../images/grandes/tetras_de_siberie.jpg">
<img src="../images/grandes/loup_gris.jpg">

<h1>Galerie finale d'animaux de l'Arctique</h1><img src="../images/ours_polaire.jpg"><img src="../images/macareux.jpg"><img src="../images/renard_polaire.jpg"><img src="../images/grandes/ours_polaire_02.jpg"><img src="../images/grandes/tetras_de_siberie.jpg"><img src="../images/grandes/loup_gris.jpg">

Dimensionnez toutes les images pour qu’elles fassent toutes 150 pixels de large.

<h1>Galerie finale d'animaux de l'Arctique</h1>
<img src="../images/ours_polaire.jpg" width="150">
<img src="../images/macareux.jpg" width="150">
<img src="../images/renard_polaire.jpg" width="150">
<img src="../images/grandes/ours_polaire_02.jpg" width="150">
<img src="../images/grandes/tetras_de_siberie.jpg" width="150">
<img src="../images/grandes/loup_gris.jpg" width="150">

<h1>Galerie finale d'animaux de l'Arctique</h1><img src="../images/ours_polaire.jpg" width="150"><img src="../images/macareux.jpg" width="150"><img src="../images/renard_polaire.jpg" width="150"><img src="../images/grandes/ours_polaire_02.jpg" width="150"><img src="../images/grandes/tetras_de_siberie.jpg" width="150"><img src="../images/grandes/loup_gris.jpg" width="150">

Transformez votre page pour avoir une galerie d’images de deux 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 finale d'animaux de l'Arctique</h1>
<div>
    <img src="../images/ours_polaire.jpg" width="150">
    <img src="../images/macareux.jpg" width="150">
    <img src="../images/renard_polaire.jpg" width="150">
</div>
<div>
    <img src="../images/grandes/ours_polaire_02.jpg" width="150">
    <img src="../images/grandes/tetras_de_siberie.jpg" width="150">
    <img src="../images/grandes/loup_gris.jpg" width="150">
</div>

<h1>Galerie finale d'animaux de l'Arctique</h1><div>    <img src="../images/ours_polaire.jpg" width="150">    <img src="../images/macareux.jpg" width="150">    <img src="../images/renard_polaire.jpg" width="150"></div><div>    <img src="../images/grandes/ours_polaire_02.jpg" width="150">    <img src="../images/grandes/tetras_de_siberie.jpg" width="150">    <img src="../images/grandes/loup_gris.jpg" width="150"></div>

Si vous savez créer un lien en HTML, créez un lien sur chacune des images permettant d’afficher l’image en grande taille. Dans la mesure où cette galerie d’image n’est pas très fonctionnelle, vous pouvez ajouter target="_blank" sur vos liens afin qu’ils s’ouvrent dans une nouvelle fenêtre.

<div>
    <a href="../images/ours_polaire.jpg" target="_blank">
        <img src="../images/ours_polaire.jpg" width="150">
    </a>
    <a href="../images/macareux.jpg" target="_blank">
        <img src="../images/macareux.jpg" width="150">
    </a>
    <a href="../images/renard_polaire.jpg" target="_blank">
        <img src="../images/renard_polaire.jpg" width="150">
    </a>
</div>

<div>    <a href="../images/ours_polaire.jpg" target="_blank">        <img src="../images/ours_polaire.jpg" width="150">    </a>    <a href="../images/macareux.jpg" target="_blank">        <img src="../images/macareux.jpg" width="150">    </a>    <a href="../images/renard_polaire.jpg" target="_blank">        <img src="../images/renard_polaire.jpg" width="150">    </a></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.

Commentaires

S’abonner

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur la façon dont les données de vos commentaires sont traitées.

3 Commentaires

Le plus ancien

Le plus récent Le plus populaire

Commentaires en ligne

Afficher tous les commentaires

Tatiana Masson

5 années il y a

Ce serait bien si vous rajoutiez une correction!!

Répondre

Julien Crego

Auteur

Répondre à Tatiana Masson

C’est fait…

SOW

Nickel, j’ai réussi toutes les étapes!

Merci beaucoup,

IamMamadou