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

2. Before We Start Adding Hypertext Links by Professor Al Fichera http://profal2.com 2 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. August 25, 2010

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

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

5. Starting Hypertext Links Adding Hypertext Links by Professor Al Fichera http://profal2.com 5 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. August 25, 2010

6. Finishing Hypertext Links Adding Hypertext Links by Professor Al Fichera http://profal2.com 6 After the ending >, place the “clickable link text" for example: Prof. Al’s Place Finish with a closing tag (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!) August 25, 2010

7. Creating Links Between Pages Adding Hypertext Links by Professor Al Fichera http://profal2.com 7 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. Clickable Text August 25, 2010

8. Web Page Structures Adding Hypertext Links by Professor Al Fichera http://profal2.com 8 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 August 25, 2010

9. Linear Structures Adding Hypertext Links by Professor Al Fichera http://profal2.com 9 Linear Web Page Structures Home Page Page 1 Page 2 Page 3 Page 4 Page 5 August 25, 2010

10. Link Structure Coding Adding Hypertext Links by Professor Al Fichera http://profal2.com 10 One possible link structure from the last slide could look something like this: Home Page to Page One Go to Page 1 Page One return to Home Page Go to Home August 25, 2010

11. Hierarchical Structures Adding Hypertext Links by Professor Al Fichera http://profal2.com 11 Hierarchical Web Page Structures Home Page Page 1 Page 2 Page 3 Page 4 Page 5 August 25, 2010

12. Hierarchical Structure Coding Adding Hypertext Links by Professor Al Fichera http://profal2.com 12 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 Go to Page 1 Home Page to Page Four Go to Page 4 Only pages 1 and 4 can return directly to the Home page. August 25, 2010

13. Naming Anchors Adding Hypertext Links by Professor Al Fichera http://profal2.com 13 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.: 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. August 25, 2010

14. Referencing Named Anchors Adding Hypertext Links by Professor Al Fichera http://profal2.com 14 The portion of the hypertext tag that links you to the Named target looks like this: Back to Top 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. August 25, 2010

15. Linking to a Section of a Doc Adding Hypertext Links by Professor Al Fichera http://profal2.com 15 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. Go to Bottom August 25, 2010

16. Images as Hypertext Links Adding Hypertext Links by Professor Al Fichera http://profal2.com 16 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? August 25, 2010

17. Using Images as Links Adding Hypertext Links by Professor Al Fichera http://profal2.com 17 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. August 25, 2010

18. Images as Hypertext Links Adding Hypertext Links by Professor Al Fichera http://profal2.com 18 Use the following example to accomplish this: If you need better text-to-image spacing, add this to the img src tag: August 25, 2010

19. Alternate Text with Images Adding Hypertext Links by Professor Al Fichera http://profal2.com 19 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. Whereas "imagename" is your short description of the image that will load on their screen. August 25, 2010

20. Creating Email Links Adding Hypertext Links by Professor Al Fichera http://profal2.com 20 Email links are hypertext too. The coding is a bit different than normal hyperlinks. In the a href tag use this: Email Me August 25, 2010

21. Creative Email Tricks Adding Hypertext Links by Professor Al Fichera http://profal2.com 21 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: Email Me August 25, 2010 Note: Code above was word wrapped by PowerPoint.

22. More Creative Email Tricks Adding Hypertext Links by Professor Al Fichera http://profal2.com 22 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: Email Me August 25, 2010 Note: Code above was word wrapped by PowerPoint.

23. Using Folders for Your Files Adding Hypertext Links by Professor Al Fichera http://profal2.com 23 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.) August 25, 2010

24. Folder Pathnames Adding Hypertext Links by Professor Al Fichera http://profal2.com 24 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. August 25, 2010

25. Absolute Pathnames Adding Hypertext Links by Professor Al Fichera http://profal2.com 25 Absolute pathnames give a file's exact location in relation to the current Web document. These use the complete Internet Protocol, for example: 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. August 25, 2010

26. Relative Pathnames Adding Hypertext Links by Professor Al Fichera http://profal2.com 26 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: Relative pathnames are easy to move to different servers, and you won't have to rename any possible folder name changes. August 25, 2010

27. Using Relative Pathnames Adding Hypertext Links by Professor Al Fichera http://profal2.com 27 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. Image courtesy of Ron Pumphrey, Shadow-Design.com August 25, 2010

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

29. Why Use Relative Pathnames? Adding Hypertext Links by Professor Al Fichera http://profal2.com 29 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! August 25, 2010

30. Using Target Windows Adding Hypertext Links by Professor Al Fichera http://profal2.com 30 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. 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! August 25, 2010

31. Historical 1998 Bibliography Adding Hypertext Links by Professor Al Fichera http://profal2.com 31 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). August 25, 2010