H030 Images and Links

Here you can practice working with images and links.

Create an index.html with a standard template (!+tab).
Add an h1 with the text “Exciting Images.”
Add two images from Pixabay inside a div:
Just find two beautiful images – right-click – copy the image’s address.
- Make sure there is an alt attribute.
- Make sure there is a width attribute set to 300 (this is usually managed through CSS).
- The second image should also be a link to the image on Pixabay.
Add a paragraph (p) with the text “Images are from Pixabay,” where the word “Pixabay” should be a link to Pixabay.

REMEMBER – the page must validate against W3C. Use Live Server to preview the result.

Click here for a possible solution

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>My App</title>
  </head>
  <body>
    <h1>Exciting Images</h1>

    <div>
      <img
        src="https://cdn.pixabay.com/photo/2019/05/14/16/43/hokkaido-4202825_960_720.jpg"
        alt="Flower"
        width="300"
      />
      <a
        target="_blank"
        href="https://pixabay.com/photos/lion-lioness-animal-world-predator-3973565/"
        ><img
          src="https://cdn.pixabay.com/photo/2019/02/03/21/53/lion-3973565__340.jpg"
          alt="Lion"
          width="300"
      /></a>
      <p>Images are from <a href="https://pixabay.com/">Pixabay</a></p>
    </div>
  </body>
</html>