INTRODUCTORY
Tutorial 6
Using Links on a Web Page
XP
New Perspectives on Blended HTML, XHTML, and CSS 2
Objectives• 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
XPObjectives• 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
XPCreating Links• 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
XPCreating Links• 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
XPCreating a Link to an Anchor on a Different Page• To create a link to an anchor on another page,
enter the following code:<a id="filename.htm#anchorname">linktext</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
XPCreating a Link to an Anchor on a Different Page
New Perspectives on Blended HTML, XHTML, and CSS 7
XPCreating a Link to a Different Web Page• 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
XPLinking to an Anchor on a Different Page• 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
XPCreating a Link to an External Web Site• To create a link to an external Web site, use:<a href="http://www.domainname.suffix">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
XPPlanning the Page Layout
New Perspectives on Blended HTML, XHTML, and CSS 11
XPPlanning the Page Layout
New Perspectives on Blended HTML, XHTML, and CSS 12
XPPlanning the Page Layout
New Perspectives on Blended HTML, XHTML, and CSS 13
XPUsing Pseudo-Class Selectors• :link• :visited• :hover• :active
New Perspectives on Blended HTML, XHTML, and CSS 14
XPUsing Pseudo-Class Selectors
New Perspectives on Blended HTML, XHTML, and CSS 15
XPUsing an Image as a Link• 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
XPUsing an Image as a Link
New Perspectives on Blended HTML, XHTML, and CSS 17
XPUsing an Image as a Link
New Perspectives on Blended HTML, XHTML, and CSS 18
XPCreating a Link to an E-Mail Address• To create a link to an e-mail address, use: <a href="mailto:[email protected]">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
XPCreating a Link to an E-Mail Address
New Perspectives on Blended HTML, XHTML, and CSS 20
XPOrganizing Files at Your Web Site• 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
XPOrganizing Files at Your Web Site• 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
XPCreating Image Maps• 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
XPCreating Code for the Image Map• 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
XPCreating Code for the Image Map
New Perspectives on Blended HTML, XHTML, and CSS 25
XPCreating Code for the Image Map
New Perspectives on Blended HTML, XHTML, and CSS 26
XPCreating Code for the Circle and Polygon Hotspots
New Perspectives on Blended HTML, XHTML, and CSS 27
XPChanging the Background Color
New Perspectives on Blended HTML, XHTML, and CSS 28
XPCentering the Document
New Perspectives on Blended HTML, XHTML, and CSS 29
XPCentering the Document
New Perspectives on Blended HTML, XHTML, and CSS 30