Apprenez à importer des images dans vos designs web à l'aide des langages HTML et CSS.
work-with-html-images_1408x792

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.

images-web-design-step1

Les images peuvent améliorer l'apparence 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.

images-web-design-step0

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.

images-web-design-step2a

CSS

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

images-web-design-step2b

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 >.

images-web-design-step3a

HTML

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

images-web-design-step3b

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"

 

images-web-design-step4

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"

images-web-design-step4b

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" />

images-web-design-step5

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.

images-web-design-step6
04/13/2018
Cette page vous a-t-elle été utile ?