## Goal
Practice using the absolute path for images in HTML.

## Task
Ensure the `src` attribute of the first image uses the absolute path. You can find the image at:

<!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://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://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://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

Utilize the absolute path for the `src` attribute of the second image. Access the image here:

<!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://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://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://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

Specify the appropriate `alt` attribute value for both images. Remember, the `alt` value is crucial for providing context in case images fail to load or for users relying on screen readers.

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

1. Use the `img` tag to specify an image.
2. Use the `src` attribute to specify the image's location.
3. Use the `alt` attribute to furnish a descriptive text for the image.
4. You can use the `width` attribute to define the image's width.
5. You can use the `height` attribute to define the image's height.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDx0aXRsZT5DaGFsbGVuZ2U6IEltYWdlczwvdGl0bGU+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPCEtLSBJbWFnZSBvbmUgLS0+CiAgICA8aW1nCiAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy9jNDY4MDUyZC02ZDQ3LTQ2NzctYjFkMS1mYjExYWNlNzE5YjEvbWVhZGlhLSUyNi10YWJsZXMvYWRpay5wbmciCiAgICAgIGFsdD0iRW1vdGlvbiB0aGF0IG9wZW5zIHRoZSBtb3V0aCIKICAgICAgd2lkdGg9IjI1NiIKICAgICAgaGVpZ2h0PSIyNTYiCiAgICAvPgoKICAgIDwhLS0gSW1hZ2UgdHdvIC0tPgogICAgPGltZwogICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvYzQ2ODA1MmQtNmQ0Ny00Njc3LWIxZDEtZmIxMWFjZTcxOWIxL21lYWRpYS0lMjYtdGFibGVzL2pva2luZy5wbmciCiAgICAgIGFsdD0iRW1vdGlvbiB0aGF0IHNob3dzIHRoZSB0b25ndWUiCiAgICAgIHdpZHRoPSIyNTYiCiAgICAgIGhlaWdodD0iMjU2IgogICAgLz4KICA8L2JvZHk+CjwvaHRtbD4=

Learn the essentials of HTML, the backbone of every website. Structure content with tags and attributes, build clear document layouts, and add images, links, and tables. Create accessible, user-friendly forms for capturing input and interaction. Practice crafting well-structured, functional web pages while following best practices. Start your web development journey by mastering HTML.

Explore the inner workings of the web. Learn how data travels across networks, discover the role of protocols, and unravel the mysteries of IP addresses and domain names. Gain a high-level understanding of how web browsers and servers communicate to deliver web content.

Discover the power of tags to structure content, from headings and paragraphs to lists and tables. Learn how to enhance the elements with attributes.

The core of HTML document structure. Learn the components of an HTML document, including the doctype declaration, head, and body. Understand the purpose of each element and how they contribute to the overall structure of a webpage.

Make a web page more appealing with the help of media such as images, audio, and video. Work with structured tabular data in the form of tables.

Explore the versatility of HTML forms. Learn to design intuitive and user-friendly forms by leveraging key concepts and techniques. Discover how forms enable user interaction and data submission on websites. 

Challenge: Work with Images

Goal

Task

Awesome!

Challenge: Work with Images

Goal

Task