1/24/06 Notes

Summary for HCI 201 -- 1/24/06

Explain the difference between these types of folders?
current, child, parent, home.
Ans: The current folder is the folder containing the webpage for which you are writing HTML code. If you want to write a hyperlink to another folder in the current folder, you don't need to specify a folder, just list the file to where you wish to jump.
A child folder is a folder contained in the current folder.
The parent folder is the folder that contains the current folder.
The home folder is the default folder where arrive when starting SSH. The home folder contains the public_html folder.
What is the symbol in an HTML hyperlink for the parent folder?
Ans: ..
How do you set the background color in the HTML code?
Ans: If you want to set the background color of the body to beige:
<body bgcolor="beige">

In HTML, the background color and text color are set as attributes of the body tag. For example:
<body bgcolor="aqua" text="maroon">
The standard HTML colors are aqua (cyan), black, blue, fuchsia (magenta), gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white.
Here is a table of Extended HTML Colors, including the name and hex representation.
Be careful when using background colors. They may render the text on the page hard to read.

Traditionally, the red, green, and blue components of a color are represented in hexadecimal (base-16) rather than in decimal. Computer scientists like hexadecimal numbers because they are very easy to convert to and from binary.
Other bases that are used:
The commonly used abbreviation for hexadecimal is hex.
Hex color components have a range from 00 hex to FF hex (0 to 255 decimal).
Look at this Hex Digits Table for the meanings of each of the hex digits.
Here is a Hex Conversion Table for converting two digit hex numbers.
All you need to know about hex numbers is how to tell which of two hex numbers is larger.
The color red has a maximum value for the red component (FF hex), zero for the green component (00 hex), and zero for the blue component (00 hex). Therefore its color code is #FF0000.
The HTML code for setting the background color of the document to red is
<body bgcolor="#FF0000">
What are the hex color codes for green and blue?
Fuschia (or magenta) is obtained by mixing red and blue light. What is its hex color code?
What is the hex color code of aqua (cyan or blue-green)?
What color is obtained from mixing red and green?
The light green background of pages on Jost's HCI 201 website is #F6FFF6.

Here is a table showing the significance of various colors in the western world:

Color	Significance
Black	Power, elegance, formality, strength, prestige, death
White	Purity, cleanliness, refinement, innocence, virginity
Red	Passion, intense energy, anger, love, sensitivity
Orange	Enthusiasm, creativity, determination, success, stimulation
Green	Healing, nature, earth, freshness, calmness
Blue	Dignity, power, stability, depth, truth, heaven
Yellow	Happiness, vibrancy, youth, cheerfulness, sunshine
Purple	Royalty, riches, sumptuousness, luxury, ambition

Tables and layers provide two alternative means of positioning information on a web page.
A table is an n by m rectangular grid of nm cells containing n rows and m columns.
To create a table in FrontPage:
1. Position the cursor where you want to create the table.
2. Select the main menu item Table >> Insert >> Table.
3. In the Size section, set the number of rows and columns.
4. In the Layout section, check the radio button "Specify Width In pixels."
5. Set other properties as desired.
6. Resize the table using the mouse.
Note: Leaving the "Specify Width In Percent" radio button checked can cause problems with a table when the browser is resized.
To change the table properties: right click on the table and select "Table Properties."
To change the properties of individual cells in a table: right click on the table and select "Cell Properties."

Why avoid large images?
1. Large images take up too much space in your students.depaul.edu account.
2. Large images load slowly in the browser.
An ideal size for an image is about 25K.
Check the properties of the image file to see how large the image is.
Don't resize the original image, resize a copy.
To resize the image copy:
1. Right click on the image file in the File Explorer, select Open With, Paint.
2. Select main menu item Image, Stretch/Skew ... Change the Horizontal and Vertical percentages to a percentage less than 100. Keep the percentages equal to preserve the aspect ratio.
3. Select the main menu item File >> Save As to save the resized image.

A layer is a region on a webpage that can contain any desired content, including images, text or tables.
A layer can be positioned anywhere on a webpage.
Layers are a convenient way to achieve precise positioning of webpage content.
Warning: Do not place layers inside table cells.
To add a layer to a webpage: select the main menu item Insert >> Layer.
To reposition a layer: click in the layer. Then left click in the title tab and drag the layer to desired position.
To resize a layer: click in the layer. Then left click in the title tab and move one of the resizing handles.
To set layer properties: click in the layer. Then left click in the layer and select Layer Properties. Select Borders and Shading or Positioning.
To place an image in a layer: click in the layer. Position the cursor where you wish to insert the image. Then insert the image as you did in a table cell.

Creating a table is less work that positioning multiple layers.
A layer can be positioned anywhere on a webpage; content in tables must be placed in cells.
Layers are more modern than tables for controlling content placement.
Layers can be placed on top of each other. A layer with a higher Z-Order lies on top of a layer with a lower one.
Here are five examples of how to set up a web page using tables and/or layers:
Here is the stylesheet for the preceding examples.