Turn the image into a link by surrounding it with necessary element tags

HTML-CSS
1

Hint: Your anchor (a ) element should have an opening tag. Opening tags have this syntax: <elementName> .

So where does that go?

  **Your code so far**

<html>
<body>
  <h1>CatPhotoApp</h1>
  <main>
    <h2>Cat Photos</h2>
    <!-- TODO: Add link to cat photos -->
    <p>Click here to view more <a href="https://freecatphotoapp.com">cat photos<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>.</p>
   
  </main>
</body>
</html>

  **Your browser information:**

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

Challenge: Step 14

Link to the challenge:

2

You need to wrap the <a href=""></a> around the image only.

3

like this?
A cute orange cat lying on its back.

4

How do i show the code instead of the image?

5

A cute orange cat lying on its back.

I think you will be able to go to the link with the cat.

6

Hint: Your anchor (a) element should have a closing tag. Closing tags have a / just after the < character.

But i have a closing tag after the image.

7

Haha idk. Yours isn’t right bc see how if you click the cat I put it goes to the link?
Put the img element inside the <a href=""></a>

1 Like
8

Your <a> doesn’t start right before the image and you have a </p> at the end.

9

I’m having trouble understanding how the img element is not inside the <a href=""></a> already

10

Sorry i forgot to show you where i’m at now:

<p>Click here to view more <a href="https://freecatphotoapp.com">cat photos 
      <a><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>.</p>
11

I would restart the lesson to get a fresh start. Do not change/move any of the existing HTML. The only thing you want to do is wrap the existing <img> in a link.

12

Ok I will try to explain clearly. If you notice you have the words cat photos in between <a href="https://freecatphotoapp.com"> and where your image element begins.

<a href="https://freecatphotoapp.com"> Should be right in front of the <img...>.

Also at the end you have </a>.</p>. Here you don’t need the </p> and the </a> should be at the very end.

Doing this will wrap the image within the <a>.

13 
<p>Click here to view more <a><a target="_blank" href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>.

Thank you for trying to help but i obviously don’t get it. I’m going to have to stop here before i get frustrated.

14

Delete this.

Not needed.

The </a> should be at the very end.

15

This works:

<a target="_blank" href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

Thanks MarcGrav

1 Like
16

This works too:

<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
17

Delete all those elements from img src and have it on next line. Let me show how I did it
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">catphotos</a>.</p> <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back"></a>

18

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.