• Theory
  • Theory

Links and images, Mastery Challenge 4

Add an image to the page using what you've learned in the chapter about links and images.

Look at the image and figure out which one from the list you need to use: logo.png, picture.jpg, icon.svg, banner.png, or avatar.jpg.

Next, set the correct size for the image using the width and height attributes.

Important! The image may have both attributes, or it may have only one of them. The size should be a multiple of 20.

This is an additional challenge for reinforcing your image-handling skills.

Solution

The solution to the challenge will be available in a few minutes. Use it if you encounter difficulties. In the meantime, try to complete the challenge on your own.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Image</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <img src="banner.png" width="260" height="400" alt="Banner">
  </body>
</html>
  • index.html
HTML
HTML

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Granny Muffin

Easy there, pal!

To access the Links and images challenges in the HTML and CSS basics, you need to sign up and subscribe first.