CST161 - Term Project

In addition, your home page should contain links ("in a sidenav" and also in a list at the bottom) that can be clicked to take the user to "project" pages, which illustrate various aspects of HTML, CSS, Javascript, and website development, as described below.

Each "project page" should explain to the viewer what each tag does, state its name along with a few userful attributes (if any), Each "project page" should have a different background color (or image).

PROJECT PAGES

Markup tags -- "markup.html"

Illustrate the various text markup tags (at least two dozen of them, including both logical and physical markup tags). Also illustrate several "entities" for special characters (at least a half dozen of them, including some that are specied by name and some by number).

This page should explain to the viewer what each tag does, state its name along with a few userful attributes (if any), and demonstate what the markup tag does to sample text.

Lists & Headings -- "headings.html"

Show the 5 different types of ordered list and the three different types of unordered list, illustrating NESTED lists at least three levels deep (e.g. OL UL OL, UL UL OL, etc.)

Show all six heading levels, with all three types of alignment. (It is NOT necessary to show all eighteen combinations.), Also include some ordinary textafter following each heading.
Also illustrate some of the basic text layout tags, such as P, BR, PRE, HR, etc.

Images -- "images.html"

Illustrate the various properties of the IMG tag to control positioning (text-alignment and "float"), height or width (seperately and together), borders, alternative text, etc.
Be sure to include text to say what properties you are illustrating, what your tags are doing, etc..

Hyperlinks, URLS, and Anchors -- "links.html"

Illustrate the use of the "A" tag, to create hyperlinks, anchors, etc.
Be sure to include text to say what properties you are illustrating.

Tables -- "tables.html"
Illustrate various features of HTML tables, including:

• Tables with different (horizontal) alignments.
• Tables with different values for CELLSPACING, CELLPADDING, WIDTH, etc.
• Different background colors and images for cells, rows, and the entire table.
• How to use CELLSPAN and ROWSPAN (to combine cells in various ways).

To illustrate these various features, you will need several tables, but you may illustrate more than one feature in the same table. Be sure to add TEXT to call attention to which feature(s) you are illustrating with your examples.

Forms, Javascript, and Perl -- "forms.html"
Create a form that collects information from the user and send it to the server.

Write an appropriate server-side CGI Perl script to process your form input, and display a page whose content depends upon the input data from the form. The HTML output of your server-side Perl script should illustrate at least the following:

• Changing background color and/or background images of the page and/or some table cells, based upon differnt input values.
• Examining the text of some inputs, and outputing different messages on the the page.A
• Performing calculations using inputs from the form; display results on the output page.

Javascript -- You do not need a "Javascript Page" -- just add javascript to pages, as described below.


• Add some "rollover" Javascript to the "images" page, to change the mage sources, sizes, etc. if the mouse is hovering over iit.
• Add Javascript to change the page background color (or image), when the mouse is clicked over certain image(s) or text.
• On the "Forms" page, add Javascript to "validate" at least two of the inputs, and to stop the form from being sent with "invalid" data.

Be sure to add text to explain (or call attention to) your Javascript examples.

CSS and STYLE -- "style.html" -- (optional)

1. Create another page, similar to your text markup page, to illustrate the use of "STYLE" features to accomplish similar changes to text caused by some of your markup tags.
   If you prefer, you may illustrate STYLE features on the SAME page as your markups; be sure to add text that says which ones effects are caused by TAGS and which by STYLE.
2. On your "LISTS" page, add a STYLE block to specify a few DIFFERENT styles for list items within nested lists (such as an OL nested within UL, UL in OL in UL, etc.)
3. On your "IMAGES" page, specify a dashed red line as the border of one image and specify at least one other mage border using STYLE.

Design your "project pages" to be useful in the following ways: As atutorial, to explain to the user how to use HTML. As a reference ("cheat sheet") for yourself, to look up the syntax and behaviour of various tags, etc. As a "browser-tescter" to see how different browsers treat various tags and attributes differently. Feel free to "personalize" these project pages, including text and images that relate to the general theme of your website.