1. IT 117 - Introduction to Website Development Welcome!

2. Welcome to Unit 7! Navigation and Linking This week’s reading: Textbook Reading for this Unit: Review Lesson 5 and Read Lesson 7. You do not need to work the labs in Lesson 7 unless you want to. Textbook Reading Summary: This chapter will cover the various options included in linking.

3. Introduction In this Unit you will practice creating links for navigation systems, email addresses and external sites. A Web site’s navigation system is crucial to making the site user-friendly. Navigating through a site can be done via linked text and images (hypertext and hypergraphics). A well designed navigation system offers a good sense of positional awareness and enables a Web visitor on your site to easily find content.

4. To-Do-List Review Key Terms On the Reading page Read Assigned Text On the Reading page Respond to the Discussion Board 30 Points Web site Navigation Complete the unit project and upload to assignment dropbox for grading 50 Points On the Assignment page

5. To-Do-List Attend the Weekly Seminar or complete the FLA quiz 20 Points Log in from Student's Home page Review the online activity “Get a Jumpstart on Project 9 NOW" and work on your outline for your research paper in unit 9

6. Readings Overview Textbook Reading for this Unit: Review Lesson 5 and Read Lesson 7. You do not need to work the labs in Lesson 7 unless you want to. Textbook Reading Summary: This chapter will cover the various options included in linking.

7. Seminar Overview This week’s Seminar session is about creating links for navigations systems, email, and to external sites. Remember, directions for accessing your Seminar can be found in the Course FAQs tab under Course Home.

8. Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 5: Hyperlinks

9. Objectives Reference full and partial URLs Specify alternative protocols Create hyperlinks for text and images Link to local files and remote sites Create an internal anchor within a file and link to it

10. The Anchor Tag The tag creates hyperlinks A container tag that encompasses the text or image (or both) to be used as a link The syntax for using the anchor tag to create a link is as follows: linked text or image (or both)

11. The Anchor Tag (cont’d) A fully qualified URL specifies an entire path A partial URL assumes a path relative to the file’s current location Type of Reference DescriptionExamples Fully qualified URL (also called absolute URL) A URL (i.e., URI) that contains a full path to a resource, including the protocol indicator. Also known as a hard link. http://www.someserver.com/somepage.html or http://someserver.com/pub/~james/somefile.ext or c:\intetpub\wwwroot\ccyp\syb\syb.html Partial URL (also called relative URL) A URL that assumes the current document’s path. All references are made from the document’s current directory. syb.html: Specifies a file in the current directory../css/stylesheet.css: Specifies a file one directory up from the current page pub/images/mybullet.gif: Specifies a file in a subdirectory

12. The Anchor Tag (cont’d) You can specify various protocols ProtocolHyperlink HTML Example HTTP Visit the CIW site. HTTPS (Secure HTTP) Visit our secure CIW site. FTP Download the file from our FTP server. E-mail You can send e-mail to us at info@ciwcertified.com. Telnet Please visit our Telnet server.

13. The Anchor Tag (cont’d) Make sure that you:  Use a closing anchor tag  Place quotation marks around the value  Include the closing bracket at the end of the opening tag Various issues to troubleshoot with hyperlinks  Text and images disappear  All successive Web page text is a hyperlink  Garbled code appears on screen  Code will not validate due to a problem tag

14. The Anchor Tag (cont’d) Creating local hyperlinks Creating external hyperlinks Using images as hyperlinks Creating internal links  On a long page, a link to another point lower on the page  Internal links require internal bookmarks Example: target anchor text or image (or both) … other page content here … text/images linking to targetArea1

15. Accessing an External File's Internal Link Link to a specific point in another page without first accessing the top of that page To link to an internal anchor inside of another file, use the following syntax: link text/image

16. Managing Hyperlinks All hyperlinks need to be verified  Verify that the URL or other reference is valid  Verify that the target page or location is accessed Hyperlinks also need to be managed  Over time, URLs (and content) change  “Dead” links frustrate users Manually check links Automatic link-checking software:  Linklint (www.linklint.org)  Link Controller (http://freshmeat.net/projects/linkcont)  Checkbot (http://degraaff.org/checkbot)  Link should still be reviewed manually to verify relevance of linked content

17. Project 7 Outcomes addressed in this activity: Unit Outcomes: Apply XHTML coding for an external link on a web page Apply XHTML coding for an email link on a web page Create an image hyperlink Construct internal links on a web page Course Outcome: IT117-3: Develop navigation systems for web sites.

18. Project Remember: All of your Web pages should include the DOCTYPE statement above the opening html tag, like this: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd All your Web pages are also required to contain the tag pair within the head section, like this: Your Name, Career Information

19. Project There are four parts to your project for this unit: You will create a new page named links.htm containing external links You will create a new page named contact.htm You will add local hyperlinks to each of the Web pages in your Website You will add an e-mail link to contact.htm You must hand code all work for this and all units. Notepad is the preferred application to use for typing your code.

20. Project Part 1: Create a new page named links.htm 1. Create a Web page in Notepad and save it as links.htm. 2. Add the code to apply the CSS from the file externalstylesheet.css 3. Add at least five fully qualified URLs (absolute URLs) to external web pages such as these types: (See lesson 5, table 5-1) Web design and development Web sites Free Web design and development tutorials Web sites for career research and job hunting. Web sites about your interests and hobbies.

21. Project 4. Use the target attribute (_blank) to open each link in a new window so that when visitors close that window they will be back on your Website. The _blank attribute was not clearly demonstrated in your lesson, therefore a sample of the expected code is provided for you below. This is what a fully qualified URL including the _blank attribute would look like: Web Magic

22. Project 5. Categorize your links by topic. Use the largest or second to largest tag for the name at the top of the Web page. (e. g. “Links”) Use the next smaller tag for link subheadings. Use the following tags where appropriate: paragraph line break horizontal rule

23. Project Part 2: Create Contact.htm Create and save a new HTML file named contact.htm. For now, just add the four basic HTML tag pairs to the page;,,, and. Add the code to apply the CSS from the file externalstylesheet.css

24. Project Part 3: Local Hyperlinks For this part of your project you will be creating local links (also called relative links) to all five pages in your Website. You will place these links at the bottom of each page on your site. The reason you are being instructed to place these at the bottom of the page is because you are going to create a navigation bar using CSS in the next unit that will be placed at the top of each page. We want you to experience both methods of creating navigation; HTML coding alone as you will do in this project and CSS as you will do in the next project.

25. Project Below is a model for what your navigational links will look like when done: Home | Biography | Career | Links | Contact Us The line between the link names is called a pipe character. To type it, hold down the shift key and press the key above the enter key that contains “\”. This action will create this: “|”. Code your first set of local links in any one of your five HTML files by opening the file in Notepad. (See lesson 5, table 5-2, lab 5-1) if your pages are in the root of your web server – meaning they are not in a folder within the root, then you do not need to type / in front of your file name. For example, the path to index.html would just be index.html. A local link to your home page would be coded like this: Home

26. Project Below is a model for what your navigational links will look like when done: Home | Biography | Career | Links | Contact Us The line between the link names is called a pipe character. To type it, hold down the shift key and press the key above the enter key that contains “\”. This action will create this: “|”. Code your first set of local links in any one of your five HTML files by opening the file in Notepad. (See lesson 5, table 5-2, lab 5-1)

27. Project if your pages are in the root of your web server – meaning they are not in a folder within the root, then you do not need to type / in front of your file name. For example, the path to index.html would just be index.html. A local link to your home page would be coded like this: Home 2. Save your work and view the page in a browser to make sure your links look the way you want them to. 3. Test each link to make sure each works properly.

28. Project 4. Next, copy and paste the local hyperlinks code from the file you just saved into the bottom of each of your other Web pages. Be sure to test these links on every page and to adjust the file paths as needed. 5. Replace each of the Web pages on your Web server with the edited copies that you have on your computer by uploading them. Remember that when you upload a file with the same name as one that already exists on your Web server, the new file replaces the old one. 6. View your Web site online in your browser. Test each link on all pages.

29. Project 4. Next, copy and paste the local hyperlinks code from the file you just saved into the bottom of each of your other Web pages. Be sure to test these links on every page and to adjust the file paths as needed. 5. Replace each of the Web pages on your Web server with the edited copies that you have on your computer by uploading them. Remember that when you upload a file with the same name as one that already exists on your Web server, the new file replaces the old one. 6. View your Web site online in your browser. Test each link on all pages.

30. Project Part 4: Add e-mail links 1. Add you email address via an e-mail link to contact.htm (see lesson 5, table 5-3) 2. Save your changes and upload your revised file to your Web server.

31. Project 7 - Grading Rubrics 1. 1. Created a new page named links.htm containing at least five fully qualified URLs to external Web pages and correctly applied the _blank target attribute to each link. Uploaded links.htm to the Web.: 0-10 2. Created a new page named contact.htm. Uploaded contact.htm to the web. : 0-10 3. Both links.htm and contact.htm contain the proper coding to apply CSS from externalstylesheet.css : 0-10 4. Correctly coded an e-mail link in the file contact.htm : 0-10 5. Correctly added local hyperlinks to each of the Web pages in your Website. These links are included on each of the five pages of the Website. : 0-10

32. Thank you! Feel free to contact me with any questions! emartignon@kaplan.edu emartignon@kaplan.edu Use the Virtual Office to post questions throughout the week, as well as to upload your zipped folder if you need me to look at the code!