HTML5 – Balises essentielles : IMAGES

LEÇON

 

Image : <img>

Balise pour afficher une image. C'est un élément vide (pas de contenu ni de balise de fermeture).

L'adresse de l'image est spécifié dans l'attribut src. Le navigateur utilise cette adresse pour trouver le fichier. Les chemins (tout comme pour les liens) peuvent être relatifs ou absolus. On applique les même règles.

Exemple :

<!-- liens relatifs -->
<img src="logo.jpg" alt="logo">
<img src="gallery/logo.jpg" alt="logo">
<img src="../gallery/logo.jpg" alt="logo">

<!-- lien absolu -->
<img src="http://www.web-design-codex.fr/wp-content/uploads/2015/12/lamborghini_green.jpg" alt="lambo">

 

L'attribut alt

  • L'attribut alt est obligatoire pour une image (pour la balise img)
  • Selon le navigateur le texte alt prend la place de l'image quand elle n'est pas disponible (par exemple si le site sur lequel l'image est stocké est en panne)

 

Utiliser une image en tant que lien (images cliquables)

Utilisation d'une image comme contenu d'un hyperlien :

<a href="https://www.lamborghini.com/">
  <img src="http://www.web-design-codex.fr/wp-content/uploads/2015/12/lamborghini_green.jpg" alt="lambo">
</a>

 

L'image est un élément "inline"

Les images sont des éléments "inline" : il n'y a pas de "retour à la ligne" automatique avant ou après une image. Deux images qui se suivent dans le code HTML seront (s'il y a de la place sur la page) affichées côte à côte.

De la même manière, une image placée à l'intérieure d'un paragraphe sans retour à la ligne explicite sera affichée dans le paragraphe comme un mot dans la suite des mots.

De manière générale, une image est affichée horizontalement entre les choses qui l'entourent dans le code HTML.

Voici un exemple pour illustrer la nature des images en HTML.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Bienvenue</title>
    </head>
    <body>
        <h1>Bonjour</h1>
        <img style="width:50px;" src="http://www.web-design-codex.fr/wp-content/uploads/2015/09/papillon.png" alt="papillon">
        <img style="width:50px;" src="http://www.web-design-codex.fr/wp-content/uploads/2015/09/papillon.png" alt="papillon">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis risus eros, ut elementum dui scelerisque eu.
        <img style="width:50px;" src="http://www.web-design-codex.fr/wp-content/uploads/2015/09/papillon.png" alt="papillon">
        <img style="width:50px;" src="http://www.web-design-codex.fr/wp-content/uploads/2015/09/papillon.png" alt="papillon">
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas eu molestie est.
        Nulla faucibus quam ut orci imperdiet, tempus dapibus ipsum auctor. </p>
    </body>
</html>

 

Affichage :


Bonjour

papillonpapillon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis risus eros, ut elementum dui scelerisque eu. papillonpapillonPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas eu molestie est. Nulla faucibus quam ut orci imperdiet, tempus dapibus ipsum auctor.


 

 

!! TRÈS IMPORTANT !! RÈGLE D'OR POUR LES EVALUATIONS !!

Pareil que pour les liens, les adresses utilisées pour les images doivent suivre la règle d'or quand il s'agit d'une évaluation.

Quand on doit rendre ses fichiers au professeur à la fin d'une évaluation pratique en classe, il faut :

  • NE JAMAIS UTILISER :
    • des CHEMINS ABSOLUS avec une ADRESSE LOCALE
  • TOUJOURS UTILISER :
    • des CHEMINS RELATIFS, ou
    • des CHEMINS ABSOLUS avec une ADRESSE INTERNET
  • dans le cas de l'utilisation des chemins relatifs :
    • TOUJOURS FOURNIR au professeur TOUS LES FICHIERS référencés par ses pages
    • TOUJOURS FOURNIR ces fichiers DANS LA BONNE STRUCTURE pour que les chemins relatifs fonctionnent correctement

 

En savoir plus / Référence

 


EXERCICES

  1. Dans un éditeur de texte, créer un nouveau document HTML minimaliste à partir du squelette HTML
  2. Après chaque étape ci-dessous, ouvrir la page dans un navigateur pour regarder l'affichage
  3. Incorporer une image avec un chemin relatif vers un fichier image dans le même dossier que le fichier HTML
  4. Incorporer une image avec un chemin relatif vers un fichier image dans un sous-dossier
  5. Incorporer une image avec un chemin absolu
  6. Incorporer une image qui sert de lien vers un site internet