IT130L (WEB DESIGN AND DEVELOPMENT LABORATORY)

EXERCISE NO. 1 PART 1 (WEEK2)

INFORMATION DRIVEN WEB PAGE

OBJECTIVE: To design information driven web page applying the basics of HTML5.

Instructions:

1. Create an information driven website following the outline stated below.

(Note: Create a link from the outline to the specific location of the contents on the web page)
a. Introduction
b. Discussion
c. References (with links)

2. Place ALL your files in one folder and save the folder as: surname_ex1. The main page should
have a filename of surname_ex1.html. On done with this exercise, save folder to the link
provided

3. The webpages should include the following features and their corresponding attributes:
a) Minimum of 3 Links to another page.
b) Topic title at the title bar
c) Declare elements
i. headings
ii. language, meta
iii. Lists (ul,ol)
iv. hr, br, etc
v. font color, font size, font style, etc.
vi. At least 2 quote and 2 blockquote.
vii. Bold, italic, strong, etc.
viii. Insert related Images
ix. Explore w3schools.com (html) for other html tags (style enhancement) you may
use.
d) Minimum of 3 links to a website (references)
e) At least 10 Paragraphs for each page. Each paragraph should have more than 50 words.
f) Add a background color of your own choice (use color codes).
IT130L (WEB DESIGN AND DEVELOPMENT LABORATORY)

EXERCISE NO. 1 PART 2 (WEEK3)

INFORMATION DRIVEN WEB PAGE (continuation)

OBJECTIVE: To explore HTML tables and iframes. To observe web design principles and coding
standards

g) In one of the web page, present some of the content(texts) in tabular form.
Minimum of 5 rows , 3 columns. Add following styles stated below:
 Adjust table width.
 Add background color on the table.
 Add a spanned rows or columns.
 Observe proper alignment.
h) Also, present gallery of images (Series of images presented in tabular forms). Minimum of
5 rows , 5 columns.
i) HTML5 iFRAME. Add an embedded google map and related youtube video link.

Note: Observe consistency on navigations. Observe web design standards discussed as these are
considered in grading the exercise.
 IT130L (WEB DESIGN AND DEVELOPMENT LABORATORY)

Name Score

Section and Date Student’s

Terminal #. Signature

Scoring Rubric Achieved

Criteria
Poor Beginner Developing Proficient Score

0 points 1-7 points 8-12 points 13-20 points

Information is
sequenced but
All information is
lacking clarity.
clearly sequenced.
Information and Site can be "figured
Site Organisation No clear evidence elements not out" in a relatively
Site has clean and
clear appearance.
of site organised logically. short period of time.
Consistent page
Site has cluttered Varied
organisation repetition.
feeling. pagerepetition.
Consistent, visually
Elements
pleasing alignment.
inconsistently
aligned.

0 points 1-15 points 16-35points 36-50 points

Complete
Website content Contains at least Contains at least requirements
Website contains
three of the five of the with
irrelevant
requirements requirements improvements
information
stated above stated above beyond
specification

Site Design 0 points 1-10 points 11-20 points 21-30 points

No clear evidence Spelling errors. Minor Clean appearance

Grammatical grammar/punctuatio and clear
of website design errors, n errors. intentions.
consideration inappropriate site Clean looking site. Good alignment
color scheme. Links Active links. and proportions.
inactive. Size of Objects and text in Visually engaging.
IT130L (WEB DESIGN AND DEVELOPMENT LABORATORY)

Easy to navigate.
proportion.
Links, media load in
Links, media take a
relatively quick
objects and text long time to load.
time.
out of proportion.
Design standards are
Design standards
partially observed
are fully observed