Tutorial 2 Creating Hyperlinks

1. Tutorial 2Creating Hyperlinks

2. Objectives • Understand communications technology • Create a link to a named section on the same page • Create a link to other documents within the same Web site • Create a link to other Web sites on the Internet • Use an image as a link • Create an image map as a source for multiple links • Create links to other Web resources • Create an e-mail link New Perspectives on Blended HTML, XHTML, and CSS, 2e

3. Understanding Communications Technology • 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, 2e

4. Creating Links • The text that users click for the link is called the link text • A link can also be an image • Image map • An id attribute is HTML code that identifies a particular element on a Web page • To create an anchor, use the following code: <element id=“idvalue">content</element> where <element> is the start tag for a block-level element, id is the id attribute, idvalue is the value for the id, content is the content for the element, and </element> is the end tag for a block-level element. New Perspectives on Blended HTML, XHTML, and CSS, 2e

5. Creating a Link to an id on the Same Page • To create a link to an id on the same page, enter the following code: <a id="#idname">linktext</a> where a is the start anchor tag, id is the id attribute, #idname is the name of the id to which you are linking (preceded by the # flag character), 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, 2e

6. Creating a Link to an id on the Same Page New Perspectives on Blended HTML, XHTML, and CSS, 2e

7. Linking 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, href is the hypertext reference attribute, filename.htm is the name of the file you are linking to, linktext is the text the user clicks to activate the link, and </a> is the end anchor tag. New Perspectives on Blended HTML, XHTML, and CSS, 2e

8. Linking to a Different Web Page New Perspectives on Blended HTML, XHTML, and CSS, 2e

9. Linking to an id on a Different Page of your Web Site • To create a link to an id on another page, enter the following code: <a id="filename.htm#idname">linktext</a> where a is the start anchor tag, id is the id attribute, filename is the name of the file in which the id resides, #idname is the name of the id you are linking to (preceded by the # flag character), linktext is the text that the user clicks to activate the link, and </a> is the end anchor tag. New Perspectives on Blended HTML, XHTML, and CSS, 2e

10. Linking to an id on a Different Page of your Web Site New Perspectives on Blended HTML, XHTML, and CSS, 2e

11. Linking to an External Web Site • To create a link to an external Web site, use the following format: <a href="http://www.domainname.suffix">linktext</a> where a is the start anchor tag, href is the hypertext reference attribute, http:// is the protocol, www is the service, domainname is the domain name, suffix is the top-level domain suffix, linktext is the text that the user clicks to activate the link, and </a> is the end anchor tag. • If the Web site does not use “www” for the service, enter the complete URL of the Web site. New Perspectives on Blended HTML, XHTML, and CSS, 2e

12. Linking to an External Web Site New Perspectives on Blended HTML, XHTML, and CSS, 2e

13. Using 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, href is the hypertext reference attribute, 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 filename 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 clicks to activate the link, and </a> is the end anchor tag. New Perspectives on Blended HTML, XHTML, and CSS, 2e

14. Using an Image as a Link New Perspectives on Blended HTML, XHTML, and CSS, 2e

15. Using an Image as a Link • If you have many images to display (such as a gallery of images), a useful strategy is to have a smaller image, called a thumbnail, on the referring page. New Perspectives on Blended HTML, XHTML, and CSS, 2e

16. Using an Image as a Link New Perspectives on Blended HTML, XHTML, and CSS, 2e

17. 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 <p><img src="spices.gif" alt="image map to spices pages" width="760” height="150" usemap="#spices" /></p> New Perspectives on Blended HTML, XHTML, and CSS, 2e

18. Creating Image Maps New Perspectives on Blended HTML, XHTML, and CSS, 2e

19. Entering Code for the Image Map • The code for the image map involves two elements: the <map> element and one or more <area> element • 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, 2e

20. Entering Code for the Image Map New Perspectives on Blended HTML, XHTML, and CSS, 2e

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 New Perspectives on Blended HTML, XHTML, and CSS, 2e

22. Organizing 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, 2e

23. Linking to Other Web Resources • In addition to linking to other Web pages and sites, links are used to access Web resources such as: • Documents • Text documents • Adobe PDF files • <p>View the Adobe PDF file: <br /><a href="birthday.pdf">birthday.pdf</a></p> • E-mail New Perspectives on Blended HTML, XHTML, and CSS, 2e

24. Creating a Link to an E-Mail Address • To create a link to an e-mail address, use the following format: <a href="mailto:addressname@domainname.suffix">linktext</a> where a is the start anchor tag, href is the hypertext reference attribute, mailto is the protocol, addressname is the e-mail address of the recipient, 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, 2e

25. Creating a Link to an E-Mail Address New Perspectives on Blended HTML, XHTML, and CSS, 2e