Tutorial 2
Creating Hyperlinks
Objectives
XP
• Understand communications technology
• Create a link to a named section on the same page
• Create a link to other documents within the same Web
site
• Create a link to other Web sites on the Internet
• Use an image as a link
• Create an image map as a source for multiple links
• Create links to other Web resources
• Create an e-mail link
New Perspectives on Blended HTML, XHTML, and CSS, 2e
2
Understanding Communications
Technology
XP
• A link is a reference to another place on the same Web
page, another Web page, or another Web site
– Protocol
• Hypertext transfer protocol (HTTP)
• TCP/IP
– Domain name system
– Uniform Resource Locator
New Perspectives on Blended HTML, XHTML, and CSS, 2e
3
Creating Links
XP
• The text that users click for the link is called the link text
• A link can also be an image
– Image map
• An id attribute is HTML code that identifies a particular
element on a Web page
• To create an anchor, use the following code: <element
id=“idvalue">content</element> where <element>
is the start tag for a block-level element, id is the id
attribute, idvalue is the value for the id, content is the
content for the element, and </element> is the end tag
for a block-level element.
New Perspectives on Blended HTML, XHTML, and CSS, 2e
4
Creating a Link to an id on the
Same Page
XP
• To create a link to an id on the same page, enter the
following code:
<a id="#idname">linktext</a>
where a is the start anchor tag, id is the id attribute,
#idname is the name of the id to which you are linking
(preceded by the # flag character), linktext is the text
that the user will click to activate the link, and </a> is
the end anchor tag.
New Perspectives on Blended HTML, XHTML, and CSS, 2e
5
Creating a Link to an id on the
Same Page
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
6
Linking to a Different Web Page
XP
• To create a link to a different Web page, use the
following code:
• <a href="filename.htm">linktext</a>
where a is the start anchor tag, href is the hypertext
reference attribute, filename.htm is the name of the file
you are linking to, linktext is the text the user clicks to
activate the link, and </a> is the end anchor tag.
New Perspectives on Blended HTML, XHTML, and CSS, 2e
7
Linking to a Different Web Page
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
8
Linking to an id on a Different Page
of your Web Site
XP
• To create a link to an id on another page, enter the
following code:
<a id="filename.htm#idname">linktext</a>
where a is the start anchor tag, id is the id attribute,
filename is the name of the file in which the id resides,
#idname is the name of the id you are linking to
(preceded by the # flag character), linktext is the text
that the user clicks to activate the link, and </a> is the
end anchor tag.
New Perspectives on Blended HTML, XHTML, and CSS, 2e
9
Linking to an id on a Different Page
of your Web Site
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
10
Linking to an External Web Site
XP
• To create a link to an external Web site, use the following
format:
<a href="http://www.domainname.suffix">linktext</a>
where a is the start anchor tag, href is the hypertext
reference attribute, http:// is the protocol, www is the
service, domainname is the domain name, suffix is the
top-level domain suffix, linktext is the text that the user
clicks to activate the link, and </a> is the end anchor tag.
• If the Web site does not use “www” for the service, enter
the complete URL of the Web site.
New Perspectives on Blended HTML, XHTML, and CSS, 2e
11
Linking to an External Web Site
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
12
Using an Image as a Link
XP
• To use an image as a link, use the following code:
<a href="filename.htm"><img src="imagename.filetype”
alt="alternatetext" width="widthvalue”
height="heightvalue">linktext</a>
where a is the start anchor tag, href is the hypertext reference
attribute, filename.htm is the name of the file you are linking to,
img is the image element, src is the source attribute, imagename is
the filename of the image being used as a link, filetype is the type
of image file (such as .jpg or .gif), alt is the alt attribute,
alternatetext is the description of the image, width is the width
attribute, widthvalue is the width of the image in pixels, height is
the height attribute, heightvalue is the height of the image in
pixels, linktext is the text that the user clicks to activate the link,
and </a> is the end anchor tag.
New Perspectives on Blended HTML, XHTML, and CSS, 2e
13
Using an Image as a Link
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
14
Using an Image as a Link
XP
• If you have many images to display (such as a gallery of
images), a useful strategy is to have a smaller image,
called a thumbnail, on the referring page.
New Perspectives on Blended HTML, XHTML, and CSS, 2e
15
Using an Image as a Link
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
16
Creating Image Maps
XP
• An image map is an image that is divided into sections
that serve as two or more links
• The areas of the image that are designated to be used
as links are called hotspots
<p><img src="spices.gif" alt="image
map to spices pages" width="760”
height="150" usemap="#spices" /></p>
New Perspectives on Blended HTML, XHTML, and CSS, 2e
17
Creating Image Maps
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
18
Entering Code for the Image Map
XP
• The code for the image map involves two elements: the
<map> element and one or more <area> element
– The shape attribute takes one of three values:
• rect
• circle
• poly
• The coordinates attribute is used to determine what
part of your image will be used as a link
• The href attribute identifies the link
New Perspectives on Blended HTML, XHTML, and CSS, 2e
19
Entering Code for the Image Map
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
20
Organizing Files at Your Web Site
XP
• A relative file address is one where a file is linked in
relation to another file at the same Web site and stored in
the same folder on the same computer or on the same file
server
• An absolute file address specifies the entire directory
path to a linked file
• A parent folder is a folder that is at least one level higher
in the directory structure
• A child folder is a folder at least one level below the
parent folder
• If two folders are on the same level, they are referred to
as sibling folders
New Perspectives on Blended HTML, XHTML, and CSS, 2e
21
Organizing Files at Your Web Site
XP
• Moving Down One Level in the Directory Structure:
<a href=“Towns/seaside.htm">A quick tour of
Seaside</a>
• Moving Up One Level in the Directory Structure:
<a href="../miami.htm">Let’s look at Miami</a>
• Moving Down Two Levels:
<a href=“Towns/Hamlets/smalltown.htm">The
Smalltown hamlet</a>
• Moving Up Two Levels:
<a href="../../miami.htm">Visit Miami</a>
New Perspectives on Blended HTML, XHTML, and CSS, 2e
22
Linking to Other Web Resources
XP
• In addition to linking to other Web pages and sites,
links are used to access Web resources such as:
– Documents
• Text documents
• Adobe PDF files
– <p>View the Adobe PDF file: <br /><a
href="birthday.pdf">birthday.pdf</a>
</p>
– E-mail
New Perspectives on Blended HTML, XHTML, and CSS, 2e
23
Creating a Link to an E-Mail
Address
XP
• To create a link to an e-mail address, use the following
format:
<a href="mailto:addressname@domainname.suffix">
linktext</a>
where a is the start anchor tag, href is the hypertext
reference attribute, mailto is the protocol, addressname
is the e-mail address of the recipient, domainname is
the domain name, suffix is the suffix, linktext is the text
that the user will click to activate the link, and </a> is
the end anchor tag.
New Perspectives on Blended HTML, XHTML, and CSS, 2e
24
Creating a Link to an E-Mail
Address
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
25