Unit 2.6 Link

521 views

Published on

Web Programming - Link

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
521
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Unit 2.6 Link

  1. 1. Programming and Development Tools Web Programming UNIT 2.6Web ProgrammingLink 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
  2. 2. Programming and Development Tools Web ProgrammingLet 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
  3. 3. Programming and Development Tools Web Programming 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 ofthe tomatoes is lighter than all the other tomatoes. Youare given a balance to weigh. Find the lightest tomato byweighing it 2 times only.<A Name="Coins"><H3>6 Coins</H3>You have 6 coins of which one is heavier. Weigh them 2times 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 cubeinto 64 one cm small cubes. <BR>How many cubes have?<OL>Link 2.6-3
  4. 4. Programming and Development Tools Web Programming<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. FindA,B,C,....I<BR><A Name="Triplet"><H3>Triplet Brothers</H3>Three triplet brothers of names Roger, Robin and Robertare sitting in a row. Roger speaks the truth, RobinSpeaks lie and Robert speaks both. A man went to them andasked the person sitting left "Who is sitting in themiddle?” He answered "Roger". He asked the person sittingin the middle "What is your name?” He answered "Robert".He asked the person sitting in the right "Who is sittingin the middle?” He answered "Robin". Find in whichposition Roger, Robin and Robert are sitting?<A Name="Brother"><H3>Who is younger?</H3>Sister says "I am older than my Brother". Brother says "Iam younger to my Sister". Atleast one of them must belying. Who is younger?<A Name="Share"><H3>Share it equally</H3>Three brothers are given 4 jugs of capacities 5,11,13 and24 litres. You have 24 litres of water in 24 litre jug.Share the water equally so that each gets 8 litres ofwater.<BR><BR><A Href="Answers.html">Show Answers</A></BODY> External Hyperlink</HTML> Code Sample 2.6.1Link 2.6-4
  5. 5. Programming and Development Tools Web ProgrammingThe 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 2tomatoes and put one in each pan. The one with lesserweight is the lightest of all.<LI>If there is difference, remove the tomatoes from theheavier side. Take the other 3 tomatoes and put 1 in eachpan and keep one outside. If there is no difference thetomato that is kept outside is the lightest. If there isdifference the lightest tomato is easily identified fromthe weighing.</OL><H2> 6 Coins </H2>Take 3 coins in each pan. Remove the coins from thelighter side. Take the 3 coins from the heavier side andput 1 in each pan and keep one outside. If there is nodifference the coin that is kept outside is the heaviest.If there is difference the heaviest coin is easilyidentified 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 &nbsp; B=7 &nbsp; C=4 &nbsp; D=6 &nbsp; E=8 &nbsp;F=2 &nbsp; G=5 &nbsp; H=9 &nbsp; I=3<H2> Triplet Brothers </H2>Left=Robert &nbsp; Middle=Robin &nbsp;Right=RogerLink 2.6-5
  6. 6. Programming and Development Tools Web Programming<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.<LI> Pour water from 13 litre jug to 5 litre jug.<LI> Pour water from 13 litre jug to 11 litre jug.<LI> Pour water from 5 litre jug to 13 litre jug.<LI> Pour water from 24 litre jug to 13 litre jug.<LI> Pour water from 13 litre jug to 5 litre jug.<LI> Pour water from 5 litre jug to 24 litre jug.</OL></BODY></HTML> Code Sample 2.6.2The Web page shown in Figure 2.6.1 is displayed in the browser window.Link 2.6-6
  7. 7. Programming and Development Tools Web Programming Figure 2.6.1: Web Page Showing HyperlinksIn Figure 2.6.1, the coloured texts are Hyperlinks. There are two types ofHyperlinks. They are: Internal Hyperlink and External Hyperlink.Click 8 Tomatoes. This page scrolls up to display the 8 Tomatoes puzzle in thesame page. This Hyperlink is linked to the content in the same page. Thistype of hyperlink is called Internal Hyperlink. Try solving all those puzzles. Ifyou cannot solve, scroll to the last line of the page. Click the hyperlink namedAnswers. A new Web page opens, displaying the answers to the puzzles.Here, the hyperlink Answers is linked to another Web page, which isAnswers.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
  8. 8. Programming and Development Tools Web ProgrammingInternal HyperlinkThe Internal Hyperlink is a hyperlink that is linked to the content in the sameWeb page. The content to which the hyperlink is linked is typed in the sameHTML document. Figure 2.6.2 explainsthe working of Internal Hyperlinks.In the Web page shown in Figure 2.6.1,there are seven hyperlinks under threesub-headings. When you click any ofthose hyperlinks, say 8 Tomatoes, theWeb page scrolls to the 8 Tomatoespuzzle because this hyperlink is linked tothe place where 8 Tomatoes puzzle isexplained. The text to be used ashyperlink is placed between the <A> and</A> tags.The tag used to create 8 Tomatoeshyperlink 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 islinked. The target text of the link is preceded by another <A> tag, The <A> taghere should be used along with NAME attribute as <A Name=” Tomatoes”>.The values given for Href and Name attributes should be the same. Lab ExerciseLab 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
  9. 9. Programming and Development Tools Web Programming <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
  10. 10. Programming and Development Tools Web Programming</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 DurianDurian is called the King of fruits. Durian is a big, green thorny fruit. The Malaysians love thisfruit even the foreigner like the taste. It is cultivated in all parts of Malaysia. The fruit can bemade into durian cake, durian powder and jam. Star FruitAnother local fruit is star fruit. It has a greenish to yellowish colour. When you cut the fruitacross it, it will look like a star. The fruit can be made into jam, jelly and fresh juice.External HyperlinkThe external Hyperlink is a hyperlink that is linked to another HTMLdocument. Figure 2.6.3 explains the working of External Hyperlinks.Link 2.6-10
  11. 11. Programming and Development Tools Web Programming Figure 2.6.3: External HyperlinkIn the Web page shown in Figure 2.6.1, the hyperlink Answers is linked to theHTML 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 islinked. NoteThere is no difference in the appearance of Internal Hyperlink and External Hyperlink. TipIt is possible to create links to any other Web site from your Web page. Lab ExerciseLab Exercise 3: Open D6_2.html in Internet Explorer. The following code will be present inD6_2.html.Link 2.6-11
  12. 12. Programming and Development Tools Web Programming<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 toYahoo</A><BR> <A Href="http:google.com">Click here to go toGoogle</A><BR> <A Href="http:microsoft.com">Click here to go toMicrosoft</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
  13. 13. Programming and Development Tools Web Programming Self-Check Exercise 2.6.1Correct 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 LinkThe hyperlink is distinguished from ordinary text by the colour. There arethree 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 alink 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 linkIn 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 aregiven 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 NoteAlink stands for Active Link and Vlink stands for Visited Link.Link 2.6-13
  14. 14. Programming and Development Tools Web ProgrammingFor 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 AttributeThe Target attribute can also be used within the anchor tag. This attributespecifies where the linked document should be opened. To open the linkeddocument 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 thecode is<A Href = “Answers.html” Target = “_blank”> Answers </A>. NoteIn the absence of Target attribute, the Web pages will be displayed in the same browserwindow.Images can also be used as links which will be explained in the next unit. Self-Check Exercise 2.6.2Do 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.11. 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
  15. 15. Programming and Development Tools Web Programming Figure 2.6.4: A Web page explaining HyperlinkThe continuation of the above page is shown below: Figure 2.6.5: A Web page explaining Internal HyperlinkLink 2.6-15
  16. 16. Programming and Development Tools Web Programming Figure 2.6.6: A Web page explaining External Hyperlink Technical TerminologiesHyperlink - 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.SummaryIn 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
  17. 17. Programming and Development Tools Web Programming 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.AssignmentI. 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
  18. 18. Programming and Development Tools Web ProgrammingCriterion Referenced TestInstruction: Students must evaluate themselves to attain the list ofcompetencies to be achieved.Name:Subject: Programming and Development ToolsUnit: LinkPlease [ √ ] after completing the competencyDate Link C1 C2 C3 C4 C5CommentCompetency 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

×