Download to read offline
More Related Content
Hyperlink.85 to 86
- 1. opic : Hyperlinks 1
- 2. Recap In the previousclass, you have learnt about HTTP commands and their functions • Client can make requests • GET for requesting a file from the server • POST for submitting information to the server • When it makes a request, the client also passes some client side descriptors to the server • Server responds • HTTP header • HTML document • or JPEG, or GIF, or • Browser implements client side of this service • Web server implements server side of this service 2
- 3. Objectives On completionof this period, you would be able to know about Hyper Links Hyperlink attributes Sample codes of Hyperlinks Navigation Types of navigations Anchor tags Types of Hyperlinks 3
- 4. Recap • <scheme>://<host>:<port>/<path> • Scheme • HTTP, FTP, GOPHER, MAILTO, ... • Host • An IP address or DNS name 4
- 5. What is Hyperlink? •It is a tool to navigate through a website using text or buttons • Make links look clickable • Only hyperlinks underlined to avoid confusion 5
- 6. Introduction to Hyperlinks •Allows one page to link to another document, file, location or another section • Written using <a href> and </a> tags • The text between the tags become the ‘clickable’ link • Hyperlinks can also use images 6
- 7. Basic Outline ofHyperlink Code <html> <head><title>Hyperlink example</title></head> <body> <a href="http://www.google.com">Google </a> </body> </html> 7
- 8. Hyperlink Attributes • href="location" • Hyperlink Reference • Represents the destination when the user clicks the link. • Links to external sites must be pre-pended with • http://www.google.com • name="faq1" • Creating an anchor • "Book marking" part of a page • Used in particularly long pages (e.g. FAQ page) 8
- 9. Sample Codes • Linkingto another page (same site) <body> Browse our <a href="main_page.htm">Products page</a> </body> • This would work if the main_page.htm is in the same folder as this page. If not, then you will have to write the full path of the file name Example: "project /html files/main_page.htm" 9
- 10. Sample Codes • Linkingto an external website <body> <a href="http://www.yahoo.com">Yahoo</a> </body> 10
- 11. Sample Codes • Linkto email client <body> <a href="mailto:[email protected]">Send me a mail</a> </body> Not reliable: assumes user has properly configured his email client Not advisable because of spam 11
- 12. Sample Codes • Linkto other file types • <body> • <a href="myfiles/wordfiles/meeting.doc">Minutes of meeting</a> • </body> • Possible outcomes • File contents is displayed in browser (.txt) • File is opened up in default application (.pdf) • File is downloaded • Depends on the browser 12
- 13. Sample Codes • Linkingto anchors <body> <a href="#section_1">Click to go to section 1</a> … <a name="section_1">This is section 1</a> </body> • Note: This code will work if the html page is rather long. The codes must be written in a pair of <a href> and <a name> tags. The <a name> tag is to identify a particular location on that page. The <a href> is to link to that particular location 13
- 14. Images • The <img>tag allows you to place images on your webpage • The <img> tag does not have a closing tag <img src="images/profile.gif"> 14
- 15. <img> Attributes • src="images/profile.gif" • Path to the image file • border="3" • Specifies the thickness of the border surrounding the image • height="120" • Specifies the height of the image in pixels • width="75" • Specifies the width of the image in pixels • alt="My Profile" • Alternate text & Displayed if image cannot be displayed 15
- 16. <img> Attributes • vspace="4" • Specifies in pixels the size of the vertical space surrounding the image • hspace="2" • Specifies in pixels the size of the horizontal space surrounding the image • valign="top" • Specifies how the text surrounding the image will be displayed. The different attributes are top, bottom and middle 16
- 17. Sample Codes <body> <img src="mypic.jpg"border="2" alt="a pic of myself"> </body> • Displays an image with a border thickness of 2. Also specifies the alternate text 17
- 18. Sample Codes <body> <imgsrc="mypic.jpg" height="200" width="200"> <img src="mypic.jpg" valign="top">This text will be displayed at the top level of the image <img src="mypic.jpg" valign ="middle">This text will be displayed at the middle level of the image <img src="mypic.jpg" valign ="bottom">This text will be displayed at the bottom level of the image </body> 18
- 19. Sample Codes <body> <img src="mypic.jpg" vspace="10" hspace="10">An image with a horizontal space of 10 pixels and a vertical space of 10 pixels </body> 19
- 20. Sample Codes • Usingan image as a hyperlink. <body> <a href="http://www.yahoo.com"> <img src="yahoopic.gif"></a> </body> 20
- 21. HyperLinks • Use concisewording • Avoid using a whole sentence or “click here” for your hyperlink • One to three words is best • Don’t provide links to pages “under construction” • Text hyperlinks should have a color distinction between unvisited and visited hyperlinks at a minimum • Shades of the same color show a relationship 21
- 22. HyperLinks • Link Titlesor Link Summaries -- hovering text block effect • Helps to predict where the link will go http://teach.concord.edu/?page=Implementation • Unvisited Hyperlink • The color the hyperlink will be at first encounter • Color is generally blue but not a steadfast rule • Color must be vivid, bright, and have good contrast, make it “POP” for the visitor 22
- 23. Hyperlinks • Active Hyperlink • Color of hyperlink once it is clicked • Remains active hyperlink color until another link is clicked • Visited Hyperlink • Color of hyperlink after a different link is clicked • Color should be a different shade/color than unvisited and active hyperlinks, usually a dull color • http://faculty.concord.edu /bus/ 23
- 24. Navigation • One ofthe most important components of your site • Determines how your visitor gets around your site • Section titles should be distinct • Clear and notably understandable 24
- 25. Types of Navigation •Navigation you should use • Left Side Navigation • Top Navigation • Tab Navigation 25
- 26. Left or RightSide Navigation • An effective method of navigation • http://www.monterey.com • http://www.yale.edu/ • http://www.alistapart.com/ • FrontPage templates utilize left side navigation 26
- 27. Top Navigation • Aneffective method of navigation – visitors are used to looking at the top for instructions • http://cat.concord.edu/ • http://faculty.concord.edu/westover/ • www.umass.edu • http://www.piedmont.edu/ 27
- 28. Tab Navigation • Veryeffective method of navigation, if done properly • http://www.amazon.com • http://www.barnesandnoble.com • http://www.doe.gov • http://www.walmart.com/ 28
- 29. Navigation Structure HOME Contacts What’sNew Products Services Jobs Search Ordering 29
- 30. Link Bar Options • Home page – first page added to navigation structure. • Global level pages • Parent level pages • Child level pages • Child pages under home • Same level pages • Back and next pages home 30
- 31. Hyperlink (link) • Hypertext= text + links • Typically, you click on the hyperlink to follow the link • Hyperlinks are the most essential ingredient of WWW • Link documents with other collections around the world 9EC606A.85 to 86 31
- 32. All Hyperlinks HaveTwo Parts • The Link Label is the visible element that the user points to and clicks (link labels can be text segments or images) • The Link Destination is the location that the link takes you to when you click on the link • Only the link destinations are handled differently for absolute URLs, relative URLs, and named anchors 9EC606A.85 to 86 32
- 33. Anchor Tags • Hyperlinksare created with the anchor tag <a></a> • The href attribute is used to specify the link destination • Examples • <a>this is a link label</a> • <a href=“dest.html”>label</a> 9EC606A.85 to 86 33
- 34. Different Types ofHyperlinks • Absolute URLs • usually point to Web pages on other Web servers • Relative URLs • point to Web pages on the same Web server • Named Anchors • point to a different location on the current Web page 9EC606A.85 to 86 34
- 35. Absolute URLs • Allabsolute URLs use complete URL addresses for their link destinations • Example format • <a href=“http://www.uchicago.edu/”>UChicago</a> • Any Web page can be referenced by an absolute URL as long as you have its correct address • Example: Linkexamples.html 9EC606A.85 to 86 35
- 36. Relative URLs • Arelative URL need only specify a file name for its link destination <a href=“sol2.html”>alternative solution</a> • This assumes the destination file is in the same directory as the HTML file containing the link • If the file is in a different directory, pathing information must be added to the href value • Example: Linkexamples.html 9EC606A.85 to 86 36
- 37. Named Anchors • Anamed link destination specifies a location that has been marked by an anchor tag with a name attribute <a name=“lumber”>Good Lumber</a> … <a href=“#lumber”>some good lumber</a> • The href value is prefaced with the # character but the name value is not • Example: Linkexamples.html 9EC606A.85 to 86 37
- 38. Named Anchors Combinedwith Other Links • A named anchor can be added to an absolute or relative link as long as the destination being referenced contains that named anchor <a href=“treehouse.html#lumber”>Some Good Lumber</a> • Just add a # followed by the anchor’s name to the end of the file name in the href value 9EC606A.85 to 86 38
- 39. Making anything alink • You can enclose all sorts of elements inside <a></a> • text • headings • Pictures • Making a picture a link • <a href= “foo.html”><img src=“foo.jpg”></a> • Example: imagelink.html 9EC606A.85 to 86 39
- 40. Control Link States •link, vlink and alink • Attributes of body tag • All three accept color values • Either hexadecimal RGB triplet or color name • Determine the color of all unvisited, already visited, and currently visiting hyperlinks 9EC606A.85 to 86 40
- 41. Link Maintenance • Anabsolute link that works today may not work tomorrow • Dead links frustrate visitors and detract from your Web pages • To keep all of your links operational, you have to test them periodically and update any that have died 9EC606A.85 to 86 41
- 42. Image Maps • Animage with different clickable regions (hot spots) • Each region can link to different document • Typically used in navigational menus and bars • It is the joint-work of <img> and <map> elements • <map> defines the hot spots and the linked destinations • <area> (standalone tag) • Attributes: shape, coords, href • <img> uses the “usemap” attribute to associate to certain map 9EC606A.85 to 86 42
- 43. Image Maps • Imagemaps can be created manually with the “ISMAP trick” or with the help of an image mapper • Best created with software • Example • Imagemap.html 9EC606A.85 to 86 43
- 44. HTML Validation • Validatingyour HTML will help to insure that it displays properly on all browsers • Typical validators • W3C • Web Design Group • Two required information for validation • Document Type Declaration • It begins the HTML document and uses <! DOCTYPE> tag • It tells which version of HTML to use in checking the document's syntax • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“ "http://www.w3.org/TR/html4/loose.dtd"> 9EC606A.85 to 86 44
- 45. HTML Validation • CharacterEncodings • It tells validator which method to use to covert byte to characters • ISO-8859-1 is a typically used encoding • You could set it by using a <meta> tag in the <head> element of a HTML page • <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1"> 9EC606A.85 to 86 45
- 46. Summary In this class,you have learnt about Hyper Links Hyperlink attributes Sample codes of Hyperlinks Navigation Types of navigations Anchor tags Types of Hyperlinks 9EC606A.85 to 86 46
- 47. Quiz 1. Hyperlinks always a) Written with Underline b) Written in capital letters c) Written without underline d) All of the above 9EC606A.85 to 86 47
- 48. Quiz 2. The followingis anchor tag a) WWW b) HTTP c) HTML d) <a> </a> 9EC606A.85 to 86 48
- 49. Frequently Asked Questions 1. Describe about Hyperlinks 2. State the Hyperlink attributes 3. Write short notes on types of navigation 4. Draw the structure of navigation 5. Describe anchor tags 9EC606A.85 to 86 49
- 50. Assignment 1. Explain the uses of Hyperlinks 2. State the Hyperlink attributes 3. Write short notes types of navigation 4. Draw the structure of navigation 5. Describe anchor tags 6. Write any four sample codes using hyperlinks 9EC606A.85 to 86 50