Réussir son site web avec XHTML et CSS

Transcription

1 Leçon 04 Réussir son site web avec XHTML et CSS Insérer des images 1. Les formats d image du Web...1 Les JPEG...1 Les PNG...1 Les GIF...1 Tableau récapitulatif : Insérer une image dans une page...2 La balise d image...2 Créer une image cliquable...3 Ajouter une infobulle Les formats d image du Web Quand vous avez une image entre les mains, vous avez la possibilité de l'enregistrer dans plusieurs "formats" différents. Le poids (en Ko) de l'image sera plus ou moins élevé selon le format choisi, et la qualité de l'image va changer. Si les pages web sont parfois longues à charger, ce n est pas parce qu elles contiennent beaucoup de texte mais plutôt à cause des images. Il incombe donc au webmaster de choisir le format d image approprié, car selon le format choisi, le poids de l image et sa qualité peuvent varier. Les 3 principaux formats que l on utilise sur le Web sont JPEG, GIF et PNG. Les JPEG Le format JPEG est très répandu. Il est particulièrement adapté pour les photos, c est-à-dire les images comportant beaucoup de couleurs différentes. Les images de type JPEG ont généralement l'extension ".jpg", mais aussi parfois ".jpeg" (ça revient au même). Les PNG Le format PNG est le plus récent de tous. Ce format est adapté à la plupart des graphiques (je serais tenté de dire "à tout ce qui n'est pas une photo"). L'avantage du PNG, c'est qu'il peut être rendu transparent, ce qui est très appréciable. Le PNG existe en 2 versions : PNG 8 bits : le PNG 8 bits est la version du PNG limitée à 256 couleurs. PNG 24 bits : le PNG 24 bits est la version du PNG la plus évoluée, elle supporte plusieurs millions de couleurs (comme le JPEG). Quel intérêt d'utiliser le PNG 24 plutôt que le JPEG? Pour la transparence! Ca permet de créer de beaux effets de transparence facilement sur des éléments graphiques, notamment pour le design de votre site web. Les GIF C est un format assez vieux, qui a été néanmoins très utilisé (et qui reste très utilisé par habitude). Aujourd'hui, le PNG est bien meilleur que le GIF : les images sont plus légères et la transparence est meilleure. Je vous recommande donc d'utiliser le PNG autant que possible. Le format GIF est limité à 256 couleurs (alors que le PNG peut aller jusqu'à plusieurs millions de couleurs). Par contre, le format GIF conserve quand même un avantage que le PNG n'a pas : il peut être animé. Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 04 p.1/5

2 Tableau récapitulatif : Format Nb maximal de couleurs Commentaires Exemples d utilisation JPEG PNG 8 bits 256 PNG 24 bits GIF 256 Les images sont légèrement détériorées pour réduire la taille des fichiers. Ce format est de loin le plus adapté à l enregistrement de photographies. C est un concurrent direct du GIF. Il compresse mieux les images. Celles-ci sont donc plus légères et plus rapides à charger, ce qui explique pourquoi on l utilise de plus en plus. À mi-chemin entre le PNG 8 bits et le JPEG, ce format présente la particularité de ne pas détériorer l image. La transparence sur plusieurs niveaux permet de créer de très belles images adaptées pour un design de site web. Préférez le format PNG 8 bits au GIF dans la mesure du possible. Le GIF est le seul format pouvant créer des images animées. Photographies. Boutons graphiques (peu de couleurs), flèches de navigation, petites icônes Logos et boutons graphiques détaillés (nombreuses couleurs), captures d écran Logos et boutons animés. 2. Insérer une image dans une page La balise d image La balise auto-fermante <img /> permet d insérer une image. Cette balise doit être insérée à l intérieur d une balise de type BLOC, comme la balise de paragraphe <p></p> ou la balise générique de type bloc <div></div>, cette dernière étant à utiliser lorsque l image n a pas lieu de se trouver dans un paragraphe. Cette balise requiert obligatoirement deux attributs : src : précise le chemin vers l image que vous voulez afficher. Comme pour les liens, vous devez utiliser des liens absolus ou relatifs pour indiquer la position du fichier image. alt : permet d indiquer un texte de remplacement, dit alternatif, pour votre image. Ce texte sera affiché à la place de votre image si celle-ci ne peut pas être affichée. Cet attribut est particulièrement utile aux personnes qui ne peuvent pas voir les images, comme c est le cas des non-voyants. Cet attribut est également important pour le référencement. Insérer une image <img src="photo.jpg" alt="texte alternatif" /> Créez dans votre dossier Site-nice un sous-dossier nommé images. Copiez dans ce dossier toutes les photos du dossier XHTML&CSS-04-ressources Dans Notepad++, ouvrez la page carnaval.html Vous allez insérer une bannière à votre site : Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 04 p.2/5

3 Rappel de l architecture du site : SITE-NICE index contact images pages banniere.png nice01.jpg carnaval histoire Ajoutez dans le corps de cette page, après la barre de navigation, le code suivant : <div><img src="../images/banniere.png" alt="bienvenue à Nice!" /></div> Enregistrez la page et testez-la dans un navigateur. Ajoutez à la fin du corps de la page, le code suivant : <h2>site officiel du carnaval</h2> <p>retrouvez toutes les informations sur le carnaval en vous rendant sur le site officiel!</p> Insérez à la suite l image carnaval06.jpg avec comme texte alternatif Lien vers le site officiel Enregistrez la page puis testez-la dans un navigateur. Créer une image cliquable Un lien ne se présente pas obligatoirement sous la forme d un texte. On peut aussi transformer une image en lien et réaliser ce qu on appelle une image cliquable. Le curseur de la souris se transformera alors en une main lorsqu on pointera sur l image, indiquant ainsi à l internaute que l image est un lien. Il suffit pour cela de combiner les balises <a> et <img />. Insérer une image cliquable <div><a href="lien"><img src="photo.jpg" alt="texte alternatif" /></a></div> Vous allez rendre cliquable l image que vous venez d insérer vers le site : Modifiez le code que vous venez d ajouter de la manière suivante : <h2>site officiel du carnaval</h2> <p>retrouvez toutes les informations sur le carnaval en vous rendant sur le site officiel!</p> <div><a href=" src="../images/carnaval06.jpg" alt="lien vers le site officiel" /></a></div> Enregistrez la page puis fermez-la et testez-la dans un navigateur. Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 04 p.3/5

4 Ajouter une infobulle Il est possible d ajouter une infobulle qui s affiche lorsqu on pointe sur l image, comme on l avait fait pour les liens. Cela permet par exemple de donner au visiteur une information supplémentaire sur l image qu il est en train de consulter. L attribut permettant d afficher une infobulle est également l attribut title. Pour ajouter une infobulle à l image, ajoutez à la balise d image l attribut suivant : <div><a href=" src="../images/carnaval06.jpg" alt="lien vers le site officiel" title="cliquez ici pour vous rendre sur le site officiel du carnaval de Nice"/></a></div> Enregistrez la page puis fermez-la et testez-la dans un navigateur. Modifiez la page carnaval.html pour qu elle ressemble à l illustration ci-dessous : Modifiez la page contact.html pour qu elle Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 04 p.4/5

5 Modifiez la page histoire.html pour qu elle Modifiez la page index.html pour qu elle Vous allez rendre cliquable l image de la bannière sur chacune des pages du site en dirigeant le lien vers la page d accueil index.html.. Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 04 p.5/5