Transcript chp6 - kuroski.net

Tutorial 6
Using Links on a Web
Page
INTRODUCTORY
Objectives
•
•
•
•
•
•
XP
Describe how the Internet works
Learn where to place anchors on a Web page
Create links
Group links on a page
Identify the pseudoclass selectors
Use an image as a link
New Perspectives on Blended HTML, XHTML, and CSS
2
Objectives
•
•
•
•
•
XP
Create links to e-mail and to non-HTML files
Use an image map
Divide an image into hotspots
Identify the different hotspot shapes
Code an image map
New Perspectives on Blended HTML, XHTML, and CSS
3
Creating Links
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
4
Creating Links
XP
• The text that users click for the link is called the
link text
• An anchor is HTML code that identifies a
particular location on a Web page
• To create an anchor, use the following code: <a
id="anchorname"></a> where a is the
start anchor tag, id is the id attribute,
anchorname is the name of the anchor, and </a>
is the end anchor tag
New Perspectives on Blended HTML, XHTML, and CSS
5
Creating a Link to an Anchor on a
Different Page
XP
• To create a link to an anchor on another page,
enter the following code:
<a
id="filename.htm#anchorname">link
text</a>
where filename is the name of the file on which
the anchor resides, #anchorname is the name of
the anchor you are linking to preceded by the
flag character, and linktext is the text that the
user will click to activate the link
New Perspectives on Blended HTML, XHTML, and CSS
6
Creating a Link to an Anchor on a
Different Page
New Perspectives on Blended HTML, XHTML, and CSS
XP
7
Creating a Link 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, filename.htm is
the name of the file you are linking to, 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
8
Linking to an Anchor on a Different
Page
XP
• To link to an anchor on a different page, the
value for the hypertext reference is composed of
the following parts:
– The target page
– The flag character
– The anchor name
New Perspectives on Blended HTML, XHTML, and CSS
9
Creating a Link to an External Web
Site
XP
• To create a link to an external Web site, use:
<a
href="http://www.domainname.suffi
x">linktext</a>
where href is the hypertext reference attribute,
www is the service, domainname is the domain
name, suffix is the suffix, and linktext is the text
that the user clicks to activate the link
New Perspectives on Blended HTML, XHTML, and CSS
10
Planning the Page Layout
New Perspectives on Blended HTML, XHTML, and CSS
XP
11
Planning the Page Layout
New Perspectives on Blended HTML, XHTML, and CSS
XP
12
Planning the Page Layout
New Perspectives on Blended HTML, XHTML, and CSS
XP
13
Using Pseudo-Class Selectors
•
•
•
•
XP
:link
:visited
:hover
:active
New Perspectives on Blended HTML, XHTML, and CSS
14
Using Pseudo-Class Selectors
New Perspectives on Blended HTML, XHTML, and CSS
XP
15
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, 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 file name 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 will click to
activate the link, and </a> is the end anchor tag
New Perspectives on Blended HTML, XHTML, and CSS
16
Using an Image as a Link
New Perspectives on Blended HTML, XHTML, and CSS
XP
17
Using an Image as a Link
New Perspectives on Blended HTML, XHTML, and CSS
XP
18
Creating a Link to an E-Mail
Address
XP
• To create a link to an e-mail address, use: <a
href="mailto:emailaddress@domainn
ame.suffix">linktext</a> where <a is
the start anchor tag, href is the hypertext
reference attribute, mailto is the protocol,
emailaddress is the email address of the
recipient, @ is the @ symbol, 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
19
Creating a Link to an E-Mail
Address
New Perspectives on Blended HTML, XHTML, and CSS
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
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
22
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
• <img src="terminal.gif" alt="map of New York
terminal" width="200” height="340"
usemap="#terminal" />
New Perspectives on Blended HTML, XHTML, and CSS
23
Creating Code for the Image Map
XP
• The code for the image map involves two tags,
the <map> tag and one or more <area> tags
– 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
24
Creating Code for the Image Map
New Perspectives on Blended HTML, XHTML, and CSS
XP
25
Creating Code for the Image Map
New Perspectives on Blended HTML, XHTML, and CSS
XP
26
Creating Code for the Circle and
Polygon Hotspots
New Perspectives on Blended HTML, XHTML, and CSS
XP
27
Changing the Background Color
New Perspectives on Blended HTML, XHTML, and CSS
XP
28
Centering the Document
New Perspectives on Blended HTML, XHTML, and CSS
XP
29
Centering the Document
New Perspectives on Blended HTML, XHTML, and CSS
XP
30