Scribd
Upload
101 views27 pages

Chapter 4 - Working With Links

The document discusses HTML links, including: - Hyperlinks allow users to navigate between websites and pages by clicking words, phrases, or images. - The <a> tag is used to create links, and the href attribute specifies the destination. Links can be absolute, relative, email, or internal. - Relative links specify a file's location related to the current page, while absolute links contain a full URL. Target specifies where linked content opens. - Styles can change link colors for different states like visited, hovered, or active. Order of link states in CSS is important. Navigation bars can be created horizontally or vertically using links.

Uploaded by

alhinai676
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
101 views27 pages

Chapter 4 - Working With Links

The document discusses HTML links, including: - Hyperlinks allow users to navigate between websites and pages by clicking words, phrases, or images. - The <a> tag is used to create links, and the href attribute specifies the destination. Links can be absolute, relative, email, or internal. - Relative links specify a file's location related to the current page, while absolute links contain a full URL. Target specifies where linked content opens. - Styles can change link colors for different states like visited, hovered, or active. Order of link states in CSS is important. Navigation bars can be created horizontally or vertically using links.

Uploaded by

alhinai676
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 27

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

You might also like