Hyperlink.85 to 86

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)

http://www.google.com/

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:[email protected]">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

http://teach.concord.edu/?page=Implementation

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/

http://faculty.concord.edu/bus/

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

http://www.monterey.com/

http://www.yale.edu/

http://www.alistapart.com/

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/

http://cat.concord.edu/

http://faculty.concord.edu/westover/

http://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/

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

http://improve-networking.blogspot.in/2012/10/dccn-portion.html

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

http://www.classes.cs.uchicago.edu/archive/2004/summer/10100-1/notes/lec4/linkexample.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


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


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

Hyperlink.85 to 86

Documents

Transcript of Hyperlink.85 to 86