Comp25: HTML - Sub Pages and Navigation

Learning Objectives

1. To create the remaining sub-pages that comprise your website:
   
   
2. To create an "About Us" page that discusses your business
3. To create a special "Investor Relations" page for listing some of your future assignments
4. To create a "Links" page to provide links to your suppliers, associates, and other useful resources
5. To create a "Products" page for future development
6. To link each of your pages together for easy navigation

Note: When you are finished, upload your four (4) new html pages to Blackboard to insure your pages were completed on time!

Steps to Take

Insure that ALL your new sub-pages contain the basic HTML structure shown below:

As a suggestion, you can copy/paste text from your index.html page and then edit the content so it is unique to each sub-page.  Or you can Save index.html As about.html and then edit the content. Since the core HTML code is the same for all pages, you can use this short cut, but be sure to edit each page with unique content as outlined in these instructions below:

1. About Us:
   1. Create a new HTML page and immediately save it to your web-docs folder.  Call it "about.html".
   2. Use an <h1> tag to indicate this page's title (About Us).
   3. Add content to this page to further describe your business, using Heading <H> tags to break up the following sections:
      • Mission statement and/or  vision
      • Company history
      • Owner's bio
      • Anything else you think should be on this page. 

      Each of these sections should be about a paragraph or two.  If you already have some of this information on your home page, feel free to cut-and-paste it into this page.  You may also "borrow" content from another company's website.  Or, come up with your own creative stuff. 

2. Investor Relations:
   1. Create a new HTML page and and immediately save it to your web-docs folder called "investorrelations.html".  
   2. Use an <h1> tag to indicate this page's title.
   3. For now, put something like "This content is coming soon". We'll fill it in later.
3. Products:
1. Create a new HTML page and and immediately save it to your web-docs folder called "products.html".  (If your business sells services instead of products, then feel free to call it services instead.  Just don't forget what you called it.)
2. Use an <h1> tag to indicate this page's title.
3. For now, put something like "This content is coming soon". We'll fill it in later.
4. Links Page:
   1. Create a new HTML page and and immediately save it to your web-docs folder called "links.html".  
   2. Use an <h1> tag to indicate this page's title.
   3. Use this page to provide links to various pages on the internet that your visitors might find useful, such as:
      • Your suppliers
      • Industry events
      • Other local businesses that compliment yours
      • Sites that provide information about your products
      • An association that you "belong" to

      You should have at least six links.  Make sure you test each one.

5. Edit your index.html page to create a special navigation area vertically at the top of your page.
   1. Use the <ul> (unordered list) elements for vertical navigation, with each link being its own <li> element.  
   2. Alternatively, you can use horizontal navigation.  Consider using the HTML bullet tag if you use horizontal navigation: Type &bull;  for this character   •  You will not use the <ul> and the &bull; together. 
   3. Vertical Navigation:
      
   4. Horizontal Navigation:
      
      

6. Your navigation section should appear near the top of your home page to make it easy for visitors to look through your site.  People (especially professors grading your work) don't like to scroll down.
   
   
   

7. Add another link to your navigation area that will allow the visitor to email you.  Do not use a real email address unless you want it made public.
8. Test your navigation that you've added to your index.html page area thoroughly before moving to the next step.
9. Using copy-and-paste, replicate your navigation section on every page of your website.  You should be able to highlight the new code, choose copy (Ctrl-C) then open up each page and paste (Ctrl-V) the code into the appropriate location.  Save each one as you go along.
10. Preview your newly updated website in a browser and make sure all of the links work in all of the pages.  You should now be able to roam about your website from page to page with a consistent navigational area.  You should also have a friend check it for you as well.
11. To insure your pages were completed on time, upload each of your new .html pages to Blackboard under Week 6: Website & Navigation.  Click "Add another file" to attach multiple files.

Helpful Links

Links Reading

Navigation Lecture

Grading Guidelines

This assignment will be graded using the following guidelines: