Post on 15-Dec-2014
description
1
Sub Topic : Hyperlinks
2
Recap In the previous class, 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
3
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
Objectives
4
Recap
• <scheme>://<host>:<port>/<path>
• Scheme
• HTTP, FTP, GOPHER, MAILTO, ...
• Host
• An IP address or DNS name
5
• It is a tool to navigate through a website using text or buttons
• Make links look clickable
• Only hyperlinks underlined to avoid confusion
What is Hyperlink?
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
7
Basic Outline of Hyperlink Code
<html>
<head><title>Hyperlink example</title></head>
<body>
<a href="http://www.google.com">Google </a>
</body>
</html>
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)
9
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"
10
Sample Codes
• Linking to an external website
<body>
<a href="http://www.yahoo.com">Yahoo</a>
</body>
11
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 email client
Not advisable because of spam
12
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
13
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
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">
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
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
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
18
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>
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>
20
Sample Codes
• Using an image as a hyperlink.
<body>
<a href="http://www.yahoo.com"> <img src="yahoopic.gif"></a>
</body>
21
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
22
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
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/
24
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
25
Types of Navigation
• Navigation you should use
• Left Side Navigation
• Top Navigation
• Tab Navigation
26
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
27
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/
28
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/
29
Navigation Structure
HOME
What’sNew Products Services
Search Ordering
Contacts
Jobs
home 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
9EC606A.85 to 86 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 32
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 33
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 34
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 35
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 36
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 37
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 38
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 39
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 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 41
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 42
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 43
• 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
• course’s home page
Image Maps
9EC606A.85 to 86 44
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 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 45
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 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 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 48
Quiz
2. The following is anchor tag
a) WWW
b) HTTP
c) HTML
d) <a> </a>
9EC606A.85 to 86 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 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