introductory tutorial 6 using links on a web page

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


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


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


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


XPCreating a Link to an Anchor on a Different Page


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


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


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


XPPlanning the Page Layout


XPUsing Pseudo-Class Selectors• :link• :visited• :hover• :active


XPUsing Pseudo-Class Selectors


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


XPUsing an Image as a Link


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


XPCreating a Link to an E-Mail Address


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


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>


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" />


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


XPCreating Code for the Image Map


XPCreating Code for the Circle and Polygon Hotspots


XPChanging the Background Color


XPCentering the Document


introductory tutorial 6 using links on a web page

Documents