Comment ajouter (insérer) une image html dans une page Web

Affichage des images dans une page web :

Étape 1: Préparer votre image

Avant d'insérer une image dans votre page HTML, assurez-vous d'avoir l'image prête.

Pour cela, je vous recommande de créer un dossier sur votre disque dur.
Nommez le par exemple "mon_site"

Remarque Lorsque vous nommez un dossier, un fichier, une image ou une page html, il est conseillé d’utiliser des minuscules et sans espace entre les mots, vous pouvez utiliser à la place des espaces tirée ou sous tirée ("-" ou "_" )les.

Dans le sous-dossier images placez une image de votre choix, vérifiez que son nom et son extension sont en minuscule,les nom ne doivent contenir ni espace ni caractère spéciaux( é è ê ä ç etc… ).

Assurez-vous que votre image est dans un format pris en charge, comme JPEG, PNG ou GIF, et que vous avez accès au fichier sur votre ordinateur ou sur un serveur.

Étape 2: Créez un élément HTML <img>

Pour insérer une image dans votre page HTML, vous allez utiliser l'élément <img>. Voici la structure de base de l'élément <img> :

<img src="chemin_vers_votre_image.jpg" alt="Texte alternatif">

Étape 3: Ajoutez l'image à votre page

Dans le dossier "mon_site" placez votre page qu'on va nommé par exemple "essai.html" ou celle que vous avez créez au cours du précédent chapitre de ce cours.
A partir de ce moment enregistrez tous vos exercices et testes que vous allez faire dans ce dossier, pour un peu d'organisation ou quoi ?

Pour insérer une image dans une page Web, on doit choisir un format qui s'adapte le mieux avec le Web.
Les formats d'images que l'on utilise sur le Web sont :

JPEG : le format JPEG est très répandu. Il est particulièrement adapté pour les photos,Les images de type JPEG ont généralement l'extension ".jpg", mais aussi parfois ".jpeg" .
PNG : le format PNG est le plus récent de tous. Ce format est adapté à la plupart des graphiques. L'avantage du PNG, c'est qu'il peut être rendu transparent, ce qui est très appréciable.
GIF : c'est un vieux format, qui a été très utilisé.

Le format GIF est limité à 256 couleurs. Si je vous parle du GIF, c'est qu'il conserve quand même un avantage que le PNG n'a pas : il peut être animé

les formats à adopter en fonction de l'image que vous avez :
• Une photo (ou une image avec beaucoup de couleurs) : utilisez un JPEG ou PNG 24 bits.
• Un graphique avec peu de couleurs (moins de 256) : utilisez un PNG 8 bits si possible, sinon utilisez un GIF.
• Une image animée : utilisez un GIF animé.

Revenons à notre code html
Pour insérer une image, on utilise la balise <img>.
C'est une balise de type seule (comme <br>).
Elle peut prendre plusieurs attributs, et 2 d'entre eux sont indispensables :

• l'attribut src : il permet d'indiquer la source ou le chemin où se trouve l'image que l'on veut insérer.
Vous pouvez soit mettre :

1. un chemin en absolu (exemple : "http://www.site.com/images/image.png").
2. soit mettre le chemin en relatif (c'est le cas le plus souvent utilisé).
Ainsi, si votre image est dans un sous-dossier "images" vous devrez taper :
src="images/mon_image.png"

• l'attribut alt : qui signifie "texte alternatif". On doit toujours indiquer un texte alternatif à l'image. Ce texte sera affiché à la place de l'image si celle-ci ne peut pas être téléchargée (et ça arrive).
Si vous ne faites pas de texte alternatif, votre page ne sera plus une page html valide et votre site sera détecté comme non conforme aux normes.

Avec ces deux attributs nous aurons une syntaxe comme suit:

<img src="adress de l'image" alt="texte de remplacement"/>

exemple d'insertion d'image :

Dans le code suivant remplacez le mot "chemin_vers_votre_image.jpg" par le chemin le nom de l'image que vous voulez insérer, n'oubliez pas l'extension.(.jpeg , .gif , .png) de votre image
Ah n'oublier pas l'image doit être placée dans le sous dossier images.
Insérez ce code dans le code de votre page Web, vous vous souvenez click droit sur l'icône de la page Web puis faite Edit with notepad++ si c'est votre éditeur.

Code de la page HTML

Exemple :    

Exemple :      Copier le code

<!DOCTYPE html>
<html>
<head>
  <title>Ma page avec une image</title>
</head>
<body>
  <h1>Ma page avec une image</h1>
  <img src="chemin_vers_votre_image.jpg" alt="Texte alternatif">
</body>
</html>
 

Étape 4: Personnalisez l'image (facultatif)

Vous pouvez personnaliser votre image en ajoutant des attributs supplémentaires à l'élément <img>. Voici quelques attributs couramment utilisés :

• width : spécifie la largeur de l'image en pixels ou en pourcentage.
• height : spécifie la hauteur de l'image en pixels ou en pourcentage.
• title : spécifie un texte qui s'affiche lorsque l'utilisateur survole l'image avec la souris.
• style : permet de définir des styles CSS pour l'image, tels que la couleur de fond ou la bordure.

Voici un exemple d'utilisation de ces attributs :

<img src="chemin_vers_votre_image.jpg" alt="Texte alternatif" width="300" height="200" title="Image cool" style="border: 1px solid black;">

chapitre précédent      chapitre suivant