Take-home product: a functioning website that has navigation and demonstrates the parameters outlined below. Create your 3-page website using consistent navigation using HTML5 semantic code:

I know that in SOME of the W3 Schools coding example, the stereotypical coding structure is not used, but I want you to use the stereotypical structure. Some of you haven't been doing this and I have been taking points off your assignments and will continue to do so. This is the structure you should use:

To create a navigation bar make a series of links as list items wrapped in the navigation tag

. You can use ul lists to do this (as some of you have been doing.)The navigation bar goes under the banner or banner area.

You can put these CSS styles in the head section (yes, the head section) if you feel comfortable doing so. The styles that are present in the HEAD section in the attached page are to control the navigation links.

Here is an example HTML page with comments

. You will need to open this in Firebox and view the source code.

Click right in an area on the page and select view page source from the menu that pops up.

viewsource.png

You must do 5 experiments. Yes, there are some simple CSS styles present. Do any of the following: Change the navigation, link code, or header code. Try adding color or changing font size. What happens if you remove the style rules in the head section? Or if you add styles? (Some of you already know how to do this.)

Here's what you need on each page:

1. an html comment in the head section in the code with your name.
2. text content about some fake or real business or organization. You can copy content (but you must credit your source). You can use fake text if you like.
3. images
4. banner area (you can include a real banner but you don't need to) Make sure to put the site name in the banner or banner area.
5. navigation bar below the banner or banner area. This navigation bar will link to the other pages in your website. The links will never disappear. For example, when I click on the link for your second page, the link to your home or index page will remain. It will be easy for me (and you) to go from one page to another because the links will never disappear. Think flavcity.
6. a page name on each page. The page name will be different on each page and should reflect what the page is. The page name is different from the file name. The file name is what you see in the code when you are creating a link.

Specialized content:

1. page 2 - create a form with six different field types.
2. page 3 - you must list your experiments (see the yellow area) using an HTML list
3. page 3 - create a real table to compare and contrast five things you learned in this class that you didn't know before. You can include concepts like usability and accessibility.

Take-home product: a functioning website using the parameters outlined above.

Here's some CSS I used on this page in this section for images. Try it yourself in your own work! Experiment for 3 extra credit points. This will help you to center images, blocks of text, etc...