## Objectif
Pratiquez l'utilisation du chemin absolu pour les images en HTML.

## Tâche
Assurez-vous que l'attribut `src` de la première image utilise le chemin absolu. Vous pouvez trouver l'image à :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css"
    />
    <link
      rel="stylesheet"
      href="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css"
    />
  </head>
  <body>
    <div class="text-widget">
      
      
      <textarea
        class="text-field"
        id="Your id"
        style="height: 100px; max-width: 100%"
      >
https://staging-content-media-cdn.codefinity.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/adik.png</textarea
      >
      
      <button
        class="copy-button"
        onclick="handleClick('Your id', 'widget1-notify')"
      >
        <svg
          width="20"
          height="20"
          x="0"
          y="0"
          viewBox="0 0 32 32"
          style="enable-background: new 0 0 512 512"
          xml:space="preserve"
          class=""
        >
          <g>
            <path
              d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z"
              fill="#a6b8e6"
              opacity="1"
              data-original="#000000"
              class=""
            ></path>
          </g>
        </svg>
      </button>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

Utilisez le chemin absolu pour l'attribut `src` de la deuxième image. Accédez à l'image ici :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css"
    />
    <link
      rel="stylesheet"
      href="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css"
    />
  </head>
  <body>
    <div class="text-widget">
      
      
      <textarea
        class="text-field"
        id="Your id"
        style="height: 100px; max-width: 100%"
      >
https://staging-content-media-cdn.codefinity.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/joking.png</textarea
      >
      
      <button
        class="copy-button"
        onclick="handleClick('Your id', 'widget1-notify')"
      >
        <svg
          width="20"
          height="20"
          x="0"
          y="0"
          viewBox="0 0 32 32"
          style="enable-background: new 0 0 512 512"
          xml:space="preserve"
          class=""
        >
          <g>
            <path
              d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z"
              fill="#a6b8e6"
              opacity="1"
              data-original="#000000"
              class=""
            ></path>
          </g>
        </svg>
      </button>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

Spécifiez la valeur appropriée de l'attribut `alt` pour les deux images. N'oubliez pas, la valeur `alt` est cruciale pour fournir un contexte en cas d'échec de chargement des images ou pour les utilisateurs utilisant des lecteurs d'écran.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDx0aXRsZT5DaGFsbGVuZ2U6IEltYWdlczwvdGl0bGU+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPCEtLSBDaGFuZ2UgdGhlIGNvZGUgYmVsb3cgLS0+CgogICAgPCEtLSBJbWFnZSBvbmUgLS0+CiAgICA8aW1nIHNyYz0iX19fIiBhbHQ9Il9fXyIgd2lkdGg9IjI1NiIgaGVpZ2h0PSIyNTYiIC8+CgogICAgPCEtLSBJbWFnZSB0d28gLS0+CiAgICA8aW1nIHNyYz0iX19fIiBhbHQ9Il9fXyIgd2lkdGg9IjI1NiIgaGVpZ2h0PSIyNTYiIC8+CiAgPC9ib2R5Pgo8L2h0bWw+

1. Utilisez la balise `img` pour spécifier une image.
2. Utilisez l'attribut `src` pour spécifier l'emplacement de l'image.
3. Utilisez l'attribut `alt` pour fournir un texte descriptif pour l'image.
4. Vous pouvez utiliser l'attribut `width` pour définir la largeur de l'image.
5. Vous pouvez utiliser l'attribut `height` pour définir la hauteur de l'image.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDx0aXRsZT5DaGFsbGVuZ2U6IEltYWdlczwvdGl0bGU+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPCEtLSBJbWFnZSBvbmUgLS0+CiAgICA8aW1nCiAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy9jNDY4MDUyZC02ZDQ3LTQ2NzctYjFkMS1mYjExYWNlNzE5YjEvbWVhZGlhLSUyNi10YWJsZXMvYWRpay5wbmciCiAgICAgIGFsdD0iRW1vdGlvbiB0aGF0IG9wZW5zIHRoZSBtb3V0aCIKICAgICAgd2lkdGg9IjI1NiIKICAgICAgaGVpZ2h0PSIyNTYiCiAgICAvPgoKICAgIDwhLS0gSW1hZ2UgdHdvIC0tPgogICAgPGltZwogICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvYzQ2ODA1MmQtNmQ0Ny00Njc3LWIxZDEtZmIxMWFjZTcxOWIxL21lYWRpYS0lMjYtdGFibGVzL2pva2luZy5wbmciCiAgICAgIGFsdD0iRW1vdGlvbiB0aGF0IHNob3dzIHRoZSB0b25ndWUiCiAgICAgIHdpZHRoPSIyNTYiCiAgICAgIGhlaWdodD0iMjU2IgogICAgLz4KICA8L2JvZHk+CjwvaHRtbD4=

Apprenez les bases du HTML (HyperText Markup Language), le fondement du développement web. Ce cours convivial pour les débutants couvre les balises, les attributs, les éléments et la structuration des pages web. Acquérez des compétences pratiques dans la création de titres, de paragraphes, de listes, d'images, de liens, de formulaires et de tableaux. Explorez les meilleures pratiques, l'optimisation et l'accessibilité web. Commencez votre parcours de développement web avec HTML.

Explorez le fonctionnement interne du web. Apprenez comment les données circulent à travers les réseaux, découvrez le rôle des protocoles et démêlez les mystères des adresses IP et des noms de domaine. Acquérez une compréhension approfondie de la manière dont les navigateurs web et les serveurs communiquent pour fournir du contenu web.

Découvrez le pouvoir des balises pour structurer le contenu, des titres et paragraphes aux listes et tableaux. Apprenez à améliorer les éléments avec des attributs.

Le cœur de la structure d'un document HTML. Apprenez les composants d'un document HTML, y compris la déclaration doctype, l'en-tête et le corps. Comprenez le but de chaque élément et comment ils contribuent à la structure globale d'une page web.

Rendez une page web plus attrayante à l'aide de médias tels que des images, de l'audio et de la vidéo. Travaillez avec des données tabulaires structurées sous forme de tableaux.

Explorez la polyvalence des formulaires HTML. Apprenez à concevoir des formulaires intuitifs et conviviaux en exploitant des concepts et techniques clés. Découvrez comment les formulaires permettent l'interaction utilisateur et la soumission de données sur les sites web.

HTML Ultime

Défi : Images

Objectif

Tâche