Let’s explore how hypertext works by adding a link to a basic website!
Reading and modifying code is an essential first step in learning to build things for the web. This practice can take you a long way while you’re learning to build websites from scratch.
An attribute in HTML provides additional information about an HTML element. It comes in a name and value pair with the structure
name="value". For example, you can specify the width of an HTML element with the attribute
Links are created in HTML with something called the
href attribute, which stands for hyperlink reference. The
href attribute allows us to specify the URL, or address on the web, that a link should take users to. See below for an example of the
href attribute in action.
When we set the
href property on an anchor tag (abbreviated to
<a>) we can specify both the text that should be rendered for the user (the text within the anchor tag) and the URL that the browser should navigate to.
With this code, we’re assigning the value
www.codecademy.com to the
href attribute. When a user clicks on the text of this link (Learn to code!), they will be directed to www.codecademy.com.
<a href="www.codecademy.com">Learn to code!</a>
Alejandra has begun to build out her business’s website. She wants to link from her homepage to a different page that contains her resume.
To start, look in index.html for the text that says
25 years of experience — it should be near line 20. Put an anchor tag (
<a>) around this text.
href attribute to this anchor tag, and give it the value
This URL is called a relative path and it looks a little different from the full URLs you’re used to seeing. That’s because it’s actually a link to another page on the same website, so we can omit the first part. Instead of
www.jetsetter.com/resume.html we can abbreviate the link to just
Open the hint if you need a reminder on how to set attributes for html tags.
Click on the link that you just made to navigate to see Alejandra’s resume!
Click Run one more time when you are ready to move on to the next lesson.