10/7/09 Notes

IT 130 -- 10/7/09

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 Extended HTML Colors 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.
Here are some example JavaScript Items that can be used on your Class Website Project.

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.

The dot operator indicates a belonging relationship.
Example: Smith.Stan.LeftArm.IndexFinger
Without Smith, we wouldn't know which Stan we are talking about.
Without Smith.Stan, we wouldn't know which left arm we are talking about.
Without Smith.Stan.LeftArm, we wouldn't know if we are talking about the left or right index finger.
In general, the expression x.y means the y belonging to x,
where x could be a document, window, object, or class, etc.
y could be a value, function, object, control, etc.
Examples:
window.status
document.bgColor
document.FormA.TextBoxB.value
The dot operator sets up a hierarchy from more inclusive to more specific.

Controls on a web page are placed onto a form.
A document can contain one or more forms;
i.e., a form can be defined between the tags <body> and </body>
The following tags define a form with the name Hello1Form:
<form name=frmHello1>
...
</form>
The three dots indicate where the contents of the form are placed.
One possibility for naming a form is to use Hungarian Notation. This means use a three letter prefix like frm to indicate a form name.
Camel casing is used for variable names. This means that the first letter of the name is lowercase, but each new word in the name begins with an uppercase letter. For example: btnShowGreeting.
We will look at forms with a button or buttons that display output in three different places:
1. In a popup window, called an alert box (See the hello1.htm Example).
2. In the window status bar window (See the hello2.htm Example).
  If the broswer's status bar is not visible, you should make it visible by selecting the main menu View and Status Bar.
3. In a textbox (See the hello3.htm Example).

A control is only defined within a form.
A control is referenced like this:
document.formName.controlName
Example: document.frmHello1.btnGreeting
Sample control definitions:
The Hungarian prefixes for button and textbox are btn and txt respectively.
The type attribute indicates whether the control is a button or textbox.
The name attribute is used to refer to the control elsewhere in the code.
The size attribute determines the width of the textbox in characters.
The value attribute determines the text that is initially displayed in a control.
The onclick attribute determines what happens when the control is clicked.
Note: use single quotes within the value of the onclick attribute.
Look at the hello1.htm, hello2.htm and hello3.htm Examples again.

Create a web page with the title Changing the Background Color Dynamically. Display the title in the title bar and in an h1 or h2 heading. Supply an interesting document-level style for your page.
Add a button to your form with the caption Push Me. The onClick attribute should be similar to this:
onClick=alert('Hello');
However, select a different message than 'Hello'.
Add styles to the button similar to this:
style=background-color:beige;color:maroon;font-family:arial; font-size:150%;width:1in;height:0.5in
Add a form containing three buttons with captions Red, White and Blue. Clicking on a button will change the background color of the form to that color when the OnClick attribute is added below.