1. INTRODUCTORY Tutorial 6 Using Links on a Web Page

2. XP New Perspectives on Blended HTML, XHTML, and CSS2 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. XP 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 New Perspectives on Blended HTML, XHTML, and CSS3

4. XP 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 New Perspectives on Blended HTML, XHTML, and CSS4

5. XP 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: where a is the start anchor tag, id is the id attribute, anchorname is the name of the anchor, and is the end anchor tag New Perspectives on Blended HTML, XHTML, and CSS5

6. XP Creating a Link to an Anchor on a Different Page To create a link to an anchor on another page, enter the following code: link text 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 CSS6

7. XP Creating a Link to an Anchor on a Different Page New Perspectives on Blended HTML, XHTML, and CSS7

8. XP Creating a Link to a Different Web Page To create a link to a different Web page, use the following code: linktext 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 is the end anchor tag New Perspectives on Blended HTML, XHTML, and CSS8

9. XP 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 New Perspectives on Blended HTML, XHTML, and CSS9

10. XP Creating a Link to an External Web Site To create a link to an external Web site, use: linktext 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 CSS10

11. XP Planning the Page Layout New Perspectives on Blended HTML, XHTML, and CSS11

12. XP Planning the Page Layout New Perspectives on Blended HTML, XHTML, and CSS12

13. XP Planning the Page Layout New Perspectives on Blended HTML, XHTML, and CSS13

14. XP Using Pseudo-Class Selectors :link :visited :hover :active New Perspectives on Blended HTML, XHTML, and CSS14

15. XP Using Pseudo-Class Selectors New Perspectives on Blended HTML, XHTML, and CSS15

16. XP Using an Image as a Link To use an image as a link, use the following code: linktext where is the end anchor tag New Perspectives on Blended HTML, XHTML, and CSS16

17. XP Using an Image as a Link New Perspectives on Blended HTML, XHTML, and CSS17

18. XP Using an Image as a Link New Perspectives on Blended HTML, XHTML, and CSS18

19. XP Creating a Link to an E-Mail Address To create a link to an e-mail address, use: linktext where is the end anchor tag New Perspectives on Blended HTML, XHTML, and CSS19

20. XP Creating a Link to an E-Mail Address New Perspectives on Blended HTML, XHTML, and CSS20

21. XP 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 New Perspectives on Blended HTML, XHTML, and CSS21

22. XP Organizing Files at Your Web Site Moving Down One Level in the Directory Structure – A quick tour of Seaside Moving Up One Level in the Directory Structure – Let’s look at Miami Moving Down Two Levels – The Smalltown hamlet Moving Up Two Levels – Visit Miami New Perspectives on Blended HTML, XHTML, and CSS22

23. XP 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 New Perspectives on Blended HTML, XHTML, and CSS23

24. XP Creating Code for the Image Map The code for the image map involves two tags, the tag and one or more 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 CSS24

25. XP Creating Code for the Image Map New Perspectives on Blended HTML, XHTML, and CSS25

26. XP Creating Code for the Image Map New Perspectives on Blended HTML, XHTML, and CSS26

27. XP Creating Code for the Circle and Polygon Hotspots New Perspectives on Blended HTML, XHTML, and CSS27

28. XP Changing the Background Color New Perspectives on Blended HTML, XHTML, and CSS28

29. XP Centering the Document New Perspectives on Blended HTML, XHTML, and CSS29

30. XP Centering the Document New Perspectives on Blended HTML, XHTML, and CSS30