images html

Les images peuvent améliorer la conception et l’apparence d’une page Web. Si nous voulons utiliser des images dans nos fichiers html, nous pouvons simplement le faire en utilisant la <img> balise.

L’attribut src

L’attribut src requis spécifie le chemin d’accès (URL) à l’image.

• Le premier attribut de la balise <img> est appelé attribut src ou source.
• Si vous comparez à la fois la balise <img> et la balise anchor <a>, l’attribut src agit comme l’attribut href que nous avons utilisé dans les liens.
• L’attribut src est l’endroit où nous spécifions le fichier image.
• Pour cette section, les fichiers se trouvent dans le dossier appelé images.
• Le fichier image peut être chargé à l’aide de chemins relatifs et absolus, tout comme les balises d’ancrage

insérer une image en html

	<img src="./two.png" />
	

			
	
			

		
	

Il s’agit d’un chemin relatif, car nous disons au navigateur de trouver l’image avec le nom ./two.png../ signifie que nous disons au navigateur de regarder dans le même répertoire/dossier ou dans le même répertoire/dossier actuel.

L’attribut alt

• L’attribut alt requis fournit un texte alternatif pour une image
• Un autre attribut important pour les images est appelé alt qui signifie texte alternatif.
• Ce texte sera utilisé pour décrire de quoi parle l’image que nous utilisons.
• Lorsque le navigateur ne peut pas charger l’image, le texte alternatif apparaîtra sur le navigateur.

	<img
  src="./img/2.png"
  width="300"
  height="300"
  alt="Some Alternative Text"
  title="Some Wonderful Title for Image"
/>
	

			
	
			

		
	

L’attribut de titre de l’image

Vous pouvez également ajouter des attributs de titre aux images, pour fournir des informations supplémentaires si nécessaire.

	<img src="./img/2.png" width="300" height="300" alt="Some Alternative Text" />
	

			
	
			

		
	

Taille de l’image – width et height

Vous pouvez utiliser l’attribut style pour spécifier la width et la height d’une image.

	<img
  src="./img/2.png"
  alt="Some Alternative Text"
  style="width:300px;height:300px;"
/>
/>
	

			
	
			

		
	

image d’insertion html

Vous pouvez utiliser les attributs width et height.

	<img src="./img/2.png" width="300" height="300" alt="Some Alternative Text" />
	

			
	
			

		
	

note: Il définit toujours la largeur et la hauteur de l’image en pixels.

Utiliser une image comme lien

Pour utiliser une image comme lien, il suffit de mettre la <img> balise à l’intérieur de la <a> balise.

	<a href="url">
  <img src="/2.png" alt="CJ" />
</a>
	

			
	
			

		
	

Quelques formats d’image couramment utilisés

Avertissement : La plupart des images sont protégées par le droit d’auteur. N’affichez pas d’image sur votre page Web, sauf si

• Vous êtes propriétaire de l’image.
• Vous avez l’autorisation du propriétaire de l’image.