(Updated: 2005/09/23, 11:45 )
Created by: Shelly Zhao
Updated by: Tanya Ellchuk
Updated by: Holger Hoos
Comments to: Holger Hoos
Sources: some of the lab was taken from:
We will cover these topics in the lab:
Before the lab you should have met all the requirements of the HTML Web Page Design lab.
Add the following bold part into the head of your "courses.html"
Now go to your "main.html" and click on the link to the "courses.html" to see what happens. Click here to see what it should be.
<head> tag and
<body> tag and the
We'll explore that further when you get into event handling.
2.2 The <Script> Tag
The first thing you see within the
code that has to be interpreted. This tag also makes the browser aware
2.3 The <!-- and //->
The strange symbols
</head> tags. As all good programmers know, it's
generally a good idea to comment whenever possible. Every line that starts with
is a comment until the end of the line.
--> are the same constructs
support it. Just remember that these two strings should surround all of your
<head> section, right inside the
You might be wondering why we put the
// and the
--> together for the second construct. Take our word for it -
it's always done this way. If you're really curious, click here , we will
tell you why.
Finally - something interesting!
alert() is one of
object-oriented talk for something that performs an action
on an object; in this case, the object is your
alert() is a great way to get a user's attention. It
issues a curt beep on sound-equipped systems and displays a message of your
choice in a special pop-up box. Like in many other programming
Now, change the image of your picture in the "main.html" by typing the following, and see what happens when you open it with a browser. Be sure to roll your mouse on and off your picture. Click here to see how it should work.
<A HREF = "#" onMouseOver = "document.images.src = 'logoUBC.jpg';"
onMouseOut = "document.images.src = 'mypicture.gif';">
<IMG border=0 SRC = "mypicture.gif" width="95" align="left"></A>
We can start by dissecting the code from this example.
Here is the line that makes the image swap possible:
<A HREF = "#" onMouseOver = "document.images.src = 'logoUBC.jpg';" onMouseOut = "document.images.src = 'mypicture.gif';"><IMG border=0 SRC = "mypicture.gif" width="150" height="100" align="left"></A>
A few things are happening here, so let's look at one part at a time. Everything that is not in bold is just straight HTML that places and aligns an image on the page.
onMouseOver = "document.images.src = 'logoUBC.jpg';"
Notice the dot notation refers to objects lower in the object hierarchy, and
the square brackets which access different elements in an array; in this case,
the array of
images that are part of this
Note: The goal of this section is to modify the quiz to contain your own questions (and answers). At the end of the lab, you should have a quiz with at least two of your own questions and none of the questions from the original example quiz.
Open the file "quiz.html" with Notepad, and find the following line near the beginning of the file:
form name=wmst201quiz method=get action=wmst201quiz_result.html
Change the form name from "wmst201quiz" to "myquiz" , and the action from "wmst201quiz_result.html" to "quiz_result.html". (Do not include the quotes).
Also, find the questions, so that you can change the content of the quiz.
The html code for the questions is like this:
<TD colSpan=4 height=25>What do you
use to browse an HTML file? </TD></TR>
<TD height=24><INPUT type=radio value=0 name=2> Word</TD>
<TD height=24><INPUT type=radio value=1 name=2> Excel</TD>
<TD height=24><INPUT type=radio value=2 name=2> PowerPoint</TD>
<TD height=24><INPUT type=radio value=3 name=2> Internet
Where you can change the question "What do you use to browse an HTML file?" by your own question.
Each question will have four answers, shown as "Word", "Excel","PowerPonit" and "Internet" in above example. Also try to change the answers according to your questions, and do not touch other format settings.
Here is the copy of the explanations:
/* the handleQuestion function * * This function figures out what answer the user chose for the question with * number 'questionNumber' then prints the question and the correct answer. * It is important that this function is called for each question in order. * You don't have to change the code here. */
/* This code creates the output page after the user submits some answers. * Put your four answers to each question to answer to answer, and * set the variable 'correct' to be the number of the correct answer. * * good luck in your quiz. */
score += handleQuestion(1, "What can you use to edit an HTML file? ", correct, answers);
5.. Advanced Feature (Optional)
Here are some examples that you can put into any of your pages. Feel free to change them or to find other examples on the web. You can use the links at the end of the lab as a reference. But be sure not to make your website to be one of these examples.
5.1 Multiple images swap
5.2 Prompt windows
5.3 Login and Password (enter "cpsc101" as the UserID and password)
5.4 Length Conversion Calculator