- Recognize how
atags are structured and implemented - Create different types of links with the
atag
Links, also known as hyperlinks, put the web in World Wide Web: many millions of HTML pages, connected together through links. In this lab, we will be discussing links in HTML and applying what we've learned.
To create a link, we use the anchor link tag, written as <a>.
The <a> tag requires two things:
- An
hrefattribute to tell the browser where we want the link to go to. - Some sort of text or content that the
<a>tag can wrap around, becoming the link text. This includes images!
<a href="https://www.google.com">Google</a>The example above, when displayed in the browser, by default, would show Google in blue and underlined. If this were on a website, clicking it would redirect the user, changing the current browser window URL to google.com.
The href attribute in this example, is a full link, also known as an
absolute path. Alternatively, we can also use a relative path, which is
used when we want to link to a separate file on the same website:
<a href="about.html">About Page</a>Say this link was on index.html, the home page of a website you had built.
When a site visitor clicks the above link, the browser knows to look for a file
called about.html that is located in the same folder as index.html.
The target attribute can be added along side href and has a specific use:
setting this attribute to be target='_blank' will cause the browser to open a
new tab when the link is clicked, instead of changing the current page you are
on:
<a href="https://www.google.com" target="_blank">Google</a>Let's practice creating links. Take a look at index.html for some additional
guidance. To complete this lab you must:
- Write one absolute path link and one relative path link
- Wrap the provided image in a link tag
For the relative path link, there is a second HTML file, about.html, that can
be used as the value in the href attribute.
Run learn and follow along with the test errors. When all tests are passing,
run learn submit. Use httpserver to see the results of your work.
To recap what we've learned, links can:
- Connect a user to a separate website
- Connect a user to another page on the same website
- Open up a new browser tab, using
target
Links connect individual web pages together, and collectively create what we know as the web.
View HTML Links on Learn.co and start learning to code for free.