RAJ KUMAR GOEL INSTITUTE OF TECHNOLOGY

5thKM Stone Delhi, Meerut Road, Near Raj Nagar Extension Road, Ghaziabad, UP-201017

Approved by AICTE, N. Delhi & Affiliated to Dr. A. P. J. Abdul KalamTechnical University, Lucknow
NBA Accredited Program (B.Tech - ECE, IT) &B.Pharma

LABORATORY MANUAL

Faculty Name : Mr. Ram Kr. Sharma Department : CSE

Course Name : Web Designing Workshop Course Code : BCS-353

Year/Sem : 2nd /3rd NBA Code : B 208

Email ID : [email protected] Academic Year : 2023-24

Department of Computer Science and Engineering

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

VISION OF THE INSTITUTE

To continually develop excellent professionals capable of providing sustainable solutions to

challenging problems in their fields and prove responsible global citizens.

MISSION OF THE INSTITUTE

We wish to serve the nation by becoming a reputed deemed university for providing value
based professional education.

VISION OF THE DEPARTMENT

To be recognized globally for delivering high quality education in the ever changing field of
computer science & engineering, both of value & relevance to the communities we serve.

MISSION OF THE DEPARTMENT

1. To provide quality education in both the theoretical and applied foundations of Computer
Science and train students to effectively apply this education to solve real world problems.
2. To amplify their potential for lifelong high quality careers and give them a competitive
advantage in the challenging global work environment.

PROGRAM EDUCATIONAL OUTCOMES (PEOs)

PEO 1: Learning: Our graduates to be competent with sound knowledge in field of

Computer Science & Engineering.

PEO 2: Employable: To develop the ability among students to synthesize data and
technical concepts for application to software product design for successful careers
that meet the needs of Indian and multinational companies.
PEO 3: Innovative: To develop research oriented analytical ability among students to
prepare them for making technical contribution to the society.

PEO 4: Entrepreneur / Contribution: To develop excellent leadership quality among

students which they can use at different levels according to their experience and
contribute for progress and development in the society.

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 2

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

PROGRAM OUTCOMES (POs)

Engineering Graduates will be able to:

PO1: Engineering knowledge: Apply the knowledge of mathematics, science, engineering
fundamentals, and an engineering specialization to the solution of complex engineering
problems.

PO2: 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.

PO3: 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.

PO4: 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.

PO5: Modern tool usage: Create, select and apply appropriate techniques, resources, a n
d modern engineering and IT tools including prediction and modeling to complex
engineering activities with an understanding of the limitations.

PO6: 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.

PO7: 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.
PO8: Ethics: Apply ethical principles and commit to professional ethics and responsibilities
and norms of the engineering practice.

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 3

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

PO9: Individual and team work: Function effectively as an individual, and as a member or
leader in diverse teams, and in multidisciplinary settings.

PO10: 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.

PO11: 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.

PO12: 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 (PSOs)

PSO1: The ability to use standard practices and suitable programming environment to develop
software solutions.

PSO2: The ability to employ latest computer languages and platforms in creating innovative
career opportunities.

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 4

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

COURSE OUTCOMES (COs)

C208.1 To understand the concept of layout and structure of html.

C208.2 To apply the integration of CSS in html pages to format and make Web pages
attractive.
C208.3 Apply the JS concept to process and validate the data of web page on client
Machine.
C208.4 Design the website by interlinking a number of web pages with the application of
html CSS and JavaScript.

CO-PO MAPPING

PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12
C208.1 3 3 3 3 3 1 1 1 1 1 2 3
C208.2 3 3 3 3 3 1 1 1 1 1 2 3
C208.3 3 3 3 3 3 1 1 1 1 1 2 3
C208.4 3 3 3 3 3 1 1 1 1 1 2 3

C208
3 3 3 3 3 1 1 1 1 1 2 3

CO-PSO MAPPING

PSO1 PSO2

C208.1 3 3

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 5

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

C208.2 3 3
C208.3 3 3
C208.4 3 3

C208
3 3

LIST OF EXPERIMENTS

Experiment List of Experiments (Indicative & not limited to)

No.

1 Design the following static web pages required for an online book store
website.

HOMEPAGE:

The static home page must contain three frames.

Top frame: Logo and the college name and links to Homepage, Login page,
Registration page, Catalogue page and Cart page (the description of these
pages will be given below).

For example: 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.

Logo Web Site Name

Home Login Registration Catalogue Cart

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 6

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

CSE
ECE Description of the WebSite
EEE
CIVIL

2. LOGINPAGE:

This page looks like below:

Logo WebSite Name

Home Login Registration Catalogue Cart

CSE
ECE Login Page User Name:
EEE Passwords:
CIVIL

Submit

Reset

3. CATOLOGUE PAGE: The catalogue page should contain the details of all the books available in the
website 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 Logi n Registration Catalogue Cart

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 7

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

Book:XMLBible

CSE Author : Winston

Publication:Wiely $40.5

ECE

EEE Book :AI

Author:S.Russl $63
Publication:Princetonhall

CIVIL Book: Java 2

Author:Watson $35.5
Publication:BPBpublication

Book: HTML in 24 hours

Author: Sam Peter $50
Publication:Sampublication

4. CARTPAGE: The cart page contains the details about the books which are added to the cart. The cart
page should look like this:

5. REGISTRATION PAGE: Create a ‘’registration form’’ with the following fields

1) Name (Text field)
2) Password (password field)
3) E-mail-id (text field)
4) Phone Number (text field)
5) Sex (radio button)
6) Date of birth (3 select boxes)
7) Languages known (checkboxes–English, Telugu, Hindi, Tamil)
8) Address (text area)

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 8

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

6. JS VALIDATION: Write JavaScript to validate the following fields of the above registration page.

1. Name (Name should contains alphabets and the length should not be less than 6
characters).
2. Password (Password should not be less than 6 characters length).

7. JS VALIDATION:

3. E-mail-id (should not contain any invalid and must follow the standard
pattern([email protected])
4. Phone Number (Phone number should contain 10 digits only).

8. CSS: Design a web page using CSS (Cascading Style Sheets) which includes the following:

1) Use different font, styles:

In the style definition you define how each selector should work (font, color etc.). Then,
in the body of your pages, you refer to these selectors to activate the styles.

2) Set a background image for both the page and single elements on the page.

9. CSS:

1) Control the repetition of the image with the background-repeat property.

2) Define styles for links as
A: link A: visited A: active A: hover

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 9

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

10 Consider a small topic of your choice on which you can develop static Web pages and try to
. implement all topics of html, CSS and JS within the topic.

Choose any one topic.

1. Your Own Portfolio

2. To-Do List
3. Survey Form
4. A Tribute Page
5. A Questionnaire

INTRODUCTION

Web development workshop is a collective name for technology primarily for the World Wide Web.
This does; however, tend to focus more specifically towards technology that aides in the creation,
maintenance and development of web-based applications.

From a developer’s point of view, these are things like languages and frameworks, data storage
mechanisms, services and products to allow us to create platforms and applications for the web.

Bootstrap and JS along with HTML, CSS for web development that allows a developer to build
websites.

You can find web frameworks for Java, Python and a few other languages so that developers can use
a whole array of technologies, rather than being pinned down to one. These are known as server-side
technologies which lives and runs on a server somewhere.

On the other side, you have client-side web technologies, which include things like HTML, CSS,
JavaScript (which includes JavaScript Frameworks like jQuery, Angular and React). These execute
run from the web page that a user loads, but actually run on the users (clients) computer.

However, web technology is not limited to the developers. Web browsers, for example, are in the
category of web technology as it is technology that allows a user to access the web. FTP may also be
considered a web technology as it is designed to send files over the Internet.

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 10

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

I wouldn't, however, consider a VPN as web technology as a VPN is a networking technology that sends
network traffic over the Internet without actually interacting with the “world wide web” itself.

PREFACE
We have come a long way—Web Style Guide and the World Wide Web. The first version of Web
Style Guide was a web site called the Yale claim Web Style Guide posted in 1993, just as the world
outside computing and academia began to notice the new medium and the Internet in general. The
early web was sorely lacking in aesthetics but exploding with potential. Web Style Guide provided
much-needed guidance on structure and design based on several decades‟ worth of experience with
print, hypermedia, and multimedia design and authoring.

In 1997 we updated the Web Style Guide site to reflect the maturing design trends and changes in
web technology. In the web a novel landscape opened up, like a new continent rising from the sea,
ready for explorers and builders. People from the arts, publishing, and dozens of computing
disciplines poured in, enriching the web and pushing out the boundaries of what might be possible
while bringing the wealth of centuries of media and design culture along with them. The web
changed to accommodate these new settlers, whose expectations for what could be achieved in the
web environment often outstripped its capabilities. This was a time of significant progress in visual
design and interface sophistication, but at the cost of standardization and accessibility.

In 1999 we produced the first print edition of Web Style Guide. People with little or no background
in design were assigned the responsibility for web site development, and they looked to Web Style
Guide for calm, reassuring, and practical guidance. For many, the slim and straightforward Web
Style Guide was a welcome relief from the esoteric, hyperactive, and voluminous books that lined
the shelves in the Web Design section of their bookstores.

Since its inception as a web site in 1993 and into this third edition, Web Style Guide has presented
solid design advice based on classic design principles, acknowledging the possibilities and
WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 11
 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

limitations of current web technology while trying not to let the media confetti overwhelm good
sense and an information- oriented aesthetic. Thanks to enormous advances in html, Cascading
Style Sheets, and the “web standards” philosophy for building sites, this edition does not contain
sections on cross-platform issues or special techniques for making web sites accessible to people
with disabilities.

In this third edition of Web Style Guide, and the nineteenth year of the World Wide Web, we
celebrate how far we have come and how much we can do to make the web accessible to and
usable by everyone.

Mr. B.K Saraswat, Assistant Professor, Dept. of CSE

Mr. Ram Kumar, Assistant Professor, Dept. of CSE

DO’S AND DONT’S

DO’s
1. Conform to the academic discipline of the department.

2. Enter your credentials in the laboratory attendance register.

3. Read and understand how to carry out an activity thoroughly before coming to the laboratory.

4. Ensure the uniqueness with respect to the methodology adopted for carrying out the

experiments.

5. Shut down the machine once you are done using it.

DONT’S

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 12

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

1. Eatables are not allowed in the laboratory.

2. Usage of mobile phones is strictly prohibited.

3. Do not open the system unit casing.

4. Do not remove anything from the computer laboratory without permission.

5. Do not touch, connect or disconnect any plug or cable without your faculty/laboratory

technician’s permission.

GENERAL SAFETY INSTRUCTIONS

1. Know the location of the fire extinguisher and the first aid box and how to use them
in case of an emergency.

2. Report fire or accidents to your faculty /laboratory technician immediately.

3. Report any broken plugs or exposed electrical wires to your faculty/laboratory

technician immediately.

4. Do not plug in external devices without scanning them for computer viruses.

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 13

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

GUIDELINES FOR LABORTORY RECORD PREPARATION

While preparing the lab records, the student is required to adhere to the following guidelines:

Contents to be included in Lab Records:

1. Cover page

2. Vision

3. Mission

4. PEOs

5. POs

6. PSOs

7. COs

8. CO-PO-PSO mapping
WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 14
 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

9. Index

10. Experiments

 Aim
 Source code
 Input-Output

A separate copy needs to be maintained for pre-lab written work.

The student is required to make the Lab File as per the format given on the next two pages.

Raj Kumar Goel Institute of Technology, Ghaziabad

Web Development Designing Lab (BCS 353)

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 15

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

Name

Roll No.

Section- Batch

INDEX
Experiment Experiment Date of Date of Faculty
No. Name Conduction Submission Signature

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 16

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

GUIDELINES FOR ASSESSMENT

Students are provided with the details of the experiment (Aim, pre-experimental
questions, procedure etc.) to be conducted in next lab and are expected to come prepared
for each lab class.

Faculty ensures that students have completed the required pre-experiment questions and
they complete the in-lab programming assignment(s) before the end of class. Given that
the lab programs are meant to be formative in nature, students can ask faculty for help
before and during the lab class.

Students‟ performance will be assessed in each lab based on the following Lab
Assessment Components:

Assessment Criteria-1: Performance (Max. marks = 5)

Assessment Criteria-2: VIVA (Max. marks = 5)

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 17

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

Assessment Criteria-3: Record (Max. marks = 5)

In each lab class, students will be awarded marks out of 5 under each component head,
making it total out of 15 marks.

EXPERIMENT – 1
Aim: - Design the following static web pages required for an online book store website.

HOMEPAGE:

The static home page must contain three frames.

Top frame: Logo and the college name and links to Homepage, Login page, Registration page,
Catalogue page and Cart page.

Pre Experiment Questions:

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 18

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

Q1. What is HTML?

Q2. What is Frameset?

Q3. What is static Web page?

Code: -Homepage

<head>

<frameset rows="20%,*">

<frame src="topframe.html"name="f1">

<frameset cols="20%,*">

<frame src="leftframe.html"name="f2">

<frame src="rightframe.html"name="f3">

</frameset>

</frameset>

</head>

OUTPUT:

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 19

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

Top frame:

<html>
<body>
<p>
<img src="C:\Documents and Settings\All Users\Documents\My Pictures\Sample
Pictures\Winter.jpg" align=left width=100 height=100">
<h1 align=center>Online book store</h1>
</p>
<br>
<p>
<h2>&nbsp;nbsp;&nbsp;&nbsp;
<a href="homepage.html" target=_parent> Home
</a>
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
<a href="login.html" target="f3"> login
</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="registration.html" target="f3"> registration
</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nbsp;&nbsp;&nbsp;
<a href="catalogue.html" target="f3"> Catalogue
</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="cart.html" target="f3"> Cart
</a> &nbsp;
</h2>
</p>
</body>
</html>

Output

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 20

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

Left frame:
<html>

<body>

<a href=cse.html target="f3"><h3>CSE</h3> </a><br><br><br><br><br>

<a href=ece.html target="f3"><h3>ECE</h3></a><br><br><br><br><br>

<a href=eee.html target="f3"><h3>EEE</h3></a><br><br><br><br><br>

<a href=civil.html target="f3"><h3>Civil</h3></a>

</body>

</html>

Output

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 21

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

Right frame:

<html>

<body bgcolor="pink">

<p>

<h2 align="center"> <font face="times new roman" color="green" >Online book store information </font>
</h2>

<h3> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<font face="monotype corsiva" color=blue> This is the online book
store developed by students of pvpsit.It contains book catalogue of various branches like cse,ece,eee,civil
</font></h3>

</p>

</body>

</html>

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 22

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

Output

Experiment No.2
Aim: - Login Page: The login page contains the user name and the password
of the user to authenticate.

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 23

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

Pre Experiment Questions:

Q1. What is inputType?

Q2. What is PasswordType?

Q3. What is Submit Type?

Code:

<html>

<body>

<p>

<img src="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\

Winter.jpg" align=left width=100 height=100">

<h1 align=center>Online book store</h1>

</p>

<br>

<p>

<h2>&nbsp;nbsp;&nbsp;&nbsp;

<a href="homepage.html" target=_parent> Home

</a>

&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;

<a href="login.html" target="f3"> login

</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="registration.html" target="f3"> registration

</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nbsp;&nbsp;&nbsp;

<a href="catalogue.html" target="f3"> Catalogue

</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 24

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

<a href="cart.html" target="f3"> Cart

</a> &nbsp;

</h2>

</p>

</body>

</html>

OUTPUT:

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 25

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

Experiment No.3

Aim: - CATOLOGUE PAGE: The catalogue page should contain the details of all the books
available in the website 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

Pre Experiment Questions:

Q1. What is table?
Q2. Tags used in Table.
Q3. What is Rowspan &
Columnspan?

Code: -

<html>
<body>
<center>
<table border=1>
<tr>
<th> Book Preview </th>
<th> Book Details </th>
<th> Price </th>
<th> Payment </th>
</tr>
<tr>
<td> <img src="image.jpg" width=100 height=50>
</td>
<td>
<pre>
<font face="comic sans ms" size=4 color="green" > book:XML Bible Author:winston
Publisher:Wiesley
</font>
</pre>
</td>
<td>&nbsp;$40 &nbsp; </td>
<td> &nbsp; &nbsp; <a href="cart.html" target="_blank">
<img src="C:\Users\kivi2\Downloads\1234.png" width="150" height="100">
</a> &nbsp; &nbsp;
WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 26
 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

</td>
</tr>
<tr>

<td> <img src="image.jpg" width=100 height=50>

</img>
</td>
<td>
<pre>
<font face="comic sans ms" size=4 color="green" > book:Java 2
Author:Watson Publisher:BPB publications
</font>
</pre>
</td>
<td>&nbsp; $40 &nbsp;</td>
<td> &nbsp; &nbsp; <a href="cart.html" target="_blank">
<img src="C:\Users\kivi2\Downloads\1234.png" width="150" height="100">
</a> &nbsp; &nbsp;
</td>
</tr>
</table>
</center>
</body>
</html>

Output

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 27

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

Experiment No. 4

Aim: - The cart page contains the details about the books which are added to the cart.

Pre Experiment Questions:

Q1. What is cell padding?
Q2. What is border?
Q3. What is colspan?
Code:
<html>

<body>

<center><br><br><br>

<img src=”E:\aa.jpg”>

<table border=1 cellpadding=center>

<thead>

<tr>

<th>Book name</th>

<th>price</th>

<th>quantity</th>

<th>amount</th>

</tr>

</thead>

<tr>

<td>java 2</td>

<td>$45</td>

<td>2</td>

<td>$70</td>

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 28

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

</tr>

<tr>

<td> XML bible</td>

<td> $20</td>

<td> 5</td>

<td> $40</td>

</tr>

<th colspan=4>total amount=$110>

</th>

</tr>

</table>

</center>

</body>

</html>

OUTPUT:

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 29

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

Experiment No. 5

Aim: - REGISTRATION PAGE: Create a ‘’registration form’’ with the following fields

1) Name (Text field)

2) Password (password field)
3) E-mail-id (text field)
4) Phone Number (text field)
5) Sex (radio button)
6) Date of birth (3 select boxes)
7) Languages known (checkboxes–English, Telugu, Hindi, Tamil) Address (text area)

Pre Experiment Questions:

Q1. What is form?
Q2. What is input type?
Q3. What is label tag?

Code: -

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Registration Form</title>

</head>

<body>

<h1>Registration Form</h1>

<form action="submit.php" method="post">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required><br><br>

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 30

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

<label for="password">Password:</label>

<input type="password" id="password" name="password" required><br><br>

<label for="email">E-mail:</label>

<input type="text" id="email" name="email" required><br><br>

<label for="phone">Phone Number:</label>

<input type="text" id="phone" name="phone" required><br><br>

<label>Sex:</label>

<input type="radio" id="male" name="sex" value="male">

<label for="male">Male</label>

<input type="radio" id="female" name="sex" value="female">

<label for="female">Female</label>

<input type="radio" id="other" name="sex" value="other">

<label for="other">Other</label><br><br>

<label for="dob">Date of Birth:</label>

<select id="day" name="day">

<option value="">Day</option>

</select>

<select id="month" name="month">

<option value="">Month</option>

<!-- Add month options here -->

</select>

<select id="year" name="year">

<option value="">Year</option>

<!-- Add year options here -->

</select><br><br>

<label>Languages known:</label>

<input type="checkbox" id="english" name="languages[]" value="english">

<label for="english">English</label>
WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 31
 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

<input type="checkbox" id="telugu" name="languages[]" value="telugu">

<label for="telugu">Telugu</label>

<input type="checkbox" id="hindi" name="languages[]" value="hindi">

<label for="hindi">Hindi</label>

<input type="checkbox" id="tamil" name="languages[]" value="tamil">

<label for="tamil">Tamil</label><br><br>

<label for="address">Address:</label><br>

<textarea id="address" name="address" rows="4" cols="50"></textarea><br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>

Output: -

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 32

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

Experiment No. 6
Aim: - JS VALIDATION: Write JavaScript to validate the following fields of the
above registration page.

1.Name (Name should contains alphabets and the length should not be less than 6
characters).

2.Password (Password should not be less than 6 characters length).

Pre Experiment Questions:

Q1. What is Java Script?

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 33

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

Q2. What is various data type in Java Script?

Q3. What do you understand by popup box in JS?

Code: -

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Page</title>
<script> function validateForm() {
// Name validation
var name = document.getElementById("name").value; if (!/^[a-zA-Z]
{6,}$/.test(name)) {
alert("Name should contain alphabets only and have at least 6 characters."); return
false;
}
// Password validation
var password = document.getElementById("password").value; if (password.length
< 6) {
alert ("Password should be at least 6 characters long.");
return false;
}// Form is valid
return true;
}
</script>
</head>
<body>
<h1>Registration Page</h1>
<form onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="Register">
</form>

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 34

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

</body>
</html>

Output: -

Experiment No. 7

Aim: - JS VALIDATION:

1. E-mail-id (should not contain any invalid and must follow the standard
pattern([email protected])
2. Phone Number (Phone number should contain 10 digits only).

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 35

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

Pre Experiment Questions:

Q1. What is different type of validation?

Q2. What is RegEx?

Q3. What is IsNaN?

Code: -

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Form Validation</title>

<style>

/* Add your CSS styles here */

</style>

</head>

<body>

<h1>Form Validation</h1>

<form id="myForm" onsubmit="return validateForm()">

<label for="email">E-mail:</label>

<input type="text" id="email" name="email" required><br><br>

<label for="phone">Phone Number:</label>

<input type="text" id="phone" name="phone" required><br><br>

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 36

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

<input type="submit" value="Submit">

</form>

<script>

function validateForm() {

var emailInput = document.getElementById("email").value; var phoneInput =

document.getElementById("phone").value;

var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; var phonePattern =

/^\d{10}$/;

if (!emailPattern.test(emailInput)) {

alert("Invalid email address. Please enter a valid email."); return false;

if (!phonePattern.test(phoneInput)) {

alert("Invalid phone number. Please enter a 10-digit phone number."); return false;

return true; // Form is valid and can be submitted

</script>

</body>

</html>

Output: -

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 37

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

Experiment No. 8

Aim: - CSS: Design a web page using CSS (Cascading Style Sheets) which includes the following:

Use different font, styles:

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 38

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

In the style definition you define how each selector should work (font, color etc.). Then, in the body of
your pages, you refer to these selectors to activate the styles.

Set a background image for both the page and single elements on the page.

Pre Experiment Questions:

Q1. What is CSS?

Q2. What is style in CSS?

Q3. What is CSS property?

Code: -

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS Styling Example</title>

<style>

/* Define font styles */ body {

font-family: Arial, sans-serif; font-size: 16px;

color: #333;

h1 {

font-family: "Times New Roman", Times, serif; font-size: 36px;

color: #009688;

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 39

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

p{

font-family: "Courier New", Courier, monospace; font-size: 18px;

line-height: 1.5;

/* Set background image for the entire page */ body {

background-image: url('background.jpg'); background-size: cover;

background-repeat: no-repeat;

/* Set background image for a specific element */

.highlight-box {

background-image: url('highlight-background.jpg');

background-size: cover; background-repeat: no-repeat; padding: 20px;

margin: 20px 0; border-radius: 10px;

</style>

</head>

<body>

<h1>Welcome to My CSS Page</h1>

<p>This is an example of a web page styled using CSS. You can use different fonts and set background
images for elements on the page.</p>

<div class="highlight-box">

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 40

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

<h2>Highlighted Section</h2>

<p>This section has a custom background image set using CSS. You can apply various styles to make
your content stand out.</p>

</div>

<p>Feel free to explore and experiment with different styles and backgrounds for your web pages!</p>

</body>

</html>

Output: -

Experiment No. 9

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 41

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

Aim: - CSS:
Control the repetition of the image with the background-repeat property.

Define styles for links as

A: link A: visited A: active A: hover

Pre Experiment Questions:

Q1. What is CSS selectors?

Q2. What is hover property?

Q3. What is anchor tag?

Code: -

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS Styling Example</title>

<style>

/* Control background image repetition */ body {

background-image: url('image.jpg');

background-repeat: no-repeat; /* Prevent repetition */ background-size: cover;

background-attachment: fixed; /* Fixed background position */

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 42

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

/* Define styles for links */ a:link {

color: #3498db; /* Unvisited link color */

text-decoration: none; /* Remove underline */

a:visited {

color: #8e44ad; /* Visited link color */

a:active {

color: #e74c3c; /* Active link color (when clicked) */

a:hover {

color: #e67e22; /* Link color on hover */

text-decoration: underline; /* Add underline on hover */

/* Additional styling for page content */

.container {

max-width: 800px; margin: 0 auto; padding: 20px;

background-color: rgba(255, 255, 255, 0.8); border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

h1 {

color: #333;

p{

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 43

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

font-size: 18px; line-height: 1.5;

color: #666;

</style>
</head>
<body>
<div class="container">
<h1>Welcome to My CSS Page</h1>
<p>This is an example of a web page styled using CSS. You can control the repetition of background images and
define styles for links.</p>
<p>Feel free to <a href="#">explore</a> and <a href="#">click</a> on the links to see how they change on
interaction</p>
</div>
</body>
</html>
Output: -

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 44

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

Experiment No. 10

Aim: - Consider a small topic of your choice on which you can develop static Web pages and
try to implement all topics of html, CSS and JS within the topic.

Choose any one topic.

1. Your Own Portfolio
2. To-Do List
3. Survey Form
4. A Tribute Page
5. A Questionnaire

Pre Experiment Questions:

Q1. What is form?

Q2. What is input type?

Q3. What is label tag?

Code: - Survey Form

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Survey Form</title>

font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0;

padding: 0;

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 45

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

header {

background-color: #3498db; color: white;

text-align: center; padding: 20px;

.container {

max-width: 800px; margin: 20px auto; background-color: #fff; padding: 20px;

border-radius: 5px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

h1 {

color: #333;

text-align: center;

label {

display: block; margin-bottom: 10px; font-weight: bold;

input[type="text"], input[type="email"] { width: 100%;

padding: 10px; margin-bottom: 20px;

border: 1px solid #ccc; border-radius: 5px;

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 46

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

select {

width: 100%; padding: 10px; margin-bottom: 20px;

border: 1px solid #ccc; border-radius: 5px;

textarea { width: 100%;

height: 100px; padding: 10px; margin-bottom: 20px;

border: 1px solid #ccc; border-radius: 5px;

.btn {

background-color: #3498db; color: white;

border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;

.btn:hover {

background-color: #2187c0;

/* JavaScript Validation */

.error {

color: #e74c3c; font-size: 14px;

</style>

</head>

<body>

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 47

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

<header>

<h1>Survey Form</h1>

</header>

<div class="container">

<form id="survey-form" action="submit.php" method="post">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

<label for="age">Age:</label>

<select id="age" name="age">

<option value="">Select your age</option>

<option value="under18">Under 18</option>

<option value="18-30">18-30</option>

<option value="31-50">31-50</option>

<option value="over50">Over 50</option>

</select>

<label for="comments">Comments:</label>

<textarea id="comments" name="comments"></textarea>

<input type="submit" class="btn" value="Submit">

</form>

<div id="error-message" class="error"></div>

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 48

 Raj Kumar Goel Institute of Technology, Ghaziabad Department of Computer Science &
Engineering

</div>

<script>

// JavaScript form validation

document.getElementById('survey-form').addEventListener('submit', function (e) { var name =

document.getElementById('name').value;

var email = document.getElementById('email').value;

if (name.trim() === '' || email.trim() === '') { e.preventDefault(); // Prevent form submission

document.getElementById('error-message').innerHTML = 'Name and Email are required fields.';

});

</script>

</body>

</html>

Output: -

WDW LAB (BCS353) MANUAL (CSE, III SEM) Page 49