CSCI 1100 - Practice Lab Quiz 2

Part I: HTML/CSS (70 points)

For reference (on the real quiz), you can only use

  • The “HTML/CSS/JavaScript Reference Guide” document, available at
  • (for validating your webpage)
  • You may NOT use any previous exercise html source code

Recreate the Web page below as closely as possible. Follow the steps below to get the resulting facebook knock-off page. The two images should be downloaded from the Practice Lab Quiz download area where you downloaded these instructions.

1) Launch Notepad2. Open your HTML/CSS/JavaScript Reference Guide. Copy the blank webpage template at the top of the HTML/CSS/JavaScript Reference Guideand paste it into Notepad2.

2) Save the webpage as labbook.html.

3) In the HEAD section, make the title of the webpage to be “labbook homepage”.

4) In the BODY, make a table with 2 (two) rows and 3 (three) columns – note: you may create the table row by row as you fill in the information below, or you may create a blank table all at once and then fill it in.

5) In row 1:

a) The first cell should contain the text “labbook”

b) The second cell should contain the text “Info | Students | Mail”
c) The third cell should contain the text “Logout”.

6) In row 2:
a) In the first cell, using the img tag, insert the image “labbook1.gif” with the alt text “search box image”.

b) In the second cell, using the img tag, insert the image “profilepic.gif” with the alt text “lab profile picture”

c) The third cell should contain three paragraphs:

Activities: Awesome Lab Stuff

Interests: Microsoft Office Suite, Web Authoring

Favorite Movies: War Games, Short Circuit, Tron

7) In the STYLE area of the webpage, apply a style definition to all tr tags that changes the background-color to #3366FF and the color of the text to #FFFFFF.

8) Create two named styles, one called big, one called small.

9) The style attributes of big should be font-size of 16pt and font-family of Comic Sans MS.

10) The style attributes of small should be font-size of 8pt.

11) Apply the big named style to the first cell in the first row (the “labbook” cell).

12) Apply the small named style to the last cell in the first row (the “Logout” cell).
13) Using the “in-line” style technique, use the text-align attribute to center the text in the second cell of the first row (the “Info | Students | Mail” text).

14) Using the A tag, change the text in the “Logout” cell to a hyperlink that points to the website “

15) For full credit, the page must validate as HTML strict at .

The end result should look something like the image at the start of this section.

PartII: JavaScript (30 pts)

16) Have an alert box pop up saying “Cool labbook imitation page” when the user rolls the mouse over the profilepic.gif image.(15pts)

17) Create three buttons below the labbook table. Name them “Left”, “Center” and “Right”. Add action to these buttons such that the “Logout” hyperlink moves to the indicated position. (Hint: You can change the style property of the table cell but not the hyperlink.)(15pts)

Practice Quiz Uploading Procedure:

  1. You have been saving your files all along to your I drive. If there are any remaining windows open (besides this document), close them now and save any changes. Save the changes you made to this document as well.
  2. Now you will need to go back to the Practice Lab Quiz 2 section of WebCT to upload each quiz file.
  3. At the bottom of the page, you will see the section “Submit Assignment”.
  4. Click the “Upload file” button, and browse for the Labbook.html file that you edited and saved.
  5. Once that file is uploaded, repeat the process until all files are uploaded:
  6. Labbook.html
  7. Labbook1.gif
  8. Profilepic.gif
  9. Lastly, click the Submit assignment button.