Sultanate of Oman

Ministry of Higher Education

ITDR1105 - WEB DEVELOPMENT

LAB MANUAL
FALL SEMESTER 2017

Page 1 of 8
 Lecture 1

HTML5 and CSS2 Revision

Lab Exercise 1

Using HTML 5 Design the following Web Page

Lab Exercise 2

Using HTML 5 Design the following Web Page

Lab Exercise 3

Using HTML 5 Design the following Web Page using header, footer, article, aside tags

Page 2 of 8
Lab Exercise 4

Using CSS apply LEFT-ALIGNMENT and BLUE text color to all <p> elements in a web page

Try to apply these rules using

1. Element Selector
2. ID Selector
3. Class Selector

Lecture 2

HTML5 and CSS2 Revision

Lab Exercise 1

Design a web page with CSS3 Multicolumn layout as per the following specifications:

o Number of columns: 3
o Gap between columns: 50px
o Rule style of the column: solid
o Width of column: 5px
o Color of column rule: blue;

Lab Exercise 2

Design a web page to demonstrate text rollover so that the rollover will change the link to red and
make the underline appear.

Page 3 of 8
Lab Exercise 3

Design a web page to demonstrate image rollover so that the rollover will change the image on the
link

Lecture 3

Java Script (Introduction)

Lab Exercise 1

Design a web page to and display the text “Welcome to Oman” using java script.

Try the different methods of including javascript into a web page.

Lab Exercise 2

Find the HTML element (with id="demo"), and changes the element content (innerHTML) to the
current date and time value:

Lab Exercise 3

Find the HTML element (with id="demo"), and changes the element content (innerHTML) to "Hello
JavaScript":

Lab Exercise 4

Design one HTML page with that will print the sum and product of two integer numbers with the help
of javascript variables.

Lab Exercise 5

Program to demonstrate the use of javascript Alert box.

Lab Exercise 6

Program to demonstrate the use of javascript Confirm box.

Lab Exercise 7

Program to demonstrate the use of javascript Prompt box.

JavaScript- Functions, Arrays, and Objects

Lab Exercise 1

Design the following web page and on clicking the button display the text welcome as an alert

Lab Exercise 2

Design the following web page and on clicking the button display the cube of any number passed as a as
parameter to a function.

Lab Exercise 3

Design a web page and store the following names in an array in java script.

"Zainab", "Omayma", "Ahmed", "Fathima"]

Now do the following:

 Sort the array in ascending order and print all elements

Page 5 of 8
Lab Exercise 4

Create an object emp with the following attributes and values

Id-200 , Name – Yahya, Salary – 5750

Use the following methods for object creation:

1. new Object()
2. Literal Notation
3. Using Constructor

And display the attribute values of the object in a single line.

200 Yahya 5750

Lecture 5

DOM & DHTML with JavaScript

Lab Exercise 1

Add code to example 1 (Example1: Resizing a picture[ SLIDE NO 18]) so that when the mouse is out
of the image, it regains its original size

Lab Exercise 2

Modify example 2 (Example2: Changing Text [ SLIDE NO 19]) so that only the content of the clicked
paragraph is changed. The content of the other paragraphs remain unchanged.

Lab Exercise 3

Modify example 3(Example3: Changing the background SLIDE NO 20] ) to select the <div> itself instead
of its child node <img> and then change its background color.

Lecture 6

Advanced Form Validation using Javascript

Lab Exercise 1

Design the following HTML Form.

Apply the data validation so that the number is between 10 and 20 display the message "Input OK"
otherwise display the message "Input not valid";

Page 6 of 8
Lab Exercise 2

Design the following HTML Form.

Apply the data validation as follows:

1. Mobile number field data must be a numeric data and not less than 8 digits,
2. The email field must accept the data which must contain the character '@' and dot (.). And
the character @ must not be the first character and the last dot must at least be one
character after the @.

On submitting the form, If all these validations are followed, another html page (value of the
action attribute of the above html page) must be displayed as shown below:

Lecture 7

DHTML with jQuery

Lab Exercise 1

Display the text “Welcome to the world of jQuery” on clicking a button using jQuery.

Lab Exercise 2

Design a web page with 3 paragraphs. The id of the second paragraph must be para2. Add the jQuery
code to display the message ("The Mouse button is up over the paragraph with the id para2");

Page 7 of 8
 Lecture 8

Form Validation with jQuery

Lab Exercise 1

a. Design a web page as shown below.

Lecture 9

Advanced HTML5 with JavaScript new Features

Lab Exercise 1

Design a web page with a canvas with the id c1, width – 200 height 200 with solid border with Blue color. Draw
a line on the canvas from (0,0) to (175,100).

Lab Exercise 2

Design a web page with a canvas with the id c2, width – 200 height 200 with solid border with RED color. Draw
a string “Oman” on the canvas at location (10,70) with the font Arial and font size 25 pixel

Lecture 10

Advanced CSS3 features – Animation

Lab Exercise 1

Design a web page with a <div> element of width 75 pixels, height 75 pixels and green color background. When
the page is loaded, the background color of the <div> element must change from green to yellow. The animation
must be completed within 3 seconds. When the animation is finished, the <div> tag must change back to its
original style.

Page 8 of 8