SNT Web Images

Identification

Infoforall

5 - HTML et images


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

La partie 2 optionnelle permettra aux plus rapides à apprendre à gérer un véritable éditeur de texte et à gérer les images en local.

1 - Insérer une image

Trinket est un site permettant de tester du code HTML et CSS par exemple.

Vous devriez aboutir à une page vide vous permettant de taper du code HTML.

Balise img

En 1993, après des années de pages HTML remplies uniquement de texte, une balise est apparue lorsque les connexions furent assez rapides et les écrans capables d'afficher des images : la balise orpheline <img>.

On doit fournir à cette balise un attribut source nommé src qui doit contenir l'adresse de votre image, absolue ou relative.

Pour trouver l'adresse d'une image, il faut faire un clic droit dessus et rechercher cette adresse.

Imaginons que votre image se trouve à l'adresse suivante : https://doc.infoforall.fr/commun/images/accueil_blender_150.png

Pour l'afficher, il suffit d'utiliser ceci :

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

Ce code donne ceci lorsqu'il est inséré dans une page HTML :

02° Allez chercher l'adresse de quelques images sur le Web et créez une petite page contenant deux-trois phrases et deux-trois images.

Pour trouver l'adresse d'une image affichée dans un site Web, il suffit de faire un clic-droit et de sélectionner Copier l'adresse de l'image.

Il est possible que certaines images ne s'affichent pas car le serveur du site cible peut très bien refuser de fournir l'image.

Normalement, il ne faut pas utiliser les adresses d'images (libre de droit ou pas) d'un autre site Web que le votre.

Pourquoi ?

Simplement car vous utilisez les ressources du site pour afficher des images sur le votre !

Même si vous enregistrez des images sur votre serveur personnel, vous n'avez pas 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 est du type CREATIVE COMMONS par exemple. Nous en parlerons dans l'activité finale sur les sites Web réels.

Lorsqu'on crée un véritable site Web, les images qu'on veut afficher sur les pages sont stockées sur votre serveur.

L'une des façons les plus faciles pour les afficher est de les placer 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">

03° Allez sur le trinket et utilisez l'icone ci-dessous pour afficher les images disponibles pour vous sur le serveur distant de trinket.

images du trinket

Vous aurez alors les noms des deux images disponibles sur ce trinket.

Notez leurs noms.

04° Créer une page en utilisant ces deux images à l'aide d'un adressage relatif.

05° Les deux images sont-elles l'une à côté de l'autre ou l'une en dessous de l'autre ?

Comme vous l'avez vu, les balises images ne sont pas des balises 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>.

06° Utiliser cette manière de gérer le passage à la ligne pour obtenir une image par ligne uniquement.

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 <p> !

Ca donne donc une structure du type suivant si on veut une image par ligne portant un lien hypertexte :

1 2 3 4 5
<p> <a href ="https://www.infoforall.fr/act/blender/animer-avec-blender-279/"> <img src="https://doc.infoforall.fr/commun/images/accueil_blender_150.png"> </a> </p>

Ou plus simple en mettant tout sur une ligne :

1
<p><a href ="https://www.infoforall.fr/act/blender/animer-avec-blender-279/"><img src="https://doc.infoforall.fr/commun/images/accueil_blender_150.png"></a></p>

07° Utiliser une image sur votre page pour créer un lien vers un site de votre choix. Faire vérifier la réalisation par le professeur.

2 - Page Web locale

Créer des pages Web sans image ne pose pas trop de problème avec trinket. Par contre, pour placer des images, il faut créer un compte et s'identifier.

Il y a plus simple : installer un éditeur de texte local et créer directement vos fichiers HTML. Vous pourrez ainsi enregistrer toutes les images que vous voulez sans aucun problème.

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 gardez la même licence)
    • BY : vous devez citez l'auteur initial
  • ...

Le code HTML n’est au final qu’un simple texte. Un simple éditeur de texte générique, nommé éditeur de texte sous Linux et bloc-note sous Windows, peut suffire pour créer ce code.

Mais nous allons utiliser un éditeur plus complet comme :

  • Atom (Linux et Windows)
  • Notepad++ (Windows) ou Notepadqq (Linux)

08° Ouvrir votre éditeur de choix. Choisir un encodage UTF-8 ainsi que HTML comme langage. Comment ?

  • Avec les Notepad : il suffit de chercher dans la barre des menus Encoding et Langage.
  • Avec Atom : il suffit de regarder en bas à droite : UTF-8 devrait être choisi par défaut. A sa droite se trouve le type de fichier. Vous devriez voir Plain Text pour l'instant. Il suffit de cliquer dessus et de le remplacer par HTML.

Atom a la particularité de cacher sa barre des menus par défaut. Pour la faire apparaitre, il suffit d'appuyer sur la touche  ALT . Vous pourrez alors créer un nouveau fichier (FILE - NEW FILE) si Atom s'ouvre sur ... rien ...

09° Notez ceci dans votre page: 

1 2 3 4 5 6 7 8 9 10 11 12 13
<!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>

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

11° Utiliser l'explorateur de votre système d'exploitation pour aller dans ce dossier.

12° 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

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

14° Modifier le nom des images dans le fichier HTML ou dans le dossier mais le nom visible dans le fichier HTML doit correspondre au nom de l'image dans le dossier.

Cela donnerait un structure du type :

📁 snt

📄 ma_page.html

📄 image_1.png

📄 image_2.png

15° Actualiser votre page sur Firefox ou relancer la page : vous devriez voir vos images sur la page. 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.

Si vous voulez en savoir plus sur la création de pages, n'hésitez pas à aller voir les pages HTML-CSS de ce site. Ou d'un autre.

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