Comment insérer une image en HTML ?

La méthode classique pour insérer une image en HTML consiste à utiliser la balise <img> qui dispose de plusieurs attributs :

• L'attribut src permet de spécifier l'emplacement de chargement de l'image.
• L'attribut alt permet de décrire l'image au cas où l'image ne se chargerait pas correctement.
• Les attributs width et height permettent de spécifier le nombre de pixels de l'image.
• L'attribut border permet de définir la taille en pixel de la bordure de l'image lorsque celle-ci contient un lien hypertexte.

Exemple pour insérer une image en HTML avec la balise <img> :

<img src="https://www.collaborativejob.com/os.jpg" alt="1FORMATIK.com" width="320" height="220" border="0">

Il existe d'autres attributs à la balise <img> pour personnaliser et insérer une image en HTML, pour cela référez-vous à cette documentation du site de Mozilla.

Si vous voulez insérer une image de fond dans un bloc HTML, privilégiez l'utilisation de feuilles de style CSS au lieu de la balise <img>.

Il vous faudra ajouter une class à votre balise <div> et définir l'image à l'aide des propriétés CSS background-image, background-repeat, width et height.

Exemple pour insérer une image de fond à une balise <div> avec CSS :

<style>
.image-fond {
background-image: url('https://www.collaborativejob.com/os.jpg');
background-repeat: no-repeat;
width: 320px;
height: 2200px;
}
</style>

<div class="image-fond"></div>

Vous trouverez d'avantage d'informations sur la manière d'ajouter une image de fond à un bloc HTML sur la documentation suivante.