Question
In the context of this exercise, do the links in the HTML always have to be text, or can we make other content into a link?
Answer
You can make other types of content of a page into a link, other than just text.
For most content, including text, you can simply turn them into a clickable link by wrapping them between the opening and closing <a></a> tags. Whatever content is inside of the tags will become a clickable link.
For example, this will turn an image into a clickable link.
<a href="http://www.codecademy.com">
<img src="www.example.com/image.svg">
</a>
You can also make other HTML elements, such as <p> or <div>, into clickable links. For example,
<a href="http://www.codecademy.com">
<div>Codecademy</div>
</a>
Feel free to experiment with other types of content and see if they can become links!
10 Likes
I must say, this took me over 2 hours to get right but i did it. I almost quit but I think I misunderstood the directions and hints.
13 Likes
ok I may be doing this completely wrong I am actually trying to ask for help - not reply - but I can’t see how to ask a question in here. I am already stuck on literally the first topic. trying to get Alejandra’s website to have a web lin using href - when I do it with the anchor - the whole paragraph becomes a link not just ’ with 25 years experience’
tragically I can’t even work out how to create a screen shot of my work ! help!!!
2 Likes
Although I can’t see your work, it sounds like you are including your paragraph within your anchor tags. Here’s what can do what I think is happening:
Possibility 1: <a href = "link"> <p> paragraph text </p> </a> looks like this →
paragraph text
Possibility 2: <p> paragraph text before anchor <a href = "link"> the rest of the paragraph text </a></p> looks like this →
paragraph text before anchor the rest of the paragraph text
A possible solution would involve going back through your code and making sure that the text that you want to be used as a hyperlink, and only that text, is included within this element: <a href = "link"> desired text only</a>. This looks like this →
desired text only
This element needs to be enclosed within your <p></p> (paragraph) element. Therefore a final example including all of these steps could be constructed like this <p>If you would like to know more about "lorem ipsum" please click on this <a href = "https://www.lipsum.com/">link.<a></p>
This would look like the following:
If you would like to know more about "lorem ipsum" please click on this link.
I hope this helps!
3 Likes
Of course, I’m happy to help! I think I understand what you’re saying, but yeah anchor elements can get cluttered pretty quickly. As for sharing your work, sometimes Codecademy provides the opportunity to share your code as a git link, however it doesn’t always do that. If you have a github account, you could upload your work to a repository and copy the link to that repository. However, the simplest way would probably just be copying and pasting your HTML/CSS/JavaScript code into a comment. If you do that, you just have to make sure that you include all of your code within the ‘back-tick’ characters: " ` ". You can also highlight the copied code, and select the code symbol in the menu above that is next to the bolder quote icon.
I hope that helps. Good luck!
1 Like
Just copy the example code’s format from the first part of the lesson - the href goes into the first part of the anchor and the goes after the word experience: the
paragraph tag goes around all of this. bang boom bam, resume city.
i read all the comments and still dont undersatnd
help someone ?
took me 15-20 min to get instructions to my head, hope this helps
3 Likes
When you copy the value for the href attribute, you included the fullstop punctuation mark that should not be in the html file name.
The correct attribute value should be "/resume.html" instead of "/resume.html."
One way to make sure that the file names you are linking to are correct is to check the folder icon on the top left of your editor (top left of the black window). Within you can see all the files that is needed for the lesson.
1 Like
me to i have recently started to look into full stack development as a career path and coming from zero knowledge in the coding world it takes a minute to take in even just the very basics but keep at i am 37 now and have set my self a time line of 3 years to get to where i want to be fingers crossed but i have to say i am loving it so far
2 Likes
This is fun! 
Thank you for sharing this
1 Like
As addition to @jephos249 answer, you could also turn a whole block of content into a clickable link. For example, as you can find in ecommerce websites,
<a href="#">
<!-- Replace the # symbol with the product's page link -->
<div>
<div>
<img src="/product.jpg" alt="Product">
</div>
<div>
<h4>Product title</h4>
<div>$12</div>
<p>Product's short description.</p>
</div>
<div>
<button>Add to favorites</button>
<button>Add to cart</button>
<button>Buy now !</button>
</div>
</div>
</a>
I hope this sheds some more clarity on the subject! Happy coding to you’ll!
4 Likes
Its kinda advanced knowledge, will take time to understand. Anyways, thanks for sharing extra knowledge that makes us stand out.
Keep Sharing, Keep Learning.
1 Like
thanks dude! It was helpful of course!
