Site Web: fonctionnement, structure et programmation
Navigation
Illustrez vos pages !
Insertion d'images
Comme nous l'avons déjà vu dans les premières sections de ce chapitre, l'insertion d'une image en HTML se fait à l'aide de la balise «img». Cette balise se contente de fournir l'endroit où se trouve l'image à afficher en valeur de l'attribut src:
Comme nous pouvons le constater avec l'exemple ci-dessus, l'élément <img> est un élément vide, c'est-à-dire une balise dépourvue de contenu. Dès lors, plutôt que d'écrire <img src="images/boissons.gif"></img>, nous utilisons plutôt l'abréviation <img src="images/boissons.gif">. Cette abréviation est pratique dans la mesure où elle diminue la quantité de balisage dans le HTML.
L'attribut src ne sert pas uniquement à indiquer des liens relatifs. Il est aussi possible de lui donner une URL. En effet, les images sont stockées sur les serveurs web comme les pages HTML et par conséquent chacune d'elles a sa propre URL. Un moyen d'obtenir l'URL d'une image est de faire un clic droit sur celle-ci et de choisir l'option «Copier l'adresse de l'image» ou «Copier le lien» dans le menu contextuel affiché. L'URL d'une image est nécessaire quand l'image se situe sur un serveur web différent de celui où se situe la page contenant l'image:
Une image est un contenu qui ne fait pas parti de la page HTML elle-même. En effet, une page HTML n'est composée que de texte et l'image ne peut dès lors faire corps avec celle-ci. Lors de l'affichage d'une page HTML, chaque image remplace l'élément <img> comme l'illustre l'exemple suivant tiré de la page des coktails du Café Tête la première:
Code HTML du fichier «cocktail.html»
Interprétation du fichier «cocktail.html» par un navigateur web.
La récupération des images par le navigateur s'effectue selon les étapes suivantes:
Le navigateur récupère le fichier cocktail.html sur le serveur:
Le navigateur lit le fichier, l'affiche et se rend compte qu'il doit récupérer quatre images. Il va donc chercher chacune d'elles sur le serveur web en commencçant par cocktail.html sur le serveur:
Quand le navigateur a récupéré le fichier «vert.jpg», il l'affiche puis s'occupe de l'image suivante et ainsi de suite pour chacune des images de la page:
Les attributs d'une images
La balise <img> est dotée d'un certain nombre d'attributs qui permettent d'affiner son utilisation et parmi lesquels nous retiendrons surtout les suivants:
Alternative
Même si un navigateur n'affiche pas les images de votre page, il y a une alternative. Vous pouvez donner à vos visiteurs quelques indications sur le type d'information véhiculé par l'image en vous servant de l'attribut alt de l'élément img:
Taille
Les attributs width et height de l'élément <img> indiquent en amont aux navigateurs la largeur et la hauteur de l'image qui se trouve dans la page. Les deux attributs sont exprimés en pixels. Si vous ne précisez pas d'attributs pour width et height, c'est le navigateur qui déterminera automatiquement la taille de l'image avant de l'afficher:
Exercice 5
Téléchargez le dossier monpod.zip et complétez le code du fichier «index.html» afin d'obtenir un site dont le but est d'afficher des photos de vos amis avec leur iPod partout dans le monde. Vous constaterez que les images ont déjà été modifiées à l'aide d'une application de retouches photos telle que GIMP afin que chacune d'elles tienne dans la fenêtre du navigateur. L'utilisation d'un tel logiciel dépasse le cadre de ce cours. Vous trouverez néanmoins d'excellents tutoriaux sur le Web. Une fois terminé, votre site devra avoir l'allure suivante:
Afin d'y arriver, réalisez chacune des étapes suivantes:
Insérez au bon endroit dans le fichier «index.html» les images situées dans le dossier «vignettes» en les munissant d'une alternative. L'interprétation de votre fichier par le navigateur doit avoir l'allure suivante:
Résultat à obtenir après la première étape
Solution
Comme nous pouvons le constater, l'élément <img> ne crée aucun saut de ligne, ni avant, ni après lui: nous disons que l'élément <img> est un élément en-ligne. Nous reviendrons sur cette notion dans la section suivante. Pour l'instant, notez que lorsque plusieurs images cohabitent dans du HTML, le navigateur les affiche côte à côte, dans la limite de la largeur de sa fenêtre. Si les images avaient été plus grandes, le navigateur les aurait affichées les unes au-dessus des autres sans le moindre espace entre elles.
|
Transformez chaque vignette de la fenêtre principale en un lien vers une page qui contient l'image située dans le dossier «photos» et correspondant à la vignette. Chaque page liée aura le même nom que l'image à laquelle elle correspond et sera enregistrée dans un nouveau dossier intitulé «html». Chaque page contiendra uniquement un titre décrivant la ville dans laquelle la photo a été prise ainsi que la photo elle-même:
Dossier «html» situé dans le répertoire principal
Solution
Code HTML du lien vers le fichier «paris_centre.html»
Code HTML du fichier lié «paris_centre.html»
Pour faire un lien sur une image, il suffit d'imbriquer l'élément <img> dans un élément <a>. Le navigateur considère alors que l'image est cliquable et, lors de chaque clic, il va chercher la page indiquée dans l'attribut href de l'élément >a<. Notons que la plupart des navigateurs insèrent un encadré autour de l'image afin de montrer à l'utilisateur que celle-ci est cliquable. Si vous n'appréciez pas cette apparence, vous pourrez la modifier bientôt grâce aux feuilles de style CSS.
|
Ajoutez au site monPod le logo «monpod.gif» situé dans le répertoire «logo». Placez-le au-dessus de la description du site et des images d'iPod afin que ce soit la première chose que voient les internautes:
Internet
