GRADE

TLE-ICT
COMPUTER PROGRAMMING
QUARTER 2 – MODULE 6
Working with Hyperlinks

1
 COMPUTER PROGRAMMING
QUARTER 2 MODULE 6

Working with Hyperlinks

Objectives
 Understand what a hyperlink is and its types
 Build a link from one page to another and link to a page on a different Web site
 Identify the attributes for anchor and target attributes
 Build an email link
 Use graphic as a link

What is Hyperlink?
A Web site is usually made up of several Web pages. Now what we will do is to create Web pages that are
connected to one another and, effectively, create a Web site.

Hyperlink is a reference link that allows you to navigate to another page of the same document or to
another document to another document. Hyperlink or link may be reresened by a colored text with an underline or
with an image.

Three Types of Hyperlinks

Abosolute URL Links to a page on a different Web server

Relatice URL Lins to a page on the same Web server

Named anchor Links to a different location on the same

Web page

Creating a Link from One Page to Another

In this part, you will learn how to create anhors (terms used to define a hyperlink) that allow viewers to go
to another Web page or file. Anchors can also be made to make email hyperlinks (which will be dicussed later).
Hyperlinks are clicked in order for viewers to jump to a page specified in it. Anchors can be made thru the container
tag <a></a> and setting the value of the attribute href as the target destinatino page.
Example: <a href=”www.yahoo.com”>Yahoo!</a>

Attributes for <a></a>

Attribute Definition

href Indicates the target of the anchor.

ex:<a href=”sampleParagraphs.html”> Click this to learn about
paragraphs again!</a>

target Indicates the behavior the Web browser will carry out.
ex:<a href=”sampleParagraphs.html”
name=”blank”>Click this to learn about paragraphs again?</a>

name Assigns a name to the anchor defining an internla bookmark

of the page
ex:<a href=”sampleParagraphs.html”
name=”paragraph”>Click this to learn about paragraphs
again?</a>

Target Attribute
As seen in the table of attributes for <a></a>, there exists a target attribute. It indicates what the Web browser will do
when the hyperlink is clicked. The following describes what each value does:
blank- the value of the href attribute or target URL will be opened in a new window.
_self- the value of the href attribute or target URL will be opened within the same frame. Frames will be discussed on
later chapters.
_parent- the value of the href attribute or target URL will be opened in the parent frameset. Framesets will be
discussed on later chapters.
_top- the value of the href attribute or target URL will be opened in the full body of the window.

2
Creating an Email Link
Email links allow users to send email and communicate with you easily. An email hyperlink opens the
Create New Email Message of the MS Outlook Express (or the default male client) and sets the message to be sent
to the specified email address. Youu can make your own email hyperlink by setting the value of the attribute href as
mailto: followed by the email address.
Example: <a href=mailto:[email protected]>Email us now</a>.

Linking to a Page on a Different Web Site

To link to a page on a different web site, you have to find first the destination file path and then copy it to
your code to create the link.

3
Using Graphics as Links
You can use graphics or images to take you to another page in your web site or to another web site.

Examples of codes that you can use to add graphics link:

<a href=http://address_of_page.com”>
<img src=http://address_of_graphic.gif align=”left”
border=”0”></a>

For supplemental sources, visit https://www.w3schools.com/html/html_links.asp.

4
 ACTIVITIES

I. Identify the following questions.

________ 1. It is the connection between your web page and the other resources in the internet.
________ 2. What is the tag to create a hyperlink?
________ 3. This is the value of the href attribute or target URL that will be opened in a new window.
________ 4. What will you add to href attribute if you want to add text link?
________ 5. What will you add to href attribute if you want to link to another web site?
________6. What will you add to href attribute if you want toadd a graphic link?
________ 7. What will you add to href attribute if you want to link to Youtube?
________ 8. What will you add to href attribute if you want to link to an email?
________ 9. What is the tag used to specify the color of the link?
________10. What is the tag used to specify the color of the visited link?

II. Enumerate me
Direction: Enumerate all the attributes you used in test III. Your answers here should match the codes
used in Test III.

III. Create the HTML file for the following outputs.

OUTPUT CODE
Create a replica of an announcement for a
new business, a new concert, movie etc.
Include an Email Link that they can click to
“Inquire something”

Create a replica of your favorite website or

blog and make sure to indicate a link that can
be clicked to the actual website.

Create a gallery of images of your favorite

websites. Include all the logo of those websites
and makes sure that when you click on the logo, it
will be directed to that website.