Html Links Lab

Problem Statement

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.

Objectives

  1. Review how a tags are structured and implemented
  2. Practice the use of a tags to create different types of links

Review How a Tags Are Structured And Implemented

To create a link, we use the anchor link tag, written as <a>. The <a> tag requires two things:

  • An href attribute 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 an 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.

Introduce the Target Attribute

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.

Conclusion

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.

Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us