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.
<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:
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> <body> <img src='../../static/images/catInBag.jpg' alt='picture of Moo'> <img src='../../static/images/cat.jpg' alt='picture of Edgar'> </body> </html>
<img>, HTML element, HTML attribute