I dont know if i need to take an anchor out, Im not sure how to "wrap" the image correctly

HTML-CSS
#1

Tell us what’s happening:
Describe your issue in detail here.

  **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 target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
    <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
  </main>
</body>
</html>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Step 14

Link to the challenge:

#2

What have you tried?

#3

You’ve already turned the words “cat photos” into a link by wrapping them with a tags. You would do the same thing to turn an image into a link.

#5

Ive tried putting a target=“_blank” href= link here and its still not working

#6

Ive just tried putting which is incorrect

#7

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

#8

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key.

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

Look closely at how you turned the words “cat photos” into a link. You wrapped them in an anchor element. You did this by putting an opening a tag before them and a closing a tag after them. Did you do the same thing to the <img> element to make it a link?

#11

If I put an before it removes the photo and If i put it after it removes the phot and leaves the hyper link

#12

ive tried putting the anchor in a few places but I cannot get it to fit

#13

Have you tried putting the opening a tag before the <img> tag and the closing a tag after the <img> tag? If so, please post that HTML in here so we can see for ourselves.

#14 
<html>
  <body>
    <h1>CatPhotoApp</h1>
    <main>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
     <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>
#15

you forgot to close the opening a tag.

#16

ive closed it and removed the one after the hyper link and still nothing

#17 
<html>
  <body>
    <h1>CatPhotoApp</h1>
    <main>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
     <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>
#18

Don’t the target and href attributes need to be in the a tag. Look at the link you created for “cat photos” to see how it is done.

#19

where does the <a> start for the new hyper link, I cannot make it fit with keeping the image

#20

where does the anchor start, sorry I forgot you cannot type it

#21

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like