hmm, I think it is the reverse. Take a look below at a sample line of code showing how to turn a phrase “Click Me!” into a link:
<a href="a-link-here">Click Me!</a>
This is called an anchor element by the way.
So to turn anything into a link, you must use the anchor element by tagging the words/image/other thing on the left and right as I did with the phrase “Click Me!” above.
okay , I need to ask you some questions first. In your last attempt posted above, which part of the anchor tag is the URL and which part is one that the browser will make clickable?
The URL Is the website you want the browser to take you to when you click the link. So in this case it is https://freecatphotoapp.com
So that is what goes inside the href’s value.
The words (or images or elements) in-between the opening and closing tag is what the user will actually see and click on.
Here’s that example code again: <a href="a-link-here">Click ME!</a>
If you make your anchor tag look the exactly the same, you will not pass the test.
You must replace the URL (the href value) and the words in the middle (Click ME!) with the link and text the exercise is asking you for.
So the href in this case was given as: https://freecatphotoapp.com (put it in the area that currently has “a-link-here”)
And the text in the middle (Click ME!) has to be the given img element (so that people can click on the cat image and go somewhere).
Hope this helps. If not, please try something different based on your current understanding and post the new code if it still doesn’t work.
This exercise wants you to turn the img into a link.
But your solution makes a new word “cat photos” into a link.
You need to put the anchor tags on the left and right of the img instead of the words “cat photos”
You want this img to become clickable.
So if you put the anchor tag around the image (opening tag to the left, closing tag to the right), then it will become clickable.
Somehow we are not communicating.
Let me try again differently.
Let’s click on Restart Step first to clear everything and start fresh.
We are shown this line of code to work with: <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
and this line of code is what makes the cat photo appear. This line of code is called an image or img element (the whole line of code is the img element, not a subset of it, the whole thing)
Here’s what you see at the moment in the preview pane:
it’s a cat image.
Great. Is this cat image clickable?
Go ahead and try.
I can tell you it is not clickable right now.
We want to make it clickable though. How do we do that?
We need to tell the browser that the img line of code (that one I pasted above) should be made into a link.
We need the anchor tag to do that. Anchor tags have an opening an closing part.
The opening part should looks like this: <a href="the-link-URL-here">
and the closing tag is simply </a>
These two work together to tell the browser what to do.
The first tag tells the browser that the nested text or nested element is the one we want the user to be able to click on.
The second tag tell the browser where to stop looking…
(so everything in between these two becomes a link).
And how does the browser know where to take us when we click?
That’s the href attribute.
We put a website address in there. (right now I have garbage text which will go nowhere).
If you do this correct and put the img tag (that whole line I mentioned above) in between the opening and closing tags of the anchor , then the broswer will make the cat photo clickable.
Do you want to try again or can I explain further something above?
Can you explain a little further about the img tag being in between the opening and closing anchor tags? I understand intellectually what you mean but, need a more in depth explanation. My code isn’t passing.
okay, so the anchor tags are these ones: <a href="website-link-here"> </a>
The first line is called the opening tag.
The second line is called the closing tag.
I can nest anything I want between the opening and closing tag. The browser will understand this to mean that the nested element or text is supposed to become a link.
So here’s an example of me nesting some words “Click Me!” and making them a link to google.
<a href="www.google.com">Click Me!</a>
This exercise wants you to do that, but instead of just plain text, they want you to put the whole image element in between the anchor tags.
The whole image element is the line I mentioned previously (starts with <img and ends with >)
Try again and let me see your code next time if you’re stuck.
is what makes the cat photo appear. This line of code is called an image or img element (the whole line of code is the img element, not a subset of it, the whole thing)