Important : si vous êtes sur une machine sous Windows, pensez à aller dans affichage et demander d'afficher les extensions de fichier.
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++.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html><html><head><metacharset="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><imgsrc="https://doc.infoforall.fr/commun/images/accueil_blender_150.png"></body></html>
Si la coloration syntaxétique n'est pas visible,
chercher l'onglet Langage/Language, H puis 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.
Sélectionner Enregistrer Sous
Chercher votre répertoire personnel sur le réseau
Aller dans le répertoire SNTWEB (si vous n'avez pas ce répertoire, 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 sur ce fichier HTML.
Ne passez pas à la suite tant qu'aucune image ne s'affiche dans le navigateur. Demandez de l'aide au besoin.
1.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>.
A - Trouver l'URL d'une image
Pour cela, il faut :
cliquer jusqu'à atteindre l'image directement dans un site, il ne faut pas rester sur la page de Google Image !
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.
B - Utiliser la balise img
La balise d'ouverture <img> 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 guillemet qui signale la fin de l'URL :
02 ✌° Modifier maintenant le fichier HTML suivant de façon à
chercher l'URL d'une image correspondant à un thème qui vous intéresse aujourd'hui.
afficher un titre qui correspondrait à votre image (en utilisant une balise <h1> par exemple)
afficher l'image (en utilisant une balise <img> (à 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 un élément p composé de <p> et </p>)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html><html><head><metacharset="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><imgsrc="https://doc.infoforall.fr/commun/images/accueil_blender_150.png"></body></html>
Attention, deux remarques :
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.
1.2 Informatique et droit : les licences
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
COPYRIGHT : vous n'avez pas le droit d'utiliser l'image, à moins d'en payer les droits si le propriétaire accepte.
03° Créer maintenant une page qui contient au moins deux images dont les balises <img ...> sont directement à la suite. Les deux images devront avoir une largeur de 200 pixels à l'affichage. A vous de gérer en utilisant l'attribut width.
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 <p>.
05° Modifiez votre code en plaçant les deux balises <img> dans leur propre balise paragraphe :
<p> <img ...> </p> <p> <img ...> </p>
1.3 La balise image n'est ni une balise block, ni une balise inline
La balise img n'est pas une balise block : le navigateur ne place pas l'image sur une ligne indépendante mais peu placer plusieurs images sur la même ligne.
Deux balises images directement l'une derrière l'autre :
<img ...> <img ...>
Deux balises images insérées chacune dans un paragraphe :
<p> <img ...> </p><p> <img ...> </p>
En réalité, ce n'est pas non plus une simple balise inline. En effet, on ne peut pas choisir la largeur d'une balise inline. Pour faire court, la balise img est inline-block : elle ne passe pas à la ligne, mais on peut choisir sa largeur.
1.4 Créer un lien avec une image plutôt qu'un texte
On peut 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 :
07 ✌° 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.
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 enregistrer les images en les plaçant dans le même dossier que le fichier HTML.
2.1 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
<imgsrc="mon_image.png">
1
<imgsrc="mon_autre_image.png">
On remarquera bien qu'il ne s'agit pas d'adresses absolues puisqu'elles ne contiennent ni nom de serveur, ni nom de disque dur.
On donne bien ici des adresses relativement à la position du fichier HTML dans laquelle se trouve cette ligne.
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.
08 ✔° Notez ceci dans votre éditeur de texte :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html><html><head><title>WEB LOCAL</title><metacharset="utf-8"/></head><body><p>Voici une première image :</p><p><imgsrc="image_1.png"></p><p>Et hop, une deuxième :</p><p><imgsrc="image_2.png"></p></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 normal : 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 ✌° Actualiser votre page sur Firefox ou relancer la page : vous devriez voir vos images sur la page maintenant. Sinon, il faut me demander conseil. Sûrement un nom qui ne concorde pas ou le fait que les images ne soient pas au bon endroit.
13 ✌° Réaliser les tâches suivantes :
Ouvrir dans votre éditeur de texte votre page HTML traitant de votre chanson (clic-droit sur ce fichier, ouvrir avec...).
Trouver deux images (libres de droit si vous comptez publier votre page un jour ou l'autre) qui sont liées à votre chanson.
Sauvegardez vos deux images localement dans le même répertoire que votre fichier HTML/
Afficher ces images sur votre page chanson.
Activité publiée le 30 09 2019
Dernière modification : 30 09 2019
Auteur : ows. h.
