2. HTML Graphics 5 Adding HyperText Links to a Web Page

3. Objectives Create Hypertext links between elements within a document. Create Hypertext links between one document and another. Create hypertext links to pages on the Internet.

4. Fred’s Personal Web Page About Me, My Quotes, My Poem, About Me Hi. I am Fred. I am a student at LACES. I like to fly paper airplanes and watch cheerleaders…

5. Links INSIDE a web Page Start with the headings About Me, My Quotes, My Poem, Find and Mark the heading for each section with an Tag. About Me Hi. I amFred. I am a student at L A C E S. I like to fly paper airplanes and …

6. The Anchor Tag The tag creates an ANCHOR Text that is specifically marked so you can LINK to it from other points in the document.

7. Anchor Tags You assign each anchor its own anchor NAME using the NAME property. About Me Hi. I amFred. I am a student at LACES. I like to fly paper airplanes and watch cheerleaders … The Text About Me becomes an anchor named “ME”…a place to link TO Later you create a link from the beginning to this anchor.

8. An anchor doesn’t have to be just TEXT! Link to a photo or inline image. You can create a link to the photo from other points in the document by using the word “PHOTO”

9. Creating Anchors Locate the text or Graphics Before the TEXT or Graphic, place the tag where Anchor_Name is the name of YOUR anchor After the text or graphic, place a to turn off the anchor.

10. Creating Links to After you ANCHOR text that will be the destination for your links, you create the Links themselves. Fred’s Personal Web Page About Me, My Quotes, My Poem,

11. To Create a Link to an Anchor Use the same tag Instead of NAME, use HREF About Me, HREF stands for HyperText Reference, but who cares??? Links to the About Me place

12. Link to _Tags Tags that create links to. About Me,

13. Links from images To turn an inline image into a hypertext link, Tags that create links are called LINK TAGS

14. Linking to Text within a document Mark the destination with an anchor Locate the text or Graphic you want to designate as a link Before the text or graphic, place the tag where Anchor_Name is the name of the anchor. Close the link with

15. Problems ? ? ? Sometimes a link does NOT work. HREF is CASE SENSITIVE “ME” “Me” and “me” are all evaluated differently.

16. More Problems?? Each anchor name needs to be a unique name within a document. About Me More About Me Still More About Me

17. TEST your Links Click each link. You should jump to the right place. If NOT, check your code.

18. Review that… What is the HTML code for marking My Quotes with the anchor name “QUOTES”? <A NAME=“QUOTES”>My Quotes</A>

19. Review Stuff What is the HTML code for linking the text Favorite Quotes to an anchor with the name QUOTES? Favorite Quotes

20. Review Stuff What is wrong with this statement? For More Information When you add an anchor tag to a large section of text, place the anchor within the heading tags For More Information

21. Review stuff What is the HTML code for marking an inline image, Photo.jpg with the anchor name “PHOTO”?

22. Review Stuff What is the HTML code for linking the inline image, Button.jpg, to an anchor with the name “LINKS”?

23. More Review stuff TRUE or FALSE?? Anchor Names are case sensitive! T R U E “PHOTO”, “Photo” and “photo” are all different