HTML `<img>` tag examples for Python/JavaScript Intro classes

📚 Quick Study Guide

• 🖼️ The `` tag is used to embed an image in an HTML page. It's an empty tag, meaning it only has a start tag and no closing tag.
• 🔗 The `src` attribute specifies the URL of the image. It tells the browser where to find the image file.
• 📏 The `alt` attribute provides alternative text for an image if the image cannot be displayed. It's crucial for accessibility and SEO.
• 📐 The `width` and `height` attributes specify the width and height of the image in pixels. It's good practice to set these attributes to avoid layout shifts.
• 📁 Image formats commonly used are JPEG, PNG, and GIF. JPEG is good for photographs, PNG for graphics with transparency, and GIF for simple animations.
• 🌐 Absolute URLs point to an image on another website (e.g., `https://www.example.com/image.jpg`), while relative URLs point to an image on the same website (e.g., `images/image.jpg`).
• 💡Using the `` element allows for more responsive images, by specifying different image sources based on screen size or device capabilities. This tag uses media queries.

Practice Quiz

1. What is the primary purpose of the HTML `` tag?

   1. A. To create a link to another webpage
   2. B. To embed an image on a webpage
   3. C. To format text within a webpage
   4. D. To define a section of navigation links

2. Which attribute specifies the URL of the image to be displayed?

   1. A. `href`
   2. B. `src`
   3. C. `alt`
   4. D. `url`

3. What is the purpose of the `alt` attribute in the `` tag?

   1. A. To specify the alignment of the image
   2. B. To provide alternative text if the image cannot be displayed
   3. C. To define the image's file format
   4. D. To set the image's transparency level

4. Which of the following is the correct way to specify the width and height of an image using HTML?

   1. A. ``
   2. B. ``
   3. C. ``
   4. D. ``

5. Which image format is best suited for photographs?

   1. A. GIF
   2. B. PNG
   3. C. JPEG
   4. D. BMP

6. What is the difference between an absolute URL and a relative URL in the `src` attribute?

   1. A. Absolute URLs are shorter than relative URLs
   2. B. Absolute URLs point to images on the same website, while relative URLs point to images on another website
   3. C. Absolute URLs point to images on another website, while relative URLs point to images on the same website
   4. D. There is no difference

7. Which HTML element allows for specifying different image sources based on screen size?

   1. A. ``
   2. B. ``
   3. C. ``
   4. D. ``