Exercice HTML : Images inline, images-bouton, objets multimédia

Thème

Connaître les principaux formats d'image supportés par les browsers Web, et les techniques d'insertion et justification d'images en-ligne dans les pages Web.

Caractéristiques des différents formats d'image utilisés sur le Web :

Remarques :

Balises

Images Concernant les attributs ALT et TITLE : Utilité des attributs WIDTH et HEIGHT : Imagettes / images

Lorsque l'on désire intégrer de grandes images dans une page Web, pour accélérer le temps de chargement de la page Web et laisser le choix à l'utilisateur de visualiser ces images, on incorpore généralement à la page des "imagettes" en taille réduite qui offrent des liens permettant de charger les images en grande dimension.

Image EPFL
Image aérienne de l'EPFL (cliquer pour agrandir)
  <A HREF="image.jpg" TITLE="Image aérienne EPFL">
    <IMG SRC="imagette.jpg" BORDER="0" ALT="Image EPFL"><BR>
    Image aérienne de l'EPFL (cliquer pour agrandir)
  </A>

Les outils de "galeries d'images" (tel que notre outil PHP EasyGallery) se basent sur ce principe. Des techniques plus sophistiquées utilisent JavaScript et les layers (voir le script Lightbox).

Objets multimédia

Les 2 balises suivantes sont généralement utilisées pour insérer des objets multimédia en-ligne (image, son, vidéo...) nécessitant en principe des plugins : <EMBED> (depuis Netscape 2 et IE 3) et <OBJECT> (depuis Netscape 2 et IE 2). La norme HTML 4 a officialisé <OBJECT> (que l'on s'efforcera donc d'utiliser plutôt que <EMBED>).

Exemple d'insertion d'image (alternative à <IMG...>) : Exemple d'insertion d'objet QuickTime :

Autres types d'insertion

Pour insérer dans une page Web une ressource externe (sous la forme d'un bloc en-ligne), on utilisera la technique coté serveur SSI (Server Side Include), ou la technique coté client <IFRAME...> (plus risquée car non supportée par anciens navigateurs).


Références

Exercice

 

 EtapeSolution
1 Dans l'application PaintShop Pro, réalisez une petite image analogue à celle ci-dessous, et sauvez-la en format GIF

Nouveau
  • Pour dessiner l'ellipse : outil [Shape] et Shape type "Ellipse" en Style "Filled"
  • Pour le texte : outil [Text] et p.ex police "Arial Black Gras 9 pts"
  • Pour que l'image soit "légère", passez p.ex. de 24bits/pixel (16 millions de couleurs = vraies couleurs) à 4bits/pixel (16 couleurs = couleurs indexées via "palette de couleurs") avec Colors>Decrease Color Depth>16 Colors
  • Pour une image en couleurs indexées (8 bits/pixel ou moins), si vous souhaitez changer par la suite la palette des couleurs : Colors>Edit Palette
  • Pour définir la couleur de transparence (format GIF89a), utilisez Colors>Set Palette Transparency
  • Pour rogner la taille de l'image à une zone prédéfinie par l'outil [Selection], utiliser Image>Crop to Selection
  • Enregistrement : avec File>Save, format d'enregistrement "Compuserve Graphics Interchange *.gif" sous le nom "nouveau.gif"
  • Entrelacement (pour GIF) : dans le fenêtre File>Save as, cliquer sur [Options], puis choisir Interlaced ou Noninterlaced (c'est aussi dans cette fenêtre que l'on choisit le format GIF version87a ou version89a)
2 Testez les modes d'alignement TOP et BOTTOM :

     top

     absmiddle

     bottom

  top <IMG SRC="nouveau.gif" ALIGN="TOP">
  <P>
  absmiddle <IMG SRC="nouveau.gif" ALIGN="ABSMIDDLE">
  <P>
  bottom <IMG SRC="nouveau.gif" ALIGN="BOTTOM">
3 Rapatriez le logo du DGR localement dans votre répertoire

Insérez-le dans votre page Web (n'omettez pas l'attribut ALT, et essayez de trouver à quoi il sert !). Puis associez-y un lien vers le serveur du DGR (l'image devient alors un "bouton") et vérifiez que ce lien fonctionne.

Génie Rural

Puis testez l'effet des valeurs de l'attribut BORDER

  • Pour récupérer une image depuis Netscape, cliquez avec
    <droite> sur l'image et faites Save Image As

  • Code HTML plaçant l'image en-ligne en l'enrobant d'un lien :
    <A HREF="http://ssie.epfl.ch"><IMG ALIGN=middle
       SRC="dgr64.gif" ALT="Génie Rural"
       BORDER="0"></A>
    


Exercices HTML © J.-D. Bonjour / ENAC-IT1, EPFL / Révision 16.4.2006