Chapter 6 Links

3 Parts of Links 1. Destination: defines what happens when a user clicks the link. 2. Label: this is the text (or possibly an image) that is the hyperlink. A user clicks the label and is taken to a destination. 3. Target: does the destination open in a new browser window? Or perhaps a frame?

3 Parts of Links (2) Google DestinationTargetLabel

What Can I Link To? External Web Pages Ex: Internal Web Pages (within your own site) Ex:../projects/projectone/index.htm Images Ex:../images/cat.jpg Movies & Sound files Ex:../mymusic/linkinpark/mydecember.mp3 Named Anchors (bookmarks within a web page) Ex: #answers Links Ex:

Linking to a Web Page label Use Absolute URLs for links to other sites Ex: Use Relative URLs for links in your own site Ex: href stands for hypertext reference

“Deep” Links Deep Links are links inside other web sites that bypass the main page of the site. Issues: 1. Advertisements may not be seen. 2. Can feel like a violation 3. Has instigated numerous lawsuits in the past several years

Creating Anchors label The code above creates an anchor or place to jump to when a hyperlink is clicked. Ex 1 (jumping to a named anchor): Introduction Ex 2 (jumping to an id): Introduction

Jumping to External Anchors When linking to a named anchor on another web page use the following syntax: or When you see a # sign in the destination realize you are linking to a named anchor!!

Links Can Open New Windows Use the target attribute to open a link in a new browser window: The “_blank” value forces a new browser window to open.

Links Can Open In Specific Windows Use the target attribute to open a link in a specific browser window: If the window name is not an active window a new window will be opened and assigned the window name in the target attribute.

XHTML & Targets XHTML strict does not include the target attribute in named anchors. Use a JavaScript instead of the target attribute. (We will not learn how at this point in time.)

Other Kinds of Links Linking to an FTP site: Linking to a movie, sound, program, MS Office document, etc: Linking to an address:

Creating Keyboard Shortcuts for Links Keyboard shortcuts let your visitors select and activate links without using a mouse. To create a keyboard shortcut to a link use the accesskey attribute: The alt key must be pressed in conjuction with the access key (e.g. alt + g)

Setting the Tab Order for Links Tab Order dictates which link get the focus each time the tab key is pressed. Use the tabindex attribute to set the tab order for links on your page:

Creating Image Links We can turn an image into a link by rapping the element around the element as follows: