ADDING HYPERTEXT LINKS

1. ADDING HYPERTEXT LINKS CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. August 25, 2010—All HTML code brought to XHTML standards.

2. Before We Start • This lecture was originally written back in 1998 I believe, and has been updated quite a bit since then. • When we started building html code, the rules were, well, rather loose so to speak. • Upper-case, mixed-case letters never seemed to matter to the Browsers of the day because we were all so new at it. • This lecture was updated to remove the above weaknesses', and introduced some XHTML concepts with the use of all lower-case letters. Adding Hypertext Links by Professor Al Fichera http://profal2.com

3. Creating The Proper Anchor Tag • Let’s start with the basic tag for hypertext. • The <a> tag creates an anchor. • Hypertext anchors help you move about the Web site as well as from one site to another. Adding Hypertext Links by Professor Al Fichera http://profal2.com

4. Anchors Aweigh • It’s important now to close what you open, in a mirror fashion. • The <a> anchor tag must be closed with the </a> tag. • Between the two tags you will insert the hypertext reference, the clickable text and/or a clickable picture. Adding Hypertext Links by Professor Al Fichera http://profal2.com

5. Starting Hypertext Links • You link to other documents using the anchor and it's link properties: <a href=" • At this point you will add either an address to another Web page you own or the Web address to another site. Adding Hypertext Links by Professor Al Fichera http://profal2.com

6. Finishing Hypertext Links • After the ending>, place the“clickable link text" for example:Prof. Al’s Place • Finish with a closing tag </a> (It must be noted that when linking text that you be sure to use the proper case (upper or lower), for your keyed-in letters, URL’s are case sensitive!) Adding Hypertext Links by Professor Al Fichera http://profal2.com

7. Creating Links Between Pages • Linking to a document on your computer or Website. • Be sure that it is in the same folder as the document containing the links, or you will have to add the folder’s name to the link. <a href="file_name.html">Clickable Text</a> Adding Hypertext Links by Professor Al Fichera http://profal2.com

8. Web Page Structures • It's a good idea to map out how your Web pages are to relate to each other. • Linear Structures • Each page is linked to the next and previous pages • Hierarchical Structures • Starts with a general topic that includes links to more specific topics • Mixed Structures • Combines both of the above techniques Adding Hypertext Links by Professor Al Fichera http://profal2.com

9. Linear Structures • Linear Web PageStructures HomePage Page1 Page2 Page3 Page4 Page5 Adding Hypertext Links by Professor Al Fichera http://profal2.com

10. Link Structure Coding • One possible link structure from the last slide could look something like this: • Home Page to Page One<a href="page1.html">Go to Page 1</a> • Page One return to Home Page<a href="home.html">Go to Home</a> Adding Hypertext Links by Professor Al Fichera http://profal2.com

11. Hierarchical Structures • Hierarchical Web Page Structures HomePage Page1 Page4 Page5 Page3 Page2 Adding Hypertext Links by Professor Al Fichera http://profal2.com

12. Hierarchical Structure Coding • Using the Flow Chart link structure shown in the last slide, only two links would be on the Home page: • Home Page to Page One<a href="page1.html">Go to Page 1</a> • Home Page to Page Four<a href="page4.html">Go to Page 4</a> • Only pages 1 and 4 can return directly to the Home page. Adding Hypertext Links by Professor Al Fichera http://profal2.com

13. Naming Anchors • To link to another part of a long Web document requires a different type of Anchor tag. • The Name tag. This tag names a target area within the document for the link, e.g.: <a name="target-name"></a>e.g., top, middle, bottom • Note: The text used for the target name should be unique to that location, and the same as used in the Anchor tag. • Usually, there is no clickable text with this type of anchor tag. Adding Hypertext Links by Professor Al Fichera http://profal2.com

14. Referencing Named Anchors • The portion of the hypertext tag that links you to the Named target looks like this: <a href="#top">Back to Top</a> • The text placed between the Anchor tags will become the Hypertext for the link. • Notice the use of the pound symbol ( # ) in this type of hypertext reference. Adding Hypertext Links by Professor Al Fichera http://profal2.com

15. Linking to a Section of a Doc • Normally, linking to a document brings you to the top of it's page. Perhaps you'd like your visitor to jump to a certain part of the Web page instead. • The following would link your visitor to the bottom of the page. <a href="file_name.html#bottom"> Go to Bottom</a> Adding Hypertext Links by Professor Al Fichera http://profal2.com

16. Images as Hypertext Links • Clicking on an Image to Link you to another site is easier than you can imagine. Instead of using text to click on for the Hypertext Link why not use a small picture instead? Adding Hypertext Links by Professor Al Fichera http://profal2.com

17. Using Images as Links • There will be many opportunities within a Website where a clickable button would be more suitable than text. • In this case all you do is replace the clickable text with the Image Source tag. <img src="button.gif") width="n" height="n" alt="image-name" /> </a> Adding Hypertext Links by Professor Al Fichera http://profal2.com

18. Images as Hypertext Links • Use the following example to accomplish this: <a href="fileaddress.html"> <img src="button.gif" /></a> • If you need better text-to-image spacing, add this to the img src tag: <img src="button.gif" hspace="8" /></a> Adding Hypertext Links by Professor Al Fichera http://profal2.com

19. Alternate Text with Images • To help viewers who have turned off pictures speed-up identity of pictures and/or icons on your page, use the following in your img src tag. <img src="imageaddress.gif" alt="image name" /> • Whereas "imagename" is your short description of the image that will load on their screen. Adding Hypertext Links by Professor Al Fichera http://profal2.com

20. Creating Email Links • Email links are hypertext too. • The coding is a bit different than normal hyperlinks. In the ahreftag use this: <a href="mailto:yourEmail@mail.com">Email Me</a> Adding Hypertext Links by Professor Al Fichera http://profal2.com

21. Creative Email Tricks • Email links can fill in the Subject Line before they are sent off to you. • Add the following to the end of your email address in the href, no spaces allowed: <a href="mailto:yourEmail@mail.com?subject=I love HTML and CS67">Email Me</a> Note: Code above was word wrapped by PowerPoint. Adding Hypertext Links by Professor Al Fichera http://profal2.com

22. More Creative Email Tricks • Email links can add content to the actual body of the email too! • Add the following to the end of your email address in the href, no spaces allowed: <a href="mailto:yourEmail@mail.com?subject=I love HTML and CS67&body=I get less sleep now, thanks Prof Al">Email Me</a> Note: Code above was word wrapped by PowerPoint. Adding Hypertext Links by Professor Al Fichera http://profal2.com

23. Using Folders for Your Files • This path shows exactly where the file is on the computer. • In HTML you start every pathname with a slash (/) • Separate each folder name from the next with a slash. (More on this later.) <a href="folder/file_name.html"> Adding Hypertext Links by Professor Al Fichera http://profal2.com

24. Folder Pathnames • When referencing files in different folders in the link tag, you must include each file's location, called its path. • HTML supports two kinds of paths, absolute and relative. Adding Hypertext Links by Professor Al Fichera http://profal2.com

25. Absolute Pathnames • Absolute pathnames give a file's exact location in relation to the current Web document. • These use the complete Internet Protocol, for example: <a href="*http://www.site_address/**"> • Absolute pathnames to Web page files you own can create problems when moving a whole Web site to an another host location. • *http = Hyper Text Mark-up Protocol • **The slash at the end of the URL address is short-hand for index.html. Adding Hypertext Links by Professor Al Fichera http://profal2.com

26. Relative Pathnames • Relative pathnames give a file's location in relation to the current Web document. • These use (2)periods and a slash(../)to reference a file in a folder above the current folder in the hierarchy, for example: <a href="../file_name.html"> • Relative pathnames are easy to move to different servers, and you won't have to rename any possible folder name changes. Adding Hypertext Links by Professor Al Fichera http://profal2.com

27. Image courtesy of Ron Pumphrey, Shadow-Design.com Using Relative Pathnames • If your HTML document is in a nested file folder, and you want to reference an image or file in the parent folder, you may use the ../ reference in your hypertext tag. Adding Hypertext Links by Professor Al Fichera http://profal2.com

28. Image courtesy of Ron Pumphrey, Shadow-Design.com Double-Nested Folders • Another version of nested folders and relative references. Adding Hypertext Links by Professor Al Fichera http://profal2.com

29. Why Use Relative Pathnames? • A couple of important reasons! • Moving a Web site to another location. • All files and folders can be moved and all your links will work. • If you used absolute pathnames, you will have to go back and change everyone on them! • The browser will load your page faster! Adding Hypertext Links by Professor Al Fichera http://profal2.com

30. Using Target Windows • To allow users of your site to return more easily from one of your hypertext links, use the following tag in your a href code. <a href="http://www.urlhere.com" target="new window"> • The new window will be opened and available to the user on the Taskbar below leaving your page still open to the viewer. • Since writing this, most Browsers now have “Pop-Up” killers, so you take your chances, I guess! Adding Hypertext Links by Professor Al Fichera http://profal2.com

31. Historical 1998 Bibliography • Carey, Patrick, Creating Web Pages with HTML, Comprehensive,Course Technology, Cambridge, Mass., 1998 (9 tutorials). • Burns, Joe, HTML Goodies, QUE Macmillian Publishing, Inc., Indianapolis, IN, 1999 (527 pages). • Martin, Teresa and Glenn Davis, The Project Cool, Guide to Enhancing Your Website, John Wiley Sons, Inc., New York, NY, 1998 (416 pages). • Oliver, Dick and Molly Holzschlag, Teach yourself HTML4 in 24 hours,Sams.net Publishing, Indianapolis, IN, 1997 (405 pages). • Ibañez, Ardith, and Natalie Zee, HTML Web Magic, Hayden Books, Indianapolis, IN, 1997 (230 pages). • Vodnik, Sasha, Dynamic HTML, Course Technology, Cambridge, Mass., 1998 (7 tutorials). • Jasc Software, Paint Shop Pro 5, Jasc Software, Inc., Minnetonka, MN, 1998 (335 pages). Adding Hypertext Links by Professor Al Fichera http://profal2.com