Unit 2.6 Link

Programming and Development Tools Web Programming

UNIT

2.6
Web Programming
Link

OBJECTIVES
This unit helps you to link various Web pages of a Web site using
Hyperlinks.
At the end of this unit, you will be able to
Identify a link in a Web page.
Differentiate Internal and External Hyperlinks.
Open a Web page in a new Window.
Change the colour of different states of a link.

Benchmark standard
Organize the Web site by creating links between the Web pages of
a Web site successfully.

Link 2.6-1


Let us Revise!

1. Name the different types of list.
2. Name the tags used to create Ordered List.
3. Name the attributes of <UL> tag.
4. State how you will create Definition List.

Introduction
A good Web page is one which enables the user locate the information easily.
Having all the contents in a single Web page is difficult. So, the content is
distributed logically in different Web pages and linked to one another. Also, if
a Web page is very long it will be difficult for the user to scroll the Web page
to his desired location. These difficulties can be overcome by using
Hyperlinks.

2.6.1 Hyperlink
A Hyperlink is a text or image that is linked to a location in the same Web
page or to a different Web page. You can navigate through the Web pages
easily by clicking the Hyperlinks.

Hands-On!

The following example illustrates the use of the Hyperlink.
Open the HTML file Puzzle.html in Internet Explorer.
The code in Puzzle.html file is given below:
<HTML>
<HEAD>
<TITLE> Link </TITLE>
</HEAD>
<BODY>
<H1 Align=”Center”> Winners are Great Thinkers and
Losers are Great Blinkers </H1>
Solve the following puzzles and prove that you are a
great thinker.
<OL>
<LI>Puzzles related to weight

Link 2.6-2


Internal Hyperlinks
<UL Type="disc">
<LI><A Href="#Tomatoes">8 Tomatoes </A>
<LI><A Href="#Coins">6 Coins </A> Internal Hyperlinks
</UL>
<LI>Puzzles related to Maths
<UL Type="disc">
<LI><A Href="#Green">Green coloured cubes </A>
<LI><A Href="#Multi">Multiplication and Addition </A>
</UL>
Internal Hyperlinks
<LI>Puzzles related to logical thinking
<UL Type=disc>
<LI><A Href="#Triplet">Triplet Brothers </A>
<LI><A Href="#Brother">Who is younger? </A>
<LI><A Href="#Share">Share it equally </A>
</UL>
</OL>
<H2> Puzzles related to weight </H2>
<A Name="Tomatoes">
<H3>8 Tomatoes</H3>
There are 8 identical tomatoes supplied to you. One of
the tomatoes is lighter than all the other tomatoes. You
are given a balance to weigh. Find the lightest tomato by
weighing it 2 times only.

<A Name="Coins">
<H3>6 Coins</H3>
You have 6 coins of which one is heavier. Weigh them 2
times using a common balance and pull the odd one out,

<A Name="Green">
<H2> Puzzles related to Maths </H2>
<H3>Green Cubes</H3>
Paint a cube of side 4 cm with Green colour. Cut the cube
into 64 one cm small cubes. <BR>
How many cubes have?
<OL>

Link 2.6-3


<LI>No red colour on any side,
<LI>One face red,
<LI>Two faces red.
<LI>Three faces red.
</OL>
<A Name="Multi">
<H3>Multiplication and Division</H3>
AB multiplied by C gives DE. DE added to FG gives HI.
A,B,C,...I are different digits from 1 to 9. Find
A,B,C,....I<BR>

<A Name="Triplet"><H3>Triplet Brothers</H3>
Three triplet brothers of names Roger, Robin and Robert
are sitting in a row. Roger speaks the truth, Robin
Speaks lie and Robert speaks both. A man went to them and
asked the person sitting left "Who is sitting in the
middle?” He answered "Roger". He asked the person sitting
in the middle "What is your name?” He answered "Robert".
He asked the person sitting in the right "Who is sitting
in the middle?” He answered "Robin". Find in which
position Roger, Robin and Robert are sitting?

<A Name="Brother">
<H3>Who is younger?</H3>
Sister says "I am older than my Brother". Brother says "I
am younger to my Sister". Atleast one of them must be
lying. Who is younger?

<A Name="Share">
<H3>Share it equally</H3>
Three brothers are given 4 jugs of capacities 5,11,13 and
24 litres. You have 24 litres of water in 24 litre jug.
Share the water equally so that each gets 8 litres of
water.
<BR><BR><A Href="Answers.html">Show Answers</A>
</BODY> External Hyperlink
</HTML>
Code Sample 2.6.1

Link 2.6-4


The code in Answers.html is given below:
<HTML>
<HEAD>
<TITLE> Answers </TITLE>
<BODY>
<H1 Align=Center> Answers to the puzzles </H1>
<H2> 8 Tomatoes </H2>
Take 3 Tomatoes in each pan. There are 2 possibilities.
<OL>
<LI>If there is no difference in weight, take the other 2
tomatoes and put one in each pan. The one with lesser
weight is the lightest of all.
<LI>If there is difference, remove the tomatoes from the
heavier side. Take the other 3 tomatoes and put 1 in each
pan and keep one outside. If there is no difference the
tomato that is kept outside is the lightest. If there is
difference the lightest tomato is easily identified from
the weighing.
</OL>
<H2> 6 Coins </H2>
Take 3 coins in each pan. Remove the coins from the
lighter side. Take the 3 coins from the heavier side and
put 1 in each pan and keep one outside. If there is no
difference the coin that is kept outside is the heaviest.
If there is difference the heaviest coin is easily
identified from the weighing.
<H2> Green Cubes </H2>
<OL>
<LI> No colour on any side - 8 cubes
<LI> Green colour on one side - 24 cubes
<LI> Green colour on two sides - 24 cubes
<LI> Green colour on three sides - 8 cubes
</OL>
<H2> Multiplication and Addition </H2>
A=1   B=7   C=4   D=6   E=8  
F=2   G=5   H=9   I=3
<H2> Triplet Brothers </H2>
Left=Robert   Middle=Robin  Right=Roger

Link 2.6-5


<H2> Who is younger? </H2>
Sister
<H2> Share it equally </H2>
The steps to be followed are: <BR>
<OL>
<LI> Pour water from 24 litre jug to 13 litre jug.
</OL>
</BODY>
</HTML>
Code Sample 2.6.2
The Web page shown in Figure 2.6.1 is displayed in the browser window.

Link 2.6-6


Figure 2.6.1: Web Page Showing Hyperlinks

In Figure 2.6.1, the coloured texts are Hyperlinks. There are two types of
Hyperlinks. They are:
Internal Hyperlink and
External Hyperlink.
Click 8 Tomatoes. This page scrolls up to display the 8 Tomatoes puzzle in the
same page. This Hyperlink is linked to the content in the same page. This
type of hyperlink is called Internal Hyperlink. Try solving all those puzzles. If
you cannot solve, scroll to the last line of the page. Click the hyperlink named
Answers. A new Web page opens, displaying the answers to the puzzles.
Here, the hyperlink Answers is linked to another Web page, which is
Answers.html. This type of hyperlink is called External Hyperlink.
Both Internal Hyperlink and External Hyperlink are created using <A> tag.
This tag is also called as Anchor tag.

Link 2.6-7


Internal Hyperlink
The Internal Hyperlink is a hyperlink that is linked to the content in the same
Web page. The content to which the hyperlink is linked is typed in the same
HTML document. Figure 2.6.2 explains
the working of Internal Hyperlinks.

In the Web page shown in Figure 2.6.1,
there are seven hyperlinks under three
sub-headings. When you click any of
those hyperlinks, say 8 Tomatoes, the
Web page scrolls to the 8 Tomatoes
puzzle because this hyperlink is linked to
the place where 8 Tomatoes puzzle is
explained. The text to be used as
hyperlink is placed between the <A> and
</A> tags.
The tag used to create 8 Tomatoes
hyperlink is
Figure 2.6.2: Internal Hyperlink
<A Href = “Tomatoes”> 8 Tomatoes </A>.
Here, HREF is the attribute that specifies to which place the document is
linked. The target text of the link is preceded by another <A> tag, The <A> tag
here should be used along with NAME attribute as
<A Name=” Tomatoes”>.
The values given for Href and Name attributes should be the same.

Lab Exercise

Lab Exercise 1: Open D6_1.html in Internet Explorer. The following code will be present in
D6_1.html.
<HTML>
<HEAD>
<TITLE> Menu Choices </TITLE>
<A Name="TOP">
<H1 Align="CENTER"> Menu Choices </H1>
</HEAD>
<BODY >
<H1> <A Href="#MEAT"> Meat Dishes </A> <BR><BR>
<A Href="#SEAFOOD"> Seafood Dishes </A><BR><BR>

Link 2.6-8


<A Href="#VEG"> Vegatable Dishes </A><BR>
</H1>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<H2 Id="MEAT"> Meat <BR> </H2>
<UL>
<LI> Beaf <BR>
<LI> Chicken <BR>
<LI> Deer <BR>
<LI> Lamb <BR>
<LI> Turkey
</UL>
<H6 Align=CENTER><A Href="#TOP">Back to Top
</A></H6>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<H2 Id ="SEAFOOD"> Seafood </H2>
<UL>
<LI> Crab <BR>
<LI> Cattle Fish <BR>
<LI> Fish<BR>
<LI> Oyster <BR>
<LI> Prawn <BR>
</UL>
<H6 Align=CENTER><A Href="#TOP">Back to Top</A></H6>
<BR><BR><BR><BR><BR>
<H2 Id ="VEG"> Vegetables </H2>
<UL>
<LI> Brocolli <BR>
<LI> Carrot <BR>
<LI> Cabbage <BR>
<LI> Cauliflower <BR>

<LI> Potato
</UL>
<H6 Align=CENTER><A Href="#TOP">Back to Top
</A></H6>

Link 2.6-9


</BODY>
</HTML>

1. Identify the tag which is used to create link?
2. Name the attribute which is used specify the document to which the hyperlink is linked
to?
Lab Exercise 2: Open Malaysia.html that you have created under the folder in your name in
C:.
1. When you click on the text “National Flower”, the following description should be
displayed in the same page using internal hyper link.
National Flower
Bunga Raya (hibiscus) is the national flower in Malaysia. No one knows when it’s
introduced to Malaysia. It is originated in Asia and the Pacific Islands. Hibiscuses are
found in many difference colours and colour combinations. But Malaysian has chosen
the red five-petalled types as their national flower. It is also used for medicine and
cosmetics, for dyeing the hair and eyebrows. Some of them still use the roots of the
flower as a cure for fever. The petal can be used for polishing shoes.
2. When you click on the text “Fruits of Malaysia”, the following description should be
displayed in the same page using internal hyper link.
Fruits in Malaysia
Durian
Durian is called the King of fruits. Durian is a big, green thorny fruit. The Malaysians love this
fruit even the foreigner like the taste. It is cultivated in all parts of Malaysia. The fruit can be
made into durian cake, durian powder and jam.
Star Fruit
Another local fruit is star fruit. It has a greenish to yellowish colour. When you cut the fruit
across it, it will look like a star. The fruit can be made into jam, jelly and fresh juice.

External Hyperlink
The external Hyperlink is a hyperlink that is linked to another HTML
document. Figure 2.6.3 explains the working of External Hyperlinks.

Link 2.6-10


Figure 2.6.3: External Hyperlink

In the Web page shown in Figure 2.6.1, the hyperlink Answers is linked to the
HTML document named Answers.html. When you click the Answers hyperlink,
the Answers.html document opens in the browser window.
The tag used to create Answers hyperlink is
<A Href = “Answers.html”> Answers </A>
Here, Href is the attribute that specifies the document to which the hyperlink is
linked.

Note

There is no difference in the appearance of Internal Hyperlink and External Hyperlink.

Tip

It is possible to create links to any other Web site from your Web page.

Lab Exercise

Lab Exercise 3: Open D6_2.html in Internet Explorer. The following code will be present in
D6_2.html.

Link 2.6-11


<HTML>
<HEAD>
<TITLE> Hyper Link </TITLE>
<H1 Align="CENTER"> Hyper Links </H1>
<HR>
</HEAD>
<BODY Bgcolor="PINK" Text="#FF00FF" Link="#FF0000"
Vlink="#000080" Alink="#800080" >
<H3>
<A Href="http:yahoo.com">Click here to go to
Yahoo</A><BR>
<A Href="http:google.com">Click here to go to
Google</A><BR>
<A Href="http:microsoft.com">Click here to go to
Microsoft</A><BR>
</H3>
</BODY>
</HTML>
1. Identify the tag which is used to create link in source code D6_2.html.
2. Underline the attribute which is used with the <A> tag to specify the name of the file to
be linked to.
3. Name the attribute which is used to sets the colour for active links, visited links and
hyper links in source code D6_2.html.

Lab Exercise 4: Open D6_2.html in Internet Explorer.
1. View the source code in notepad.
2. Apply the active link colour to Maroon.
3. Apply the visited link colour to Yellow.
4. Apply the hyperlink colour to Green.
5. Save the file and view the output in the browser.

Lab Exercise 5: Open Malaysia.html that you have created under the folder in your name in
C:.
1. When you click on the text “States of Malaysia”, the “States.html” which you have
created under the folder in your name in C: should open in new window.
2. When you click on the text “Festival”, the “Festivals.html” which you have created
under the folder in your name in C: should open in new window.
3. When you click on the text “Whether and Climate in Malaysia”, the “Climate.html”
which you have created under the folder in your name in C: should open in next
window.

Link 2.6-12


Self-Check Exercise 2.6.1

Correct the following wrong sentences:
1. Images cannot be used as Hyperlinks.
2. The External Hyperlink is a hyperlink that is linked to the content in the same Web
page.
3. In case of External Hyperlink, the content to which the hyperlink is linked is typed in the
same HTML document.

Changing the Colour of the Link
The hyperlink is distinguished from ordinary text by the colour. There are
three states of a link. They are
The link that has not been visited earlier,
The link that is being visited and
The link that had been already visited.
These states are identified by the colour of the link. The default colours of a
link in 3 different states are given in Table 2.6.1.
State of Link Default Colour of Link
Unvisited Link Blue
Link being visited Red
Visited Link Purple
Table 2.6.1: Default colours of a link
In Figure 2.6.1, the first link is purple in colour which means it is a visited link.
All the other links are blue in colour which means they are not visited so far.
The colour of the links can be changed using the attributes of the <BODY> tag.
The attributes used to change the colour of the links in different states are
given in Table 2.6.2.

State of Link Attribute
Unvisited Link Link
Link being visited Alink
Visited Link Vlink
Table 2.6.2: Attributes of <BODY> tag to change the colour of a link

Note
Alink stands for Active Link and Vlink stands for Visited Link.

Link 2.6-13


For example, the following code displays the colour of active link in Green,
unvisited link in yellow and visited link in Magenta.
<BODY Link=”Yellow” Alink=”Green” Vlink=”Magenta”>
Anchor Tag and Target Attribute
The Target attribute can also be used within the anchor tag. This attribute
specifies where the linked document should be opened. To open the linked
document in a new window, the value to be assigned to the Target attribute is
_blank. For example, to open the Answers.html document in a new window the
code is
<A Href = “Answers.html” Target = “_blank”> Answers </A>.

Note
In the absence of Target attribute, the Web pages will be displayed in the same browser
window.
Images can also be used as links which will be explained in the next unit.

Self-Check Exercise 2.6.2
Do the following:
1. Write the code to change the colour of visited links to Green, active link to Yellow.
2. What change you will make in the code to change a normal text to a hyperlink?

Activity 2.6.1

1. Create Web pages that explain the Anchor tags as shown in Figures
2.6.4 and 2.6.5.
2. Save the first HTML file as Activity1.html and save the second HTML file as
External.html.

Link 2.6-14


Figure 2.6.4: A Web page explaining Hyperlink

The continuation of the above page is shown below:

Figure 2.6.5: A Web page explaining Internal Hyperlink

Link 2.6-15


Figure 2.6.6: A Web page explaining External Hyperlink

Technical Terminologies

Hyperlink -
A Hyperlink is a text or image that is linked to a
location in the same Web page or to a different Web
page.
Internal Hyperlink - The Internal Hyperlink is a hyperlink that is linked to
the content in the same Web page.
External Hyperlink - The external Hyperlink is a hyperlink that is linked to
another HTML document.
Visited Link - The Hyperlink of a Web page that had been visited
already.
Unvisited Link - The Hyperlink of a Web page that is not visited so far.
Active Link - The Hyperlink of a Web page that is being visited
currently.
Anchor Tag - The tag (<A>) that is used to create links in Web
pages.

Summary
In this unit, you learnt that
A Hyperlink is a text or image that is linked to a location in the same
Web page or a different Web page.
The two types of hyperlinks are Internal and External.
The Internal Hyperlink is a hyperlink that is linked to the content in
the same Web page.
The tag (<A>) that is used to create links in Web pages is called
Anchor tag.

Link 2.6-16


The text to be used as hyperlink is placed between the <A> and
</A> tags.
The values given for Href and Name attributes should be the same.
To open the linked document in a new window, the value to be
assigned to the Target attribute is _blank.
The default colour of unvisited link is Blue.
The default colour of visited link is Purple.
The default colour of active link is Red.
The attributes of the <BODY> tag that are used to change the
colour of the link are LINK, ALINK and VLINK.

Assignment

I. Answer the following questions:
1. Define Hyperlink.
2. Name the two types of Hyperlinks.
3. Name the tag and its attribute used to create a Link.
4. Write the procedure to change the colour of the Hyperlinks.
5. Write the use of Target attribute.

Link 2.6-17


Criterion Referenced Test
Instruction: Students must evaluate themselves to attain the list of
competencies to be achieved.

Name:
Subject: Programming and Development Tools
Unit: Link

Please [ √ ] after completing the competency

Date Link
C1 C2 C3 C4 C5

Comment

Competency codes:

C1 = State the use of Link.
C2 = State the definition of Internal Link. How to use it?
C3 = State the definition of External Link. How to use it?
C4 = Change the colours of the links using the attributes of <BODY> tag.
C5 = Display a Web page in a new browser window.

Link 2.6-18

Unit 2.6 Link

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à Unit 2.6 Link

Similaire à Unit 2.6 Link (20)

Plus de Intan Jameel

Plus de Intan Jameel (20)

Dernier

Dernier (20)

Unit 2.6 Link