Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Images | Images et Médias
Essentiels HTML
course content

Contenu du cours

Essentiels HTML

Essentiels HTML

1. Comprendre le Web et HTML
2. Fondamentaux de HTML
3. Images et Médias
4. Tableaux et Formulaires
5. HTML Avancé

book
Images

Images

Les images jouent un rôle crucial dans l'amélioration de l'attrait visuel et la transmission d'informations sur les pages web. En HTML, les images sont insérées à l'aide de la balise <img>.

Insertion d'images

La balise <img> est utilisée pour insérer des images dans un document HTML. Contrairement à la plupart des balises HTML, la balise <img> n'a pas de balise de fermeture et est auto-fermante.
Exemple :

Dans l'exemple ci-dessus :

  • La balise <img> est utilisée pour insérer une image ;
  • L'attribut src spécifie la source (URL) du fichier image ;
  • L'attribut alt fournit un texte alternatif pour l'image. Ce texte est affiché si l'image ne peut pas être chargée ou à des fins d'accessibilité.

Avant d'explorer un exemple concret, comprenons les attributs essentiels de la balise img et comment ils influencent son contenu.

Attributs d'image

  1. src : Spécifie la source (URL) du fichier image. Cet attribut est requis pour que la balise <img> affiche l'image ;
  2. alt : Fournit un texte alternatif pour l'image. Le texte spécifié dans l'attribut alt est affiché si l'image ne peut pas être chargée ou à des fins d'accessibilité. Il est essentiel pour les utilisateurs qui peuvent utiliser des lecteurs d'écran ou dans des situations où l'image ne peut pas être affichée ;
  3. width : Spécifie la largeur de l'image en pixels ou en pourcentage du conteneur parent ;
  4. height : Spécifie la hauteur de l'image en pixels ou en pourcentage du conteneur parent ;
  5. title : Fournit des informations supplémentaires sur l'image. Il est souvent affiché sous forme d'infobulle lorsque l'utilisateur survole l'image.
    Exemple :
html

index.html

copy

Dans l'exemple ci-dessus :

  • La balise <img> insère une image sur une page web ;
  • L'attribut src spécifie l'URL source du fichier image ;
  • L'attribut alt définit le texte alternatif pour l'image ;
  • L'attribut width définit la largeur de l'image ;
  • L'attribut height définit la hauteur de l'image ;
  • L'attribut title fournit des informations supplémentaires sur l'image.

Tutoriel Vidéo

1. Quelle balise est utilisée pour insérer des images dans un document HTML ?

2. Quel attribut est requis pour la balise <img> afin d'afficher l'image ?

3. Que fournit l'attribut alt pour une image ?

4. Que se passe-t-il si l'image spécifiée dans l'attribut src ne peut pas être chargée ?

Quelle balise est utilisée pour insérer des images dans un document HTML ?

Quelle balise est utilisée pour insérer des images dans un document HTML ?

Sélectionnez la réponse correcte

Quel attribut est requis pour la balise `<img>` afin d'afficher l'image ?

Quel attribut est requis pour la balise <img> afin d'afficher l'image ?

Sélectionnez la réponse correcte

Que fournit l'attribut `alt` pour une image ?

Que fournit l'attribut alt pour une image ?

Sélectionnez la réponse correcte

Que se passe-t-il si l'image spécifiée dans l'attribut `src` ne peut pas être chargée ?

Que se passe-t-il si l'image spécifiée dans l'attribut src ne peut pas être chargée ?

Sélectionnez la réponse correcte

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 1
We're sorry to hear that something went wrong. What happened?
some-alt