Using HTML Link Tags

Lesson 2: Embedding Content

▪ I can identify and use the HTML link
tags.
What is Hyperlink?
▪ A hyperlink is a word, phrase, or image that
you can click on to jump to a new document
or a new section within the current document.
Hyperlinks are found in nearly all Web pages,
allowing users to click their way from page to
page (The Tech Terms Computer Dictionary).
What is Hyperlink?
A web page can contain links or hyperlinks such as:
▪ Link from one website to another
▪ Link from one web page to another on the same
website
▪ Link from one part of a web page to another part of
the same page
▪ Link that opens in a new browser window
▪ Link that opens our email program
Anchor Tag and Href Attribute
▪ Anchor Tag
– A link is specified using the anchor tag or <a> tag.
– The text between the opening and the closing anchor tag will be
displayed as a hyperlink.
Syntax: <a> Text </a>
▪ Href Attribute
– The href attribute or hypertext reference is used to indicate the URL
(Uniform Resource Locator) or the address of the web page.
Syntax: < a href = “firstpage.html”> First Page </a>
 Anchor Tag and Href Attribute
▪ By default, links will appear in
this way for all browser:
– Underlined and blue. It is an
unvisited link.
– Underlined and purple. It is a
visited link.
– Underlined and red. It is an
active link.
Link to a Website
Absolute URL
– When we link to a different website, the value of the href attribute is the
complete web address for the website.
– Includes the domain name of the website and can be followed by the
path to a specific page.
Syntax: <a href = “absolute URL”> link text </a>
Link to Another Webpage on the Same Website
Relative URL
– To link to another web page within the same site, we do not need to
specify the complete address in the URL.
– Like a shorthand version of absolute URL, but do not need to specify the
domain name.
Syntax: <a href = “relative URL” link text </a>
Anchor Tag and Name Attribute
Name attribute
– Used to create a named anchor.
– Help us save from scrolling around to find what we are looking
for within the page.
– By creating a link that can jump directly to a specific section
of the web page.
Syntax: <a name = “sample name”> </a>
Link to a Web Page Section
▪ We can also create a link to a particular section of a web page
using the name attribute.
 Link to a Web Page Section
▪ Let us follow the steps below:
1. Identify the point on the same page
where the link will go to.
Syntax:
<a name = “name of the page section”> </a>
Example:

Output:
There is no output. The page section is
just given a name.
Link to a Web Page Section
2. Create a hyperlink to link to the named web page section.
Syntax: <a href = “name of the page section”> Link Text </a>
Example:

Output:
Anchor Tag and Target Attribute
▪ The target attribute specifies where to open the linked document.

Attribute = value Description

target = “_blank” It opens the linked document in a new window or tab.

target = “_self” It opens the linked document in the same window or tab.
(Default)
Open Links in a New Window
By default, the link will open in the current window. To open a
link in a new browser window, the value of the target attribute
should be _blank.
Create Email Links
We can also create email links, using the mailto: value of the
href attribute followed by the email address we want the email to
be sent to.
 Objective/s

I can identify and use the HTML link

tags.