Unix Skills 101: 465 (Sept. 20, 2001)

A. Learning Objectives:

  1. To use a Unix editor, such as Pico (or Emacs)
  2. To navigate Unix files and directories
  3. To create a simple HTML file with permissions for Web access to your files
  4. To control HTML whitespace
  5. To create a basic file structure with HTML, HEAD, and BODY tags
  6. To create a HEAD section with a TITLE element
  7. To create a BODY tag with a BGCOLOR attribute for the entire file with light values such as "white" or "ivory"
  8. To create a FONT tag with a SIZE attribute and absolute values such as 2 and 4 or +1 and -1 (3 is normal)
  9. To create a second FONT tag with different SIZE attribute and relative values such as +1 or -1
  10. To add to a FONT tag a FACE attribute and the value "arial, helvetica, sans-serif"
  11. To add to a FONT tag a COLOR attribute with dark values such as "maroon" or "navy"

B. Summary:

  1. One HTML container -- the entire file
  2. One HEAD container -- then one BODY container -- with one BGCOLOR for file -- white and light colors are printer-friendly
  3. Unlimited FONT tags which may contain multiple attribuite statements -- require closing /FONT tags
  4. "Font" means typeface in the printing world but also means size and color for browsers
  5. SIZE: absolute (1 to 7, 3 being normal) or relative (+/-)
  6. FACE: three main families -- serif (Times), sans-serif (arial), or momospaced (Courier) -- always use multiple values
  7. COLOR: dark colors are printer friendly
  8. Quotes: to be sure, put all values and all multi-word values (e.g, "Times Roman") in matching quotes ark

C. Color:

  1. Stay with black and white or similar colors unless you have a reason
  2. Reverse colors often are hard to read and impossible to print
  3. Avoid blue, purple and similar colors if text could be confused for clickable links
  4. Start with simple English words: white, ivory, tan, black,. red, green, maroon, navy, etc.
  5. There are 216 named "browser-safe" colors
  6. There are 256x256x256 (16.7 million) colors, more than some monitors can handle
  7. Hex values for additive red-green-blue (RGB) go from 1-256 (Hex 00-FF)
  8. Instances range from #000000 (no color=black) to #FFFFFF (all colors=white)
  9. Common colors are #FF0000 (red), #00FF00 (green), #0000FF (blue), and #999999 (gray).
  10. Although the hex (16) scale includes #0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F -- the six commonest values are #0,3,6,9,C,F or #00,33,66,99,CC,FF

D. Type faces:

  1. A nicer serif font than Times is Georgia
  2. A nicer sans-serif font than arial/helvetica is Verbana
  3. Not all browers have the uncommon and exotic font faces
  4. In print,serif fonts are used for text and sans-serif for display headlines --
  5. But screen fonts sometimes reverse this rule for smaller sizes, using sans-serif for text
  6. Always express font faces as a family separated by commas: "Windows, Mac, generic"
  7. Examples: "verbana, arial, helvetica, sans-serif" and "georgia, Times. "Times Roman", serif"

E. It's all obsolete!

  1. The W3C directive for HTML 4.0 "deprecates" the FONT tag, which will eventually be replaced by style sheets
  2. The FONT tag will no doubt be around for many years in backward-compatible browsers
  3. The FONT system is easier to learn than style sheets, which we'll do later

F. FONT attribute exercises in this file:

  1. Change the color words so red is red, etc. Don't forget the closing tags.
  2. Do some absolute size changes and some relative size changes.
  3. Render this section in a different type face