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
2
3. 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
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
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
• 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
10. Sample Codes
• Linking to an external website
<body>
<a href="http://www.yahoo.com">Yahoo</a>
</body>
10
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
11
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
12
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
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>
<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
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
• Using an image as a hyperlink.
<body>
<a href="http://www.yahoo.com"> <img
src="yahoopic.gif"></a>
</body>
20
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
21
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
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 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
25. Types of Navigation
• Navigation you should use
• Left Side Navigation
• Top Navigation
• Tab Navigation
25
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
26
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/
27
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/
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 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
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 33
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 34
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 35
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 36
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 37
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 38
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 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
• 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
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 42
43. 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
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 44
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 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 following is 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
