10/9/08 Notes

IT 130 -- 10/9/08

Every pixel showing a color on computer screen is a mixture of red (r), green (g) and blue (b).
The values of r, g and b are called the color components of a pixel.
Color components range from 0 to 255.
If the rgb values of a color are r=255, g=0 and b=0, the color is expressed in CSS as rgb(255,0,0).
Here is a CSS style that uses color components:
body { background-color:rgb(255,0,0); }
Experiment: What are the colors produced by these color codes?
Perform this experiment in groups of two. Turn in a sheet with your answers. List all the names of the group members at the top.
Traditionally, color codes are expressed in hex (base-16). Instead of expressing the color red as rgb(255,0,0), it can be expressed as #FF0000.
The Colors in Hex document shows color codes for extended HTML colors, both in hex and in rgb format.

An external CSS style can be applied to many pages simultaneously.
Here are the CSS style pages used by the IT130 class website:
To apply a stylesheet to the current page, use this link tag:
Exercise: Create two sample web pages and an an external style sheet with .css extension to set the style for both web pages.
1. Use PSPad to create an HTML file named page1.htm with this source code.
2. Make a copy of page1.htm and change its name to page2.htm. Change the text in the title and the body from Page 1 to Page 2.
3. Create a file named styles.css. Enter CSS styles that you want to apply to both page1.htm and page2.htm. Look at stylepage.css and linksstyle.css for ideas.
4. Place a link tag in the head section of both page1.htm and page2.htm. The link should look like this:

The three sections of the WebsitePlan are the General Concept (25%), Information Architecture (35%) and Low Fidelity Designs (40%).
Use MS Word to create the drawings for the IA and LFD.
Alternatively, draw sketches for the IS and LFD, scan them in and embed the scanned images in MS Word.
Reminder: Your FinalWebsite must contain some JavaScript items. It must contain an order form. Optional items are a slide show, a real-time clock, a message of the day. We will talk about these optional items later. See the Dynamic Web Pages section below.

View this sample form that contains four textboxes and a button. Right click on the form and select View Source to see the source code.
This form is an example of client side processing. All JavaScript code is executed by the browser. No data is sent back to the browser.

A static web page does not change after it is displayed.
A dynamic web page can change its form due to some action of the user.
Using JavaScript is one way to create dynamic web pages.
Here are some example JavaScript Items that can be used on your Class Website Project.