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


<UL Type="disc">

<LI><A Href="#Tomatoes">8 Tomatoes </A>

<LI><A Href="#Coins">6 Coins </A>

</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>

Internal Hyperlinks

Internal Hyperlinks

</UL>

<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>

Internal Hyperlinks

</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.

There is no difference in the appearance of Internal Hyperlink and External Hyperlink. It is possible to create links to any other Web site from your Web page.

Note

Tip

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

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

Note

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>.

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.

Do the following:

Note

Self-Check Exercise 2.6.2

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 TestInstruction: 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

Technology

Transcript of Unit 2.6 Link