6: Insertion d'images

Qu'allez-vous apprendre ?

Comprendre comment insérer et gérer les images dans vos pages HTML pour un contenu visuel attractif.

Suivez ce chapitre à la lettre

Dans ce chapitre, nous allons apprendre à insérer des images dans vos pages HTML et à gérer leurs attributs pour qu’elles s’affichent correctement sur SPCK Editor. Même sur smartphone, la maîtrise de l’insertion d’images est essentielle pour enrichir visuellement vos pages web et rendre le contenu plus attractif.

Chapitre 6: Insertion d’images

Dans ce chapitre, tu vas apprendre à afficher des images dans une page web. Les images jouent un rôle très important : elles rendent un site plus clair, plus attractif et plus compréhensible. Un site sans images est souvent difficile à lire et peu engageant pour les visiteurs.

En HTML, les images ne sont pas écrites directement dans le code : elles sont liées au document à l’aide de la balise <img>. Comprendre cette balise est indispensable pour créer des pages modernes et professionnelles.

  1. La balise <img>
    C’est une balise auto-fermante (elle n’a pas de balise de fermeture).
  2. L’attribut src
    Il indique le chemin de l’image à afficher.
  3. L’attribut alt
    Il décrit l’image si elle ne s’affiche pas et aide les personnes malvoyantes.
  4. Importance du alt
    Obligatoire pour l’accessibilité et le référencement (SEO).
  5. Images locales
    Les images doivent être placées dans un dossier du projet (ex: images/).
  6. Images distantes
    On peut afficher une image depuis Internet avec une URL.
  7. Chemins relatifs
    Le chemin dépend de l’emplacement du fichier HTML.
  8. Formats d’images
    Les formats courants sont JPG, PNG, GIF et WebP.
  9. Bonnes pratiques
    Toujours utiliser des images légères pour un chargement rapide.
  10. Organisation
    Ranger les images dans un dossier clair améliore la maintenance du site.

Exemples pratiques :

<img src="images/photo.jpg" alt="Photo de présentation">
      
<img src="./images/logo.png" alt="Logo du site">
      
<img src="../images/banner.jpg" alt="Bannière du site">
      
<img src="https://example.com/image.jpg" alt="Image distante">
      
<img src="images/html.png" alt="Logo HTML">
      
<img src="images/css.png" alt="Logo CSS">
      
<img src="images/js.png" alt="Logo JavaScript">
      
<img src="images/profil.jpg" alt="Photo de profil">
      
<img src="images/cours.png" alt="Illustration du cours">
      
<img src="images/mobile.png" alt="Apprendre sur smartphone">

Exercices pratiques :

  1. Crée un dossier images dans ton projet.
  2. Ajoute une image locale et affiche-la.
  3. Change volontairement le chemin pour voir l’erreur.
  4. Ajoute un texte alt clair.
  5. Affiche une image depuis Internet.
  6. Ajoute plusieurs images sur une même page.
  7. Teste l’affichage sur mobile.
  8. Supprime une image et observe le texte alternatif.
  9. Renomme une image et corrige le chemin.
  10. Organise toutes tes images dans un dossier propre.

Grâce à ce chapitre, tu sais maintenant afficher et organiser des images dans une page HTML. Cette compétence est essentielle pour créer des sites agréables, compréhensibles et professionnels, même en travaillant uniquement avec ton smartphone et SPCK Editor.

Passer au chaitre 07-->