1. Part 3: Page Structure

2. Activity: Table of Contents (TOC) Create a table of contents that links to each of your previously built pages. Follow the directions on slides 3 - 6.

3. Heading and Horizontal Rule Create a basic page, that says “Table of Contents” at the top. Add a horizontal rule:

4. options You can change width and thickness, color etc… http://www.pagetutor.com/html_tutor/lesso n22.html

5. Creating a List Create your table of contents using a list. There are two types of lists: –Ordered: –Unordered: To specify a list item, use the tag

6. Your TOC Table of Contents Love Letter Lyrics A Few of My Favorite Things

7. Activity: Table of Contents 2 Create another table of contents and this time include an abstract of each page. (An “abstact” is a short description.) This time we will use the table tag,

8. Creating a Table http://www.w3schools.com/html/html_tabl es.asp

9. Your TOC 2 Create a 3X3 table with headings “Page Title,” “Abstract,” “Link” Format the table in a way that looks nice to you. Add your content (titles, abstracts, links)

10. Creating a Form http://www.w3schools.com/html/html_for ms.asphttp://www.w3schools.com/html/html_for ms.asp Experiment with the “Try-it-Yourself Examples.”

11. Assignment 6: Survey Part I  Choose a topic for a quiz or survey. It could be something like you see on Facebook or in magazines, or something more serious.  Make use of the following features on your page: o Text field o Radio buttons o Check boxes o Submit buttons o Drop down menu Part II  Use a table for one or both of the following…  Include a link to another page that has a key (the way magazines do) to score the quiz. (i.e. Each “no” is worth 0 points, each “yes” is worth 1 points)  This page should give some interpretation of the results (i.e. If you scored 15 or higher, you are the “romantic” type)

12. Site Structure and Navigation It is important to think out the overall structure and navigation of your site These will depend on what type of content you are displaying Questions: –Does your website go from the general to the specific? –Should users follow a specific path through the content?

13. Structure Choices General to specific - “Hierarchical” –example: http://www.express.com/home.jsp http://www.express.com/home.jsp Specific path: “Linear” –Example:http://www.w3schools.com/html/d efault.asphttp://www.w3schools.com/html/d efault.asp Structures explained: –http://www.rocketface.com/organize_websi te/website_navigation.html

14. Navigation Bar Can (and in my opinion should) be used to communicate the overall structure of your site They consist of links to important pages. They help the user get around your site Typically horizontal across the top or vertical along the left side

15. Creating a Navigation Bar To create a navigation bar, simply put the same links in the same place on all of your pages. home love letter lyrics HOMEPAGE home love letter lyrics LOVE LETTER home love letter lyrics LYRICS

16. Activity: Create a Navigation Bar Create a homepage – all it needs is the word “Homepage” for now Create links across the top that link to your files for your Homepage, Love Letter, Lyrics, Favorite Things, and Survey files –If you have lost (or never had) one of these pages, create a “bare bones” page that says “Love Letter,” or whatever title, at the top… Copy and paste the links to the top of your Love Letter, Lyrics, Favorite Things, and Survey files You have now created a navigation bar! (I will check this as part of your class participation grade.)