Hyperlink.85 to 86
Upcoming SlideShare
Loading in...5

Hyperlink.85 to 86






Total Views
Views on SlideShare
Embed Views



3 Embeds 31

http://improve-networking.blogspot.in 26
http://improve-networking.blogspot.com 4
http://improve-networking.blogspot.nl 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Hyperlink.85 to 86 Hyperlink.85 to 86 Presentation Transcript

  • opic : Hyperlinks 1
  • RecapIn the previous class, you have learnt aboutHTTP 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
  • Objectives On completion of 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
  • Recap • <scheme>://<host>:<port>/<path> • Scheme • HTTP, FTP, GOPHER, MAILTO, ... • Host • An IP address or DNS name 4
  • 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
  • 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
  • Basic Outline of Hyperlink Code<html> <head><title>Hyperlink example</title></head> <body> <a href="http://www.google.com">Google </a> </body> </html> 7
  • 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
  • Sample Codes• Linking to 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
  • Sample Codes• Linking to an external website<body><a href="http://www.yahoo.com">Yahoo</a></body> 10
  • Sample Codes• Link to email client<body><a href="mailto:my_email@email.com">Send me a mail</a></body>Not reliable: assumes user has properly configured his emailclientNot advisable because of spam 11
  • Sample Codes• Link to 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
  • Sample Codes• Linking to 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
  • 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
  • <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
  • <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
  • 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
  • Sample Codes<body> <img src="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
  • 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
  • Sample Codes• Using an image as a hyperlink.<body> <a href="http://www.yahoo.com"> <img src="yahoopic.gif"></a></body> 20
  • HyperLinks• Use concise wording • 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
  • HyperLinks• Link Titles or 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
  • 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
  • Navigation• One of the most important components of your site • Determines how your visitor gets around your site• Section titles should be distinct • Clear and notably understandable 24
  • Types of Navigation• Navigation you should use • Left Side Navigation • Top Navigation • Tab Navigation 25
  • Left or Right Side 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
  • Top Navigation• An effective 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
  • Tab Navigation• Very effective method of navigation, if done properly • http://www.amazon.com • http://www.barnesandnoble.com • http://www.doe.gov • http://www.walmart.com/ 28
  • Navigation Structure HOME ContactsWhat’sNew Products Services Jobs Search Ordering 29
  • 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
  • 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
  • All Hyperlinks Have Two 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
  • Anchor Tags• Hyperlinks are 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
  • Different Types of Hyperlinks• 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
  • Absolute URLs• All absolute 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
  • Relative URLs• A relative 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
  • Named Anchors• A named 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
  • Named Anchors Combined with 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
  • Making anything a link• 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
  • 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
  • Link Maintenance• An absolute 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
  • Image Maps• An image 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
  • Image Maps• Image maps 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
  • HTML Validation• Validating your 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 documents syntax • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“ "http://www.w3.org/TR/html4/loose.dtd"> 9EC606A.85 to 86 44
  • HTML Validation• Character Encodings • 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
  • SummaryIn 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
  • Quiz1. 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
  • Quiz2. The following is anchor tag a) WWW b) HTTP c) HTML d) <a> </a> 9EC606A.85 to 86 48
  • Frequently Asked Questions1. Describe about Hyperlinks2. State the Hyperlink attributes3. Write short notes on types of navigation4. Draw the structure of navigation5. Describe anchor tags 9EC606A.85 to 86 49
  • Assignment1. Explain the uses of Hyperlinks2. State the Hyperlink attributes3. Write short notes types of navigation4. Draw the structure of navigation5. Describe anchor tags6. Write any four sample codes using hyperlinks 9EC606A.85 to 86 50