HTML and CSS Reference
Perform the following tasks:
1. Start Notepad++. Open the make11-1.html file and save the file as make11-1solution.html.
2. The floatImage() user-defined function has one error. The lightning cloud on the left should scroll
the entire width of the Web page. Find the error in the floatImage() function so that the lightning
cloud scrolls the entire width of the Web page.
3. When the mouse is placed over the floating lightning cloud, it does not stop. Compare code in
Tables 11-13 and 11-14 and find the error.
4. When the slide show tries to find an image, there is an error. All the images are supplied, so it is not
a missing image. Find the error related to the cloudSlideShow() user-defined function.
5. When the lightning cloud image is clicked, it should open a pop-up window announcement by
calling the user-defined function conference().
6. Correct these errors, and then save the corrected HTML file. Test the corrected Web page using
your browser. If you still have an error, check your code, save, and test again ( Hint: check the
onLoad event handler in the <body> tag).
7. Submit the revised HTML file and Web page in the format specified by your instructor.
In the Lab
Design and/or create a Web page using the guidelines, concepts, and skills presented in this
chapter. Labs are listed in order of increasing difficulty.
Lab 1: Town of Madison Parks and Recreation
Instructions: You are a summer intern for the Town of Madison's Parks and Recreation Department.
Your supervisor wants to create a Web page to announce some free classes for DIY home owners
sponsored by Schillingburg Lumber and Hardware. The Web page needs an image rollover with
a light switch that is on or off, and when the image is clicked, a pop-up window displays with an
announcement about a weekly raffle being held at the store. The Web page has an unordered list of the
classes: installing ceramic tile, repairing broken light switches, replacing torn screens, and fixing leaky
faucets. When the user moves the mouse over the selected word, a new image replaces the wrench and
hammer illustration and a pop-up caption displays (Figure 11-42).
img identified by
tag id “tool_logo”
mouse over light switch
changes light switch to on;
click light switch pop-up
list items display
and new image
to right of list