2/7/06 Notes

To Notes

Summary for HCI 201 -- 2/7/06

Take Quiz3

The time to take Quiz 3 is from 1:30pm to 1:50pm.
Here is the Quiz 3 Review Guide.

Review Questions

What is the family of each of these fonts?
1. Sans Serif: Rumplestiltskin
2. Old Style: Rumplestiltskin
3. Decorative: Rumplestiltskin
4. Slab Serif: Rumplestiltskin
5. Script: Rumplestiltskin
6. Modern: Rumplestiltskin
What are the distinguishing characteristics of each of these font families?
Old Style Slab Serif Modern Sans Serif Script Decorative
Ans:
1. Old Style: Some of the letters (e.g., h, l and k) have diagonal serifs.
2. Slab Serif: Serifs are horizontal, and the thickness of the serifs are equal to or greater than the thickness of the main strokes.
3. Modern: Serifs are horizontal, but the thickness of the serifs is narrower than the thickness of the main strokes.
4. Script: The letters look like they were drawn with a calligraphy pen.
5. Decorative: The shape of the letters is artistic and/or unusual.
Which of these font families makes printed text easiest to read?
Ans: Old Style or Modern.
Which of these font families makes printed in a browser to read.
Ans: Sans Serif
True or False. Never use more than one font on a page.
Ans: False. Two fonts can and should be used on a page if there is good contrast between them. Three different fonts should only be used with a good reason.
True of False. The more script and decorative fonts that you can use in your websites the better.
Ans: False. Do not overuse script and decorative fonts. Use them only in special situations.

Try creating the following table by typing the HTML code in directly:

abc def

ghi jkl

Ans:

<table>
<tr> <td>abc</td> <td>def</td> </tr>
<tr> <td>ghi</td> <td>jkl</td> </tr>
</table>

Some Special Symbols

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 - - or -

En Dash – 

Em Dash — 

The easiest way to put these special symbols into your HTML document is to type its HTML code directly into the Code View. Be sure to include the ampersand, number sign and semicolon.
You can also use Insert >> Special Symbol in FrontPage.
Not everyone agrees that these special symbols should be used (see Sheehen, for example). The problem with Sheehen's solution is that it uses Unicode, which is not supported directly by most broswers.

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

Introduction to CSS Styles

A document-level style is a style that applies to every HTML tag on a given page.
An external style is a separate file with extension .css that applies to every page to which it is attached.
Repeat the exercise from the 2/2 Notes which sets fonts for the <p>, <h1> and <h2> elements, but using document-level and/or external styles instead:
1. Create a FrontPage website named test-styles that contains these two pages:
  page1.htm and page2.htm.
2. Follow the directions in the document Styles in FrontPage to add a document-level style to page1.htm.
  1. Set the fonts for the <h1>, <h2> and <p> tags.
  2. Also set the background color and text color for the <body> tag.
3. Remove the document-level style from page1.htm by deleting the lines
  <style>
  
  </style>
  and the styles between them.
4. Follow the directions in the document Styles in FrontPage to create an external style sheet:
  1. Set the fonts for the <h1>, <h2> and <p> tags.
  2. Also set the background color and text color for the <body> tag.
5. Follow the directions in the document Styles in FrontPage to attach the style sheet to all of the pages in the website.
  1. Attach this sheet to page1.htm and page2.htm.

Work on Projects

Work on your HobbyWebsitePlan or your HobbyWebsite if you have finished the plan.