Les images
Afin de rendre un site plus agréable, on y ajoute des images. Un site sans image est triste et monotone mais attention à ne pas placer trop d'images, elles fatiguent le regard.
Pour insérer une image dans du HTML on va employer la balise <img/>. La balise image ne fonctionne pas paire, tout comme la balise <br/> que nous avons précédemment vu. Il est donc très important de ne pas oublier de placer le slash en fin de balise, afin de rendre la balise accessible et de respecter les normes du W3C.
Les formats d'images
Les images employées en HTML sont des images compressées et donc ne ralentiront pas l'affichage de la page html. Seuls les formats d'images suivants sont acceptés en standard dans les spécifications du W3C :
- Les images .jpg : ce format est très répandu. Il est particulièrement adapté pour les photos.
Les images .png : C'est le format le plus récent. Il est adapté à la plupart des dessins et surtout il peut être transparent sans bordure. Il existe en deux versions : en 8 bits (pour des images de 256 couleurs maximum) et en 24 bits avec un petit bémol : le navigateur IE 6 l'interprète mal... Le png est employé pour les icônes actuelles, comme ci dessous :
- Les images .gif: ce format est limité à 256 couleurs maximum et il n'est pas totalement libre. Il peut être animé.
On en trouve de nombreux sur ce site : http://www.gif-anime.or
Il est important de bien choisir son format d'image et de bien optimiser sa compression.
Des logiciels comme Photoshop ou Gimp permettent de bien préparer les images pour les placer sur le Web.
Dans Photoshop, allez dans Fichier > enregistrer pour le Web et vous trouverez des options d'enregistrement des images.
Pour les images jpg, vous pouvez choisir le niveau de compression et un cadre vous propose la taille du fichier pour telle ou telle compression.
Pour les images gif, vous pouvez choisir les options perceptive, sélective, adaptative, Web, le tramage, la transparence et le nombre de couleurs : 2, 4, 8, 16, 32, 64, 128, 256.
Pour les images png, vous avez les options de compressions 8 bits ou 24 bits.
Pour toutes les images, il existe une option de taille de l'image, cela permet de réduire la taille des images en proportion.
Insérer une image
Le code nécessaire pour insérer une image nécessite une précision d'un élément : l'attribut. Un attribut, c'est en quelque sortes une propriété que l'on précise au niveau de la balise ouvrante. Et comme toute propriété, on peut leur affecter une valeur.
Pour affecter une valeur à un attribut, on utilise le signe = (égal). Cela s'écrit attribut="valeur".
Selon le type d'attribut, la valeur sera du texte, un nombre, ou n'aura pas de valeur du tout.
Pour insérer une image, on doit donc employer la balise <img />. Elle peut prendre plusieurs attributs, et 2 d'entre eux sont indispensables :
- src : il indique où se trouve l'image que l'on veut insérer. On peut écrire le chemin en absolu (ex. : "http://www.site.fr/monimage.png"), soit écrire le chemin en relatif (ce qu'on fait le plus souvent). Il est d'usage de rassembler les images dans un dossier "images", le code sera donc: <img src="images/monimage.png"/>
- alt : signifie "texte alternatif". On doit toujours indiquer un texte alternatif à l'image, c'est à dire une description courte. Ce texte sera affiché à la place de l'image si celle-ci ne s'affiche pas, ou s'il s'agit de personnes handicapées (non-voyants) <img src="images/monimage.png" alt="mon image"/>
Sans cet ajout de texte alternatif, votre site ne sera pas valide W3C.
Les attributs suivants ne sont plus valides : border, hspace, vspace, align
Certains attributs sont tolérés mais pas indispensables :
- title : il permet d'afficher une infobulle lors du survol de l'image par le curseur
- width : il spécifie la largeur de l'image
- height : il spécifie la hauteur de l'image
Nous verrons dans le chapitre consacré aux CSS la façon d'insérer les images au milieu du texte, en employant des calques et des styles.
Les images SVG
On peut aussi insérer des images SVG dans une page HTML. Le SVG est un format vectoriel.
On peut écrire le code lorsqu'il est simple, comme dans cet exemple où l'on précise : les coordonnées du centre du cercle, son rayon, son trait, l'épaisseur de son trait et son remplissage.
<svg > <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>
Voici les nom pour les principale formes simples : Rectangle <rect>, Circle <circle>, Ellipse <ellipse>, Line <line>,Polyline <polyline>, Polygon <polygon>. Pour en savoir plus rendez vous sur le site http://www.w3schools.com/svg/
Les images SVG complexes sont créées à l'aide de logiciels vectoriels comme Illustrator, Inkscape, Open office draw. On enregistre sous >.svg. Si l'image comporte du texte et qu'on ne vectorise pas le SVG, le texte est sélectionnable dans la page. On insére les images svg à l'aide de balise <svg></svg>
On copie puis colle le code généré par la logiciel vectoriel. Lorsque l'on zoome sur l'image, elle ne se pixélise pas. Voici un exemple :
Une image cliquable
On peut réaliser une image cliquable en plaçant un lien sur une image. Voici comment procéder :
<a href="URL"><img src="image" alt="description"/></a>
Dans l'exemple suivant l'image est cliquable et mène sur un site consacré aux logos festifs de google :
Les images réactives ("images MAP")
On appelle "image cliquable" une image dans laquelle sont définies des zones associées à des liens. Selon l'endroit où l'on clique sur la carte, un lien différent est activé. Il est possible de créer des zones cliquables à l'intérieur même d'une image grâce à l'attribut usemap utilisé conjointement avec la balise map.
Voici le code associé à l'image map:
<img src="macarte.jpg"alt="carte" usemap=#map/>
La balise <MAP> a un attribut name définissant son nom (name="nom") et contient les zones cliquables déclarées grâce à des balises area.
La zone cliquable, area shape, peut prendre plusieurs formes :
- rect : rectangulaire, ses coordonnées sont : abscisse sup gauche, ordonnée sup gauche,
abscisse inf droit, ordonnée inf droit - circle : cercle, ses coordonnées sont: abscisse centre, ordonnée centre, et la longueur de son rayon
- poly : polygone (ses coordonnées sont: la suite des coordonnées séparées par des
virgules qui correspondent à des vecteurs, on peut en placer 100)
L'attribut coords contient les coordonnées de la zone cliquable, séparées par des virgules
Pour l'exemple ci-contre, j'ai dessiné deux zones cliquables : une pour la Haute Corse et la seconde pour la Corse du Sud.
J'ai réalisé les zones cliquable en m'aidant d'un logiciel (dreamweaver) qui a rédigé pour moi les points du polygone. Voici le code :
<img src="images/corse.jpg" alt="carte corse" usemap="#Map"/> <map name="Map">
<area shape="poly" coords="24,103,131,-8,152,146,130,189,24,103" href="http://fr.wikipedia.org/wiki/Haute-Corse" alt="haute corse " />
<area shape="poly" coords="21,120,52,252,104,291,129,204,21,120" href="http://fr.wikipedia.org/wiki/Corse-du-Sud" alt="corse du sud" />
</map>