Apprenez à importer des images dans vos designs web à l'aide des langages HTML et CSS.
Image abstraite figurant des éléments de design web bleu-vert, corail, marron clair et gris.

Maintenant que vous savez à quel point il est facile d’ajouter des images à l’aide des langages HTML et CSS, vous pouvez vous entraîner dans vos propres projets. Lorsque vous insérez des images dans vos designs web, veillez à disposer des droits d’utilisation ou de l’autorisation du propriétaire, mais aussi à suivre les directives de ce dernier concernant les crédits photographiques.

Avant : texte sur une page web. Après : les images ajoutées sur la page web la rendent plus intéressante et visuellement attrayante.

Les images peuvent améliorer le rendu de votre page web et fournir du contexte aux visiteurs. Vous pouvez les insérer dans la page à l’aide des langages CSS ou HTML.

Vous allez ajouter une image de bannière et deux images dans les sections de contenu.

Avant de commencer

Téléchargez et enregistrez les fichiers du projet. Ouvrez html-images.html dans Dreamweaver et affichez style.css en mode Fractionner.

Remarque : pour que la page web s’affiche en entier dans Dreamweaver, il suffit de faire glisser le séparateur des fenêtres de code et d’affichage en direct.

Feuille de style CSS ouverte en mode Fractionner dans Dreamweaver.

Ajout d’une image d’en-tête à l’aide de code CSS

Utilisez du code CSS pour ajouter des images à visée esthétique ou stylistique, comme les images d'en-tête et d'arrière-plan.

Repérez la section /* -- Step 1: Start Here -- */ et ajoutez la propriété background-image au sélecteur CSS #headerimg.

Accédez au fichier europa_header.jpg dans le dossier d’images et cliquez sur Ouvrir. Pour que l'image apparaisse, il faut définir la hauteur de son conteneur. Ajoutez une propriété height: et attribuez-lui la valeur 500px.

Des images d’arrière-plan et d’en-tête sont ajoutées dans CSS.

CSS

#headerImg {
  ...
  background-image:url(images/europa_header.jpg);
  height:500px;
}

Une photo d’Europe, l’une des lunes de Jupiter, est ajoutée comme image d’arrière-plan dans CSS.

Ajout d'une image en HTML

Utilisez la balise <img> dans le code HTML pour insérer une image faisant partie du contenu ou à des fins d’accessibilité (pour aider les utilisateurs atteints d'un handicap).

Cliquez sur Code source et faites défiler jusqu’à la section <!--- Add second image here ---> vers la ligne 42.

Saisissez <img src=" et accédez au fichier jupiter_body.jpg dans le dossier d'images. Cliquez sur le bouton Ouvrir.

Comme vous le voyez, l’image est trop grande par rapport à son conteneur et ne s’affiche pas correctement. Nous allons donc modifier sa taille pour solutionner le problème.

Remarque : <img> étant une balise à fermeture automatique, il suffit d’insérer le symbole / avant le chevron >.

La balise HTML <img> sert à ajouter des images au contenu d’une page ou à des fins d’accessibilité.

HTML

<img src="images/jupiter_body.jpg" />

Balise source d’image HTML pour une photo dans le corps d’une page web.

Définition de la largeur, de la hauteur et de la propriété alt

Par défaut, les images sont ajoutées dans leur taille réelle. Vous pouvez utiliser les propriétés width et height pour les mettre à l’échelle. 

Il suffit de les ajouter à la balise <img> :

width="500px" height="500px"

 

Balise source d’image HTML avec des spécifications de dimension.

L’attribut alt fournit une courte description de l’image si elle ne se charge pas dans le navigateur de l’utilisateur, et est lu par les lecteurs d’écran pour les personnes souffrant d’un handicap.

Ajoutez la propriété suivante à la balise <img> :

alt="Jupiter's Great Red Spot"

Balise source d’image HTML avec des spécifications de dimension et alt-text.

Ajout d'une image supplémentaire

Repérez la section <!--- Add second image here ---> vers la ligne 56.

Mettez ce que vous venez d’apprendre en application pour ajouter une autre image dans le contenu. Saisissez <img src=" et accédez au fichier sunrise_body.jpg dans le dossier d'images. Cliquez sur le bouton Ouvrir.

Ajoutez les propriétés suivantes à la balise <img> :

<img src="images/sunrise_body.jpg" width="500px" height="500px" alt="Gale Crater" />

Balise source d’image HTML avec des spécifications de dimension et alt-text.

Cliquez sur Aperçu dans le navigateur et choisissez le navigateur dans lequel vous souhaitez visionner le résultat.

Enregistrez les fichiers pour visualiser les modifications.

Cliquez sur Aperçu dans le navigateur et choisissez le navigateur dans lequel vous souhaitez tester les hyperliens et visualiser les images.
10/20/2021
Cette page vous a-t-elle été utile ?