Course Code Course Name Load Distribution

PCS-5011 Web Technology Lab

(LTPC)
004 2

Learuing Outcome:
After Completing this course students will be able to learn:

1. Creating the basic structure and static web pages using HTML5.
2. Implement web page by using CSS3 enhance formatting style like Transition & Dynamic
effects.
3. Build andimplement Web form validation & events driven concept.
4. Implement dynamic creation of xml file & transportation of web contents between
different web servers.
5. Develop dynamic & interactive web
pages which transfer data back and forth from
server, and add interactive components to web pages.

HTML 5
1. Write a HTML code to draw the
following Figure:

2. Create a web page to print the following table:

List of Course-wise
Subjects

List of Course-wise Subjects

S1. Course Marks
No.
Subject Categoy Practica/
nternal External Internal External Theory
Management Acounting |30 70 Theory
Information Technology |30 70 T and P
MBA
Basics of Marketing 30
Theory
E-Commerce 50 Theory
Visual Basic 30 70 T and P
Internet Technology 30 70 T and P
Network Technology 30 70 Theory
MCM
VB.Net 30 70 T and P
Liux 30 70 T and P

ISA 50 Theory
3. Using table related tags align the images with hyperlinks.
nagesIndows Intemet Esplore
DPiactiles For Se\B« Record Woik\Tsbleing.htnl
ViewFavuiitesTools Hep
Tahle With Images

Table With Mobile Connections

TATAAtrtel
vodafone ndiconm E Ywsnt

DeceMTablc With Images AIRCEL

unlnor
MTO HUTch

4. Create a web page with the following using HTML:

I. To embed an image map in a web page
II. To fix the hot spots
III. Show all the related information when the hot spots are clicked.

5. Create a web page having frames as follows:

Your Name
Punch line etc.
Obiective

Personai Information
Family Information Display information here of selected
link Display
Educational Informationa relevant
images
Experience here

Achievements
Other

Your contact details

The frame which includes Objective, Personal Information ect. are the hyperlinks. Display the
relevant information in the next frame on selecting the link. The colour scheme of hyper links
should be as follows:
defaultgreen
active red
visited - blue

The information should be well formatted. Follow the instructions mentioned in the above
format.

6. Demonstrate the use of <IFRAME> tag using suitable example.

7. Create a program to run youtube video ina web page.

8. Write a HTML code for the following snapshot.

 Basicinformation

Full name

Birth date:

Gender: Male Female

Address:

Phone number:

Extra infommation

Interests: D Books Movies Videogames

Favorite color

Send data Resetform

9. Create a web page of customer profile for data entry of customer's in a Hotel, The profile
should include Name, Address, Age, gender, Room Type (A/C, Non-A/C or Deluxe), Type of
payment (Cash, Credit/Debit Card or Coupons).

10. Demonstrate the use of following HTML5 Tags:

I. <Video
II. Audio
III. <Header
V. <Footer
V. <Nav
VI. <Embed
VII. <Datalist>
VIII. <Bdi
IX. <Article
X. <Output>

CASCADING STYLESHEET
1. Createa web page to show all hyperlinks with following specification:
Default color is pink.
Active color is blue
Visited color is Green
Hyperlink should be without underline.

2. Create Box Shadow and text Shadow using CSS3.

3. Create Rounded Corners using css3.

 n
given in web page (.e.
layout effects on contents
4. r e a t e a web page to show newspaper
multiple columns).
change
that elements gradualy
.reate a web page to show transitioneffect in such a way so

from one style to another style.

the rest
will not scroll with
6. Create a web page to show fixed background image (this image
of the page)
or
the image horizontally
7, Create a web page to position a background image and repeat
vertically.
of web page
8. Create a web page to resize the background
which includes the following:
9. Design a web page using CSS

i. Use different font styles

elements on page.
the page and single
ii. Set background image for both
Control the repetition of image
with background-repeat property
ii. a:visited
Define style for links a s a:link,
a:active, a:hover,
iv.
links.
V. Add customized c u r s o r s for
vi. Work with layers.
Snapshot

C
FileCDecunerts and Sathgsstudenl/De skdossmpb t

Web Page using CSS

n aprly the ceen styes to derent tags and

alss diferent styles t Sre tag i.e
usrg CS where CS% revs Cassdne Stye Shets usn S
we

Nerome to Weh page

repeatedhore than once h the ht! file
Reguster

LAYER2
LAYER2
JAVASCRIPT
1. Design a web page to validate credit card number according to the below speciticatio.
with tneir
Following tables outlines the credit cards you might want to validate, along
major
allowed prefixes and lengths.

and Length
Major Credit Cards, Their Prefixes,

Prefixes Length
Card Type
51-55 16
Master Card

Visa 4 |13,16

34,37
15
American Express

registration page:
the following fields in a
2. Write a java script to validate not be less than 6 characters)
and the length should
Name (should contains alphabets
less than 6 characters)
3.
Password(should not be
invalid addresses)
E-mail(should not contain
"Wish a user
"
at different hours of a day
3. Write a java script program to

one minute.
4. Desigm a web page that self modifying itself after every

in a textboxx
date from the user
which accepts the birth
5. Write an code for web application, button.
box o n the click of a
and display the day of the week in a message

the form (555)555-555.

The
telephone number as a string in
6. Write a script that inputs a
token and the last four
code as
split to extract the
area
script should use strings method
the
code in one test field and
seven

numbers as a token. Display the a r e a

digits of the phone
another text field.
digit phone number in
the mouse over
web page that applies the invert filter to an image if the user moves

7. Create a

it.
browser
from right to left at the status bar of
8. Write an HTML Page to scroll the text message

window.

o n four different model

of Maruti (Maruti -K10, Zen-
9. Design a web page to perform survey Mumbai,
Astelo, Wagnor, Maruti- SX4) owned by person living in four metro cities(Delhi,
tabulated report like format given below:
Chennai &Kolkatta). Display

Maruti-SX4
Maruti-K10 Zen-Astelo Wagnor

Delhi

Mumbai

Cheenai
Kolkatta

Calculate numbers of cars of different model in each metro city.

XML
tnc
includes
information which
1. Wnte an XML file which will display the Book

Title of the book

Author Name
ISBN number
Publisher name
Edition
Price
XML file.
the above
Definition (DTD) to validate
Write a Document Type
should be
information
as follows.
2. Display the above XML file And the
Author n a m e s remaining
in a block. own colors for
c o n t e n t s should be displayed in bold. Use your
and
ne in o n e color and should
be capitalized
isplayed above purpose.
information. Use CSS for the

match the
PHP After submitting
the form
Password fields. match a new
User-Id and password
1. Create Login
a having
form
and password. If user-id and
user-id
and password with existing
user-id
should be appear.
welcome window

contain Department
PERS table that
all the records from web browseer
PHP page to display in interface
2. Create a
that of given in list lstdnogiven
similar to
Number(field name dno)
Screen.
count on each
count in SESSION,
to increment the
to store page views
3. Write a PHP program
show the count o n web page.
refresh, and to
COOKIE and display the "Last visited on

current date-time in a

4. Write a PHP program to store

of the s a m e page.
date-time on the web page upon reopening
Accession number,
to accept book information viz.
PHP and MySQL, develop a program database
5. Using store the information in a
from a web page and
edition and publisher
title, authors, the search results
title specified by the user and to display
and to search for a book with the
with proper headings.