- Recognize how
a
tags are structured and implemented - Create different types of links with the
a
tag
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
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 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 test
and follow along with the test errors. When all tests are passing,
run learn submit
. (If applicable, use httpserver
in the Learn IDE 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.