5 - HTML et images

⏪

⏬

⏩

1 - img

2 - page locale

Cette activité va vous permettre d'insérer des images dans vos pages HTML.

1 - Insérer une image : la balise img

⇩ ⇧ ⤊

01° Utiliser Notepad++ (ou autre) pour créer la page HTML dont le contenu est fourni ci-dessous.

Rappel de la procédure

Ouvrir le logiciel Notepad++ qui se trouve sans doute sur votre bureau.
Copier-coller les lignes ci-dessous dans Notepad++.

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8" />
    </head>
 
    <body>
        <h1>Ma première page avec une image</h1>
        <p>Sigle de Blender 3D, un logiciel gratuit permettant de réaliser des scénes animées en 3D :</p>
        <img src="https://doc.infoforall.fr/commun/images/accueil_blender_150.png">
    </body>
 
</html>

Dans Notepad++, chercher l'onglet Langage/Language et sélectionner H puis HTML pour indiquer que notre code est un code HTML.
Si UTF-8 n'est pas indiqué en bas à droite de la fenêtre de Notepad++, chercher l'onglet Encodage/Encoding et sélectionner Convertir en UTF-8. Sinon, rien à faire.
Sélectionner Enregistrer Sous

Chercher votre répertoire personnel sur le réseau
Aller dans le répertoire SNT (si vous n'avez pas de répertoire SNT, créez un dossier portant ce nom à l'aide d'un clic droit et nouveau dossier).
Choisir comme nom d'enregistrement web_image.html. Rajouter bien l'extension .html.

Visualiser le résultat en allant dans le bon répertoire et en cliquant directement sur le fichier HTML

Ne passez pas à la suite tant qu'aucune image ne s'affiche dans le navigateur. Demandez de l'aide au besoin.

1 - La Balise img

Après des années de pages HTML remplies uniquement de textes, grande nouveauté en 1993 : l'apparition de la balise orpheline <img>, celle de la ligne 11 ci-dessus.

Pour trouver l'URL d'une image, il faut

faire un clic droit dessus
utiliser ouvrir l'image dans un nouvel onglet et
copier son URL réelle qui se trouvera alors dans la barre des adresses.

Exemple : trouver l'URL de cette image :

Si vous trouvez pas
https://doc.infoforall.fr/commun/images/accueil_blender_150.png, pensez à me demander de l'aide.

2 - Faire comprendre au navigateur qu'on veut afficher une image

La balise d'ouverture <a> doit contenir un attribut src (pour source) qui doit contenir l'URL de votre image.

Notez la présence d'un guillemet qui signale le début d'URL et d'un autre guillement qui signale la fin de l'URL :

`1`	`<img src="url de l'image">`

Exemple :

`1`	`<img src="https://doc.infoforall.fr/commun/images/accueil_blender_150.png">`

Cette ligne de code provoque cet affichage :

Orpheline ?

On dit que cette balise est orphéline car il n'y a que la balise d'ouverture. Pas de contenu interne, pas de balise de fermeture. Juste la balise.

3 - Faire comprendre au navigateur qu'on désire une largeur d'image précise

On peut gérer la largeur de l'image à l'affichage à l'aide de l'attribut width pour largeur.

1
2

<img width="100"
 src="https://doc.infoforall.fr/commun/images/accueil_blender_150.png">

Notez encore une fois la présence de guillemets autour des 100 pixels.

Cette ligne de code donne ceci lorsqu'il est inséré dans une page HTML :

Si on veut 50 pixels, il suffit de le préciser :

`1`	`<img width="50" src="https://doc.infoforall.fr/commun/images/accueil_blender_150.png">`

Résultat :

02 - à faire valider par l'enseignant° Modifier maintenant le fichier HTML suivant de façon à

afficher un titre en liant avec l'image (en utilisant une balise <h1>)
afficher une image (en utilisant une balise <img> dont vous avez trouvé l'URL sur le Web (à vous de configurer correctement src) avec une largeur fixée à 300 pixels (en configurant correctement width)
afficher une phrase qui explique ce que représente l'image (en utilisant une balise )

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8" />
    </head>
 
    <body>
        <h1>Ma première page avec une image</h1>
        <p>Sigle de Blender 3D, un logiciel gratuit permettant de réaliser des scénes animées en 3D :</p>
        <img src="https://doc.infoforall.fr/commun/images/accueil_blender_150.png">
    </body>
 
</html>

Attention, deux remarques :

Après avoir fait une recherche dans un moteur de recherche, allez chercher l'adresse d'une image sur le site lui-même : ne récuperez pas l'adresse du moteur de recherche mais trouvez l'URL de l'image en allant sur le site lui-même.
Il est possible que certaines images ne s'affichent pas car le serveur du site stockant l'image peut refuser de fournir l'image à quelqu'un d'autre que lui-même.

Normalement, il ne faut pas utiliser les URL d'images d'un autre site Web que le votre.

Pourquoi ?

Simplement car vous utilisez les ressources du site pour afficher des images sur le votre. C'est comme si vous utilisiez le compteur électrique de quelqu'un d'autre pour éclairer votre propre maison !

Même si vous enregistrez les images sur votre serveur personnel, vous n'avez pas nécessairement le droit de les afficher sur vos pages sans autorisation de l'auteur de l'image. Pour cela, il suffit de voir si la licence de l'image est du type CREATIVE COMMONS ou DOMAINE PUBLIC.

DOMAINE PUBLIC : vous pouvez utiliser l'image comme vous voulez.
CREATIVE COMMONS : vous pouvez utiliser l'image sous certaines conditions.

BY : vous devez donner l'identité du créateur de l'image
SA : (pour Share Alike) vous devez accepter que votre création soit partagée également en tant que CREATIVE COMMONS.
NC : utilisation non commerciale uniquement

03° Créer maintenant une page qui contient au moins deux images dont les balises <img ...> sont directement à la suite. Les deux images ne devront pas avoir une largeur supérieure à 200 pixels à l'affichage. A vous de gérer.

Il faudra donc que votre page contienne deux balises <img> l'une à la suite de l'autre.

Pensez également aux autres balises de base (<html>, <head>, <body>) : votre page HTML ne doit pas comporter que les balises images mais être une vraie page HTML.

04° Observer l'affichage de votre page via un navigateur. Les deux images sont-elles l'une à côté de l'autre ou l'une en dessous de l'autre ?

Comme vous l'avez constaté, les balises images ne sont pas des balises dites "block" qui passent automatiquement à la ligne. Les images s'affichent donc l'une derrière l'autre, on ne passe à la ligne que s'il n'y a plus assez de place.

L'une des manières les plus simples de créer une image par ligne ? La placer dans une balise .

05° Modifiez votre code en plaçant les deux balises <img> dans leur propre balise paragraphe :

Que s'est-il passé cette fois ?

Normalement, l'affichage passe de :

Deux balises images directement l'une derrière l'autre :

Deux balises images insérées dans leur propre balise paragraphe :

Créer un lien avec une image plutôt qu'un texte

On peut même placer un lien sur une image. Il suffit pour cela de placer la balise <img> à l'intérieur d'une balise <a> !

Dans ce cas, on obtient un lien en cliquant sur une image et pas un lien en cliquant sur un texte. Un exemple ci-dessous où on arrive sur le site de Blender3D en cliquant sur l'image :

Voici le code HTML permettant de faire cela :

<p>
    <a href="https://www.blender.org/">
        <img src="https://doc.infoforall.fr/commun/images/accueil_blender_150.png">
    </a>
</p>

Ou plus court mais moins clair en mettant tout sur une ligne :

`1`	`<p><a href="https://www.blender.org/"><img src="https://doc.infoforall.fr/commun/images/accueil_blender_150.png"></a></p>`

06° Deux questions :

Question 1 L'URL de l'image affichée se trouve-t-elle

derrière l'attribut src de la balise <img> ?
derrière l'attribut href de la balise <a> ?

Question 2 L'URL du site vers lequel on va aller en cliquant sur le lien est-elle

derrière l'attribut src de la balise <img> ?
derrière l'attribut href de la balise <a> ?

Correction ?

...CORRECTION...

Question 1 Réponse A, derrière l'attribut src de la balise <img>

Pour trouver l'URL de l'image, il faut regarder l'attribut src de la balise <img>.

`1`	`<p><a href="https://www.blender.org/"><img src="https://doc.infoforall.fr/commun/images/accueil_blender_150.png"></a></p>`

Question 2 Réponse B, derrière l'attribut href de la balise <a>

Pour trouver l'URL vers lequel mène le lien, il faut regarder l'attribut href de la balise <a>.

`1`	`<p><a href="https://www.blender.org/"><img src="https://doc.infoforall.fr/commun/images/accueil_blender_150.png"></a></p>`

07 - à faire valider° Utiliser une image sur votre page pour créer un lien vers un site de votre choix : en cliquant sur l'image, cela doit ouvrir une page vers un site Web.

Droits à la diffusion

Attention au droit à la diffusion : si vous placez votre site sur le Web, il faudra vérifier que les images sont libres de droits, c'est à dire :

Placer dans le domaine public, ou
En licence Creative Common : il faudra alors vérifier les conditions. C'est souvent :

NC : Utilisation non commerciale
SA : Share alike : partage à l'identique (vous devez garder la même licence)
BY : vous devez citez l'auteur initial

Quelques explications sur la ligne 5 : meta charset

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8" />
    </head>
 
    <body>
        <h1>Ma première page avec une image</h1>
        <p>Sigle de Blender 3D, un logiciel gratuit permettant de réaliser des scénes animées en 3D :</p>
        <img src="https://doc.infoforall.fr/commun/images/accueil_blender_150.png">
    </body>
 
</html>

Cette ligne permet au navigateur de savoir comment vos caractères ont été transformés en chiffres lors de l'enregistrement du fichier-texte dont l'extension est .html : souvenez-vous qu'un ordinateur ne sait stocker que des nombres. Il associe donc chaque caractère a un nombre (par exemple A en 65, B en 66...).

Dans Notepad++, vous aviez sélectionné UTF-8 : votre texte HTML a donc été codé en nombre en utilisant la technique d'encodage UTF-8.

A quoi sert la ligne 5 alors ?

Et bien, le navigateur (Firefox, Chrome...) ne connait pas de base l'encodage que vous avez utilisé. Avec cette ligne, vous indiquez qu'il doit utiliser UTF-8 pour décoder les nombres et retrouver le texte.

Vous noterez d'ailleurs que cette information est bien dans la balise <head> qui sert à fournir des informations utiles au navigateur sans que cela soit de l'affichage direct.

2 - Page Web locale

⇩ ⇧ ⤊

Pour l'instant, vous êtes parvenus à afficher des images qui sont déjà stockées sur un serveur distant.

Le problème ?

Vous utilisez les ressources du site pour afficher votre page. Pas très civique.
Si ce site supprime son image ou la place ailleurs, votre page ne parviendra plus à afficher l'image. C'est génant.

Nous allons faire autrement : nous allons enregistrer les images sur notre propre ordinateur et afficher l'image en fournissant directement son adresse sur notre propre disque dur.

Nous allons donc maintenant enregister les images en les placant dans le même dossier que le fichier HTML.

Adressage relatif des images

Imaginons trois fichiers (un html et deux images) placés dans le même dossier :

📁 travail

📄 ma_page.html

📄 mon_image.png

📄 mon_autre_image.png

Pour afficher les deux images à l'aide du fichier HTML ma_page.html, il suffit d'insérer ceci dans le code :

`1`	`<img src="mon_image.png">`

`1`	`<img src="mon_autre_image.png">`

On remarquera bien qu'il ne s'agit pas d'adresses absolues : elles ne commencent pas par un slash.

On donne bien ici des adresses relatives à la position du fichier HTML.

Comme on ne donne pas d'indication supplémentaire, cela veut dire qu'on doit chercher l'image dans le même répertoire que le fichier HTML. C'est une adresse relative à la position du fichier HTML.

08° Notez ceci dans votre éditeur de texte :

<!DOCTYPE html>
<html>
    <head>
        <title>WEB LOCAL</title>
    </head>
     
    <body>
        <p>Voici une première image :</p>
        <p><img src="image_1.png">
        <p>Et hop, une deuxième :</p>
        <p><img src="image_2.png">
    </body>
</html>

Enregistrer alors le fichier sous le nom ma_page.html dans un dossier snt créé dans votre répertoire de travail.

09° Utiliser l'explorateur de votre système d'exploitation pour aller dans ce dossier et ouvrir votre fichier HTML en utilisant un clic-droit et choisir Firefox comme navigateur.

Vous devriez constater que les images ne sont pas présentes à l'écran. C'est normale : vous ne les avez pas placées dans le dossier.

Pour l'instant, votre dossier doit ressembler à ceci :

📁 snt

📄 ma_page.html

10° Télécharger deux images de votre choix (de type png ou jpg) et les placer dans le dossier snt, à côté de votre fichier HTML.

Cela donnerait une structure du type :

📁 snt

📄 ma_page.html

📄 LE_NOM_DE_VOTRE_IMAGE1

📄 LE_NOM_DE_VOTRE_IMAGE2

11° Modifier les noms des images dans le dossier en les renommant comme dans le fichier HTML :

image_1.png
image_2.png

Cela donnerait une structure du type :

📁 snt

📄 ma_page.html

📄 image_1.png

📄 image_2.png

12 - à faire valider° Actualiser votre page sur Firefox ou relancer la page : vous devriez voir vos images sur la page maintenant. Sinon, il faut me demander conseil. Surement un nom qui ne concorde pas ou le fait que les images ne soient pas au bon endroit.

Activité publiée le 30 09 2019
Dernière modification : 30 09 2019
Auteur : ows. h.

⏪

⏫

⏩