CST161 Projects...

CST161 - Term Project

The term project is a complete website, including a home page named "home.html" (NOT "index.html") and at least three additional pages of your own design, with a theme of your own choosing. Take "ownership" of your website design and content, pick some theme or topic that you will enjoy working on, and have fun!

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 useful attributes (if any), Each "project page" should have a different background color (or image).

PROJECT PAGES

1. 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 specified by name and some by number). Also illustrate some of the basic text layout tags, such as P, BR, PRE, HR, etc.

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

2. 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.), Instead of simply listing the headings, one after another, there should be other text and tags between them; therefore, you may use the headings to introduce different types of lists, examples, etc..

3. Images -- "images.html"

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

Add some Javascript to illustrate dynamic effects, such as rollover, image swapping, bgColor change, etc. in response onMouseOver, onMouseOut, onClick, and other events.

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

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

6. 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 -- There is no separate "Javascript Page" -- just add javascript, such as: 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.

7. CSS and STYLE -- "style.html" (LATER.)

NOTE: the above list will be expanded, later in the semester, as new topics are covered.

Design your "project pages" to be useful in the following ways:

As a tutorial, 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.