Tutorial 6 Using Links on a Web Page

1
Tutorial 6Using Links on a Web Page
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

3
Objectives

• 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

4
Creating 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

5
Creating 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 lta
  id"anchorname"gtlt/agt where a is the start anchor
  tag, id is the id attribute, anchorname is the
  name of the anchor, and lt/agt is the end anchor tag

6
Creating a Link to an Anchor on a Different Page

• To create a link to an anchor on another page,
  enter the following codelta id"filename.htmanch
  orname"gtlinktextlt/agt
• 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

7
Creating a Link to an Anchor on a Different Page
8
Creating a Link to a Different Web Page

• To create a link to a different Web page, use the
  following code
• lta href"filename.htm"gtlinktextlt/agt 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 lt/agt is the end anchor tag

9
Linking 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

10
Creating a Link to an External Web Site

• To create a link to an external Web site, use
• lta href"http//www.domainname.suffix"gtlinktextlt/
  agt
• 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

11
Planning the Page Layout
12
Planning the Page Layout
13
Planning the Page Layout
14
Using Pseudo-Class Selectors

• link
• visited
• hover
• active

15
Using Pseudo-Class Selectors
16
Using an Image as a Link

• To use an image as a link, use the following
  code lta href"filename.htm"gtltimg
  src"imagename.filetype alt"alternatetext"
  width"widthvalue height"heightvalue"gtlinktextlt/
  agt where lta 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 lt/agt is the end anchor tag

17
Using an Image as a Link
18
Using an Image as a Link
19
Creating a Link to an E-Mail Address

• To create a link to an e-mail address, use lta
  href"mailtoemailaddress_at_domainname.suffix"gtlinkt
  extlt/agt where lta is the start anchor tag, href is
  the hypertext reference attribute, mailto is the
  protocol, emailaddress is the email address of
  the recipient, _at_ is the _at_ symbol, domainname is
  the domain name, suffix is the suffix, linktext
  is the text that the user will click to activate
  the link, and lt/agt is the end anchor tag

20
Creating a Link to an E-Mail Address
21
Organizing 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

22
Organizing Files at Your Web Site

• Moving Down One Level in the Directory Structure
• lta href"towns/seaside.htm"gtA quick tour of
  Seasidelt/agt
• Moving Up One Level in the Directory Structure
• lta href"../miami.htm"gtLets look at Miamilt/agt
• Moving Down Two Levels
• lta href"towns/hamlets/smalltown.htm"gtThe
  Smalltown hamletlt/agt
• Moving Up Two Levels
• lta href"../../miami.htm"gtVisit Miamilt/agt

23
Creating 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
• ltimg src"terminal.gif" alt"map of New York
  terminal" width"200 height"340"
  usemap"terminal" /gt

24
Creating Code for the Image Map

• The code for the image map involves two tags, the
  ltmapgt tag and one or more ltareagt 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

25
Creating Code for the Image Map
26
Creating Code for the Image Map
27
Creating Code for the Circle and Polygon Hotspots
28
Changing the Background Color
29
Centering the Document
30
Centering the Document