To Notes

Summary for HCI 201 -- 2/2/06

Review Questions

1. What are the HTML tags for the following?
   layer   table   table row   table cell
   Ans: <div>   <table>   <tr>   <td>

2. What is a websafe color?
   Ans: A color for which each color component is a multiple of 33 hex, e.g., 00, 33, 66, 99, CC or FF.

3. Which of the following are websafe colors?
   #606000 (no)   #FFFFFF (yes)   #66CC33 (yes)   #CC4400 (no)   #CCFFFF (yes)   #066330 (no)

4. Create pastel versions of magenta, green and aqua.
   Ans: #FFE0FF, #E0FFE0, #E0FFFF. Here are websafe versions of these colors: #FFCCFF, #CCFFCC, #CCFFFF.

5. What is pastel black?
   Ans: Grey, something like #E0E0E0 or #CCCCCC.

6. What are the steps for updating the Table of Contents (Ex5) for Ex6. Ans:
   
   1. Download the Ex5 contents.htm file using SSH.
      
   2. Open contents.htm with FrontPage.
      
   3. Go to the Code View to edit the HTML code.
      
   4. Change the href attribute of the link to collage.htm page. Here are three possibilities for the new address tag:
      <a href="collage.htm">
      <a href="ex6smith/collage.htm">
      <a href="../ex6smith/collage.htm">
      
   5. Save contents.htm in FrontPage.
      
   6. Upload contents.htm to (replace the old contents.htm) the students server with SSH.

More about Hyperlinks

• A bookmark is used in a hyperlink to jump to a specific position within the target page.

• See ch1.htm for an example using bookmarks. Click on the Section A, Section B or Section C links.

• To create a bookmark (also called an anchor) using FrontPage: select Insert >> Bookmark.

• To create a hyperlink that jumps to a bookmark on a webpage:
  highlight the text to convert to a hyperlink

  right click and select Hyperlink Properties

  Select the target page

  Select the Bookmark button

  Select a bookmark on the webpage.

• Here is the HTML code to indicate a bookmark:
  <a name="section1">

• To jump to the section1 bookmark within page1.htm, use an address link like this:
  <a href="page1.htm#section1">

• The HTTP address tag that forces the page to be displayed in a new browser window is
  <a target="_blank" href="page1.htm#section1">

The Color Wheel

• See the document A Color Wheel.

• Four Interesting Color Schemes:
  Monochromatic: Use various brightnesses of a single color.

  Complementary: Use color pairs that are complementary in the color wheel.

  Triadic: Use color triples that are triadic in the color wheel.

• Look at the color wheel that appears when setting the background color in FrontPage.

Fonts

• The six broad categories of fonts are Old Style, Slab Serif, Modern, Sans Serif, Script, and Decorative.

• FrontPage Font Examples.

• Here is the HTML tag for changing the font in a paragraph:
  <font face="Verdana">

• Rules for using fonts:
  1. Never use more than two different fonts on a page without a good reason.

  2. If you use two different fonts on a page, make them very different for good contrast.

  3. Do not use all caps in a heading or paragraph without good reason.

• Experiment with the font combinations from MS Publisher Font Schemes. Download this dummy text and fix it up.

• To get “real” quotation marks, see Page 249 of the text.

• Here is a table with some useful special symbols:

  Symbol Name	Symbol	HTML Code
  Left Single Quote	‘	‘
  Right Single Quote	’	’
  Left Double Quote	“	“
  Right Double Quote	”	”
  Hyphen	-	-
  En Dash	–	–
  Em Dash	—	—

• You can also use Insert >> Special Symbol in FrontPage.

Drawing Diagrams in MS Word

• To draw your information architecture or low fidelity design diagrams for your Website Plan, use the main menu item Insert >> Picture >> New Drawing. Then use AutoShapes at the bottom of Word to draw your diagrams.

• The most useful shapes in AutoShapes are Arrow, Rectangle and TextBox.

• You can create colored diagrams. Double click on the border of the shape to format it.