Cette activité va vous permettre d'en savoir un peu plus sur l'insertion des images dans vos pages HTML.
D'ailleurs, les images ont en science informatique une portée bien plus grande qu'on ne le pense. En Web, le principe est juste d'afficher quelque chose. Oui, mais on peut aussi générer des images à partir de simulations de phénomènes physiques qu'on ne peut pas réaliser en laboratoire et comparer les simulations et la réalité. C'est aussi comme cela que la science avance maintenant que la science a atteint un degré de complexité très important.
Important : si vous êtes sur une machine sous Windows, pensez à aller dans affichage et demander d'afficher les extensions de fichier.
✔ 01 [rappel]° 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 Elément (inline-block)img
Balise orpheline img
La balise orphelineimg> permet d'insérer une image dont on connaît l'adresse.
<imgsrc="url de l'image">
Il s'agit d'un élément inline-block : on peut régler sa largeur (comme un block) mais il ne provoque pas de passage à la ligne automatique (comme un inline).
Comme pour les liens, pensez à transmettre l'adresse sous forme de string.
Trouver l'URL d'une image
Pour trouver l'URL d'une image, il faut :
cliquer jusqu'à atteindre l'image directement sur un site : il ne faut pas rester sur la page du moteur de recherche !
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 d'application : 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.
Choisir une largeur précise
On peut choisir la largeur de l'image à l'affichage à l'aide de l'attribut width (largeur en anglais).
Notez qu'on transmet le string "100", pas juste 100 : l'image aura à l'écran une largeur de 100 pixels.
On obtient alors
Si on veut 50 pixels, il suffit de le préciser. On peut même mettre deux images de cette largeur à la suite l'une de l'autre, étant inline-block, elles seront sur la même ligne :
✌ 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
Balise de type block
Une balise de type block est une balise dont le contenu sera sur sa propre ligne et provoque un passage à la ligne. Elle forme un bloc dont on peut rêgler la largeur.
Exemples de balises block
p h1 li
Si vous avez fait un peu de CSS vous avez peut-être déjà rencontré la balise block générique : div.
Balise de type block
Une balise de type inline ne provoque pas de passage à la ligne : on peut en avoir plusieurs sur une seule ligne et on ne peut donc pas règler leur largeur.
Exemples de balises inline
a strong mark em
Si vous avez fait un peu de CSS vous avez peut-être déjà rencontré la balise inline générique : span.
Balise de type inline-block : img
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.
Exemple : deux balises images directement l'une derrière l'autre :
<img ...> <img ...>
Exemple 2 : deux balises images insérées chacune dans un paragraphe :
<p> <img ...> </p><p> <img ...> </p>
La balise img n'est pas non plus une balise inline : on définir sa largeur, ce qui n'est pas possible avec 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'utiliser l'adressage relatif puisque les 3 fichiers sont dans le même répertoire :
1
<imgsrc="mon_image.png">
1
<imgsrc="mon_autre_image.png">
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.
⚙ 14 [Rappel]° Le prochain TP traitera du CSS qui va permettre de gérer les couleurs et la position des éléments.
En attendant, testez ceci en plaçant votre image dans un paragraphe dont la balise d'ouverture est celle-ci :
HTML explique ce qu'on veut voir à l'écran (le "fond")
CSS explique comment on veut afficher les choses (la "forme")
Normalement, on sépare HTML et CSS dans deux fichiers séparés mais vous avez vu l'attribut style qui permet de faire des demandes CSS directement depuis une balise d'ouverture HTML :
1
<pstyle="text-align: center;"><img...></p>
Le code-source en jaune est du CSS.
Dans cette partie, nous allons donc voir quelques propriétés CSS propre aux images, la partie CSS suivante traitera principalement de la gestion des textes.
⚙ 15° Commençons par voir comment placer une image à côté d'un texte de façon plus harmonieuse.
Si vous voulez qu'une image "flotte" à côté de votre texte, vous pouvez utiliser ceci :
1
<imgstyle="float: left;"...>
1
<imgstyle="float: right;"...>
Travail demandé :
Récupérer cette image :
Afficher ce texte, suivi de l'image comme visualisé ci-dessous :
Notre Système solaire héberge 8 planètes d'une incroyable diversité. L'une d'elle, la Terre, offre un climat humide et tempéré, propice à la vie. Alors que certaines, comme Vénus, sont de vraies fournaises, et d'autres, telle que Mars ou Neptune, sont des mondes gelés.
Utiliser l'attribut style et la propriété float pour obtenir ceci :
Notre Système solaire héberge 8 planètes d'une incroyable diversité. L'une d'elle, la Terre, offre un climat humide et tempéré, propice à la vie. Alors que certaines, comme Vénus, sont de vraies fournaises, et d'autres, telle que Mars ou Neptune, sont des mondes gelés.
Si votre image est trop grande et qu'elle empiète sur un texte sur lequelle vous ne voulez pas que l'image s'intègre, il suffit de placer ce CSS dans ce second texte :
1
<pstyle="clear: both;"...></p>
On demande ainsi de ne pas faire flotter d'image, ni à droite, ni à gauche de ce paragraphe.
Réaliser ceci :
Notre Système solaire héberge 8 planètes d'une incroyable diversité. L'une d'elle, la Terre, offre un climat humide et tempéré, propice à la vie.
Alors que certaines, comme Vénus, sont de vraies fournaises, et d'autres, telle que Mars ou Neptune, sont des mondes gelés.
⚙ 16° On peut demander un écartement entre les éléments en utilisant une propriété CSS nommée margin. On doit lui fournir la marge, par exemple en pixel qu'on veut voir entre cette balise et toutes les autres.
1
<imgstyle="margin: 20px; float:left;"...>
Remarquez qu'on fournit ici deux propriétés CSS en les séparant par un ;
Réaliser un affichage qui ressemble à cela en utilisant margin.
Notre Système solaire héberge 8 planètes d'une incroyable diversité. L'une d'elle, la Terre, offre un climat humide et tempéré, propice à la vie.
Alors que certaines, comme Vénus, sont de vraies fournaises, et d'autres, telle que Mars ou Neptune, sont des mondes gelés.
⚙ 17° On peut demander de créer un effet d'arrondi sur les coins de l'image avec une propriété CSS nommée border-radius. Plus la valeur fournie est grande, plus l'arrondi sera important.
1
<imgstyle="border-radius: 20px;"...>
Réaliser un affichage qui ressemble à cela en utilisant border-radius.
Notre Système solaire héberge 8 planètes d'une incroyable diversité. L'une d'elle, la Terre, offre un climat humide et tempéré, propice à la vie.
Alors que certaines, comme Vénus, sont de vraies fournaises, et d'autres, telle que Mars ou Neptune, sont des mondes gelés.
⚙ 18° On peut rajouter un effet global de transparence à l'image avec la propriété CSS nommée opacity. Plus la valeur fournie est proche de 0, plus l'image sera transparente. A 1, elle est totalement opaque. A 0, elle est totalement transparente.
1
<imgstyle="opacity: 0.75;"...>
Réaliser un affichage qui ressemble à cela en utilisant opacity.
Notre Système solaire héberge 8 planètes d'une incroyable diversité. L'une d'elle, la Terre, offre un climat humide et tempéré, propice à la vie.
Alors que certaines, comme Vénus, sont de vraies fournaises, et d'autres, telle que Mars ou Neptune, sont des mondes gelés.
⚙ 19° On peut générer des effets de filtre sur sur une image avec la propriété CSS nommée filter. Par exemple, filter: blur(x) crée du flou. Plus la valeur x fournie à la fonction est grande, plus le flou est important.
1
<imgstyle="filter: blur(5px);"...>
Réaliser un affichage qui ressemble à cela en utilisant filter: blur(x).
Notre Système solaire héberge 8 planètes d'une incroyable diversité. L'une d'elle, la Terre, offre un climat humide et tempéré, propice à la vie.
Alors que certaines, comme Vénus, sont de vraies fournaises, et d'autres, telle que Mars ou Neptune, sont des mondes gelés.
La propriété filter permet d'appliquer beaucoup d'effets visuels aux images et autres éléments graphiques :
blur(px) – Applique un flou à l'image.
brightness(%) – Ajuste la luminosité.
contrast(%) – Ajuste le contraste.
grayscale(%) – Convertit l'image en niveaux de gris.
invert(%) – Inverse les couleurs.
opacity(%) – Ajuste la transparence.
saturate(%) – Modifie la saturation des couleurs.
sepia(%) – Applique un effet sépia.
hue-rotate(deg) – Modifie la teinte des couleurs.
drop-shadow(x y blur color) – Ajoute une ombre portée.
Pour aller voir les différents effets, vous pouvez utiliser ce le site mozilla.org.
⚙ 20° On peut modifier la géométrie de l'image avec la propriété CSS nommée transform. Par exemple, transform: rotate(45) crée de faire tourner l'image de +45°.
1
<imgstyle="transorm: rotate(45deg);"...>
Réaliser un affichage qui ressemble à cela en utilisant transform: rotate(xdeg). L'effet grisé est à créer avec filter: grayscale(x), l'opacité avec opacity.
Notre Système solaire héberge 8 planètes d'une incroyable diversité. L'une d'elle, la Terre, offre un climat humide et tempéré, propice à la vie.
Alors que certaines, comme Vénus, sont de vraies fournaises, et d'autres, telle que Mars ou Neptune, sont des mondes gelés.
La propriété transform permet de réaliser d'autres transformations :
Pour aller voir les différents effets, vous pouvez utiliser ce le site mozilla.org.
⚙ TACHE FINALE° Modifier votre fichier sur votre musique, film ou série pour respecter ceci :
Les images doivent être locales et non plus liées à Internet.
Si elles ne sont pas libres de droits, il faudra le signaler sur la page. Faire une recherche inversée d'image sur un moteur de recherche si vous ne savez plus d'où elles proviennent ni quels sont leurs droits associés.
il faut qu'il y ai quelques effets CSS sur les images.
ZIPPER le html et les images et envoyez moi le tout sur l'ENT.
