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
Dimanche, 11 mai 2025