BIITSerie

Lab Manual
WEB Technology
A simplified practical work book of WEB DESIGN AND DEVELOPMENT course
for Computer Science, Information Technology and Software Engineering
students

Student Name:______________________________________

Registration No:___________________________________

Section / Semester: _________________________________

Submission Date: _____________________________________

Student Signature: __________________________________

Marks Obtained: _______________________________________

Maximum Marks: _____________________________________

Examiner Name/Sig: ___________________________________

Dr. Naseer Ahmed Sajid

Mr. Amir Rasheed
Sr. Learning Objective LAB No.

HTML Introduction and Basic Tags 1

1
LISTS 2
2
TABLES 3
3
LINKS 4
4
MAP TAG 5
5
FRAMES 6
6
CSS (Inline, Internal, External) 7
7
DIVS 8
8
CSS NAVIGATION & POSITION 9
9
JAVASCRIPT Basics 10
10
JAVASCRIPT DOM 11
11
JAVASCRIPT Forms & Validation 12
12
JQUERY 13
13
JSON 14
14
PHP 15
15
Lab Project Evaluation 16
16
 Lab #1
HTML Introduction:
HTML (hyper text markup language) is standard markup language used to
create web pages. This session will help students to know about basic tags of
HTML and will learn how to write code and execute it.

Following tags are discussed below.

- H1
- H2
- H3
- H4
- H5
- H6
- Hr
- P

Task #1.1

Write HTML code for given design.

TASK #1.2
Write HTML code for given web page. You must use following tags to achieve
desired result.

- Heading
- Underline
- Italic
- bold
- Paragraph
- Image
- Horizontal line
- Center
- Line break
 LAB# 2

Lists:
You can create three types of lists in HTML:
- Unordered lists , which are like lists of bullet points
- Ordered lists , which use a sequence of numbers or letters instead of bullet
points
- Definition lists , which allow you to specify a term and its definition
Unordered List (<ul>)
If you want to make a list of bullet points, you write the list within the < ul
>element (which stands for unordered list). Each bullet point or line you want to
write should then be contained between opening < li >tags and closing < /li >tags
(the li stands for list item).

Ordered Lists (<ol>)

Sometimes, you want your lists to be ordered. In an ordered list, rather than
prefixing each point with a bullet point, you can use either numbers (1, 2, 3),
letters (A, B, C), or Roman numerals (i, ii, iii) to prefix the list item.
An ordered list is contained inside the < ol > element. Each item in the list should
then be nested inside the < ol > element and contained between opening < li >
and closing

Description List (<dl>)

HTML Description List or Definition List displays elements in definition form like in
dictionary. The <dl>, <dt> and <dd> tags are used to define description list. One of
the most common uses for description list is to implement a glossary.
Task # 2.1
Write HTML code for given design. You must use following tags to achieve
desired goal.
- Heading
- Center
- Underline
- Bold
- Unordered list
- Horizontal line
- Type attribute in unordered list
TASK # 2.2
Write HTML code to design given web page. You must use following HTML tags
and attributes to achieve desired goal.
- Heading
- Center
- Horizontal line
- Bold
- Font (color, size attributes)
- Ordered list (type attribute)
TASK # 2.2
Write HTML code to design given web page. You must use following HTML tags to
achieve desired goal.
- Description List
- Definition term
- Definition description
 LAB#3
TABLE:
Tables display information in rows and columns; they are commonly
used to display allmanner of data that fits in a grid such as train schedules,
television listings, financial reports,and sports results.
An HTML table is defined with the <table> tag.Each table row is

Tag Description

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

defined via <tr> tag. Table header is defined with the <th> tag while table
data/cell is defined with the <td> tag.
TASK # 3.1
Write HTML code for given web page. You must use “table” tag and
“colspan” attribute to design given tables.
TASK# 3.2

Write HTML code to design given table. You must use “colspan” and
“rowspan” attribute to achieve desired results.
TASK # 3.3

Write HTML code to design given web page. Use table tag with following
attributes to achieve desired goal.

- Image
- Background color
- Align
- Rowspan
- colspan
TASK # 3.4:

Write HTML code to design given web page. Use table tag to design web
page.
 LAB # 4
LINKS:
Links are used to navigate from one portion of web site to other portion.
Navigation can be within same page, or from one page to another page. Or
from one page to another page at some specific portion.

There are three types of links.

1- External links
2- Internal links
3- External Internal links

Anchor tag “<a>” is used to link pages between each others.

TASK#4.1:

Write HTML code which must design following 4 pages.

- PAKISTAN.HTML
- PROVINCES.HTML
- RIVERS.HTML
- LAKES.HTML

Main page is Pakistan.html, which have links to other pages. When user
clicks on Provinces, it must navigate to provinces.html. When user clicks on
rivers, it must navigate to rivers.html. When user clicks on lakes, it must
navigate to lakes.html.

Each sub page (provinces, rivers, lakes) have a link of HOME page
(Pakistan.html) at the end of web page. When user clicks on home text, it
must navigate back to PAKISTAN.html.

INDEX.HTML
PROVINCES.HTML

LAKES.HTML

RIVERS.HTML
TASK # 4.2:

Write HTML code to design given web page. It contains details about
provinces and lakes of Pakistan. At the start of page, a list is maintained
about provinces and lakes of Pakistan. Details of all the material is
mentioned below the list. Whenever user clicks on any link, it must navigate
to that specific portion of the page i.e. if user clicks on banjosa, system must
scroll down the page automatically and navigate to BANJOSA lake details.
TASK # 4.3

Write HTML code to design following three web pages.

- OLX.HTML
- MOBILE.HTML
- PC.HTML
OLX.HTML is index page which contains a list of mobiles and pc’s. When user
clicks on MOBILES, system must navigate to MOBILES.HTML page. When
user clicks on SAMSUNG, system must navigate to SAMSUNG portion on
MOBILES.HTML.

Similarly, when user clicks on iphone, system must navigate to iphone

section on MOBILES.HTML.

MOBILES.HTML and PC.HTML pages have a link “HOME” at the bottom of

web page. When user clicks on home, system must navigate back to
OLX.HTML.

OLX.HTML
PC.HTML
MOBILE.HTML
 LAB#5
TASK # 5.1:
Write HTML code to design given web page. Following are the pages

- PAKISTAN.HTML
- CITIES.HTML

PAKISTAN.HTML contains a map of Pakistan and list of cities (which are

links). Map of Pakistan has 4 hot regions on it. Hot region mean, whenever
user move mouse pointer to Islamabad portion on map, mouse pointer must
convert to “link pointer” and must be clickable. When user click on
Islamabad, it must navigate to Islamabad portion of CITIES.HTML. Similarly,
whenever user move mouse to Quetta, Lahore, Peshawar and Karachi, it
must be clickable and navigate to specific portions on CITIES.HTML.

CITIES.HTML page contains an image of “home” at bottom left corner.

Whenever user clicks on home image, it must navigate back to
PAKISTAN.HTML. (You must use map tag to create link on home image).

PAKISTAN.HTML
 LAB#6

Framesdivide a browser window into two or more separate pieces or panes,

with each pane containing a separate web page. One of the key advantages
that frames offer is that you can load and reload single panes without having
to reload the entire contents of the browser window. A collection of frames
in the browser window is known as a frameset.

A frameset divides the window into rows and columns (rather like a table).
The simplest of framesets might just divide the screen into two rows,
whereas a complex frameset could use several rows and columns.

There is also a special kind of frame called an iframewhich is a single

window that can sit anywhere inside a page.

The < frameset > Element

The < frameset >element replaces the < body >element in frameset
documents. It is the attributes of the< frameset >element that specify how
the browser window will be divided up into rows and columns.
These attributes are as follows:
- cols specifies how many columns are in the frameset.
- rows specifies how many rows are in the frameset.

The < frameset >element contains a < frame >element for each frame of
the document (each cell of thegrid constructed by the < frameset >element)
and a < noframes >element to indicate what should bedisplayed if the user’s
browser does not load frames.
TASK #6.1:
Write HTML code to design given page which is divided into 3 frames on the
basis of rows. Also design 3 pages with “HEADER.HTML”, “CONTENT.HTML”
and “FOOTER.HTML”.

FRAME.HTML
TASK#6.2:

Write HTML code to design given web page in frames. There are three
frames designed. Header, Left panel and content frame.

In header frame, “Header” text is written.

In Left panel frame, an ordered list is displayed which have following

contents “Mobile”, “laptop”, “tablets”.

In Content Panel, a flag of “Pakistan” is displayed.

Whenever user clicks on Mobile list item, “MOBILE.HTML” page must be

displayed at “Content” frame. As shown in the figure 2 below.

Similarly for laptops and tablets, when user clicks on any list item, its
relevant page must be displayed in “Content” frame.
INDEX.HTML (FIGURE 1)

MOBILE.HTML (FIGURE 2)
TASK #6.3

Write HTML code to design given web page using frames.

FRAME BLOCKS.HTML
 LAB # 7
Introducing CSS
CSS works by allowing you to associate rules with the elements that appear in a
web page. These rulesgovern how the content of those elements should be
rendered. CSS rule is made up of two parts:
- The selector , which indicates which element or elements the declaration
applies to (if it applies tomore than one element, you can have a comma -
separated list of several elements)
- The declaration , which sets out how the elements referred to in the
selector should be styled

Types of Style Sheet:

1- Inline Style Sheet
2- Internal Style Sheet
3- External Style Sheet

Inline CSS:
- STYLE keyword is used inside of an HTML tag as an attribute
Internal CSS:
- STYLE is used as a tag in head portion of HTML code
External CSS:
- A new file is created with .css extension, and that file is linked to our HTML
page.

TASK # 7.1
Write HTML and CSS code to implement given design using inline CSS.
NOTE: only use <p> and <br> html tags. You must use CSS properties to
design given web page.
TASK # 7.2
Write HTML and CSS code to implement given design using INTERNAL CSS.
NOTE: only use <p> and <br> html tags. You must use CSS properties to
design given web page.
TASK # 7.3
Write HTML and CSS code to implement given design using EXTERNAL CSS.
NOTE: only use <p> and <br> html tags. You must use CSS properties to
design given web page.
TASK # 7.4
Write HTML code to design given web page. There are three portion of the
given file.
1- INLINE
2- INTERNAL
3- EXTERNAL
You must design inline portion with “inline” CSS, Internal portion with
“Internal” CSS and external portion with “External” style sheet.
CSS.HTML
 LAB # 8
DIV:
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used to group block-elements to format them with CSS.

TASK # 8.1
Write a HTML code to design given web page. You must use <div> tag to
design given boxes.

DIVS.HTML
TASK# 8.2:
Write HTML and CSS code to design given web page. You must use css
“float” property to achieve given task.

FLOAT.HTML
TASK# 8.3

Write HTML code to design given web page using div and css.
TASK# 8.4

Write HTML code to design given web page using div and css.
 LAB # 9
TASK #9.1:

Write HTML code to design given web page. You must use position property
with values “fixed”, “absolute” and relative.

POSITION.HTML
TASK #9.2:

Write HTML and CSS code to design given navigation bar. Given navigation
bar must be implemented by using LIST tag of HTML. List item “courses” and
“projects” has sub list which are hidden. Whenever mouse moves on these
both, sub-list must appear in vertical. As shown in figures

FIGURE 1

FIGURE 2
FIGURE 3
 LAB# 10
TASK #10.1

Write a JavaScript code that inputs two numbers from user and an operator
from user. If user enters an arithmetic operator, than apply operator on two
numbers and display result. Otherwise display invalid operator.
TASK #10.2

Write a JavaScript code that inputs numeric values from user. When user
press‘s’, system must stop taking values from user. Store all values given by
user in an array. And perform following math functions on all values of
array.

- Square
- Log
- COS
- SIN
- TAN
- Under Root
TASK#10.3

Write a HTML code that must display given design. When user click on any
of the buttons, a function must be called and take two numeric values from
user. And display output on an “alert” dialogue box with respect to button
pressed.

NOTE: create only one function, use arguments to achieve goal.

 LAB # 11
TASK #11.1
Write a HTML and JavaScript code that must display given design. On top
right corner of web page, a digital clock is being displayed. On clicking “Enter
Data” button, system must take “name” and “age” of user and display
values in front of labels. As shown in figure 2.

Figure 1

Figure 2
TASK #11.2

Write a HTML code that must display following design. Perform following
functionality.
1- When user click on “Change Background” button, system must input
color from user and apply that color to background of head div.
2- Whenever mouse is moved to left div, its opacity must be set to 50%,
and whenever mouse is moved out from left div, opacity must be set
to normal.
3- Whenever mouse is moved to Content div, another div named “txt”
must be shown, and whenever mouse is moved out from Content div,
“txt” div must hide.

FIGURE 1
TASK # 11.3
Write a HTML code that displays following image on web page. Write
JavaScript code that must implement given functionality.
Whenever mouse is moved on the picture, it must fade out to 50%. Your
must use JavaScript DOM functions not jquery.

Figure 1

Figure 2
TASK # 11.3
Write HTML code that displays following layout of web page. Write
Bootstrap code that must implement given design.
 LAB # 12

TASK #12.1
Write a HTML code which must display three images in a row as shown in
figure. On click event of button, each image must move to next image box.
ie, image of box1 should move to box 2, image of box2 should move to box3
and image of box3 should move to box1. And this process must repeat itself
after 2 seconds.

FIGURE 1
TASK #12.2
Write a HTML code which must display following form. Given are the
eligibility criteria for male and female candidates.
For Male candidates:
- Age must be above 30
- He must have experience in Database projects
For Female candidate:
- Age must be between 18 and 30
- She must have experience in Management projects;
If candidate is eligible for job, display “Eligible” in the green div. otherwise
display “Not Eligible” in green div.
TASK # 13.3

Write HTML code to design given web page and write JavaScript code to
validate values in the text fields. When user click “SEND” button, system
must check rules. If all rules are valid, system must display “Well Done”. If
any of rules is violated, system must display errors in an alert box. On
clicking clear button, all fields must be set to empty. Rules are given below
1- User must enter name and it must contain only alphabets.
2- Zip Code must be digits and must not exceed 6 digits.
3- User must select some country.
4- User must select gender.
5- User must select at least one from preferences.
6- Phone number must be a digit and it must start with “03” and must
have 11 digits.
7- Email must contain “@” symbol and “.com” at the end
8- Password must contain an Upper case alphabet, a Lower case
alphabet, a special character and a digit. And it must be between 6-8
characters.
9- Password and verify password must match.
 LAB # 13

TASK 1:
Write a HTML code to design following web page. Write a jquery code which
must open a panel whenever mouse is moved to given green div.On click
even of button which is given at the end of web page, a yellow div must
emerge from left of web page and slide in 2 seconds. On clicking again on
button, yellow div must slide back and disappear.
Slider div is shown in Figure 2.

FIGURE 1
FIGURE 2

FIGURE 3
TASK #13.2
Write a code in HTML to design given web page. Also write a jQuery code
that must fade given image on mouse over function. On mouse over event
on image, “PAKISTAN” text must slide down from top in 0.5 seconds (as
shown in figure 2). And when mouse moves away from image, “PAKISTAN”
must slide top and hide and faded shade must disappear.

FIGURE 1
FIGURE 2
TASK #13.3
Write a code which must add 3 images on a web page but display only first
image. On page load, jQuery cycle function must be called and a slider of
images must start, which must change images in ‘fade’ pattern.
 LAB # 14

TASK #14.1
Design given form in HTML, and perform following tasks
1- On “Input Employee” button click, system must input (prompt) Id,
name, age and city from user and save all values in a JSON array.
2- On “Display All Employees” button click, all values saved in JSON array
must be displayed in table as given below.
TASK 2:
Write a HTML code and design given web page. Create three JSON arrays
naming “ADMIN”, “MANAGEMENT” and “CS”. And perform given task
1- On “Input Employee” button click, system must take two values from
user and store in respective array. Two values are
a. Employee Type ( admin/management/CS)
b. Employee Name
2- On “Display All Employees” button click, system must display
employees of all departments in an ordered list in given format.
 LAB # 15

TASK 1:

Design given form in HTML. On click event of “Submit” button, all

values of text fields and values from radio button “male/female” must be
stored in php database containing table given below.

Student (name, age, gender, city, password)

On click event of “Display All Students” button, data of student table from
database must be displayed on web page in a table in given format.