patrickgross.org

Cours HTML

  Pr�c�dent   Suivant    

7.1. R�capitulatif.

Vous venez d'apprendre:

• A cr�er des listes � puce.
• A cr�er des listes num�rot�es.

7.2. Les images.

Cela ne vous a pas �chapp�, le Web est d�cor� d'images en tout sens... Photos, mais aussi cartes, plans, logos...

R�fl�chissons un peu.

Il s'agit de placer dans une page web une image. Le logiciel de navigation doit pouvoir afficher cette image. Il faudra donc bien lui donner certaines informations:

Comment se nomme le fichier de l'image? "MaTronche.jpg" ? "Voituredecourse.jpg" ? "plan-de-brunstatt.gif" ? Il faudra bien le dire au logiciel de navigation, sinon, comment voulez-vous qu'il sache quelle image il doit afficher!

O� se trouve ce fichier? Est-il sur un autre site web? Est-il dans le m�me dossier que ma page web, ou dans un autre dossier ou j'aurais mis toutes mes images? Si le fichier de l'image est dans le m�me dossier que ma page, le logiciel de navigation la trouvera, mais si ce fichier est ailleurs, il faudrait bien lui dire o� il est, sinon le logiciel de navigation ne le trouvera pas!

En quelle dimensions afficher l'image? Oui, il faudra dire cela au logiciel de navigation, m�me si vous voulez afficher l'image telle quelle sans l'agrandir ni la r�tr�cir. sont-ils b�tes, ces logiciels de navigation... D'un autre c�t�, donner ces dimensions, cela vous permettra justement d'afficher des images autrement qu'avec leur taille originale.

Que dire aux non-voyants? Oui, le web n'est pas r�serv� aux personnes qui voient, il doit aussi �tre utilisable par les non-voyants, ainsi en ont d�cid� les concepteurs de HTML, dans leur grande sagesse. Il faudra donc donner au logiciel de navigation un petit texte descriptif de l'image, ainsi, les logiciels de navigation pour les non-voyants liront ce petit texte descriptif.

Voil� pour la th�orie. Quelle image, o� est-t-elle, quelle largeur d'affichage, quelle hauteur d'affichage, et que dire aux non-voyants. Cela fait cinq "choses". Parlons correctement: cel fait cinq attributs.

7.2. La balise.

La balise pour afficher une image est <img>. Elle doit �tre ferm�e, on la ferme �videmment avec </img>.

Ayant lu ce que j'expliquais plus haut, vous vous doutez bien qu'en �crivant...

...le logiciel de navigation sera Grosjean comme devant.

Il faut les cinq attributs. Alors, compl�tons, attribut par attribut.

7.3. Les attributs de la balise img.

Le premier sert � indiquer le nom de fichier de votre image. C'est: src.

Il sert aussi � indiquer o� se trouve l'image, du moins, si elle n'est pas dans le m�me dossier que la page web que vous �tes en train de composer:

Dans cet exemple, je viens de dire que l'image, au lieu d'�tre dans le m�me dossier que la page, est dans un sous-dossier nomm� "images".

Mais cela aurait aussi pu �tre quelque chose comme:

Cette fois, je viens de dire que l'image se trouve sur le site web www.bellesimages.com, dans un dossier de ce site qui s'appelle "jardinage".

Ceux qui ont d�j� la ma�trise du vocabulaire du web ont compris cela ainsi: j'ai donn� l'URL de l'image. l'URL, c'est la localisation sur le web, d'une image dans cet exemple, ou d'autre chose dans d'autres cas.

Note du ronchon de service: Utiliser pour vos pages web des images d'autres sites web n'est pas forc�ment une bonne pratique. Vous profitez en quelque sorte d'un h�bergement de l'image pay� par un autre. D'un autre c�t�, copier les images des autres sur votre site n'est pas non plus forc�ment une bonne pratique. L'auteur d'une image en a les droits. Et de toutes fa�ons, remplir votre site d'images d�j� publi�es par d'autres, est-ce �tre cr�atif? Est-ce vraiment contribuer � la richesse du Web?

Voici comment j'organise mes images, dans mes sites Web.

Je ne mets jamais "tout" dans le m�me dossier. Par exemple, je mets les pages dans un dossier "htm", les images dans un autre dossier, "img", les vid�os dans un autre encore, "vid".

La structure de mes dossiers est de ce genre:

Alors, si ma page est dans le dossier "htm", alors que mon image est dans le dossier "img", j'�crirais:

Ce qui se lit: pour trouver l'image, qui s'appelle "mon-beau-jardin.jpg", cher logiciel de navigation, tu dois sortie du dossier "htm" pour te retrouver sur le dossier "monsite", et l�, tu trouveras un dossier "img", c'est l� qu'est l'image.

C'est ce que l'on appelle "un chemin relatif". A partir du dossier o� se trouve la page, on indique le chemin � suivre pour trouver le dossier o� se trouve l'image. ".." d�signe le dossier parent. L'enfant est le dossier de la page, "htm", le dossier parent est "monsite", car "htm" est un sous-dossier de "monsite".

Si cela vous para�t peu clair, ne vous en faites pas trop, organisez vos dossier comme moi, utilisez le m�me chemin que moi pour les images.

Le plus dur �tant fait, ouf, passons aux attributs pour indiquer les dimensions d'affichage de l'image.

Il y en a deux, width pour la largeur, height pour la hauteur:

Je viens d'indiquer ici que l'image doit �tre affich�e avec une largeur de 120 pixels, et une hauteur de 80 pixels. Un pixel, c'est un point de l'�cran.

Notes pour les personnes qui d�butent en imagerie informatique:

• Vous aurez bien du mal � g�rer des images dans vos pages web si vous n'avez aucune exp�rience de l'imagerie sur ordinateur. Vous devrez savoir copier, d�placer des images d'un dossier � l'autre, mais s�rement aussi redimensionner des photos, les retoucher etc., donc savoir utiliser un logiciel de traitement d'images.
• Il vaut mieux �viter de demander l'affichage d'une image dans une taille diff�rente que celle qu'elle a. Sa qualit� en sera d�grad�e.
• Pour conna�tre la taille d'une image, allez dans son dossier, cliquez dessus avec le bouton droit de la souris, choisissez "Propri�t�s" puis "D�tails". Ou bien, utilisez un logiciel de traitement d'image, ouvrez l'image, ses dimensions en pixel sera bien donn�e quelque part.
• Evitez les images de trop grandes dimensions, les visiteurs de votre site veulent que les pages s'affichent rapidement. Vous pouvez produire des versions plus petites de vos photos pour votre site web, par exemple.
• Ne mettez pas non plus un trop grand nombre d'image dans une page web. Faites plusieurs pages web. Nous apprendrons � faire des liens pour passer de l'une � l'autre.
• En informatique, il y a plusieurs formats d'images, c'est-�-dire, plusieurs techniques de stockage des points d'une image. Utilisez des images "jpg", ou "png". N'utilisez pas des images comme "bmp", leurs fichiers sont souvent trop volumineux.

Dernier attribut. Que dire aux non-voyants. Il suffira d'�crire un petit texte descriptif avec l'attribut alt:

7.4. A propos de majuscules, de minuscules, d'espaces.

Pour tout un tas de raisons, trop longues � expliquer toutes, je vous recommande tr�s, tr�s fortement, pour les noms des fichiers images que vous voulez publier dans vos pages web, de n'utiliser que des minuscules.

Faites de m�me pour les noms de vos dossiers. Tout en minuscules.

N'utilisez pas non plus d'espaces dans les noms de dossier et noms de fichiers images.

Ne soyez pas �tonn�s si "�a ne marche pas" si vous ne suivez pas ces tr�s fortes recommandations.

Ceci ne concerne QUE les dossiers et images que vous allez "publier sur le web", inutile d'aller renommer toute votre collection de photos! votre ordinateur n'a pas de probl�me avec les espaces, les majuscules, c'est seulement le Web qui a occasionnellement ce probl�me.

Juste un exemple de probl�me, sans aller trop loin. Lorsque vous "publierez sur le web" vos pages, dossiers, images, vous utiliserez un logiciel servant � transf�rer ces fichiers de votre ordinateur vers un "serveur web", un autre ordinateur connect� au web, capable de montrer vos pages web � ses visiteurs. Ce transfert se fait par un protocole de transfert nomm� FTP. vous utiliserez un "logiciel client FTP" pour cela, tel "FileZilla", gratuit, efficace et populaire. Il est fort possible qu'� l'arriv�e, vos fichiers se retrouveront sur un ordinateur qui enregistre tous les noms de fichiers et de dossiers en minuscules... Vous envoyez "MonBeauJardin.JPG" et le serveur enregistrera "monbeaujardin.jpg". Dans votre page, vous avez �crit "MonBeauJardin.JPG" et le serveur ne trouvera pas cette image, parce qu'elle s'appelle maintenant "monbeaujardin.jpg", ce qui pour la plupart des "serveurs Web" n'est pas du tout le m�me nom...

Donc, �vitez les ennuis: tout en minuscules, pas d'espaces.

7.5. Questions et r�ponses.

• "J'ai essay�, et au lieu de mon image, le logiciel de navigation montre juste un cadre vide � la place de l'image."
  
  C'est forc�ment parce que le navigateur ne trouve pas l'image. donc, c'est votre attribut src qui a une valeur fausse. Il faut que src ait le nom juste du fichier de l'image, et le chemin juste vers o� ce fichier se trouve. V�rifiez le nom de l'image, v�rifiez que l'image soit sur le serveur, v�rifiez que le chemin soit correct, v�rifiez que tout soit en minuscules et sans espaces.
• "J'ai vu qu'il existe encore d'autres attributs pour la balise img. Pourquoi ne pas les expliquer?"
  
  Parce que c'est une mauvaise id�e de les utiliser. Ils sont d�mod�s, peu efficaces. Ce que font ces autres attributs, nous les ferons par d'autres techniques.
• "Si je ne donne pas la largeur et la hauteur de l'image avec width et height, le logiciel de navigation affiche bien l'image avec ses dimensions originales. N'est-ce pas plus simple de proc�der ainsi?"
  
  Cela para�t plus simple. Mais c'est une mauvaise pratique, c'est d�mod� de faire cela, ce n'est pas sans cons�quences avec certains navigateurs. J'insiste: donnez toujours les attributs width et height et leurs valeurs.
• "Comment centrer une image?"
  
  Je n'en parle pas maintenant. Centrer, comme aligner � droit, ou mettre une bordure, cela ne se fait plus avec des attributs de la balise img, mais avec d'autres techniques, valables de mani�re plus g�n�rale, c'est � dire que centrer une image, centrer un texte, centrer un tableau, tout cela se fait de la m�me mani�re, que nous verrons plus tard.
• "Et si je veux mettre une image de fond pour ma page?"
  
  Cela peut se faire, mais cela ne se fait pas du tout avec la balise img. C'est donc une autre partie du cours expliquera comment d�finir une image de fond pour une page Web.

Oh, la belle image!

Le Web, c'est "la toile". On y navigue. On passe de page en page, de site en site, en cliquant sur des liens.

Les liens sont l'objet du prochain chapitre.

  Pr�c�dent    Haut   Suivant    

patrickgross.org
Vendredi, 9 mai 2025