Inserting Images explainer

The aim of this puzzle: Add an image to a webpage.

Walkthrough of the solution: In this puzzle, you’ll add another image to the webpage.

The <img> tag adds an image to a webpage. It doesn’t need a closing tag like other elements but it must have an src attribute that points to the location of the image. For example, the code below adds the image filename.jpeg to a webpage:

<img src='filename.jpg'> 

An image tag can also have an alt attribute. The alt attribute is optional and provides a text description that is useful when the image can’t be displayed or viewed. For example:

<img src=’flowers.jpg' alt=’picture of a sunflower’> 

To complete the puzzle, inside the HTML, add a new <img> tag below the existing <img>. Then, set its src attribute to ../../static/images/cat.jpg. Finally, give it an alt attribute and set its value to ’picture of Edgar’.

Sample code solution:
(Tap below to reveal)

HTML

<html>
    <body>
        <img src='../../static/images/catInBag.jpg' alt='picture of Moo'>
        <img src='../../static/images/cat.jpg' alt='picture of Edgar'>
    </body>
</html>

HTML Concepts: <html>, <body>, <img>, HTML element, HTML attribute