Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Intégrer des images dans une page xHTML

Par celynette (celine moulard), le 10 août 2011

Ce chapitre traitera, comme son nom l'indique, des images! Jusque là tout va bien! C'est un chapitre qui s'adresse aux débutants en CSS, mais qui souhaiteraient néanmoins savoir intégrer des images facilement.

Prérequis
  • Tutoriel pour débutants.
  • Connaissances basiques du CSS et du HTML
  • Ce tutoriel ne nécessite pas de connaissances particulières à partir du moment où « background-image:url('monimage.jpg'); » ne vous fait pas fuir vous pouvez lire la suite!

Bonne lecture!

Choisir le bon format au bon moment

Il faut savoir qu'il existe différents formats d'images! Chaque format ayant ses propres caractéristiques, de plus, le poids de l'image sera plus ou moins élevé suivant le format choisi. Il en va de même pour la qualité de l'image. Il est donc important de les connaître.

JPEG

Le format JPEG est très répandu. Il est tout particulièrement adapté pour les photos. Exemple:

PNG

Le format PNG est le plus récent de tous. Ce format est adapté à la plupart des graphiques et a l'avantage de très bien supporter la transparence. Le format png possède deux versions, la première réduite à 256 couleurs (8bits) et la seconde, qui supporte plusieurs millions de couleur (24bits) elle offre une qualité comparable au jpeg! La transparence en plus. Attention, la version 24bits du format png n'est pas bien supporté par IE6. Le dit-navigateur peut afficher l'image, mais n'affichera pas la transparence.

GIF

Même si ce format est relativement ancien, il reste très utilisé! Quand bien même le png est plus performant que le gif, l'avantage considérable de ce format reste la possibilité d'animation! Pratique dans les forums pour les smileys!

Exemple: Sapin animé

Autres formats

Les autres formats, dont on va donner le nom juste après, sont à bannir des environnement de développement car ils ne sont pas compressés, donc trop gros, et donc absolument pas adaptés au web.

En bref, il s'agit des formats suivant:

  • Le format BMP est le format par défaut du logiciel Windows. Les images ne sont pas compressées.
  • DXF, peu répandu ailleurs que dans le dessin assisté par ordinateur, il s'agit du format créé par la compagnie AutoDesk pour son logiciel de CAO AUTOCAD.
  • PCX : Le format PCX est utilisé par le logiciel Paintbrush sous Windows.

Il en existe bien d'autre mais on ne va pas s'en préoccuper pour le développement web. Gardez en mémoire les trois principaux.

Ils couvrent à eux seuls tous vos besoins! Si vous avez besoin d'intégrer une photo, ou une image sans transparence choisissez le format JPEG. Pour un graphique, ou une image avec de la transparence (attention à IE6), préférez le format .png, et enfin, pour toute image animée, il vous reste le .gif!

Voilà, vous avez les bases pour savoir choisir le format en fonction de son utilisation. Passons à la pratique!

Comment intégrer une image à ma page xhtml?

La balise img

Pour cela il existe une balise

<img/>

Comme vous pouvez le constater c'est une balise unique, contrairement à celle des liens, par exemple, qui a besoin de balise </a> de fermeture.

Comme toute balise html, elle possède plus d'un attribut! Nous allons tout d'abord, nous arrêter sur les deux principaux et surtout INDISPENSABLES attributs!

Le premier attribut est, et vous l'aurez deviné, celui qui précise la source de l'image! On l'écrit de cette manière :

 <img src="maphoto.jpeg" />

Le second attribut est: alt. Cela signifie “texte alternatif”. Il faut toujours en indiquer un. Au cas où l'image ne s'afficherait pas, le visiteur verra donc le texte alternatif et saura qu'à la place de celui-ci, il y avait telle ou telle image.

Pour afficher maphoto sur mon site voici comment je dois l'écrire:

<img src="maphoto.jpeg" alt="Photo de mon chat" />

Voilà! Pour afficher une image, rien de plus simple! Une balise, deux attributs et le tour est joué!

Attributs secondaires

On peut ensuite s'amuser à rajouter quelques attributs secondaires:

title

title= "";

sert à afficher une bulle d'aide.

Redimensionner une image?

Les attributs de tailles peuvent être directement intégrés au code de la page! Avantage: Le chargement de la page est plus rapide car le navigateur n'a pas besoin de la recalculer. Pratique également pour redimensionner une image sans passer par un logiciel. On utilise donc les attributs width et height.

border

Border, pour entourer l'image (à savoir qu'il est possible de mettre cet attribut dans le code css pour ne pas surcharger le code html). J'y reviendrais plus en détail à la fin de ce tutoriel.

Espacer les images

Dans le cas où vous auriez une liste d'images, il est possible de préciser un espacement par défaut directement dans votre code html. Pour cela, on utilise:

hspace=n vspace=n

(n étant un nombre en pixels) vous pourrez indiquer un espace vertical et horizontal autour de l'image. (Toujours possible avec le css!)

Positionner et aligner une image ??

Par défaut l'image est placée sur une ligne et, le texte s'il est présent est aligné en bas de l'image. Si vous voulez encadrer une image avec du texte , il faudra utiliser, l'attribut align. Il possède 9 attributs :

  • left : Texte à gauche
  • right : Texte à droite
  • middle : Texte au milieu
  • absbottom : Texte en bas (absolu)
  • abmiddle : Texte au milieu (absolu)
  • baseline : Sur la ligne du texte
  • bottom : Texte en bas
  • texttop: Texte en haut
  • top : En haut
L'attribut align dans du code html est néanmoins obsolète et n'est donc pas supporté pour les versions HTML 4.01 Strict / XHTML 1.0 Strict.

Vous avez bien entendu les mêmes possibilités avec du css (float, text-align etc…)

Exemple de code html:

<img src="assets/img/thumb_art4.jpg" alt="miniature_article" align="right" />

Sachez néanmoins que les images doivent être obligatoirement placées à l'intérieur d'un paragraphe (<p></p>). Même si la page s'affiche correctement, elle ne sera plus valide!!!

Un dernier attribut après j'arrête de vous embêter avec ça. Il s'agit de la balise map.

La balise map

Elle est utilisée pour définir différentes régions cliquables sur une image donnée. On peut donc définir plusieurs liens sur une même image.

La balise <map> doit être utilisée avec la balise <area> qui, elle, possède trois attributs :

1)shape qui peut prendre trois valeurs :

  • rect : Pour un rectangle
  • circle : Pour un cercle
  • poly : Pour un polygone

2)coords :

  • Indique les coordonnées des coins supérieurs gauche et inférieur droit de la zone pour un rectangle rect
  • Indique les coordonnées de chaque angle du polygone si vous optez pour la valeur poly
  • Indique les coordonnées du centre du cercle et la dimension du rayon de ce même cercle pour la valeur circle

3)href définit la page de destination du lien correspondant à la zone. Vous pouvez bien entendu, utiliser un lien interne ou externe.

Voici le code complet pour ce genre de balise:

Pour lier l'image à la balise, on doit utiliser le même nom dans le name de map et le usemap! Le code précédent donne ceci:

Désolée pas d'animation sur l'image, mais il s'agit donc d'une image avec deux zones distinctes. L'une renvoie vers la page contact.php et l'autre vers un moteur de recherche ;)

Autre manière pour rendre une image cliquable c'est de l'insérer dans un lien comme ceci:

Ce qui donne:

J'ai volontairement laissé une bordure (ici elle est grise) mais sachez qu'avec quelques lignes de css il est possible de la supprimer ou de la personnaliser!

Voici mon code CSS:

Bien entendu si vous souhaitez supprimer cette bordure, il vous suffit de noter:

img(ou le nom de la classe dans laquelle figureraient les images)
{
	border:none;
}

Personnaliser la bordure

Petit rappel des valeurs que peut prendre border afin de pouvoir personnaliser la bordure à l'infini:

border :npx aspect couleur;
  • où n est le nombre de pixels,
  • aspect est le mot clé de la liste suivante:
  * none : pas de bordure, valeur par défaut, sauf sous IE où il est possible d'avoir une jolie bordure bleue.
  * hidden : bordure cachée
  * solid : ligne pleine
  * double : ligne double (nécessite une taille de bordure de 3px minimum)
  * ridge : effet 3D
  * dashed : en tirets
  * dotted : en pointillés
  * inset : effet 3D cadre comme "enfoncé"
  * outset : effet 3D surélevé

et couleur, la couleur appliquée à la bordure. On peut l'écrire en toute lettre, comme je l'ai fait pour l'exemple ou bien prendre son code RGB ou hexadécimal.

Quelques exemples de rendu:

Les images dans les listes à puces

Il se peut que vous soyez amener à vouloir personnaliser vos listes à puces avec des images. Pour cela, il faut utiliser la propriété

list-style-image: url("image.png");

Le mieux pour ce type d'image est le format png puisqu'il gère la transparence. Pour le reste de la personnalisation des listes rdv sur ce tutoriel

Conclusion

Voilà vous avez maintenant toutes les bases pour intégrer des images à votre site internet. Bon code ;)

Autres cours