Setting up the page

1. Create a new XHTML strict page just like you've done in the other labs/exercises - use Dreamweaver or use a text editor and paste in this initial HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

2. Save the file as "Lab08&09.html" and put it in a folder "Lab08&09" inside your "fit100" folder in your web (Dante) account. To be sure you've put it in the correct location, go to http://students.washington.edu/yourUWnetID/fit100/Lab08&09/Lab08&09.html, change "yourUWnetID" to your UW netID (if you've stored your file in the correct location, you'll see a blank page with the page title "Untitled Document").

3. Add a title and the heading "North American Time Zones" (using <H1> tags).

Next, you'll add the form elements. There are 3 form elements (elements that go inside the <form> tags):

1 text box to enter the time you want to start with

1 drop-down list to indicate whether that time is morning or afternoon

1 element we haven't used before: a set of radio buttons:

4. Type the opening and closing <form> tags.

5. Inside these form tags, create the text box using the <input> tag with these 3 attributes:

type="text" (this tells it to be a text box rather than a button, or other input type)

id="hoursBox" (the id will allow us to retrieve the number the user has entered using document.getElementById().value)

size="2" (the box only needs to be large enough to hold 1 or 2 numbers)

6. Create the drop-down list using the <select> tags and 2 sets of <option> tags.

Give the <select> tag the attribute id="ampmList"

Give the first <option> tag the attribute value="am" and the second <option> tag the attribute value="pm"

7. Go to the Catalyst quiz and answer the first question, then return to these directions to continue the lab.

Next, you'll add the radio buttons

previous page

next page