HCI 201 Midterm

HCI 201
Quiz 4
February 21, 2006

(5 pts. each) To which font family does each of the following belong?
1. hydroelectric
2. hydroelectric
3. hydroelectric
4. hydroelectric
5. hydroelectric
Ans: The font families are slab serif, modern, old style, sans serif and script, respectively.
(5 pts.) How many bytes are there in a kilobyte?
Ans: 2¹⁰ = 1024
(10 pts) Compare GIF and JPEG image file types?
What is the best situation in which to use each of them?
Ans: GIF means Graphics Interchange Format; JPEG means Joint Photographic Experts Group. GIF images are best used for clip art and computer drawn pictures. JPEG images are best used for photographs.
(5 pts. each) What do the following terms mean and which image file types permit them?
animation progressive transparency
Ans: animation: A GIF file that shows a sequence of images that form an animation.
progressive: A JPEG file that shows the image at progressively more detailed resolutions, allowing the user to see the image as it is loading.
transparency: GIF files have the possibility of designating one color as transparent so that the background color of the HTML page can show through.
(15 pts.) Explain the difference between external, document-level, and inline styles.
Ans: external: The CSS styles are placed into a separate file that can be linked to any or all of the HTML pages in the website.
document-level style: The styles are placed into the document head between <style> and </style> tags. These styles apply only to the page on which they are located.
inline: A style that only applies to a single tag like <p> or <h1>.
(10 pts.) What is the significance of the following selectors?
a:active a:hover a:link a:visited
Ans: a:active is a link to another page that is currently open.
a:hover is when the mouse passes over the link without clicking.
a:link is an unvisited link.
a:visited is a link to a page that was (but is not currently) visiting that page.

(15 pts.) Show how the following list is displayed in the browser:

	
       <ol type="I">	    
	      <li>Felidae<br />
                <ul>
                    <li>Cougar</li>
                    <li>Lion</li>	
                    <li>Tiger</li>
                </ul>
            </li>
            <li>Cetacea<br />
                <ul>
                    <li>Dolphin</li>
                    <li>Whale</li>
                </ul>
            </li>
      </ol>

Ans:

Felidae

Cougar
Lion
Tiger

Cetacea

Dolphin
Whale

(10 pts.) Using the HTML and CSS code below, predict the font and text color of the following words:
Quote shadow sound
Ans: sound: Forte; #800000
Quote: Bodoni MT Black; #004040
shadow: Arial; #004000
(5 pts.) Modify the HTML and/or CSS code below to make the background color beige and the font of the paragraphs on the page Georgia.
Ans: Add background-color:beige to the body tag of styles.css.
In the p tag of the document-level style, change Arial to Georgia.

====== File: styles.css =====

body  { color : olive; text-align : right; font-family : 
        Arial; font-size : 130%; }
h2    { color : navy ; font-family : Georgia; }

====== File: macbeth.htm =====

<head>
<title>Quote from Macbeth</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<style>
<!--
body { padding-right : 1in; padding-top : 1in; }
p { color : #004000; font-family: Arial; }
h2 { color : #004040; Bodoni MT Black; }
-->
</style>
</head>

<h2>Quote from Macbeth</h2>

<p>Life's but a walking shadow, a poor player<br>
that struts and frets his hour upon the stage,<br>
and then is heard no more;<br>
it is a tale told by an idiot,<br>
<font face="Forte" color="#800000">
full of sound and fury</font>,
signifying nothing.</p>

</body>
</html>

HCI 201 Quiz 4 February 21, 2006

HCI 201
Quiz 4
February 21, 2006