To Notes

Summary for HCI 201 -- 2/14/06

Review Questions

1. Why shouldn't your website contain any page named index.htm?
   Ans: Because index.htm is the default file which is displayed if the URL in the browser is the folder containing index.htm. (Many web designers consider this to be an advantage.) The problem is when there is an error. If there is no index.htm file, the file index is displayed to allow the instructor or grader to determine what is wrong. This is not possible when there is an index.htm file.

2. What is the difference between an external style and a document-level style?
   Ans: An external file sheet can be attached to all pages in the website by using a <link> tag. A document-level style is inserted into the header of an HTML page and only affects that page.

3. Identify the parts of this style:
   h1 { font-family : Georgia ; font-weight : bold; }
   Ans: h1 is the selector or tag, font-family and font-weight are the properties, Georgia and bold are the values.

4. What is the HTML code for a link to an external style? Ans:
   <link rel="stylesheet" type="text/css" href="stylesheet.css" />

5. Where is a document-level style placed?
   Ans: In the head of the HTML page like this:
   <style>
   <!--
   ... styles to here ...
   -->
   </style>

6. Suppose that the font is set three times: in the document-level style, in the external style, and in the tag itself. Which font is actually used?
   Ans: The font in the tag itself. A font attribute has the highest precedence, followed by the specification in the document-level style, followed by the external style.

7. Suppose that the font is set twice in the document-level style. Which font is actually used?
   Ans: The font set last is used.

Working with Lists in FrontPage

• An example of an unordered list:
   
  • Item one.
  • Item two.
  • Item three.
     
• To create a single spaced unordered list:
  1. Enter the lines of the unordered list with line breaks between them.
  2. Highlight those lines with the mouse.
  3. Select Bullets in the Formatting toolbar.
      
• To create a double spaced unordered list:
  1. Create a single spaced unordered list.
  2. Enter a line break (Control-Enter) at the end of each line of the list.
      
• An example of a nested list.
   
  • Item one
    • First subitem
    • Second subitem
  • Item two
    • First subitem
    • Second subitem
    • Third subitem
       
• To turn items in an unordered list into a nested list:
  1. Highlight those lines with the mouse.
  2. Select Increase Indent twice.
  3. Right click on the highlighted list, select List Properties, choose the desired type of bullets, and click OK.
      
• To terminate a nested list:
  1. Type the next line after the nested list (still included in the nested list).
  2. Highlight that line.
  3. Select Decrease Indent twice in the Formatting Toolbar.
      
• An example of an ordered list:
   
  1. Item one
  2. Item two
  3. Item three
      
• To turn an unordered list into an ordered list:
  1. Highlight the unordered list.
  2. Right click on the unordered list, select List Properties, choose the desired type of numbers, and click OK.
      
• An example of a nested ordered list:
   
  1. Item one
     1. First subitem
     2. Second subitem
  2. Item two
     1. First subitem
     2. Second subitem
     3. Third subitem
         
• Subitems in a nested list are created in the same manner as an unordered list.
   
• Using custom bullets in an unordered list:
  1. Place the image for the custom bullet in the images folder. You can use this bullet image:  
  2. Enter the lines of the unordered list.
  3. Highlight the lines with the mouse.
  4. Right click on the list, select List Properties, Picture Bullets.
  5. Check the radio button Specify Picture, and browse for the picture in the images folder.
      
• Here is an example of a list with custom bullets:
   

  	Item 1
  	Item 2
  	Item 3

• There are many styles of custom bullets to download from the web.
   

Creating Lists in HTML

• The delimiters for an ordered list are <ul> and </ul>.
   
• The delimiters for a list item are <li> and </li>.
   
• Here is a table of the traditional attributes for changing the bullet or number in a list:
   

  Attribute	Meaning	Examples
  type=1	Arabic numbers	1  2  3  4
  type=A	Upper case letters	A  B  C  D
  type=a	Lower case letters	a  b  c  d
  type=I	Upper case roman numerals	I  II  III  IV
  type=i	Lower case roman numerals	i  ii  iii  iv
  type=disc	Filled disc	•
  type=circle	Open circle	°
  type=square	Filled square	Don't have symbol for this.

  
  
• Here is HTML code for creating a nested list:
  <ul type=disc>
      <li>First item</li>
          <ul type=circle>
              <li>First subitem</li>
              <li>Second subitem</li>
          </ul>
      </li>
      <li>Second item</li>
          <ul type=circle>
              <li>First subitem</li>
              <li>Second subitem</li>
              <li>Third subitem</li>
          </ul>
      </li>
   
• Exercise: Create an ordered list with upper case roman numerals as numbers.
  List your top five of all time list of movies.  Use the traditional type attribute.
   

Using Styles to Control List Appearence

• Here is a table of CSS list-style-type style properties for changing the bullet or number in a list:
   

  Attribute	Meaning
  decimal	Arabic numbers
  upper-alpha	Upper case letters
  lower-alpha	Lower case letters
  upper-roman	Upper case roman numerals
  lower-roman	Lower case roman numerals
  disc	Filled disc
  circle	Open circle
  square	Open square

  
   
• Here is a style to modify the numbers of an ordered list:
  li { list-style-type : upper-roman }

• Exercise: Add a document-level style to modify your ordered list of movies. Use upper case roman numerals as numbers.
   
• A style can even be used to specify custom bullets for an ordered list:
  ul { list-style-image:url(images/greenbullet.gif) }

• Here is a link to some custom bullets. Search on the internet for others.