Vous pouvez me contacter via Facebook (questions, critiques constructives) : page facebook relative à mon site
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.
Pour insérer une image dans une page, le plus simple est d'utiliser HTML et plus précisèment la balise IMG.
L'image sera à l'occasion redimensionnée.
Notez que la balise IMG est une balise simple ; elle ne peut contenir aucune autre balise.
Ces deux images sont côte à côte c'est logique. Par défaut la balise IMG est une balise "inline".
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".
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.
Les huit images ci-dessous sont chacune dans une cellule d'un tableau.
![]() Saumon |
![]() Hareng |
![]() Anguille |
![]() Morue |
![]() Sole |
![]() Vive |
![]() Maquereau |
![]() Tacaud |
Deux règles de style :
td img {display : block; width : 300px ; height : auto ; margin :10px auto 10px auto ; vertical-align : top;} td p {text-align : center; }
Deux règles de style pour les images et les paragraphes contenus dans des cellules de tableau (balise TD).
Le code HTML :
![]() Saumon |
![]() Hareng |
![]() Anguille |
![]() Morue |
![]() Sole |
![]() Vive |
![]() Maquereau |
![]() Tacaud |
Si l'attribut ALT est obligatoire pour que le code HTML soit valide, une valeur reste facultative.
Ces deux images sont centrées horizontalement.
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" !
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".
Blabla ...
blabla ...
blabla ...
blabla ...
blabla ...
blabla ...
Blabla ...
blabla ...
blabla ...
blabla ...
blabla ...
Blabla ...
blabla ...
blabla ...
blabla ...
blabla ...
blabla ...
Blabla ...
blabla ...
blabla ...
blabla ...
blabla ...
Pour placer un élément "inline" dans une boite il faut utiliser la propriété float : left / right
Les images peuvent déborder de leur boite !
Par défaut une boite adapte sa hauteur au texte contenu et non pas par rapport à la hauteur de l'image contenue.
La solution : donner une hauteur minimale à chaque boite DIV, par exemple min-height : 150px
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.
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.
Blabla ...
blabla ...
blabla ...
blabla ...
blabla ...
blabla ...
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
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
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 !
Une boite avec en fond une image dupliquée et du texte :
La propriété background est très utile :
Blabla ...
Blabla ...
Blabla ...
Blabla ...
La propriété background est très utile :
Blabla ...
Blabla ...
Blabla ...
Blabla ...
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" !
La propriété background est très utile :
Blabla ...
Blabla ...
Blabla ...
Blabla ...
L'image n'est insérée qu'une fois !
La propriété background est très utile :
Blabla ...
Blabla ...
Blabla ...
Blabla ...
A la place du raccourci "background" j'ai utilisé deux propriétés préfixées "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