Exercice 2

Appliquer des hyperliens à des images et créer des zones réactives

Ce travail sur les images comporte deux volets. Il s’agira d’abord d’appliquer des hyperliens à des images, puis de créer des zones réactives.

Pour ce faire, vous utiliserez l’éditeur de code de votre choix, le logiciel d’édition d’images Paint (accessible au C-3001 par le menu Démarrer > Image son compression > Paint), ainsi que le validateur de balisage du W3C (http://validator.w3.org/)

Fichier(s) requis

Partie A – Insertion d’images et application d’hyperliens

Directives

  1. Créez un nouveau document XHTML 1.0 Strict.
  2. Téléchargez le fichier images_exercice2 (voir la section Fichiers requis) et placez le dossier au même niveau que le document XHTML que vous venez de créer.
  3. Sélectionnez une image qui vous plaît dans le dossier d’images, puis insérez-la, accompagnée des attributs appropriés, dans votre page XHTML.
  4. Encadrez l’image que vous venez d’insérer par une balise d’hyperlien référant à un site externe de votre choix.
  5. Faites de même avec deux autres images.
  6. Validez votre code.

Qu’en pensez-vous?

Quels sont les attributs, devant nécessairement être appliqués à l’élément permettant l’insertion d’une image, pour que le code soit conforme à la recommandation XHTML 1.0 du W3C?

Quel attribut permet de faire afficher une info-bulle décrivant le contenu de l’image?

Quelle est la distinction entre les attributs alt et title?

Partie B – zones réactives rectangulaires

Directives

  1. Insérez dans le corps du document, entre des balises de niveau bloc (ex.<p> ou <div>), l’image bandeau_jardin.jpg. N’oubliez pas l’attribut obligatoire alt, et ajoutez un attribut usemap, afin de référer à la “carte-image” que vous allez créer.
  2. Toujours dans l’élément de bloc dans lequel vous avez inséré le bandeau_jardin, ouvrez un élément <map> que vous qualifierez par un attribut name, auquel vous donnerez le nom déterminé à l’étape précédente. Saisissez dès maintenant la balise de fermeture de l’élément <map>.
  3. Entre les balises d’ouverture et de fermeture de l’élément <map>, insérez une balise en ligne <area> qui vous permettra de définir une zone réactive dans l’image, puis :
    • Insérez l’attribut alt auquel vous donnerez la valeur Hémérocalles roses.
    • Insérez l’attribut shape auquel vous donnerez la valeur rect.
    • Insérez l’attribut coords auquel vous donnerez comme valeur (en pixels) le chiffre correspondant au coin supérieur gauche de la zone réactive sur l’axe des x et des y (x1, y1), suivi d’une virgule et du chiffre correspondant au coin inférieur droit sur l’axe des x et des y (x2, y2). Par exemple, les valeurs de la première section réactive sont 0, 0, 200, 150.
    • Insérez l’attribut href auquel vous donnerez comme valeur le nom du fichier de l’image grand format à laquelle correspond la zone réactive (hemerocalles-roses.jpg).
  4. Répétez l’étape 6 pour chacune des 3 autres sections du bandeau_jardin, en remplaçant les valeurs par celles correspondant à ces zones.
  5. Fermez l’élément map puis l’élément de bloc dans lequel il est contenu.
  6. N’oubliez pas d’inclure des commentaires significatifs de la structure du document que vous traitez.
  7. Validez votre code.

Astuce

Pour trouver les coordonnées d’une zone réactive, ouvrez l’image que vous traitez dans un logiciel d’édition d’images tel que Paint, Photoshop, etc. Pointez le curseur sur les points que vous devez définir sous l’attribut coords, notez-les (Paint les affiche dans la barre d’état au bas de la fenêtre du logiciel), et reportez-les comme valeur de l’attribut coords.

Pour une zone circulaire (shape=”circle”), les valeurs de l’attribut coords sont “x, y, r“, où x et y représentent le centre du cercle tandis que r est son rayon.

Pour une zone polygonale (shape=”poly”), les valeurs de l’attribut coords sont “x1, y1, x2, y2, x3, y3, x4, y4“. Ajoutez autant de couples x, y que le polygone irrégulier contient de sommets.

Notez qu’il n’y a pas d’espace entre les valeurs et les virgules, et que l’axe des x est l’axe horizontal, tandis que l’axe des y est l’axe vertical.

Partie C – zones réactives diverses

Directives

  • En utilisant des images de votre choix, créez des zones réactives de formes diverses. Vous pouvez utiliser vos propres images, ou encore en télécharger à partir de sites qui proposent des images libres de droits ou pouvant être utilisées gratuitement à des fins pédagogiques ou personnelles (quelques sites sont proposés sous la rubrique Ressources).

Ressources

  • Castro, E. (2006). HTML4 avec XHTML et CSS. Paris, CampusPress.
  • Centre collégial de développement de matériel didactique (CCDMD). Le Québec en images. Un album libre de droits. http://www.ccdmd.qc.ca/quebec (Page consultée le 26 janvier 2010)
  • Nielsen, J. (2004). Conception de sites Web : l’art de la simplicité. Paris, CampusPress.
  • Université de Montréal. Direction des bibliothèques. Calypso. Collection d’objets numériques. http://calypso.bib.umontreal.ca (Page consultée le 26 janvier 2010)
  • W3 Schools. W3Schools Online Web Tutorials, [En ligne]. http://www.w3schools.com (Page consultée le 26 janvier 2010).
  • W3C. W3C Markup Validation Service, [En ligne]. http://validator.w3.org (Page consultée le 26 janvier 2010).
Browse: Accueil / Enseignement / INU3051 – Information et sites Web / Exercice 2

À propos de ce site…

En plus de présenter mes activités de recherche et d'enseignement, ce site cherche aussi à diffuser des informations (bibliographies, listes des principales conférences, etc.) dans les domaines reliés à l'analyse et à la gestion des documents textuels.

Si vous cherchez de l'information à mon sujet et que vous le faites en utilisant Google, veuillez noter que je ne suis ni le comptable en management accrédité du Québec, ni l'amateur de tuning, ni le bassiste.

RSS des cours