Accueil
Mes tutoriels sur la programmation

Traduction

Débuter en HTML & CSS - sommaire

Contenu de la page à la suite du sommaire.

Vous pouvez me contacter via Facebook (questions, critiques constructives) : Page Facebook relative à mon site

Débuter en HTML & CSS : insérer des images dans une page web

Dans un chapitre précédent je vous ai présenté les différents types d'images pouvant être insérés dans une page web : les images matricielles et moins connues mais promis à un bel avenir, les images vectorielles (le plus souvent au format SVG).
Pour insérer une image (matricielle ou vectorielle) dans une page vous pouvez utiliser HTML ou CSS.

Emploi du HTML : la balise IMG

Pour insérer une image dans une page, le plus simple est d'utiliser du code HTML et plus précisèment la balise IMG.
L'image sera à l'occasion redimensionnée.

Disposition par défaut des images

Le code correspondant

Notez que la balise IMG est une balise orpheline ; elle ne peut contenir aucune autre balise.

Ces deux images sont côte à côte c'est logique. La balise IMG est une balise "inline" mais on peut la transformer en élément "block".
Les deux images sont redimensionnées : largeur = 30% de celle du conteneur parent ; hauteur recalculée dans le respect des proportions.

Par défaut les images sont alignées verticalement par le bas ! Ce qui n'est pas très joli. En effet valeur par défaut de vertical-align est "baseline".

Solution

trikini bikini

Le code corrigé :

L'attribut alt n'est pas obligatoire pour le navigateur mais exigé par la spécification sinon le code HTML n'est pas considéré comme valide.
La valeur de cet attribut est un texte alternatif qui s'affiche uniquement si l'image n'a pu être chargée.
Cet attribut est aussi utilisé dans le cadre du SEO (référencement naturel de la page).

J'ai rajouté aussi une règle de style en ligne via l'attribut style. Il serait plus logique de créer une classe CSS pour simplifier le code HTML.

Centrage de l'image dans sa boîte parente : technique ancienne

bukini nu artistique

Ces deux images sont centrées horizontalement.

Le code CSS & HTML correspondant

J'ai rajouté à chaque élément IMG l'attribut TITLE. Il y a alors ajout d'une étiquette lisible seulement lorsque l'utilisateur laisse la souris sur l'image.
Grâce à la classe "centrage" l'image concernée devient un élément "block" qui est centré horizontalement dans son conteneur avec une largeur égale à 40% de celle du conteneur.
Je rappelle que "margin:auto" ne peut s'appliquer qu'à des éléments "block" !

Nouvelle technique pour centrer : emploi de la balise FIGURE

La spécification HTML 5 introduit la balise FIGURE. Je n'en dis pas plus, visitez dans le même site le "tutoriel HTML - version 5".

Positionner une image ou plusieurs images "inline" dans sa boite "parente"

Si on veut que le texte d'un paragraphe encadre une image, il suffit de faire "flotter" cette image à gauche ou à droite dans son conteneur (le paragraphe).

Les classes CSS utilisées dans les exemples ci-dessous :

Notez bien la propriété "float: left" pour la première classe ; "float : right" pour la seconde !

Premier exemple

photo sexy Huic Arabia est conserta, ex alio latere Nabataeis contigua; opima varietate conmerciorum castrisque oppleta validis et castellis, quae ad repellendos gentium vicinarum excursus sollicitudo pervigil veterum per oportunos saltus erexit et cautos. haec quoque civitates habet inter oppida quaedam ingentes Bostram et Gerasam atque Philadelphiam murorum firmitate cautissimas. hanc provinciae inposito nomine rectoreque adtributo obtemperare legibus nostris Traianus conpulit imperator incolarum tumore saepe contunso cum glorioso marte Mediam urgeret et Parthos.

Accedebant enim eius asperitati, ubi inminuta vel laesa amplitudo imperii dicebatur, et iracundae suspicionum quantitati proximorum cruentae blanditiae exaggerantium incidentia et dolere inpendio simulantium, si principis periclitetur vita, a cuius salute velut filo pendere statum orbis terrarum fictis vocibus exclamabant.

L'image se positionne à gauche et le texte est décalé à sa droite.

Le code HTML correspondant :

Deuxième exemple

Accedebant enim eius asperitati, ubi inminuta vel laesa amplitudo imperii dicebatur, et iracundae suspicionum quantitati proximorum cruentae blanditiae exaggerantium incidentia et dolere inpendio simulantium, si principis periclitetur vita, a cuius salute velut filo pendere statum orbis terrarum fictis vocibus exclamabant.

Le texte continue désormais sous les images flottantes ; il n'ya plus de retrait.
Huic Arabia est conserta, ex alio latere Nabataeis contigua; opima varietate conmerciorum castrisque oppleta validis et castellis, quae ad repellendos gentium vicinarum excursus sollicitudo pervigil veterum per oportunos saltus erexit et cautos. haec quoque civitates habet inter oppida quaedam ingentes Bostram et Gerasam atque Philadelphiam murorum firmitate cautissimas. hanc provinciae inposito nomine rectoreque adtributo obtemperare legibus nostris Traianus conpulit imperator incolarum tumore saepe contunso cum glorioso marte Mediam urgeret et Parthos.

Le code correspondant :

Une image positionnée à gauche et une autre à droite.
Le texte du premier paragraphe est en retrait tant à gauche qu'à droite.
Par contre le texte du deuxième paragraphe n'est plus en retrait ; on a mis fin au retrait grâce à la propriété CSS "clear: both" appliquée au paragraphe.

Risque de déformation d'une image

Exemple

Règle de style dans la feuille de style externe :

	img {width : 200px ; }

Règle de style dans la feuille de style de la page :

	img {height : 200px ; }

Conséquence : dans la page toutes les images seront affichées avec la taille 200 par 200.
Donc si leur ratio d'origine largeur/hauteur est différent de un, les images seront déformées !!!

Solution :
Dans la feuille de style interne il faut écrire la règle de style de la façon suivante :

	img {height : 200px ; width : auto ;  }

Vous forcez le navigateur à recalculer la largeur (width : auto) afin de respecter le ratio d'origine entre hauteur et largeur.

Classes pour les éléments IMG

Dans une page certaines images doivent être affichées avec une grande taille, d'autres avec une taille moyenne et enfin d'autres doivent être minuscules (logo).
Il est donc fortement conseillé de créer différentes classes pour les éléments IMG.

Le code d'une page

CSS : 3 classes pour les images ; à chaque fois recalcul de la largeur en fonction de la hauteur ou inversement afin qu'il n'y ait jamais déformation.

HTML : chaque image se voit appliquer une classe. Rendu de ce code

Autres balises pour insérer des images

Dans certains cas un document SVG (document Inkscape le plus souvent) ne peut être inséré avec la balise IMG ; il faut alors utiliser la balise OBJECT.
Voir tutoriel Inkscape

La norme HTML5 propose aussi la nouvelle balise PICTURE.
Cette balise est très utile pour faire du "responsive design" puisqu’elle permet de changer la source d’une image en fonction de la taille d’écran.
Voir tutoriel HTML - version 5

Insérer une image via CSS

Les propriétés CSS préfixées "background-" (ou le raccourci "background") peuvent être employées pour placer une image en guise de fond d'une boite.
Le texte éventuel de la boite se placera au dessus de l'image !

Exemple 1

Une boite avec en fond une image dupliquée et du texte :

La propriété background est très utile :
Blabla ...
Blabla ...
Blabla ...
Blabla ...

Le code correspondant

Si vous voulez superposer du texte sur une image il faut créer une boite contenant l'image via le raccourci background
Cette image doit être relativement transparente afin que le texte reste lisible.
Par défaut si l'image est insérée avec sa taille native et si celle-ci est plus petite que la boite conteneur, elle est répétée sur les deux axes car la valeur par défaut de "background-repeat" est "repeat" !

Exemple 2

La propriété background est très utile :
Blabla ...
Blabla ...
Blabla ...
Blabla ...

L'image n'est insérée qu'une fois !

Le code correspondant

A la place du raccourci "background" j'ai utilisé deux propriétés préfixées "background-".

CSS3 et propriétés "background-"

Avec la spécification CSS 3, de nouvelles propriétés préfixées "background-" apparaissent.
Je n'en dis pas plus dans cette page ; visitez le tutoriel CSS.
Vous verrez que les nouveautés sont impressionnantes ...
Tutoriel CSS - version 3