Apprenez à importer des images dans vos designs web à l’aide des langages HTML et CSS.
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.
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.
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.
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.
#headerImg {
...
background-image:url(images/europa_header.jpg);
height:500px;
}
Utilisez la balise 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 vers la ligne 42.
Saisissez
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 : étant une balise à fermeture automatique, il suffit d’insérer le symbole / avant le chevron >.
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 :
width="500px" height="500px"
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 :
alt="Jupiter’s Great Red Spot"
Repérez la section vers la ligne 56.
Mettez ce que vous venez d’apprendre en application pour ajouter une autre image dans le contenu. Saisissez
Ajoutez les propriétés suivantes à la balise :
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.