Les images peuvent améliorer la conception et l’apparence d’une page Web.

Syntaxe des images HTML

En HTML, les images sont définies avec la <img>balise.

La <img>balise est vide, elle contient uniquement des attributs et n’a pas de balise de fermeture.

L’ srcattribut spécifie l’URL (adresse Web) de l’image:<img src= »url« >

L’attribut alt

L’ altattribut fournit un texte alternatif pour une image, si l’utilisateur pour une raison quelconque ne peut pas la visualiser (en raison d’une connexion lente, d’une erreur dans l’attribut src ou si l’utilisateur utilise un lecteur d’écran).

La valeur de l’ altattribut doit décrire l’image:

Exemple

Essayez-le vous-même

Si un navigateur ne trouve pas d’image, il affichera la valeur de l’ alt attribut:

Exemple

Essayez-le vous-même

Remarque: l’ altattribut est obligatoire. Une page Web ne sera pas validée correctement sans elle.

Taille d’image – largeur et hauteur

Vous pouvez utiliser l’ styleattribut pour spécifier la largeur et la hauteur d’une image.

Exemple

Essayez-le vous-même

Vous pouvez également utiliser les attributs widthet height:

Exemple

Essayez-le vous-même

Les attributs widthet heightdéfinissent toujours la largeur et la hauteur de l’image en pixels.

Remarque: spécifiez toujours la largeur et la hauteur d’une image. Si la largeur et la hauteur ne sont pas spécifiées, la page peut scintiller pendant le chargement de l’image.

Largeur et hauteur, ou style?

Les width, heightet styleattributs sont valides en HTML.

Cependant, nous suggérons d’utiliser l’ styleattribut. Il empêche les feuilles de styles de changer la taille des images:

Exemple

<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>

</body>
</html>

Essayez-le vous-même

Images dans un autre dossier

S’il n’est pas spécifié, le navigateur s’attend à trouver l’image dans le même dossier que la page Web.

Cependant, il est courant de stocker des images dans un sous-dossier. Vous devez ensuite inclure le nom du dossier dans l’ srcattribut:

Exemple

Essayez-le vous-même

Images sur un autre serveur

Certains sites Web stockent leurs images sur des serveurs d’images.

En fait, vous pouvez accéder aux images à partir de n’importe quelle adresse Web dans le monde:

Exemple

Essayez-le vous-même

Vous pouvez en savoir plus sur les chemins d’accès aux fichiers dans le chapitre Chemins d’ accès aux fichiers HTML .

Images animées

Le HTML permet des GIF animés:

Exemple

Essayez-le vous-même

Image en tant que lien

Pour utiliser une image comme lien, placez la <img>balise à l’intérieur de la <a> balise:

Exemple

Essayez-le vous-même

Remarque: border:0; est ajouté pour empêcher IE9 (et versions antérieures) d’afficher une bordure autour de l’image (lorsque l’image est un lien).

Image flottante

Utilisez la floatpropriété CSS pour laisser l’image flotter à droite ou à gauche d’un texte:

Exemple

<p><img src= »smiley.gif » alt= »Smiley face » style= »float:right;width:42px;height:42px; »>
The image will float to the right of the text.</p>

<p><img src= »smiley.gif » alt= »Smiley face » style= »float:left;width:42px;height:42px; »>
The image will float to the left of the text.</p>

Essayez-le vous-même

Lecteurs d’écran HTML

Un lecteur d’écran est un logiciel qui lit le code HTML, convertit le texte et permet à l’utilisateur «d’écouter» le contenu. Les lecteurs d’écran sont utiles pour les personnes ayant une déficience visuelle ou des troubles d’apprentissage.

Résumé de la section

Utilisez l’ <img>élément HTML pour définir une image
Utilisez l’ srcattribut HTML pour définir l’URL de l’image
Utilisez l’ altattribut HTML pour définir un autre texte pour une image, si elle ne peut pas être affichée
Utilisez le HTML widthet les heightattributs pour définir la taille de l’image
Utilisez le CSS widthet les heightpropriétés pour définir la taille de l’image (alternativement)
Utilisez la floatpropriété CSS pour laisser flotter l’image

Le chargement des images prend du temps. De grandes images peuvent ralentir votre page. Utilisez les images avec soin.

Exercices HTML

Cartes d’images HTML

❮ Précédent Suivant ❯

Avec les cartes d’images, vous pouvez ajouter des zones cliquables sur une image.

Cartes d’images

La <map>balise définit une image-map. Une image-carte est une image avec des zones cliquables.

Cliquez sur l’ordinateur, le téléphone ou la tasse de café dans l’image ci-dessous:

Exemple

Essayez-le vous-même

Comment ça marche?

L’idée derrière une carte d’image est que vous devriez pouvoir effectuer différentes actions selon l’endroit où vous cliquez sur l’image.

Pour créer une carte d’image, vous avez besoin d’une image et d’une carte contenant des règles décrivant les zones cliquables.

L’image

L’image est insérée à l’aide de la <img>balise. La seule différence avec les autres images est que vous devez ajouter un usemapattribut:<img src= »workplace.jpg » alt= »Workplace » usemap= »#workmap »>

La usemapvaleur commence par une balise de hachage #suivie du nom de la carte d’image et est utilisée pour créer une relation entre l’image et la carte d’image.

Remarque: Vous pouvez utiliser n’importe quelle image comme carte d’image.

La carte

Ajoutez ensuite un <map>élément.

L’ <map>élément est utilisé pour créer une carte d’image et est lié à l’image à l’aide de l’ name attribut:<map name= »workmap »>

L’ nameattribut doit avoir la même valeur que l’ usemapattribut.

Remarque: Vous pouvez insérer l’ <map>élément où vous le souhaitez, il n’est pas nécessaire de l’insérer juste après l’image.

Les zones

Ajoutez ensuite les zones cliquables.

Une zone cliquable est définie à l’aide d’un <area>élément.

Forme

Vous devez définir la forme de la zone et vous pouvez choisir l’une de ces valeurs:

rect – définit une région rectangulaire
circle – définit une région circulaire
poly – définit une région polygonale
default – définit toute la région

Coordonnées

Vous devez définir certaines coordonnées pour pouvoir placer la zone cliquable sur l’image.

Les coordonnées viennent par paires, une pour l’axe des x et une pour l’axe des y.

Les coordonnées 34, 44sont situées à 34 pixels de la marge gauche et à 44 pixels du haut:

Les coordonnées 270, 350sont situées à 270 pixels de la marge gauche et 350 pixels du haut:

Vous avez maintenant suffisamment de données pour créer une zone rectangulaire cliquable:

Essayez-le vous-même

C’est la zone qui devient cliquable et enverra l’utilisateur vers la page computer.htm.

Cercle

Pour ajouter une zone de cercle, localisez d’abord les coordonnées du centre du cercle:

337, 300

Spécifiez ensuite le rayon du cercle:

44 pixels

Vous avez maintenant suffisamment de données pour créer une zone circulaire cliquable:

Essayez-le vous-même

C’est la zone qui devient cliquable et enverra l’utilisateur vers la page coffee.htm

Carte d’image et JavaScript

Une zone cliquable ne doit pas nécessairement être un lien vers une autre page, elle peut également déclencher une fonction JavaScript.

Ajoutez un clickévénement sur l’ <area>élément pour exécuter une fonction JavaScript:

Exemple

Vous pouvez utiliser l’ onclickattribut pour exécuter une fonction JavaScript lorsque la zone est cliquée<area shape= »circle » coords= »337,300,44″ onclick= »myFunction() »>Essayez-le vous-même »

Résumé de la section

Utilisez l’ <map>élément HTML pour définir une image-map
Utilisez l’ <area>élément HTML pour définir les zones cliquables dans l’image-map
Utilisez l’ attribut d’ <img>élément HTML usemappour pointer vers une image-map

❮ Précédent Suivant ❯

Images de fond HTML

❮ Précédent Suivant ❯

Images de fond

Une image d’arrière-plan peut être spécifiée sur presque tous les éléments HTML.

Pour ajouter une image d’arrière-plan en HTML, utilisez la propriété CSS background-image.

Image de fond sur un élément HTML

Pour ajouter une image d’arrière-plan sur un élément HTML, vous pouvez utiliser l’ styleattribut:

Exemple

Ajoutez une image d’arrière-plan sur un élément HTML:<div style= »background-image: url(‘img_girl.jpg’); »>

Essayez-le vous-même

Vous pouvez également spécifier l’image d’arrière-plan dans l’ <style> élément :

Exemple

Spécifiez l’image d’arrière-plan dans l’élément de style:<style>
div {
background-image: url(‘img_girl.jpg’);
}
</style>

Essayez-le vous-même

Image de fond sur une page

Si vous souhaitez que la page entière ait une image d’arrière-plan, vous devez spécifier l’image d’arrière-plan sur l’ <body>élément:

Exemple

Ajoutez une image d’arrière-plan sur une page HTML:<style>
body {
background-image: url(‘img_girl.jpg’);
}
</style>

Essayez-le vous-même

Répétition du fond

Si l’image d’arrière-plan est plus petite que l’élément, l’image se répétera, horizontalement et verticalement, jusqu’à ce qu’elle atteigne la fin de l’élément.

Pour expliquer, voyez ce qui se passe lorsque nous utilisons une petite image comme arrière-plan à l’intérieur d’un grand élément div:

La background-imagepropriété essaiera de remplir l’élément div avec des images jusqu’à ce qu’il atteigne la fin.

Exemple

Essayez-le vous-même

Pour éviter que l’image d’arrière-plan ne se répète, utilisez la background-repeatpropriété.

Exemple

Essayez-le vous-même

Couverture de fond

Si vous voulez que l’image d’arrière-plan couvre tout l’élément, vous pouvez définir la background-sizepropriété sur cover.

De plus, pour vous assurer que l’élément entier est toujours couvert, définissez la propriété background-attachment sur fixed:

Comme vous pouvez le voir, l’image couvrira la totalité de l’élément, sans étirement, l’image conservera ses proportions d’origine.

Exemple

Essayez-le vous-même

Étirement du fond

Si vous souhaitez que l’image d’arrière-plan s’adapte à l’image entière dans l’élément, vous pouvez définir la background-sizepropriété sur 100% 100%:

Essayez de redimensionner la fenêtre du navigateur et vous verrez que l’image va s’étirer, mais couvrir toujours tout l’élément.

Exemple

Essayez-le vous-même

En savoir plus CSS

À partir des exemples ci-dessus, vous avez appris que les images d’arrière-plan peuvent être stylisées en utilisant les propriétés d’arrière-plan CSS.

Élément d’ image HTML

❮ Précédent Suivant ❯

L’élément d’image nous permet d’afficher différentes images pour différents appareils ou tailles d’écran.

L’élément HTML <picture>

HTML5 a introduit l’ <picture>élément pour ajouter plus de flexibilité lors de la spécification des ressources d’image.

L’ <picture>élément contient un certain nombre d’ <source>éléments, chacun faisant référence à différentes sources d’images. De cette façon, le navigateur peut choisir l’image qui correspond le mieux à la vue et / ou à l’appareil actuel.

Chaque <source>élément a des attributs décrivant quand son image est la plus appropriée.

Exemple

Afficher différentes images sur différentes tailles d’écran:<picture>
  <source media= »(min-width: 650px) » srcset= »img_food.jpg »>
  <source media= »(min-width: 465px) » srcset= »img_car.jpg »>
  <img src= »img_girl.jpg »>
</picture>

Essayez-le vous-même

Remarque: spécifiez toujours un <img>élément comme dernier élément enfant de l’ <picture>élément. L’ <img>élément est utilisé par les navigateurs qui ne prennent pas en charge l’ <picture>élément, ou si aucune des <source>balises ne correspond.

Quand utiliser l’élément d’image

L’ <picture>élément a deux objectifs principaux :

1. Bande passante

Si vous avez un petit écran ou un appareil, il n’est pas nécessaire de charger un fichier image volumineux. Le navigateur utilisera le premier <source> élément avec des valeurs d’attribut correspondantes et ignorera l’un des éléments suivants.

2. Prise en charge du format

Certains navigateurs ou appareils peuvent ne pas prendre en charge tous les formats d’image. En utilisant l’ <picture>élément, vous pouvez ajouter des images de tous les formats, et le navigateur utilisera le premier format qu’il reconnaît et ignorera l’un des éléments suivants.

Exemple

Le navigateur utilisera le premier format d’image qu’il reconnaît:<picture>
  <source srcset= »img_avatar.png »>
  <source srcset= »img_girl.jpg »>
  <img src= »img_beatles.gif » alt= »Beatles » style= »width:auto; »>
</picture>

Essayez-le vous-même

Remarque: Le navigateur utilisera le premier <source>élément avec les valeurs d’attribut correspondantes et ignorera tous les <source>éléments suivants .