Part 3: Page Structure. Activity: Table of Contents (TOC) Create a table of contents that links to...

Part 3: Page Structure

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.

Heading and Horizontal Rule

• Create a basic page, that says “Table of Contents” at the top.

• Add a horizontal rule: <hr>

<hr> options

• You can change width and thickness, color etc…

http://www.pagetutor.com/html_tutor/lesson22.html

Creating a List

• Create your table of contents using a list.

• There are two types of lists: – Ordered: <ol>– Unordered: <ul>

• To specify a list item, use the tag <li>

Your TOC<body><h1>Table of Contents</h1><hr size=… color=… width=…><ul>

<li> <a href=“…..”>Love Letter</a><li><a href=“…..”>Lyrics</a><li><a href=“….”>A Few of My Favorite Things</a>

</ul>

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, <table>

Creating a Table

http://www.w3schools.com/html/html_tables.asp

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)

Creating a Form

• http://www.w3schools.com/html/html_forms.asp

• Experiment with the “Try-it-Yourself Examples.”

http://www.w3schools.com/html/html_forms.asp

http://www.w3schools.com/html/html_forms.asp

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 fieldo Radio buttonso Check boxeso Submit buttonso 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)

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?

Structure Choices

• General to specific - “Hierarchical”– example: http://www.express.com/home.jsp

• Specific path: “Linear”– Example:

http://www.w3schools.com/html/default.asp

• Structures explained:– http://www.rocketface.com/

organize_website/website_navigation.html

http://www.express.com/home.jsp

http://www.w3schools.com/html/default.asp

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

Creating a Navigation BarTo create a navigation bar, simply put the

same links in the same place on all of your pages.

home love letter lyrics

HOMEPAGE


LOVE LETTER


LYRICS

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.)

Part 3: Page Structure. Activity: Table of Contents (TOC) Create a table of contents that links to...

Documents

Transcript of Part 3: Page Structure. Activity: Table of Contents (TOC) Create a table of contents that links to...