Transcript Castro Ch 06: Links

Chapter 6
Links
3 Parts of Links
1.
2.
3.
Destination: defines what happens
when a user clicks the link.
Label: this is the text (or possibly an
image) that is the hyperlink. A user
clicks the label and is taken to a
destination.
Target: does the destination open in a
new browser window? Or perhaps a
frame?
3 Parts of Links (2)
<a href=“http://www.google.com” target=“_blank”>Google</a>
Destination
Target
Label
What Can I Link To?

External Web Pages


Internal Web Pages (within your own site)


Ex: ../mymusic/linkinpark/mydecember.mp3
Named Anchors (bookmarks within a web page)


Ex: ../images/cat.jpg
Movies & Sound files


Ex: ../projects/projectone/index.htm
Images


Ex: http://www.google.com/coolpage.htm
Ex: #answers
Email Links

Ex: mailto:[email protected]
Linking to a Web Page
<a href=“page.html”>label</a>

Use Absolute URLs for links to other sites


Use Relative URLs for links in your own site


Ex: <a href=“http://www.google.com”>
Ex: <a href=“../coolpages/coolpage.htm”>
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
<a name=“anchorname”>label</a>

The code above creates an anchor or place to jump to
when a hyperlink is clicked.

Ex 1 (jumping to a named anchor):
<a href=“#intro”>Introduction</a>
<h2><a name=“intro”>Introduction</a></h2>

Ex 2 (jumping to an id):
<a href=“#intro”>Introduction</a>
<h2 id=“intro”>Introduction</h2>
Jumping to External Anchors
When linking to a named anchor on another web
page use the following syntax:
<a href=“page.htm#anchorname”>
or
<a href=“http://www.site.com/index.htm#anchorname”>
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:
<a href=“page.htm” target=“_blank”>
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:
<a href=“page.htm” target=“windowname”>
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:
<a href=“ftp://ftp.site.com/path”>
Linking to a movie, sound, program, MS Office
document, etc:
<a href=“http://www.site.com/path/file.ext”>
Linking to an email address:
<a href=“mailto:[email protected]”>
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:
<a href=“http://www.google.com” accesskey=“g”>
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:
<a href=“link1.htm” tabindex=“0”>
<a href=“link2.htm” tabindex=“1”>
<a href=“link3.htm” tabindex=“2”>
Creating Image Links
We can turn an image into a link by
rapping the <a> element around the
<img> element as follows:
<a href=“birds.htm”><img src=“bird01.jpg” /></a>