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 n'est pas ouvrante/fermante, tout comme la balise <br> par exemple.
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 et peuvent être insérées avec la balise <img> :
- 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 24bits . png est employé pour les icônes actuelles, comme pour notre pingouin :
- 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.icone-gif.com/indexgif.php
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 l'ajout de deux attributs : src et alt.
- 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 info-bulle 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. L'image SVG peuts'intègrer avec la balise img, avec la balise object mais il est conseillé de réaliser l'insertion en balise SVG .
Cet article présenter très bien la manière d'insérer le SVG : https://css-tricks.com/using-svg/
un rectangle
Pour dessiner directement un rectangle avec la balise SVG, voici comment procéder :
- Mise en place de la balise SVG, péciser la largeur et la hauteur de la zone "SVG"
- Insérer l'élément rectangle rect
- Préciser, sa taille, son remplissage : fill, son contour : stroke
<svg width="300" height="150" > < rect width="250" height="100" style="fill:rgb(88,136,42);stroke-width:2;stroke:rgb(0,0,0)"/> </svg>
un cercle
On utilise circle et on précise les coordonnées du centre du cercle, son rayon, son trait, l'épaisseur de son trait et son remplissage.
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>
Voici les noms 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/graphics/svg_intro.asp
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>
Les balises html 5 : <figure> et <figcaption>
Les nouvelles balises <figure> et <figcaption> permettent un inscription claire de l'image dans le html.
<figure> est une unité de contenu, c'est-à-dire que cet élément sert de conteneur dans lequel s'insèrent divers éléments comme des images, des schémas, des vidéos, des tableaux ou encore des blocs de code. L'objectif est de lier ce contenu à une légende, définie par l'élément <figcaption>.
<figcaption> : enfant direct de <figure>, son rôle est de légender son parent, sous forme de texte et/ou de liens. Il peut se placer avant ou après le contenu principal de <figure>.
Le code CSS est le suivant :
figure {
border:#999 solid 1px;
width: auto; /* pour ajuster la largeur*/
display: table;/*pour donner à figure un comportement de tableau*/
padding:5px;
}
figcaption {
padding:10px;
border-bottom:#099 solid 1px;
font-style:italic;
text-align:center;
}
Les images réactives ("images MAP")
On appelle "image à zones réactives" une image dans laquelle sont définies des zones associées à des liens. On définit des zones réactives et on les associé à un lien. On emploie l'attribut usemap utilisé conjointement avec la balise 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
Voici une premier exemple simple : exercice d'image cliquable
<img src="chocolat/images/imageCliquable.jpg"alt="ex" usemap="#Map"> <map name="Map"> <area shape="rect" coords="10,10,150,150" href="http://fr.wikipedia.org/wiki/Carr%C3%A9" alt="carre " > <area shape="circle" coords="300,149,100" href="http://www.crdecoration.com/blog-decoration/wp-content/uploads/2009/03/cercle-chromatique1.jpg" alt="cercle chromatique" > </map>
Le second, exemple, une carte, montre que l'on peut céer des zones cliquables à complexes.
Voici le code associé à l'image map:
<img src="macarte.jpg"alt="carte" usemap=#map/>
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>
Pour en savoir plus : http://www.w3schools.com/tags/tag_map.asp
Voici un autre exemple d'image réactive : voir l'exercice
Fond de page - image étirable
Pour insérer une image étirable. Il est nécessaire de trouver une image de haute résolution, au moins de 1200 pixels de large. Puis on insère le code suivant dans la feuille de style du body, comme on peut le voir dans l'exemple suivant
body {
background-image:url(images/pokemon-list.png);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}