02- Insertion d’images en HTML

Semaine 3

2. Insertion d’images

2.1 Intégrer des images en html avec la balise <img />

La balise <img /> permet d’intégrer une image dans la page web html (balise de type EN LIGNE).

Voici quelques caractéristiques :

  • La balise <img /> doit obligatoirement contenir un attribut src (source) et alt (texte alternatif).
  • De plus, <img /> ne peut pas être imbriquée dans une balise <pre>.
  • Vous pouvez ajouter la balise <title> afin d’ajouter une info-bulle à votre image.
  • La balise <img /> est autofermante.
  • Cette balise est un élément de type En-ligne, donc il doit être inclus dans un élément de type bloc.
  • Il est fortement conseillé d’utiliser les balises de hauteur (height) et de largeur (width), afin de maximiser l’affichage de la page web.

Voici en exemple de l’intégration de la balise <img />

<p><img src= »images/fleche_h.gif » alt= »haut de page » title= »haut de page » width= »30″ height= »33″ /></p>

Voici l’explication des balises utilisées :

01- La balise <p> puisque la balise <img /> doit être à l’intérieur d’une balise de type bloc.

<p><img src= »images/fleche_h.gif » alt= »retour vers haut de page » title= »haut de page » width= »30″ height= »33″ /></p>

02- la balise<img /> est autofermante.

<p><img src= »images/fleche_h.gif » alt= »retour vers haut de page » title= »haut de page » width= »30″ height= »33″ /></p>

03- L’attribut src précise l’adresse relative ou absolue du fichier image que l’on veut afficher. Ici, images correspond au dossier images dans notre nomenclature de sauvegarde et fleche_h.gif correspond à l’image.

<p><img src= »images/fleche_h.gif » alt= »retour vers haut de page » title= »haut de page » width= »30″ height= »33″ /></p>

04- L’attribut alt permet de fournir un texte avec une brève description. Ce texte sera lisible à l’écran si l’image n’apparaît pas. il sera aussi utilisé par les navigateurs n’affichant pas les images. De plus, il sera lu par les navigateurs utilisant des logiciels pour les non-voyants (Jaws par exemple).

<p><img src= »images/fleche_h.gif » alt= »retour vers haut de page » title= »haut de page » width= »30″ height= »33″ /></p>

05- L’attribut title sert pour l’affichage d’un texte dans une info-bulle.

<p><img src= »images/fleche_h.gif » alt= »retour vers haut de page » title= »haut de page » width= »30″ height= »33″ /></p>

06- Les attributs height et width permettent de définir la hauteur et la largeur de l’image sur l’écran.

<p><img src= »images/fleche_h.gif » alt= »retour vers haut de page » title= »haut de page » width= »30″ height= »33″ /></p>

À noter…

Il existe d’autres méthodes d’insertion d’image, mais à condition de connaître les css en utilisant « background-image ». Dans la deuxième partie de la session, nous allons explorer toutes les possibilités avec les images.

Quelques règles d’écriture du HTML

 

  1. Écrire les noms de balise en bas de casse (minuscules).
  2. Écrire les noms d’attribut en bas de casse (minuscules).
  3. Refermer toute balise ouvrante avec une balise de fin. (<h2> 2.1 Signification des acronymes <img/>).
  4. Terminer toute balise vide avec une barre oblique précédée d’une espace (<img /> et non <img>).
  5. Encadrer les valeurs d’attribut de guillemets droits.
  6. Expliciter les valeurs d’attribut (<input … checked= »checked » /> et non <input … checked>).
  7. Remplacer l’identificateur partiel NAME par ID.
  8. Assortir toute image d’un attribut ALT, même de valeur nulle.

 

 

GIF : 

Images avec des aplats de couleurs.
Par exemple des logos + animations

 

 

Jpeg

Pour les images de type photographique.

 

PNG

Transparence parfaite.