Web Design and Development Prepared by: Marvin De Leon

Practical Exam 3: Web Layout and Design using Tables with Script Embedding

What you will learn:

1. Learn to create HTML document with Hyperlinks.
2. Learn to place images in your HTML document.
3. Learn to design and layout using table.
4. Learn how to include or embed scripts.

Steps to Follow:

1. In your workstation, inside the Drive H: – Create a folder inside ITM103/Practical;

name it using this format deleonmb_pe03-10022009 small letter only. Refer to the
explanation below.

where: deleon is your surname

m is the first letter of your name
b is your middle initial
pe03 is the lab exercise
10022009 is the date of submission

2. After creating the folder, open the folder and create another folder, name it images.
3. Download the file in the YahooGroups under the filename: resource2_files.zip.
4. Extract it and copy the all the images and paste it inside the images folder.

Note: you should make yourself aware of the file type of the images you will download,
like jpg, gif or png.

5. Using the html tables, create the web layout; refer to the sample screen shot below.
6. Use the following color scheming. Font formatting. And table setting.

Color Scheming: #354308

#62790F
#4A5B0B
#A0C017 (border color)

Font: Arial
Size: Default (12)
Table Cell padding: 10
Table Cell spacing: 10

7. The HTML page below will be the front page. The table should be in 70% of the total
screen resolution. Use the above settings. The filename of this html page is page.htm.
MORE GALLERIES should be a link pointing to galleries.htm at the same time the
small image should also be a link with an alternate text of Galleries.

Page 1 of 4 Practical 2: Web Layout and Embedding Scripts

 Web Design and Development Prepared by: Marvin De Leon

8. The next HTML page will be the second page after clicking the link MORE
GALLERIES or the image . The table should be in 100% of the total screen
resolution.
9. Use the above settings. The filename of this html page is galleries.htm.
10. The MORE GALLERIES should be a link pointing to galleries.htm at the same time
the small image should also be a link with an alternate text of Galleries.
11. Place the images W1-W18 into this page, the images should have an alternate text of
“Click to enlarge” use the sample screenshot below.

Page 2 of 4 Practical 2: Web Layout and Embedding Scripts

 Web Design and Development Prepared by: Marvin De Leon

12. The manner in placing the images were as follows: the first row will have the pictures
W1-W6, second row for W7-W12, and the last will have the pictures from W13-W18.
13. The sizes of the images are given below in the table below.

W1 = 60 x 100 W7 = 70 x 100 W13 = 70 x 100

W2 = 75 x 100 W8 = 60 x 100 W14 = 79 x 100
W3 = 90 x 100 W9 = 65 x 100 W15 = 65 x 100
W4 = 70 x 100 W10 = 70 x 100 W16 = 70 x 100
W5 = 70 x 100 W11 = 75 x 100 W17 = 65 x 100
W6 = 60 x 100 W12 = 65 x 100 W18 = 100 x 100

14. The image in the CHECK IT OUT should be a link and pointing to the browse1.htm
in a new window with a specific window size. Use the code sample below to open a
link in a new window with a specific window size.

<a href="browse1.htm" onClick="window.open('browse1.htm', 'browse1',

'resizable=no, scrollbars=no, width=400, height=400, top=10, left=50');
return false">
Place here you image link or text hyperlink
</a>

Page 3 of 4 Practical 2: Web Layout and Embedding Scripts

 Web Design and Development Prepared by: Marvin De Leon

15. The 18 image links should have the following filename: browse1.htm up to
browse18.htm.
16. The images and should like to the next and previous image and the button
should have an alternate text of Previous Image and Next Image.

Note: All in all you will be having 20 HTML Documents. Namely, page.htm,
galleries,htm and browse1.html up to browse18.htm.

17. When you have finished everything, zip the entire folder (deleonmb_pe03-10022009).

18. Send the zipped folder (deleonmb_pe03-10022009.zip) as an attachment to this

email address myeastasia_group@yahoo.com

19. Place in the subject field: Practical Exam # of YourCompleteName of YourSection, for
example Practical Exam 3 of Marvin De Leon of I21.

NOTE:
1. This is 100 points and the lowest you could get if you pass something will be 30 points,
provided you have the basic HTML script on it or else you will get 0 point.
2. Not following any of the given instructions, will merit nothing on this lab exercise —
meaning you will get 0 point for this.

Page 4 of 4 Practical 2: Web Layout and Embedding Scripts