Comment ajouter des images à un site Web HTML

L'ajout d'images sur les pages de votre site Web peut souvent les rendre plus agréables à l'oeil et véhiculer des informations mieux que d'utiliser du texte seul. Ce processus est accompli en utilisant du code HTML et un fichier image. Le fichier peut provenir d'une autre page Web ou être stocké sur un serveur Web.

En utilisant le étiquette

Dans le code HTML d’une page Web, vous pouvez ajouter une image à l’aide de la touche étiquette. dans le balise, vous devez spécifier quatre attributs:

  • Src - L'attribut source indique l'emplacement de l'image. Vous pouvez utiliser un chemin relatif si l'image se trouve sur le même serveur que votre site, mais les images d'un autre site nécessitent des chemins absolus.
  • Alt - L'attribut de texte alternatif est une description écrite de l'image.
  • Largeur - La largeur de l'image.
  • Hauteur - La hauteur de l'image.

Bordure est un attribut facultatif, qui vous permet de spécifier une bordure autour de l'image. L'attribut border est défini en taille de pixel. Par exemple, en utilisant border = 1 dans le tag signifie que la bordure autour de l'image aurait une largeur de 1 pixel.

Remarque: L'attribut Bordure est obsolète en HTML5 et n'est pas pris en charge.

Exemples

Les exemples suivants montrent le code HTML utilisé pour ajouter l'image en haut de cette page. Ils peuvent être insérés n'importe où dans le corps de votre page. Le premier a une URL plus courte parce que l'image est stockée sur notre serveur; la seconde est comment vous lieriez à notre image.

Exemple un

Exemple deux

Quels formats d'image puis-je utiliser sur une page Web?

Les formats d'image les plus couramment utilisés pour les images, les photos, les logos et autres images sont les formats JPEG, GIF et PNG. D'autres formats d'image peu pris en charge, tels que BMP, peuvent ne pas fonctionner dans tous les navigateurs.

Ai-je besoin de guillemets sur les attributs dans la balise img?

Oui. Bien que les navigateurs actuels puissent généralement réparer les erreurs avec des guillemets manquants autour d'une valeur d'attribut, vous devriez toujours avoir des guillemets autour d'une valeur d'attribut pour éviter les erreurs.