Chapter 4
HTML Links
1
Objectives:
At the end of this module, students will be able
to understand:
What is hyperlink?
How to create a hyperlink?
Differentiate an absolute link and relative link
How to create email, image, and internal links?
How to apply styles in links?
2
What is hyperlink?
A webpage can contain various links that take you directly to
other pages and even specific parts of a given page. These
links are known as hyperlinks.
Hyperlinks allow visitors to navigate between Web sites by
clicking on words, phrases, and images.
Note: When you move the mouse over a link, the mouse arrow will turn into a
little hand. Once you click the link, it jump to another web page or website.
3
How to create a Link?
A link is specified using HTML tag <a>.
This tag is called anchor tag.
Anything between the opening <a> tag and the closing </a>
tag becomes part of the link and a user can click that part to
reach to the linked document.
Syntax:
4
How to create link to the website in BlueGriffon
Highlight the text.
Go to “Insert” and choose “Link”.
Fill the URL details in the “Target” as shown in the screenshot below.
To open the website in new tab, choose from “Window target” the option “a new window”
5
How to create link to the email ID in BlueGriffon
Highlight the text.
Go to “Insert” and choose “Link”.
Fill the Email address in the “Target” as shown in the screenshot below.
Check the box “ This is an email address”
6
How to create link to another file
Highlight the text.
Go to “Insert” and choose “Link”.
Set the name of the file in the “Target” as shown in the screenshot below.
7
Example:
Output:
8
The href attribute
The href attribute specifies the destination address of the link
Hypertext reference can be:
Local - Links to other pages within your domain
<a href="mywebpage.html“> </a>
Global - Links to other domains outside of your site
<a href=http://www.yahoo.com/ ></a>
Internal - Links to current page
<a href="#anchorname“></a>
9
What is an absolute link?
An absolute link is a hyperlink containing a full URL, which
includes all the information needed to find a particular site,
page or document or other addressable item on the
Internet.
Note: Use absolute links if you're linking to a location on another website.
10
What is a relative link?
A relative link specifies the name of the file to be linked to
only as it is related to the current document.
Relative link is a hyperlink that contains only the file name.
When a user clicks a relative link, the browser takes them
to that location on the current site.
Note: Use relative links when linking to pages or files within your site
11
How to create Internal Links?
(Linking to a page section)
You can create a link to a particular section of a given webpage by
using name attribute.
Steps:
First: Create a link to the place where you want to reach with-in a webpage and name it
using <a...> tag
Example:
Second: create a hyperlink to link the document and place where you want to reach
Example:
12
Example
<html>
<body link=“green” vlink=“pink” alink=“blue”>
<a name=“purchasing"> PRODUCT</a>
<h1 align="center"> PRODUCT1</h1>
<p> <i> Working with CUSTOMER </i> </p>
<p> <i> HTML Color Values </i> </p>
<hr>
<h1 align="center"> PRODUCT2</h1>
<p> <i> Ordered Lists </i> </p>
<p> <i> Unordered Lists </i> </p>
<p> <i> Numbered Lists </i> </p>
<p>
<a href="# purchasing "> Purchasing </a>
13
</p></body>
The target attribute
This attribute is used to specify the location where linked document is
opened.
_blank: Opens the linked document in a new window or tab.
_self: Opens the linked document in the same frame.
Example:
Output:
14
How to create Email Links?
HTML <a> tag provides you option to specify an email address to send an
email.
Use mailto: email address along with href attribute.
Syntax:
Note: if a user clicks this link, it launches one Email Client (like Lotus Notes, Outlook
Express etc. ) installed on your user's computer.
15
Example: Email Link with Subject line
Code
Output
16
How to create Image Link?
It’s simple, use an image Inside hyperlink at the place of
text.
Example:
17
Question?
How to create image link that
opens the same picture in a
new tab?
18
Styling the Links
Inline, Internal and External
19
Changing Link Colors
By default, a link will appear like this (in all browsers):
An unvisited link is underlined and blue.
A visited link is underlined and purple.
An active link is underlined and red.
Example:
20
Rules :
Four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouse over it
a:active - a link the moment it is clicked
Note: When setting the style for several link states,
there are some order rules:
a:hover must come after a:link and a:visited
a:active must come after a:hover
21
Navigation and Links
22
How to style the
Navigation with Link?
23
Horizontal Navigation Bar
Output
Code
24
Vertical Navigation Bar
Code Output
25
Example: Mouse Over Link
Code Output
26
References:
https://www.w3schools.com/html/html_links.asp
https://www.tutorialspoint.com/html/html_text_links.htm
https://whatis.techtarget.com/definition/absolute-link
27
