WEB APPLICATION DEVELOPMENT

LAB MANUAL

III Year I Semester

2022 - 23

Prepared by:

Dr.K.Bala Brahmeswara Mrs.T.Naga Mani Ms.K.Jyothasna Latha

Assistant Professor Assistant Professor Assistant Professor

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

SESHADRI RAO GUDLAVALLERU ENGINEERING COLLEGE

(An Autonomous Institution with Permanent Affiliation to JNTUK, Kakinada)
Seshadri Rao Knowledge Village, Gudlavalleru – 521356
 SESHADRI RAO GUDLAVALLERU ENGINEERING COLLEGE
(An Autonomous Institution with Permanent Affiliation to JNTUK, Kakinada)
Seshadri Rao Knowledge Village, Gudlavalleru – 521356

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

INSTITUTE VISION & MISSION
Institute Vision:
To be a leading institution of engineering education and research, preparing students for leadership in their
fields in a caring and challenging learning environment.

Institute Mission:
 To produce quality engineers by providing state-of-the-art engineering education.
 To attract and retain knowledgeable, creative, motivated and highly skilled individuals whose
leadership and contributions uphold the college tenets of education, creativity, research and
responsible public service.
 To develop faculty and resources to impart and disseminate knowledge and information to students
and also to society that will enhance educational level, which in turn, will contribute to social and
economic betterment of society.
 To provide an environment that values and encourages knowledge acquisition and academic
freedom, making this a preferred institution for knowledge seekers.
 To provide quality assurance.
 To partner and collaborate with industry, government, and R&D institutes to develop new
knowledge and sustainable technologies and serve as an engine for facilitating the nation’s
economic development.
 To impart personality development skills to students that will help them to succeed and lead.
 To instil in students the attitude, values and vision that will prepare them to lead lives of personal
integrity and civic responsibility.
 To promote a campus environment that welcomes and makes students of all races, cultures and
civilizations feel at home.
 Putting students face to face with industrial, governmental and societal challenges
 DEPARTMENT VISION & MISSION

VISION
To be a centre of innovation by adopting changes in Information Technology, imparting quality education,

researchto produce visionary computer professionals and entrepreneurs.

MISSION

 To provide an academic environment in which students are given the essential resources for solving
real-world problems and work in multidisciplinary teams.

 To impart value based education and research among students, particularly belonging to rural areas,
for their sustained growth in technological aspects and leadership.

 To collaborate with the industry for making the students adoptable to evolving changes in
Information Technology and related areas.

PROGRAMME EDUCATIONAL OBJECTIVES(PEOs):-

PEO1:To exhibit analytical skills in modeling and solving computing problems by applying
mathematical, scientific and engineering knowledge and to pursue their higher studies.

PEO2: To communicate effectively with multi-disciplinary teams to develop quality

software systems with an orientation towards research and development for lifelong
learning.

PEO3: To address industry and societal needs for the growth of global economy using
emerging technologies by following professional ethics.
.

PROGRAM OUTCOMES (POs)

Engineering students will be able to:
1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering fundamentals, and an
engineering specialization to the solution of complex engineering problems.
2. Problem analysis: Identify, formulate, review research literature, and analyze complex engineering problems
reaching substantiated conclusions using first principles of mathematics, natural sciences, and engineering
sciences.
3. Design/development of solutions: Design solutions for complex engineering problems and design system
components or processes that meet the specified needs with appropriate consideration for the public health and
safety, and the cultural, societal, and environmental considerations.
4. Conduct investigations of complex problems: Use research-based knowledge and research methods including
design of experiments, analysis and interpretation of data, and synthesis of the information to provide valid
conclusions.
5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and modern engineering and IT
tools including prediction and modeling to complex engineering activities with an understanding of the limitations.
6. The engineer and society: Apply reasoning informed by the contextual knowledge to assess societal, health,
safety, legal and cultural issues and the consequent responsibilities relevant to the professional engineering
practice.
7. Environment and sustainability: Understand the impact of the professional engineering solutions in societal and
environmental contexts, and demonstrate the knowledge of, and need for sustainable development.
8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and norms of the engineering
practice.
9. Individual and team work: Function effectively as an individual, and as a member or leader in diverse teams, and
in multidisciplinary settings.
10. Communication: Communicate effectively on complex engineering activities with the engineering community
and with society at large, such as, being able to comprehend and write effective reports and design documentation,
make effective presentations, and give and receive clear instructions.
11. Project management and finance: Demonstrate knowledge and understanding of the engineering and
management principles and apply these to one’s own work, as a member and leader in a team, to manage projects
and in multidisciplinary environments.
12. Life-long learning: Recognize the need for, and have the preparation and ability to engage in independent and
life-long learning in the broadest context of technological change.

PROGRAM SPECIFIC OUTCOMES

Students will be able to

13.

PSO1: Organize, maintain and protect IT Infrastructural resources.

PSO2: Design and Develop web, mobile, and smart apps based software solutions to the real
world problems.
 WEB APPLICATION DEVELOPMENT LAB

Course Objectives

 To facilitate designing of dynamic web pages using HTML5, CSS3 and Javascript
 To familiarize server side programming and master database access using PHP

Course Outcomes:
Upon successful completion of the course, the students will be able to
 Design web pages using HTML5, CSS3 and Javascript
 Use Javascript and PHP to access and validate form data.
 Develop a database application and perform various operations on database using JSP and PHP
.

Mapping of course outcomes with program outcomes

1 1 PS PS
WEB APPLICATION DEVELOPMENT LAB 1 2 3 4 5 6 7 8 9 12
0 1 O1 O2
CO1. Design web pages using HTML5, CSS3 2 2 2 2 2 3
3 2 2
and Javascript.
CO2: Use Javascript and PHP to access and 2 2 2 2 2 3
2 2 2
validate form data .
CO3: Develop a database application and 2 2 2 2 2 3
perform various operations on database using 2 2 2
JSP and PHP .
 INDEX
PAGE
S.NO List of Experiments
.NO
Design the following static web pages required for an online book store web site.
i. Home page:- must contains three frames
 Top frame: - should contain logo and college name and links to
homepage, login page, registration page and catalogue page.
 Left frame: - at least four links for navigation which will display the
catalogue of Respective links.
 Right frame: - the pages to links in the left frame must be loaded here
initially it Contains the description of the website
1 6-9
ii. Login Page: - should contain Username and Password fields, Submit and
reset buttons.
iii. Registration Page: - should contain fields for Username, Password, Confirm
Password, Gender, Date of Birth, Email Id, Mobile Number and Address.
iv. Catalogue Page: - The details should contain the following details of books
available in a tabular format: Snap shot of Cover Page, Author Name,
Publisher details, Price and Add to Cart button.

Design a web page using CSS which includes the following:

i. Use different font and text properties.
ii. Set a background image for both the page and single element on the page.
2 10-14
iii. Define styles for links.
iv. Add Customized cursors.

Write an XML file which will display the Book information which includes the
following:
3 Title of the book, Author Name, ISBN number, Publisher name, Edition and 15-22
Price.
Validate the above document using DTD
Using JavaScript and Regular expressions validate all the fields of:
i. Login page.
4 23-32
ii. Registration page.

Design a web page using jQuery to demonstrate

i. Hide, show, fading and sliding effects.
5 33-39
ii. Keyboard, mouse and form events

Using PHP and Regular expressions validate all the fields of:
6 i. Login page. 40-45
ii. Registration page.
 Install a database and design a Web application using JSP:
i. To connect to the database using JDBC.
ii. Create new tables.
7 iii. Insert the details of the users who register through the registration page of the 46-47
online book store web site in to the database.
iv. Retrieve and display data related to books stored in the tables to the user.

Create a user authentication application using JSP where the user submits login name
and password to the server through form. The name and password are verified against
8 the data already available in the database and if there is a match, a welcome page is 48-50
returned. Otherwise a failure message is displayed to the user.

Design a Web application using PHP:

i. To connect to the MySQL database.
ii. Create new tables.
9 iii. Insert the details of the users who register through the registration page of the 51-58
online book store web site in to the database.
iv. Retrieve and display data related to books stored in the tables to the user.

Create a user authentication application using PHP where the user submits login name
and password to the server through form. The name and password are verified against
the data already available in the database.

10 i. On successful authentication, display welcome message to the user and create 59-60
a new session.
ii. Otherwise display a failure message to the user.

11 Design a web application to make the Button Click Do Something using React Events.

ADDITIONAL EXPERIMENTS

PAGE
S.NO List of Experiments
.NO
1 Design a web page to show course Time Table using Table tag. 61-
Create a web page to display India map which navigates you to state web page
2 when you click on state. 62
EXP NO: 1
AIM: Design the following static web pages required for an online book store web site.
i. Home page:- must contains three frames
 Top frame: - should contain logo and college name and links to homepage, login page,
registration page and catalogue page.
 Left frame: - at least four links for navigation which will display the catalogue of
Respective links.
 Right frame: - the pages to links in the left frame must be loaded here initially it Contains
the description of the website
ii. Login Page: - should contain Username and Password fields, Submit and reset buttons.
iii. Registration Page: - should contain fields for Username, Password, Confirm Password, Gender,
Date of Birth, Email Id, Mobile Number and Address.
iv. Catalogue Page: - The details should contain the following details of books available in a tabular
format: Snap shot of Cover Page, Author Name, Publisher details, Price and Add to Cart button.

1) HOME PAGE:
The static home page must contain three frames.

Top frame : Logo and the college name and links to Home page, Login page, Registration page, Catalogue page
and Cart page (the description of these pages will be given below).
Left frame : At least four links for navigation, which will display the catalogue of respective links.
For e.g.: When you click the link “CSE” the catalogue for CSE Books should be displayed in the Right frame.
Right frame: The pages to the links in the left frame must be loaded here. Initially this page contains description of
the web site.

Web Site Name

Logo
Home Login Registration Catalogue Cart

CSE
ECE Description of the Web Site
EEE
CIVIL

Fig 1.1

2) LOGIN PAGE:

This page looks like below:

Web Site Name
Logo
Home Login Registration Catalogue Cart
 CSE
ECE Login :
EEE Password:
CIVIL

Submit Reset

3) REGISTRATION PAGE

4 ) CATOLOGUE PAGE:
The catalogue page should contain the details of all the books available in the web site in a table.
The details should contain the following:

1. Snap shot of Cover Page.

2. Author Name.
3. Publisher.
4. Price.
5. Add to cart button.

Web Site Name

Logo
Home Login Registration Catalogue Cart

CSE Book : XML Bible

Author : Winston $ 40.5
AIDS Publication : Wiely

AIML
Book : AI $ 63
ECE Author : S.Russel
Publication :
Princeton hall
 Book : Java 2 $ 35.5
Author : Watson
Publication : BPB
publications

Book : HTML in $ 50
24 hours
Author : Sam Peter
Publication : Sam
publication

Source Code
PROGRAM:
<frameset rows="40%,*">
<frame name="11" src="top.html" target="13">
<frameset cols="30%,*">
<frame name="12" src="left.html" target="13">
<frame name="13" target="13" >
</frameset>
</frameset>
OUTPUT:
1.HOME PAGE: Must contain three frames
PROGRAM:
<!DOCTYPE html>
<html>
<body >
<marquee behavior="alternate" text="black"><h1>welcome to home page....</h1></marquee>
<p><i>Online Book store is an online web application where the customer can purchase books online.
Through a web browser the customers can search for a book by its title or author, later can add to
the shopping cart.</i></p>
</body>
</html>
OUTPUT:

TOP FRAME: Shouldcontain logo and college name and links to homepage, login page, registration
page and catalogue page.

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>top</title>
</head>
<body background="lib.jpg">
<img src="logo.jpg" height="100" weidth="100" align="left">
<marquee behavior="alternate" direction="right" bgcolor="white">Gudlavalleru
Engineering College </marquee>
<table align="center" border="0">
<tr>
<td colspan="5"><h1 align="center" text="white">Welcome to Libary</h1></th>
</tr>

<tr bgcolor="white">
<td><a href="home.html" target="13">Home</a></td>
 <td><a href="login.html" target="13">Login</a></td>
<td><a href="registration.html" target="13">Registration</a></td>
<td><a href="catlouge.html" target="13">Catlouge</a></td>
<td><a href="Cart.html" target="13">Cart</a></td>
</tr>
</table>
</body>
</html>

OUTPUT:

LEFT FRAME:At least four links for navigation which will display the catalogue of respective links

PROGRAM:
<!DOCTYPE html>
<html>
<body>
<a href="cse.html" target="13">CSE</a><br/>
<a href="aids.html" target="13">AIDS</a><br/>
<a href="aiml.html" target="13">AIML</a><br/>
<a href="ece.html" target="13">ECE</a><br/>
</body>
</html>
OUTPUT:
RIGHT FRAME: The page to links in the left frame must be loaded here initially it contains the
description of the website.
CATALOGUE PAGE OF CSE PROGRAM:
<!DOCTYPE html>
<html>
<body >
<table align="center" border="2" >
<caption align="center">welcome to <u>CSE</u> page</caption>
<tr>
<th>BookName</th>
<th>Author</th>
<th>Fare</th>
<th>Image</th>
<th>Add-To-Cart</th>
</tr>
<tr>
<tr>
<td>DataStructures</td>
<td>Dr.Mohan</td>
<td>1999</td>
<td><imgsrc="datastructures.jpg" height="100" weidth="100"></td>
<td><imgsrc="addtocart.jpg" height="100" weidth="100"></td>
</tr>
<tr>
<td>PythonwithML</td>
<td>Dr.Praveen</td>
<td>899</td>
<td><imgsrc="pythonwithml.jpg" height="100" weidth="100"></td>
<td><imgsrc="addtocart.jpg" height="100" weidth="100"></td>
</tr>
<tr>
<td>Java</td>
<td>Dr.Surendra</td>
<td>1999</td>
<td><imgsrc="java.jpg" height="100" weidth="100"></td>
 <td><imgsrc="addtocart.jpg" height="100" weidth="100"></td>
</tr>
</table>
</body>
</html>

OUTPUT:

CATALOGUE PAGE OF AIDS PROGRAM:

<!DOCTYPE html>
<html>
<body >
<table align="center" border="2" >
<caption align="center">welcome to <u>AIDS</u> page</caption>
<tr>
<th>BookName</th>
<th>Author</th>
<th>Fare</th>
<th>Image</th>
<th>Add-To-Cart</th>
</tr>
<tr>
<td>AI</td>
<td>Dr.Subhani</td>
<td>999</td>
<td><imgsrc="ai.jpg" height="100" weidth="100"></td>
<td><imgsrc="addtocart.jpg" height="100" weidth="100"></td>
</tr>
<tr>
<td>DataStructures</td>
<td>Dr.Mohan</td>
<td>1999</td>
<td><imgsrc="datastructures.jpg" height="100" weidth="100"></td>
<td><imgsrc="addtocart.jpg" height="100" weidth="100"></td>
</tr>
<tr>
<td>PythonwithML</td>
<td>Dr.Praveen</td>
<td>899</td>
 <td><imgsrc="pythonwithml.jpg" height="100" weidth="100"></td>
<td><imgsrc="addtocart.jpg" height="100" weidth="100"></td>
</tr>
<tr>
<td>Java</td>
<td>Dr.Surendra</td>
<td>1999</td>
<td><imgsrc="java.jpg" height="100" weidth="100"></td>
<td><imgsrc="addtocart.jpg" height="100" weidth="100"></td>
</tr>
</table>
</body>
</html>

OUTPUT:

CATALOGUE PAGE OF AIML PROGRAM:

<!DOCTYPE html>
<html>
<body >
<table align="center" border="2" >
<caption align="center">welcome to <u>AIML</u> page</caption>
<tr>
<th>BookName</th>
<th>Author</th>
<th>Fare</th>
<th>Image</th>
<th>Add-To-Cart</th>
</tr>
<tr>
<td>AI</td>
<td>Dr.Subhani</td>
<td>999</td>
<td><imgsrc="ai.jpg" height="100" weidth="100"></td>
<td><imgsrc="addtocart.jpg" height="100" weidth="100"></td>
</tr>
<tr>
<td>DataStructures</td>
<td>Dr.Mohan</td>
<td>1999</td>
<td><imgsrc="datastructures.jpg" height="100" weidth="100"></td>
<td><imgsrc="addtocart.jpg" height="100" weidth="100"></td>
</tr>
<tr>
<td>PythonwithML</td>
<td>Dr.Praveen</td>
<td>899</td>
<td><imgsrc="pythonwithml.jpg" height="100" weidth="100"></td>
<td><imgsrc="addtocart.jpg" height="100" weidth="100"></td>
</tr>
<tr>
</table>
</body>
</html>

OUTPUT:
CATALOGUE PAGE OF ECE PROGRAM:

<!DOCTYPE html>
<html>
<body >
<table align="center" border="2" >
<caption align="center">welcome to <U>ECE</u> page</caption>
<tr>
<th>BookName</th>
<th>Author</th>
<th>Fare</th>
<th>Image</th>
<th>Add-To-Cart</th>
</tr>
<tr>
<td>AI</td>
<td>Dr.Subhani</td>
<td>999</td>
<td><imgsrc="ai.jpg" height="100" weidth="100"></td>
<td><imgsrc="addtocart.jpg" height="100" weidth="100"></td>
</tr>
<tr>
<td>Mechtronics</td>
<td>Dr.Mohan</td>
<td>1999</td>
<td><imgsrc="mech.jpg" height="100" weidth="100"></td>
<td><imgsrc="addtocart.jpg" height="100" weidth="100"></td>
</tr>
<tr>
<td>Electrical Engineering</td>
<td>Dr.Praveen</td>
<td>899</td>
<td><imgsrc="electrical.jpg" height="100" weidth="100"></td>
<td><imgsrc="addtocart.jpg" height="100" weidth="100"></td>
</tr>
<tr>
<td>Java</td>
<td>Dr.Surendtra</td>
<td>1999</td>
<td><imgsrc="java.jpg" height="100" weidth="100"></td>
<td><imgsrc="addtocart.jpg" height="100" weidth="100"></td>
</tr>
</table>
</body>
</html>

OUTPUT:
LOGIN PAGE:Should contain username and password fields, submit and reset buttons
PROGRAM:<!DOCTYPE html>
<html>
<body>
<form name="1" method="get">
<table align="center" border="2">
<caption align="center">Welcome to Login page</caption>
<tr>
<td>User Name</td>
<td><input type="text" name="2" pattern="[a-zA-Z]{4,30}" placeholder="only characters"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="pwd" pattern="[a-zA-Z!@#$%^&*1-9]{12,30}"
placeholder="enterpassword" ></td>
</tr>
<tr>
<td><input type="submit" value="submit"></td>
</tr>
<tr>
<td><input type="reset" value="reset"></td>
</tr>
</table>
</body>
</html>
OUTPUT:

REGISTRATION PAGE: Should contain fields for username, password, confirm password, gender,
date of birth, email id, mobile number and address
PROGRAM:
<!DOCTYPE html>
<html>
<body >
<form name="1" method="get">
<table align="center" border="2">
<caption align="center">Welcome to Registration page</caption>
<tr>
<td>User Name</td>
<td><input type="text" name="2" pattern="[a-zA-Z]{4,30}" placeholder="only characters"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="pwd" pattern="[a-zA-Z!@#$%^&*1-9]{12,30}"
placeholder="enterpassword" ></td>
</tr>
<tr>
<td> Conform Password</td>
<td><input type="password" name="pwd" pattern="[a-zA-Z!@#$%^&*1-9]{12,30}"
placeholder="enterpassword" ></td>
</tr>
<tr>
<td>Gender</td>
<td>
<input type="radio" name="gen">Male
<input type="radio" name="gen">Female
<input type="radio" name="gen">Others
</td>
</tr>
<tr>
<td>Date-of-Birth</td>
<td><input type="date"></td>
</tr>
<tr>
<td>E-mail</td>
<td><input type="mail" pattern="[a-zA-Z@.]{5,30}" placeholder="enter mail" ></td>
</tr>
<tr>
<td>Mobile</td>
<td><input type="tel" placeholder="number"></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text area" placeholder="enter address"></td>
</tr>
<tr>
<td><input type="submit" value="submit"></td>
</tr>
<tr>
<td><input type="reset" value="reset"></td>
</tr>
</table>
</body>
</html>

OUTPUT:
CATALOGUE PAGE:The details should contain the following details of books available in a tabular
format: snapshot of cover page, author name, publisher details, price and add to cart button
PROGRAM:
<!DOCTYPE html>
<html>
<body >
<table align="center" border="2">
<caption align="center">welcome to catlouge page</caption>
<tr>
<th>BookName</th>
<th>Author</th>
<th>Fare</th>
<th>Image</th>
<th>Add-To-Cart</th>
</tr>
<tr>
<tr>
<td>DataStructures</td>
<td>Dr.Mohan</td>
<td>1999</td>
<td><img src="datastructures.jpg" height="100" weidth="100"></td>
<td><img src="addtocart.jpg" height="100" weidth="100"></td>
</tr>
<tr>
<td>PythonwithML</td>
<td>Dr.Praveen</td>
<td>899</td>
<td><img src="pythonwithml.jpg" height="100" weidth="100"></td>
<td><img src="addtocart.jpg" height="100" weidth="100"></td>
</tr>
<tr>
<td>Java</td>
<td>Dr.Surendtra</td>
<td>1999</td>
<td><img src="java.jpg" height="100" weidth="100"></td>
<td><img src="addtocart.jpg" height="100" weidth="100"></td>
</tr>
</table>
</body>
</html>

OUTPUT:

CART PAGE:Books selected from catalogue pages of CSE, AI&DS, AI&ML and IT pages should be
shown in the cart page as they are added to cart
PROGRAM:
<!DOCTYPE html>
<html>
<body >
<table align="center" border="2" >
<caption align="center">Cart details</caption>
<tr>
<th>BookName</th>
<th>Fare</th>
<th>Quanity</th>
<th>Total</th>
</tr>
<tr>
<td>AI</td>
<td>999</td>
<td>1</td>
<td>999</td>
</tr>
<tr>
<td>DataStructures</td>
<td>1999</td>
<td>2</td>
<td>3998</td>
</tr>
<tr>
<td>PythonwithML</td>
<td>899</td>
<td>1</td>
<td>899</td>
</tr>
<tr>
<td colspan="3">Total Amount</td>
<td>5896</td>
</table>
</body>
</html>
OUTPUT:

ONLINE BOOK STORE:

Execution Procedure
Step1: type all html programs in notepad or any text editor and save .html format.
Step2: open web browser and open index.html
Step3: traverse all pages from index.html.

VIVA-QUESTIONS

EXP NO: 2
Aim:
Design a web page using CSS which includes the following:
i. Use different font and text properties.
ii. Set a background image for both the page and single element on the page.
iii. Define styles for links.
 iv. Add Customized cursors.
Description

Source-code
Web.css
p.justify
{
color:brown;
font-size:large;
text-transform:capitalize;
text-align:justify;
font-weight:200;
letter-spacing:-3;
word-spacing:5;
}
h1
{
color:red;
font-size:large;
text-transform:uppercase;
text-align:center;
text-decoration:underline;
}
body
{
background-image:url('book1.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-color:olive;
}
a:link
{
color:red;
font-family:tahoma;
font-size:12pt;
}
a:visited
{
color:pink;
font-family:calibri;
font-size:20pt;
text-decoration:underline;
}
a:active
{
color:orange;
font-family:cambria;
font-size:20pt;
}
a:hover
{
color:pink;
font-family:Brush Script MT;
font-size:22pt;
text-decoration:overline;
}
.auto {cursor: auto;}
table
{
border-collapse: collapse;
width: 100%;
}
th, td
{
text-align: left;
padding: 8px;
}
tr:nth-child(even){background-color:pink}
th
{
background-color:pink;
color: white;
}

Web1.css:
p.justify
{
color:pink;
font-size:large;
text-transform:capitalize;
text-align:justify;
font-weight:200;
letter-spacing:-3;
word-spacing:5;
}
h1
{
color:red;
font-size:large;
text-transform:uppercase;
text-align:center;
text-decoration:underline;
}
body
{
background-image:url('book1.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-color:skyblue;
}
a:link
{
color:red;
font-family:tahoma;
font-size:12pt;
}
a:visited
{
color:black;
font-family:calibri;
font-size:20pt;
text-decoration:underline;
}
a:active
{
color:orange;
font-family:cambria;
font-size:20pt;
}
a:hover
{
color:pink;
font-family:Brush Script MT;
font-size:22pt;
text-decoration:overline;
}
.auto {cursor: auto;}

Web2.css:
h1
{
color:red;
font-size:large;
text-transform:uppercase;
text-align:center;
text-decoration:underline;
}
body
{
background-color:white;
}
#customers
{
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th
{
border: 1px solid;
padding: 8px;
}
#customers tr:nth-child(even){background-color:skyblue;}
#customers tr:hover {background-color:skyblue;}
#customers th
{
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color:pink;
color: white;
}

Index.html :
<frameset rows="40%,*">
<frame name="11" src="top.html" target="13">
<frameset cols="30%,*">
<frame name="12" src="left.html" target="13">
<frame name="13" target="13" >
</frameset>
</frameset>

Output:

Left.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="web.css">
</head>
<body>
<a href="cse.html" target="13">CSE</a><br/>
<a href="aids.html" target="13">AIDS</a><br/>
<a href="aiml.html" target="13">AIML</a><br/>
<a href="ece.html" target="13">ECE</a><br/>
</body>
</html>

Output:

Top.html :
<!DOCTYPE html>
<html>
<head>
<title>top</title>
<link rel="stylesheet" type="text/css" href="web1.css">
</head>
<body background="lib.jpg">
<img src="logo.jpg" height="100" weidth="100" align="left">
<marquee behavior="alternate" direction="right" bgcolor="white">Gudlavalleru Enginnering
College</marquee>
<table align="center" border="0">
<tr>
<td colspan="5"><h1 align="center" text="white">Welcome to Libary</h1></th>
</tr>

<tr bgcolor="white">
<td><a href="home.html" target="13">Home</a></td>

<td><a href="login.html" target="13">Login</a></td>

<td><a href="registration.html" target="13">Registration</a></td>
<td><a href="catlouge.html" target="13">Catlouge</a></td>
<td><a href="Cart.html" target="13">Cart</a></td>
</tr>
</table>
</body>
</html>

Output:

Home.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="web.css">
</head>
<body >
<marquee behavior="alternate" text="black"><h1>welcome to home page....</h1></marquee>
<p><i>Online Book store is an online web application where the customer can purchase books online.
Through a web browser the customers can search for a book by its title or author, later can add to
the shopping cart.</i></p>
</body>
</html>

Output:
Login.html :
<!DOCTYPE html>
<html>
<body>
<form name="1" method="get">
<table align="center" border="2">
<caption align="center">Welcome to Login page</caption>
<tr>
<td>User Name</td>
<td><input type="text" name="2" pattern="[a-zA-Z]{4,30}" placeholder="only characters"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="pwd" pattern="[a-zA-Z!@#$%^&*1-9]{12,30}"
placeholder="enterpassword" ></td>
</tr>
<tr>
<td><input type="submit" value="submit"></td>
</tr>
<tr>
<td><input type="reset" value="reset"></td>
</tr>
</table>
</body>
</html>

Output:
Registration.html :
<!DOCTYPE html>
<html>
<body >
<form name="1" method="get">
<table align="center" border="2">
<caption align="center">Welcome to Registration page</caption>
<tr>
<td>User Name</td>
<td><input type="text" name="2" pattern="[a-zA-Z]{4,30}" placeholder="only characters"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="pwd" pattern="[a-zA-Z!@#$%^&*1-9]{12,30}"
placeholder="enterpassword" ></td>
</tr>
<tr>
<td> Conform Password</td>
<td><input type="password" name="pwd" pattern="[a-zA-Z!@#$%^&*1-9]{12,30}"
placeholder="enterpassword" ></td>
</tr>
<tr>
<td>Gender</td>
<td>
<input type="radio" name="gen">Male
<input type="radio" name="gen">Female
<input type="radio" name="gen">Others
</td>
</tr>
<tr>
<td>Date-of-Birth</td>
<td><input type="date"></td>
</tr>
<tr>
<td>E-mail</td>
<td><input type="mail" pattern="[a-zA-Z@.]{5,30}" placeholder="enter mail" ></td>
</tr>
<tr>
<td>Mobile</td>
<td><input type="tel" placeholder="number"></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text area" placeholder="enter address"></td>
</tr>
<tr>
<td><input type="submit" value="submit"></td>
</tr>
<tr>
<td><input type="reset" value="reset"></td>
</tr>
</table>
</body>
</html>
Output:

Catalogue.html :
<!DOCTYPE html>
<html>
<head>
<title>Catalogue-Page</title>
<link rel="stylesheet" type="text/css" href="web2.css">
</head>
<body >
<table align="center" border="2">
<caption align="center">welcome to catlouge page</caption>
<tr>
<th>BookName</th>
<th>Author</th>
<th>Fare</th>
<th>Image</th>
<th>Add-To-Cart</th>
</tr>
<tr>
<tr>
<td>DataStructures</td>
<td>Dr.Mohan</td>
<td>1999</td>
<td><img src="datastructures.jpg" height="100" weidth="100"></td>
<td><img src="addtocart.jpg" height="100" weidth="100"></td>
</tr>
<tr>
<td>PythonwithML</td>
<td>Dr.Praveen</td>
<td>899</td>
<td><img src="pythonwithml.jpg" height="100" weidth="100"></td>
<td><img src="addtocart.jpg" height="100" weidth="100"></td>
</tr>
<tr>
<td>Java</td>
<td>Dr.Surendtra</td>
<td>1999</td>
<td><img src="java.jpg" height="100" weidth="100"></td>
<td><img src="addtocart.jpg" height="100" weidth="100"></td>
</tr>
</table>
</body>
</html>

Output:

Cart.html :
<!DOCTYPE html>
<html>
<body >
<table align="center" border="2" >
<caption align="center">Cart details</caption>
<tr>
<th>BookName</th>
<th>Fare</th>
<th>Quanity</th>
<th>Total</th>
</tr>
<tr>
<td>AI</td>
<td>999</td>
<td>1</td>
<td>999</td>
</tr>
<tr>
<td>DataStructures</td>
<td>1999</td>
<td>2</td>
<td>3998</td>
</tr>
<tr>
<td>PythonwithML</td>
<td>899</td>
<td>1</td>
<td>899</td>
</tr>
<tr>
<td colspan="3">Total Amount</td>
<td>5896</td>
</table>
</body>
</html>
Output:

Cse.html :
<!DOCTYPE html>
<html>
<head>
<title>Catalogue-Page</title>
<link rel="stylesheet" type="text/css" href="web2.css">
</head>
<body >
<table align="center" border="2" >
<caption align="center">welcome to <u>CSE</u> page</caption>
<tr>
<th>BookName</th>
<th>Author</th>
<th>Fare</th>
<th>Image</th>
<th>Add-To-Cart</th>
</tr>
<tr>
<tr>
<td>DataStructures</td>
<td>Dr.Mohan</td>
<td>1999</td>
<td><img src="datastructures.jpg" height="100" weidth="100"></td>
<td><img src="addtocart.jpg" height="100" weidth="100"></td>
</tr>
<tr>
<td>PythonwithML</td>
<td>Dr.Praveen</td>
<td>899</td>
<td><img src="pythonwithml.jpg" height="100" weidth="100"></td>
<td><img src="addtocart.jpg" height="100" weidth="100"></td>
</tr>
<tr>
<td>Java</td>
<td>Dr.Surendtra</td>
<td>1999</td>
<td><img src="java.jpg" height="100" weidth="100"></td>
<td><img src="addtocart.jpg" height="100" weidth="100"></td>
</tr>
</table>
</body>
</html>
Output:

AIDS.html:
<!DOCTYPE html>
<html>
<head>
<title>Catalogue-Page</title>
<link rel="stylesheet" type="text/css" href="web2.css">
</head>
<body >
<table align="center" border="2" >
<caption align="center">welcome to <u>AIDS</u> page</caption>
<tr>
<th>BookName</th>
<th>Author</th>
<th>Fare</th>
<th>Image</th>
<th>Add-To-Cart</th>
</tr>
<tr>
<td>AI</td>
<td>Dr.Subhani</td>
<td>999</td>
<td><img src="ai.jpg" height="100" weidth="100"></td>
<td><img src="addtocart.jpg" height="100" weidth="100"></td>
</tr>
<tr>
<td>DataStructures</td>
<td>Dr.Mohan</td>
<td>1999</td>
<td><img src="datastructures.jpg" height="100" weidth="100"></td>
<td><img src="addtocart.jpg" height="100" weidth="100"></td>
</tr>
<tr>
<td>PythonwithML</td>
<td>Dr.Praveen</td>
<td>899</td>
<td><img src="pythonwithml.jpg" height="100" weidth="100"></td>
<td><img src="addtocart.jpg" height="100" weidth="100"></td>
</tr>
<tr>
<td>Java</td>
<td>Dr.Surendtra</td>
<td>1999</td>
<td><img src="java.jpg" height="100" weidth="100"></td>
<td><img src="addtocart.jpg" height="100" weidth="100"></td>
</tr>
</table>
</body>
</html>
Output:

AIML.html:
<!DOCTYPE html>
<html>
<head>
<title>Catalogue-Page</title>
<link rel="stylesheet" type="text/css" href="web2.css">
</head>
<body >
<table align="center" border="2" >
<caption align="center">welcome to <u>AIML</u> page</caption>
<tr>
<th>BookName</th>
<th>Author</th>
<th>Fare</th>
<th>Image</th>
<th>Add-To-Cart</th>
</tr>
<tr>
<td>AI</td>
<td>Dr.Subhani</td>
<td>999</td>
<td><img src="ai.jpg" height="100" weidth="100"></td>
<td><img src="addtocart.jpg" height="100" weidth="100"></td>
</tr>
<tr>
<td>DataStructures</td>
<td>Dr.Mohan</td>
<td>1999</td>
<td><img src="datastructures.jpg" height="100" weidth="100"></td>
<td><img src="addtocart.jpg" height="100" weidth="100"></td>
</tr>
<tr>
<td>PythonwithML</td>
<td>Dr.Praveen</td>
<td>899</td>
<td><img src="pythonwithml.jpg" height="100" weidth="100"></td>
<td><img src="addtocart.jpg" height="100" weidth="100"></td>
</tr>
<tr>
</table>
</body>
</html>
Output:

ECE.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="web2.css">
</head>
<body >
<table align="center" border="2" >
<caption align="center">welcome to <U>ECE</u> page</caption>
<tr>
<th>BookName</th>
<th>Author</th>
<th>Fare</th>
<th>Image</th>
<th>Add-To-Cart</th>
</tr>
<tr>
<td>AI</td>
<td>Dr.Subhani</td>
<td>999</td>
<td><img src="ai.jpg" height="100" weidth="100"></td>
<td><img src="addtocart.jpg" height="100" weidth="100"></td>
</tr>
<tr>
<td>Mechtronics</td>
<td>Dr.Mohan</td>
<td>1999</td>
<td><img src="mech.jpg" height="100" weidth="100"></td>
<td><img src="addtocart.jpg" height="100" weidth="100"></td>
</tr>
<tr>
<td>Electrical Engineering</td>
<td>Dr.Praveen</td>
<td>899</td>
<td><img src="electrical.jpg" height="100" weidth="100"></td>
<td><img src="addtocart.jpg" height="100" weidth="100"></td>
</tr>
<tr>
<td>Java</td>
<td>Dr.Surendtra</td>
<td>1999</td>
<td><img src="java.jpg" height="100" weidth="100"></td>
<td><img src="addtocart.jpg" height="100" weidth="100"></td>
</tr>
</table>
</body>
</html>
Output:

Execution Procedure
Step1: type all html programs in notepad or any text editor and save .html format.
Step2: open web browser and open index.html, i.e previous week.
Step3: traverse all pages from index.html.
VIVA-QUESTIONS
EXP NO: 3

Aim:
Write an XML file which will display the Book information which includes the following:
Title of the book, Author Name, ISBN number, Publisher name, Edition and Price.
Validate the above document using DTD

Description
Extensible Markup Language (XML) is a meta-markup language that provides a format for describing
structured data. This facilitates more precise declarations of content and more meaningful search results
across multiple platforms. In addition, XML is enabling a new generation of Web-based data viewing and
manipulation applications.
In the HTML you use tags to tell the browser to display data as bold or italic; in XML you use tags only to
describe data, such as city name, temperature, and barometric pressure. In XML, you use style sheets such
as Extensible Stylesheet Language (XSL) and Cascading Style Sheets (CSS) to present the data in a
browser. XML separates the data from the presentation and the process, enabling you to display and
process the data as you wish by applying different style sheets and applications.

Source-Code
Internal.DTD:
<?xml version="1.0" ?>
<!DOCTYPE bookstore [
<!ELEMENT bookstore (book+) >
<!ELEMENT book (title,author+,isbn,pub,edi,price?) >
<!ELEMENT title (#PCDATA) >
<!ELEMENT author (#PCDATA) >
<!ELEMENT isbn (#PCDATA) >
<!ELEMENT pub (#PCDATA) >
<!ELEMENT edi (#PCDATA) >
<!ELEMENT price (#PCDATA) >
]>
<bookstore>
<book>
<Title>HTML5</Title>
<author>Dr.mohan</author>
<isbn>923-145-3456</isbn>
<pubshiler>dreamTech</pubshiler>
<edition>2019</edition>
<price>849</price>
</book>
<book>
<Title>AI</Title>
<author>Dr.praveen</author>
<isbn>912-145-34789</isbn>
<pubshiler>wrox</pubshiler>
<edition>2021</edition>
<price>1849</price>
</book>

</bookstore>
Output:
External-DTD using PRVATE
book.dtd:
<!ELEMENT bookstore (book+) >
<!ELEMENT book (title,author+,isbn,pub,edi,price?) >
<!ELEMENT title (#PCDATA) >
<!ELEMENT author (#PCDATA) >
<!ELEMENT isbn (#PCDATA) >
<!ELEMENT pubilication (#PCDATA) >
<!ELEMENT edition (#PCDATA) >
<!ELEMENT price (#PCDATA) >
Externaldtdprivate:
<?xml version="1.0"?>
<bookstore>
<book>
<Title>HTML5</Title>
<author>Dr.mohan</author>
<isbn>923-145-3456</isbn>
<pubshiler>dreamTech</pubshiler>
<edition>2019</edition>
<price>849</price>
</book>
<book>
<Title>AI</Title>
<author>Dr.praveen</author>
<isbn>912-145-34789</isbn>
<pubshiler>wrox</pubshiler>
<edition>2021</edition>
<price>1849</price>
</book>
</bookstore>

Output:
Book.dtd:

<!ELEMENT bookstore (book+) >

<!ELEMENT book (title,author+,isbn,pub,edi,price?) >
<!ELEMENT title (#PCDATA) >
<!ELEMENT author (#PCDATA) >
<!ELEMENT isbn (#PCDATA) >
<!ELEMENT pubilication (#PCDATA) >
<!ELEMENT edition (#PCDATA) >
<!ELEMENT price (#PCDATA) >

Externaldtdpublic:
<?xml version="1.0" ?>
<!DOCTYPE bookstore PUBLIC "-//Surendra/1.O/EN" "book.dtd" >
<bookstore>
<book>
<title> AI</title>
<author>Surendra</author>
<ISBN>978-93-5119-90</ISBN>
<publisher>dreamTech</publisher>
<edition>2019</edition>
 <price>1849</price>
</book>
<book>
<title> Web Technologies</title>
<author>mohan</author>
<ISBN>978-93-5119-907-6</ISBN>
<publisher>wrox</publisher>
<edition>1230</edition>
</book>
</bookstore>

Output:

Execution Procedure
Step1: Type all html programs in notepad or any text editor and save the files.
Step2: open appropriate xml files in web browser for getting output.

Viva-Questions
EXP NO: 4

AIM:
i. Write a JavaScript to validate the fields of the login page.
ii. Write a JavaScript to validate the fields of the Registration page

Description
JavaScript is a lightweight interpreted programming language with rudimentary object-oriented
capabilities. Syntactically, the core JavaScript language resembles C, C++ and Java, with programming
constructs such as the if statement, the while loop, and the && operator. The similarity ends with this
syntactic resemblance, however. JavaScript is an untyped language, which means that variables do not
have to have a type specified.

The <SCRIPT> and </SCRIPT> tags are used to embed JavaScript code within an HTML file.

Source Code

Login.html:

<!DOCTYPE html>
<html>
<head>
<script>
function validate()
{
var uname=document.f1.uname.value;
if(uname==""||uname=="null")
{
alert("please provide valide format");
return false;
}
var pass=document.f1.pwd.value;
if(pass==""||pass=="null")
{
alert("please provide valide password format");
 return false;
}
}
</script>
</head>
<body>
<form name="f1" method="set" action="succ.html" onsubmit="return validate()">
<table align="center" border="2">
<caption align="center">Welcome to Login page</caption>
<tr>
<td>User Name</td>
<td><input type="text" name="2" pattern="[a-zA-Z]{4,30}" placeholder="only characters"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="pwd" pattern="[a-zA-Z!@#$%^&*1-9]{12,30}"
placeholder="enterpassword" ></td>
</tr>
<tr>
<td><input type="submit" value="submit"></td>
</tr>
<tr>
<td><input type="reset" value="reset"></td>
</tr>
</table>
</body>
</html>
Registration.html
<html>
<head>
<title>Registration Page</title>
<script type="text/javascript">
varerrorFound=false;
functioncontainAlphabets(checkString)
{
//To validate Name Field characters
var result=true;
varregExp=/^[A-Z a-z]$/;
if(checkString!=null &&checkString!="")
{
for(var i=0;i<checkString.length;i++)
{
if(!checkString.charAt(i).match(regExp))
{
result=false;
}
}
}
else
{
result=false;
}
return result;
}
functionvalidateNameLength(checkString)
{
//To validate Name Field length
if(checkString.length>=6) {
return true;
}
else
{
return false;
}}
functionvalidatePasswordLength(password)
{
//To validate Password Field length
if(password.length>=6)
{
return true;
}

functionvalidatePhoneNumber(phone)
{
varvalidDigits="0123456789";
var digits;
var result;
if(phone.length==0)
return false;
for(var i=0;i<phone.length;i++)
{
digits=phone.charAt(i);
if(validDigits.indexOf(digits)==-1)
{
return false;
}
result=true;
}
return result;
}
else
{
return false;
}
}
functionvalidateEmail(email)
{
var x=document.regform.email.value;
varatpos=x.indexOf("@");
vardotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}

return true;
}

functionvalidatePhoneNoLength(phone)
{
if(phone.length==10)
return true;
else
return
}

function validate()
{
errorFound=false;
if(!containAlphabets(document.regform.userName.value))
{
alert("Please Enter only alphabets for name field");
}
if(!validateLength(document.regform.passwordField.value))
{
alert("Please Enter minimum 6 characters for password");
}
if(!validateEmail(document.regform.email.value))
{
alert("Please Enter email");
}
if(!validatePhoneNumber(document.regform.phone.value))
{
alert("Please Enter valid phone number");
}
if(!validatePhoneNoLength(document.regform.phone.value))
{
alert("Please Enter 10 digit phone number");
}
}

functioncheckName()
{

if(!containAlphabets(document.regform.userName.value))
{
 alert("Please Enter only alphabets for name field");
document.regform.userName.value="";
document.regform.userName.focus();
}
else
if(!validateNameLength(document.regform.userName.value))
{
alert("Please Enter atleast 6 characters for name field");
document.regform.userName.focus();
}
}
functioncheckPassword()
{
if(!validatePasswordLength(document.regform.passwordField.value))
{
alert("Please Enter minimum 6 characters for password");
document.regform.passwordField.value="";
document.regform.passwordField.focus();
}
}
functioncheckEmail()
{
if(!validateEmail(document.regform.email.value))
{
//alert("Please Enter only valid Email ID");
//document.regform.email.value="";
document.regform.email.focus();
}
}
functioncheckPhone()
{
if(!validatePhoneNumber(document.regform.phone.value))
{
alert("Please Enter valid phone number");
document.regform.phone.value="";
document.regform.phone.focus();
}else
if(!validatePhoneNoLength(document.regform.phone.value))
{
alert("Please Enter 10 digit phone number");
document.regform.phone.focus();
}
}
</script>
</head>
<body>
<h1>Registration Here</h1>
<form name="regform">
Name:
<input type="text" name="userName" />
<br />
Password:
<input type="password" name="passwordField" onFocus="checkName()" />
<br />
Email:
<input type="text" name="email" onFocus="checkPassword()" />
<br />
phone:
<input type="text" maxlength="10" name="phone" onFocus="checkEmail()" />
<br />
Gender:
<input type="radio" name="gender" value="male" onFocus="checkPhone()" />
Male &nbsp;
<input type="radio" name="gender" value="female" onFocus="checkPhone()" />
Female <br />
Date of Birth: Day
<select name="dd" style="width:75px" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
Month
<select name="mm" style="width:75px">
<option value"1">January</option>
<option value"2">February</option>
<option value"3">March</option>
<option value"4">April</option>
<option value"5">May</option>
<option value"6">June</option>
<option value"7">July</option>
<option value"8">August</option>
<option value"9">September</option>
<option value"10">October</option>
<option value"11">November</option>
<option value"12">December</option>
</select>
 Year
<select name="yy" style="width:75px">
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select>
<br>
Languages Known:
<input type="checkbox" name="language" value="english" />
English
<input type="checkbox" name="language" value="hindi" />
Hindi
<input type="checkbox" name="language" value="telugu" />
Telugu
<input type="checkbox" name="language" value="tamil" />
Tamil<br>
Address:
<textarea rows="5" cols="20"></textarea>
<br>
<br>
<input type="submit" value="Submit" onFocus=validate() />
&nbsp;
<input type="reset" value="Reset" />
</form>
</body>
</html>

Output

Registration Page
Registration Page – Password Validation

Registration Page – Email Validation

Registration Page – Phone Number Validation

Registration Page – Phone Number Validation

 Registration Page – After Validation if any errors then automatically go to empty registration page

Execution Procedure
Step1: type the html program in notepad or any text editor and save .html format.
Step2: open web browser and open .html.

Viva-Questions
EXP NO: 5
Aim:
Design a web page using jQuery to demonstrate
i. Hide, show, fading and sliding effects.
ii. Keyboard, mouse and form events

Description

Hiding of elements
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#b1").click(function(){
$("img").hide(1000);
});
$("#b2").click(function(){
$("img").show("slow");
});
$("#b3").click(function(){
$("img").toggle("fast");
});
});
</script>
</head>
<body>
<imgsrc="1.jpg">
<button id="b1"> Hide </button>
<button id="b2"> Show </button>
<button id="b3"> Toggle </button>
</body>
</html>
Output:

Fading effects:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#b1").click(function(){
$("img").fadeOut(1000);
});
$("#b2").click(function(){
$("img").fadeIn("slow");
});
$("#b3").click(function(){
$("img").fadeToggle("fast");
});
$("#b4").click(function(){
$("img").fadeTo("slow",0.3);
});
});
</script>
</head>
<body>
<imgsrc="1.jpg"><br><br>
<button id="b1"> Fade Out </button>
<button id="b2"> Fade In </button>
<button id="b3"> Fade Toggle </button>
<button id="b4"> Fade To </button>
</body>
</html>

Output:

Sliding effects:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#b1").click(function(){
$("h1").slideUp(1000);
});
$("#b2").click(function(){
$("h1").slideDown("slow");
});
$("#b3").click(function(){
$("h1").slideToggle("fast");
});
 });
</script>
</head>
<body>
<h1 style="background-color:orange">Click on the button to see sliding effect</h1>
<button id="b1"> Slide up </button>
<button id="b2"> Slide down </button>
<button id="b3"> Slide Toggle </button>
</body>
</html>
Output:

ii. Keyboard, mouse and form events

Keyboard-Events
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(document).ready(function()
{
$("input").keydown(function()
{
$(this).css("background-color","yellow");
});
$("input").keyup(function()
{
$(this).css("background-color","pink");
});
});
</script>
</head>
<body>
<form method="post">
Enter name:<input type="text" name="t1"><br>
</form>
 </body>
</html>
Output:

Mouse-Events
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(document).ready(function()
{
$("#i1").mouseenter(function()
{
$("#i1").css("background-color","yellow");
});
$("#i1").mouseout(function()
{
$("#i1").css("background-color","pink");
});
$("#i2").mousedown(function()
{
$("#i2").css("background-color","blue");
});
$("#i2").mouseup(function()
{
$("#i2").css("background-color","green");
});
$("#i3").mouseover(function()
{
alert("cursor is over this heading");
});

});
</script>
</head>
<body>
<h1 id="i1">Mouse Cursor over this heading 1 to trigger mouse events</h1>
<h1 id="i2">Mouse Cursor over this heading 2 to trigger mouse events</h1>
<h1 id="i3">Mouse Cursor over this heading 3 to trigger mouse events</h1>
</body>
</html>

Output:

Form-Events

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(document).ready(function()
{
$("form").submit(function()
{
alert("Form is submitted");
});
$("input").focus(function()
{
$(this).css("background-color","yellow");
});
$("input").blur(function()
{
$(this).css("background-color","pink");
});
$("input").change(function()
{
alert("Text is changed");
});
$("input").select(function()
{
alert("Text is selected");
});
});
</script>
</head>
<body>
<form method="post">
Enter name:<input type="text" name="t1"><br>
Enter password:<input type="password" name="t2"><br>
<button type="submit">Submit</button>
</form>
</body>
</html>

Output:

Execution Procedure
Step1: type the html program in notepad or any text editor and save .html format.
Step2: open web browser and open .html.
Viva-Questions

EXP NO: 6

AIM:
i. Write a PHP program to validate the fields of the login page.
ii. Write a PHP program to validate the fields of the Registration page

DESCRIPTION:
This PHP login application uses MySQL database to store user information and all the input
parameters are validated with javascript.This PHP login page using MySQL database connections
contains PHP 7.0 methods only. Many methods like mysql_real_escape_string(), mysql_query(),
mysql_num_rows(), mysql_connect(), mysql_select_db(), mysql_close() were depricated in PHP 5 and
removed from the latest version of PHP i.e. PHP 7.0.

ALGORITHM:
LoginForm.php
Step 1:-Open the html tag and the title as LoginForm.php.
Step 2:-Declare the validate() function.
Step 3:-Design login form with username, password, submit and reset values.
Step 4:-if anyone not enter user name or password it shows alert message.
Step 5:-close the html tag.
Login.php
Step 1:-Open the html and body tag.
Step 2:-Open the MYSQL database connection.
Step 3:-if the $_SERVER['REQUEST_METHOD'] == 'POST' then
Step 4:-enter user name and password
Step 5:-check the user name and password is valid or not
Step 6:-if valid then display the login page
Step 7:-otherwise it shows incorrect username and password.
Step 8:-close body and html tags.

PROGRAM:
Login.html :
<html>
<body bgcolor=azure>
<form name="LoginForm" action="Validate.php" method="post">
<fieldset>
<legend align=center><h2>Login Here</h2></legend>
<table cellpadding=5 align=center>
<tr>
<td>User Name</td>
<td> :</td>
<td><input type="text" name="t1" class="textbox" placeholder="Only Characters" /></td>
</tr>
<tr>
<td> Password </td>
<td> :</td>
<td><input type="Password" name="t2" class="textbox" placeholder="Max 15 characters"/></td>
</tr>
<tr>
<td ><input type="submit" class="button button1" value="LOGIN" /></td>
<td></td>
<td ><input type="reset" class="button button1" value="RESET" /></td>
</tr>
</table>
</form>
</body>
</html>
Output :
Registration.html :
<html>
<body bgcolor=azure>
<form name="RegistrationPage" action="Validate2.php" method="post">
<fieldset>
<legend align=center><h2>REGISTER HERE</h2></legend>
<table cellpadding=5 align=center>
<tr>
<td>First Name</td>
<td> :</td>
<td><input type="text" name="t1" class ="textbox" placeholder="Only Characters" /></td>
</tr>
<tr>
<td>LastName</td>
<td> :</td>
<td><input type="text" name="t2" class ="textbox" placeholder="only characters"/></td>
</tr>
<tr>
<td> Password</td>
<td> :</td>
<td><input type="Password" name="t3" class ="textbox" placeholder="Max 15 characters"/></td>
</tr>
<tr>
<td>Contact Number</td>
<td> :</td>
<td><input type="text" name="t4" class ="textbox" placeholder="Without country code" max=10/></td>
</tr>
<tr>
<td>Email Address</td>
<td> :</td>
<td><input type="text" name="t5" class ="textbox" placeholder="Mail ID" max=35/></td>
</tr>
<tr>
<td>Address</td>
<td> :</td>
<td>
<textarea name="t6" class ="textbox" rows=5 cols=50 >
</textarea>
</td>
</tr>
<tr>
<td>Gender</td>
<td> :</td>
<td><input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</td>
</tr>
<tr>
<td ><input type="submit" class="button button1" value="REGISTER" /></td>
<td></td>
<td ><input type="reset" class="button button1" value="RESET" /></td>
</tr>
</table>
</form>
</body>
</html>

Output :
Validate.php
<?php
$user=$_POST['t1'];
$pwd=$_POST['t2'];
$uname_pat='/^[a-zA-Z0-9 ]{5,13}$/';
$pwd_pat='/^[a-zA-Z0-9@$& ]{5,13}$/';
$flag=true;
if(empty($user)) {
$flag=false;
echo "PLEASE Enter the user name ";
}
else if(empty($pwd)) {
$flag=false;
echo "PLEASE Enter the password ";
}
else if(preg_match($uname_pat,$user)==false) {
$flag=false;
echo "Please Enter UserName Format";
}
else if(preg_match($pwd_pat,$pwd)==false) {
$flag=false;
echo "Please Enter Password Format";
}
else if($flag==true) {
echo "All Details are valid";
}
?>
Validate2.php
<?php
$fn=$_POST['t1'];
$ln=$_POST['t2'];
$pwd=$_POST['t3'];
$mob=$_POST['t4'];
$mail=$_POST['t5'];
$fn_pat='/^[a-zA-Z][a-zA-Z0-9 ]{5,30}$/';
$ln_pat='/^[a-zA-Z][a-zA-Z0-9]{5,30}$/';
$pwd_pat='/^[a-zA-Z0-9@$& ]{5,20}$/';
$mob_pat='/^\d{10}$/';
$mail_pat='/^[A-Za-z0-9]+@[A-Za-z]+.[A-Za-z]{2,4}$/';
$flag=true;
if(empty($fn)) {
$flag=false;
echo "Enter the First name PLEASE";
}
else if(empty($ln)) {
$flag=false;
echo "Enter the LastPLEASE";
}
else if(empty($pwd)) {
$flag=false;
echo "Enter the password PLEASE";
}
else if(empty($mob)) {
$flag=false;
echo "Enter the Mobile NumberPLEASE";
}
else if(empty($mail)) {
$flag=false;
echo "Enter the E-Mail PLEASE";
}
else if(preg_match($fn_pat,$fn)==false) {
$flag=false;
echo "Please Enter First Name in Given Format";
}
else if(preg_match($ln_pat,$ln)==false) {
$flag=false;
echo "Please Enter Last Name in Given Format";
}
else if(preg_match($pwd_pat,$pwd)==false) {
$flag=false;
echo "Please Enter Password in Given Format";
}
else if(preg_match($mob_pat,$mob)==false) {
$flag=false;
echo "Please Enter Mobile in Given Format";
}
else if(preg_match($mail_pat,$mail)==false) {
$flag=false;
echo "Please Enter Mail in Given Format";
}
else if($flag==true) {
echo "All details are valid";
}
?>
EXP NO: 7
AIM

Install a database and design a Web application using JSP:

i. To connect to the database using JDBC.
ii. Create new tables.
iii. Insert the details of the users who register through the registration page of the online book
store web site in to the database.
iv. Retrieve and display data related to books stored in the tables to the user.
.
DESCRIPTION

Source Code:

 To connect to the database using JDBC.

Database.jsp:
<%@page import="java.sql.*"%>
<%
try{
Class.forName("oracle.jdbc.driver.OracleDriver");
out.println("Class will loaded");
Connection
con=DriverManager.getConnection("jdbc:Oracle:thin:@localhost:1521:xe","SYSTEM","mana
ger");
out.println("database connected");
}
catch(Exception e)
{
out.println(e);
}
%>
Output:

 Create new tables.

Bookstore.jsp:

<%@page import="java.sql.*"%>
 <%
try{
Class.forName("oracle.jdbc.driver.OracleDriver");
out.println("Class will loaded");
Connection
con=DriverManager.getConnection("jdbc:Oracle:thin:@localhost:1521:xe","SYSTEM","mana
ger");
out.println("database connected");
Statement st=con.createStatement();
ResultSet rs=st.executeQuery("create table bookstore(title varchar(30),author
varchar(20),publication varchar(20),price varchar(5))");
out.println("Create table successfully");
}
catch(Exception e)
{
out.println(e);
}
%>
Output:
 Insert the details of the users who registered through the registration page of the online
book store web site into the database.

Bookstoremain.jsp

<html>
<body bgcolor="cyan">
<h2 align="center">Book-Details</h2>
<center>
<form name="f1" action="insert.jsp">
<table border="1">

<tr>
<td><label>Book-Title</label></td>
<td><input type="text" name="bt"></td>
</tr>

<tr>
<td><label>Author-Name</label></td>
<td><input type="text" name="an"></td>
</tr>

<tr>
<td><label>Publisher-Details</label></td>
<td><input type="text" name="pd"></td>
</tr>

<tr>
<td><label>Price</label></td>
<td><input type="text" name="price"></td>
</tr>

<tr>

<td><input type="submit" value="Store"></td>

<td><input type="reset" value="Clear"></td>
</tr>
</table>
</form>
</center>
</body>
</html>

Insert.jsp:

<%@ page language="java" contentType="text/html"%>

<%@page import="java.sql.*,java.util.*"%>
<%
 String title=request.getParameter("bt");
String author=request.getParameter("an");
String publisher=request.getParameter("pd");
String price=request.getParameter("price");
try
{
Class.forName("oracle.jdbc.driver.OracleDriver");
Connection conn =
DriverManager.getConnection
("jdbc:oracle:thin:@localhost:1521:xe", "system","manager");
Statement stmt = conn.createStatement();

int i=stmt.executeUpdate("insert into bookstore

values('"+title+"','"+author+"','"+publisher+"','"+price+"')");
out.println("Data is successfully inserted!");
}
catch(Exception e)
{
System.out.print(e);
e.printStackTrace();
}
%>

Output:
  Retrieve and display data related to books stored in the tables to the user.
Display.jsp:
<%@page import="java.sql.*" %>
<%
try
{
Class.forName("oracle.jdbc.driver.OracleDriver");
out.println("Registered the JDBC driver");
Connection conn =
DriverManager.getConnection
("jdbc:oracle:thin:@localhost:1521:xe", "system","manager");
out.println("<br>Connection Established");
Statement stmt = conn.createStatement();
out.println("<br>Statement created");
ResultSet rset = stmt.executeQuery ("SELECT * FROM bookstore");
out.println("<table border=1 align=center
font=red><tr><td>Title</td><td>Author</td><td>Publisher</td><td>Price</td></tr>");
while(rset.next())
out.println("<tr><td>"+rset.getString(1)+"</td><td>"+rset.getString(2)+"</td><td>"+rset.
getString(3)+"</td><td>"+rset.getString(4)+"</td></tr>");
out.println("</table>");
}
catch (Exception e)
{
out.println(e);
e.printStackTrace();
}
%>
Output:

EXP NO: 8

AIM: Create a user authentication application using JSP where the user submits login name and
password to the server through form. The name and password are verified against the data already
available in the database and if there is a match, a welcome page is returned. Otherwise a failure message
is displayed to the user.
Step1:Create a user1 table in Oracle database

Step2: creation of login form using html

Program:
<html>
<table align="center">
<form action="loginverification.jsp" method="get">
<tr>
<td><label>Enter user name</td>
<td><input type="text" name="t">
</tr>
<tr>
<td><label>Enter password</td>
<td><input type="password" name="p">
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="submit"></td>
</tr>
</form>
</table>
</html>
Output:
Step3:Login verification
Program:
<%@page import="java.sql.*"%>
<%
try
{
String uname=request.getParameter("t");
String pwd=request.getParameter("p");

Connection con=null;
Statement stmt=null;
ResultSet rs=null;
Class.forName("oracle.jdbc.driver.OracleDriver");
con=DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe","system","manager");
stmt=con.createStatement();
rs=stmt.executeQuery("select * from user1");
//out.println(uname);
//out.println(pwd);
while(rs.next())
{
String uname1=rs.getString("uname");
String pwd1=rs.getString("password");
if((uname1).equals(uname))
{
if(pwd1.equals(pwd)){
session.setAttribute("uname",uname);
response.sendRedirect("welcome.jsp");
}
}
}
response.sendRedirect("failure.jsp");
}
catch(Exception e)
{
out.println("exception"+e);
}
%>
Output:

Step4: If the credentials are matched then welcome page is displayed

Program:
<html>
<title>welcome message
</title>
<body bgcolor="white">
<%
String uname=(String)session.getAttribute("uname");
%>
<center>
<hr><b>
<h2>congrats...
<font color="red"></font>
you are in home page of this site
</h2></b>
</center>
<hr>
</body>

</html>

Output:

Step5: If credentials are not matched then failure page is displayed

Program:
<html>
<head>
<title>Failure message</title>
</head>
<body bgcolor="white">
<center><h2><b><hr>
Invalid username or password please verify that
</b></h2>
<hr><a href="user1.jsp"><b>Try Again</b></a>
</center>
</body>
</html>
Output:
EXP NO: 9

AIM:
Design a Web application using PHP:
i. To connect to the MySQL database.
ii. Create new tables.
iii. Insert the details of the users who register through the registration page of the online book
store web site in to the database.
iv. Retrieve and display data related to books stored in the tables to the user.

ConnectingtoLocalhost:
Conn.php:
<?php
$servername="localhost";
$username="root";
$password="";
$conn=mysqli_connect($servername,$username,$password);
if(!$conn)
{
die("connectionfailed:".mysqli_connect_error());
}
echo("ConnectedSuccessfully");
?>

Output:

Database.php:
<?php
$servername="localhost";
$username="root";
$password="";
$conn=mysqli_connect($servername,$username,$password);if(
!$conn)
{
die("connectionfailed:".mysqli_connect_error());
}
$sql="CREATEDATABASE20481a05i3";
if(mysqli_query($conn,$sql))
{
echo"DatabasecreatedSuccessfully";
}
else
{
echo"ErrorcreatingDatabase";
mysqli_error($conn);
}
mysqli_close($conn);
?>
Output:

table.php:
<?php
$servername="localhost";
$username="root";
$password="";
$dbname="20481a05i3";
$conn=mysqli_connect($servername,$username,$password,$dbname);if(!$conn)
{
die("connectionfailed:".mysqli_connect_error());
}
$sql="CREATE TABLE student(sno varchar(20), sname varchar(20),addr
varchar(20))";if(mysqli_query($conn,$sql))
{
echo"TablecreatedSuccessfully";
}
else
{
echo"Error creating
Table";mysqli_error($conn);
}
mysqli_close($conn);
?>
Output:

Bookstore.php:
<html>
<bodybgcolor="cyan">
<h2align="center">Book-Details</h2>
<center>
<formname="f1"action="bookstoreinsert.php"method="post">
<tableborder="1">
<tr>
<td><label>Book-Title</label></td>
<td><inputtype="text"name="bt"></td>
</tr>

<tr>
<td><label>Author-Name</label></td>
<td><inputtype="text"name="an"></td>
</tr>

<tr>
<td><label>Publisher-Details</label></td>
<td><inputtype="text"name="pd"></td>
</tr>

<tr>
<td><label>Price</label></td>
<td><inputtype="text"name="price"></td>
</tr>

<tr>

<td><inputtype="submit"value="Store"></td>
<td><inputtype="reset"value="Clear"></td>
</tr>
</table>
</form>
</center>
</body>
</html>

Output:

bookstoreinsert.php:
<?php
/* Attempt MySQL server connection. Assuming you are running
MySQLserver withdefaultsetting(user'root'withnopassword)*/
$link=mysqli_connect("localhost","root","","bookstore");

// Check
connectionif($link==
= false){
die("ERROR:Couldnotconnect.".mysqli_connect_error());
}

//Escapeuserinputsforsecurity
$title =$_POST['bt'];
$author=$_POST['an'];
$pub=$_POST['pd'];
$price=$_POST['price'];

//Attemptinsertqueryexecution
$sql = "INSERT INTO book VALUES ('$title', '$author',
'$pub','$price')";if(mysqli_query($link,$sql)){
echo"Recordsaddedsuccessfully.";
}else{
echo"ERROR:Couldnotabletoexecute$sql.".mysqli_error($link);
}

// Close
connectionmysqli_cl
ose($link);
?>

Output:

Bookstoredisplay.php:
<?php
$servername="localhost";
$username="root";
$password="";
$dbname="bookstore";
$conn=mysqli_connect($servername,$username,$password,$dbname);
if(!$conn)
{
die("connectionfailed:".mysqli_connect_error());
}
echo"<h1align=center><fontcolor=red>Book-Store-Details</font></h1>";
$res=mysqli_query($conn,"select* frombook");
echo"<tablecellpadding=7border=2align=center><tr>
<th>Title</th>
<th>Author</th><th>Publication</th>
<th>Price</th>
</tr>";while($temp=mysqli_fet
ch_array($res))
{
echo
"<tr><td>".$temp['title']."</td><td>".$temp['author']."</td><td>".$temp['public
ation']."</td><td>".$temp['price']."</td></tr>";
}
echo"</center>";
;

mysqli_close($conn);
?>
Output:
EXP NO: 10

AIM:
Create a user authentication application using PHP where the user submits login name and
password to the server through form. The name and password are verified against the data
already available in the database.
i. On successful authentication, display welcome message to the user and create a new
session. Otherwise display a failure message to the user

User1.php :
<html>
<body bgcolor="aqua">
<h1 align="center"><font color="red">Login-Form</font></h1>
<table align="center" border="1">
<form action="loginverification2.php" method="post">
<tr>
<td><label>User Name</td>
<td><input type="text" name="t">
</tr>
<tr>
<td><label>Password</td>
<td><input type="password" name="p">
</tr>
<tr>
<td ><input type="submit" value="Login"></td>
<td><input type="reset" value="Clear"</td>
</tr>
</form>
</table>
</body>
</html>
Welcome.php :
<html>
<title>welcome message
</title>
<body bgcolor="white">
<center>
<hr><b>
<h2>congrats...
<font color="red"></font>
you are in home page of this site
</h2></b>
</center>
<hr>
</body>
</html>
Failure.php :
<html>
<head>
<title>Failure message</title>
</head>
<body bgcolor="white">

Verification.php
EXP NO: 11

AIM:

import React from "react";

const App = () => {

return (
<button onClick={() => alert("Hello!")}>Say Hello</button>
);
};

export default App;

Custom components and events in React

import React from "react";

const CustomButton = ({ onPress }) => {
return (
<button type="button" onClick={onPress}>
Click on me
</button>
);
};

const App = () => {

const handleEvent = () => {
alert("I was clicked");
};
return <CustomButton onPress={handleEvent} />;
};
export default App;

Update the state inside an onClick event handler

import React, { useState } from "react";

const App = () => {

const [count, setCount] = useState(0);
return (
 <div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
<button onClick={() => setCount(count - 1)}>Decrement</button>
</div>
);
};
export default App;
Call multiple functions in an onClick event handler

import React, { useState } from "react";

const App = () => {

const [count, setCount] = useState(0);
const sayHello = () => {
alert("Hello!");
};

return (
<div>
<p>{count}</p>
<button
onClick={() => {
sayHello();
setCount(count + 1);
}}
>
Say Hello and Increment
</button>
</div>
);
};

export default App;

Pass a parameter to an onClick event handler

import React from "react";

const App = () => {

const sayHello = (name) => {
alert(`Hello, ${name}!`);
};

return (
<button
onClick={() => {
 sayHello("React JS");
}}
>
Say Hello
</button>
);
};

export default App;

ADD.EXP1:
AIM: Design a web page to show course Time Table using Table tag.

HTML CODE:

<html>
<head>
<style>
h2.b{
color:white;
font-style:normal;
font-weight:bold;
}
h1.big{
writing-mode:vertical-lr;
color:red;
}
h1.d{
background-image:url("images.jpg");
background-repeat:"repeat";
}
div.a{
line-height:0.1;
}
div.b{
line-height:0.2;
}
body {
background-image:url("w.jpg");
background-position:bottom;
}
table,th,td{
 text-align:center;
border-color:orange;
border-style:red;
}
td.c {
text-align: center;
}
</style>
</head>
<body>
<center>
<div class="a"><h2 class="b">GUDLAVALLERU ENGINEERING
COLLEGE</h2>
<h4 style="color:orange"><b>(An Autonomous Institute with permanent
Affiliation to JNUTUK,Kakinada)</b></h4>
<h4 style="color:orange">Seshadri Rao Knowledge Village,
Gudlavalleru - 521356</h5></div>
<div class="b"><h2 style="color:orange"><b>Department of Computer Sceience
and Engineering</b></h3>
<h3 style="color:violet"><b>ACADEMIC YEAR 2020-21</b></h3></div>
</center>
<pre>
<font color="yellow"><h1 class="d"><marquee direction="right"
behaviour="alternate">TIME TABLE</marquee></h1></font>
</pre>
<div style="overflow-y:auto;">
<table align="center" bgcolor="azure" >
<center>
<tr>
<TH rowspan="2">DAY</TH>
<TH rowspan="2">ROOM NO</TH>
<TH>9.00-9.50</TH>
<th>9.50-10.40</th>
<th>10.40-11.30</th>
<th>11.30-12.20</th>
<th>12.20-1.20</th>
<th>1.20-2.10</th>
<th>2.10-3.00</th>
<th>3.00-3.50</th>
<th>3.50-4.40</th>
</tr>
<tr>
 <td class="c">1</td>
<td class="c">2</td>
<td class="c">3</td>
<td class="c">4</td>
<td colspan="1" rowspan="12"><h1 class="big">LUNCH</h1></td>
<td class="c">5</td>
<td class="c">6</td>
<td class="c">7</td>
<td class="c">8</td>
</tr>
<b>
<tr>
<td>MON</td>
<td class="c">324</td>
<td colspan="2" bgcolor="lightseagreen" class="c">OE-2</td>
<td class="c">WT</td>
<td class="c">CD</td>
<td class="c">OS</td>
<td class="c">SE</td>
<td class="c">ADS/AI</td>
<td class="c">COUN</td>
</tr>
<td rowspan="2" class="c">TUE</td>
<td rowspan="2" class="c">324</td>
<td rowspan="2" class="c">SE</td>
<td rowspan="2" class="c">CD</td>
<td rowspan="2" class="c">SE(T)</td>
<td rowspan="2" class="c">CD</td>
<td colspan="4" bgcolor="slateblue" class="c">PPT</td>
</tr>
<td class="c">WT(RC)</td>
<td class="c">CD(RC)</td>
<td class="c">OS(RC)</td>
<td class="c">LIB</td>
</tr>
<tr>
<td rowspan="2" class="c">WED</td>
<td rowspan="2" class="c">324</td>
<td colspan="4" ROWSPAN="2" bgcolor="darkviolet" class="c">WT
LAB(M-332)</td>
<td rowspan="2" class="c">ADS/AI</td>
<td rowspan="2" class="c">WT(T)
<td colspan="2" bgcolor="greenyellow" class="c">PPT</td>
</tr>
<tr>
<td class="c">SE(RC)</td>
<td class="c">Assoc</td>
</tr>
<tr>
<td rowspan="2" class="c">THU</td>
<td rowspan="2" class="c">324</td>
<td colspan="2" class="c">GATE</td>
<td colspan="2" bgcolor="orange" class="c">CLT</td>
<td rowspan="2" class="c">WT</td>
<td rowspan="2" class="c">OS</td>
<td rowspan="2" class="c">CD(T)</td>
<td rowspan="2" class="c">Club Activities</td>
</tr>
<tr>
<td class="c">WT</td>
<td class="c">OS</td>
<td colspan="2" class="c">CD/OS</td>
</tr>
<tr>
<td rowspan="2" class="c">FRI</td>
<td rowspan="2" class="c">324</td>
<td colspan="2" class="c">GATE</td>
<td rowspan="2" class="c">ADS/AI</td>
<td rowspan="2" class="c">WT(T)</td>
<td rowspan="2" colspan="4" bgcolor="mediumseagreen" class="c">OS &
CD LAB(M-301) </td>
</tr>
<tr>
<td class="c">OS(T)</td>
<td class="c">SE</td>
</tr>
<tr>
<td class="c" rowspan="2">SAT</td>
<td class="c" rowspan="2">324</td>
<td class="c" colspan="2">PPT practice(M-301)</td>
<td class="c" rowspan="2">WT</td>
<td class="c" rowspan="2">SE</td>
<td class="c" rowspan="2">ADS/AI</td>
 <td BGCOLOR="TOMATO" COLSPAN="2" class="c" rowspan="2">OE-
2</td>
<td BGCOLOR="TOMATO" class="c" rowspan="2"></td>
</tr>
<tr>
<td class="c">CD</td>
<td class="c">ADS/AI</td>
</tr>
</b>
</center>
</table>
</div>
</body>
</html>

OUTPUT:
ADD.EXP 2:
AIM: Create a web page to display India map which navigates you to state web page when you
click on state.

<!DOCTYPE html>
<html>
<body>

<p>Click on the ANHRAPRADESH or on one of the STATE IN SOUTH INDIA

to watch it closer:</p>

<img src="INDIA.GIF" width="700" height="500" alt="Planets"

usemap="#INDIAmap">

<map name="INDIA MAP">

<area shape="rect" coords="500,1009" alt="ANDHRAPRADESH" href="andhra
pradesh.htm">
<area shape="circle" coords="10.8505° N, 76.2711° E" alt="KERALA"
href="kerala.htm">
<area shape="circle" coords="11.1271° N, 78.6569° E" alt="TAMILNADU"
href="tamilnadu.htm">
<area shape="circle" coords="15.3173° N, 75.7139° E" alt="KARNATAKA"
href="karnataka.htm">
</map>

</body>
</html>

OUTPUT: