Lab-course-file Particulars

S. No. Particulars Remarks

1. Front page
2. Contents
3. Vision and mission of the Department
4. PEOs, PSOs, POs
5. Academic calendar
6. Evaluation scheme As given by university.
Two practical applications of each experiment should
7. Pre-requisites and list of experiments
be listed.
If there is any gap then it is to be communicated to
8. Gaps (Additional Experiments), if any
university and record is to be kept.
Lab manuals with viva voce questions
9.
at the end
10. Lab course Objectives
11. Lab course Outcomes (COs) Use action verbs as suggested by Bloom’s Taxonomy.
Mapping matrix of COs to POs and
12.
PSOs
13. List of students batch wise
14. Time table Individual
15. Lab course plan
16. Lab sessional marks
17. COs attainment table After each Lab sessional
18. Two Good, average and poor lab files Original copy
19. List of good and weak students To be based on lab performance, lab sessional, etc.
20. Action taken for the improvement Details, etc., should be kept.
21. Feedback by students
COs attainment calculations (Internal
22.
assessment)
COs attainment calculation (External
23. After semester exam result.
assessment)
24. POs and PSOs attainment At the end of the course.
Any other relevant information
Notes:

1. Use Template of lab course file.

2. Lab course file will be checked at the starting and at the end of the semester.
3. One has to prepare a file of self-experimentation.
 IEC Group of Institutions, Greater Noida
Department of Computer Science and Engineering
&
Information Technology

Lab Course File

Lab Course Name (Code) : Web Designing Workshop (BCS-353)

Semester/ Year : 3rd/2nd

Session : 2024-25

Prepared By- 1) Name & Signature : 1. Ms. Shiva Gupta

2) Name & Signature : 2. Mr. Nishant Awana

3) Name & Signature : 3. Ms. Pradeep Singh

2) Designation : Assistant Professor

Approved By- 1) Name & Signature :

2) Designation :

Verified By 1) Name & Sig nature :

2) Designation :
 Contents
S. No. Particulars
1. Front page
2. Contents
3. Vision and mission of the Department
4. PEOs, PSOs, POs
5. Academic calendar
6. Evaluation scheme
7. Pre-requisites and list of experiments
8. Gaps (Additional Experiments), if any
9. Lab manuals with viva voce questions
10. Lab course Objectives
11. Lab course Outcomes (COs)
12. Mapping matrix of COs to POs and PSOs
13. List of students batch wise
14. Time table
15. Lab course plan
16. Lab sessional marks
17. COs attainment table
18. Two Good, average and poor lab files
19. List of good and weak students
20. Action taken for the improvement
21. Feedback by students
22. COs attainment calculations (Internal assessment)
23. COs attainment calculation (External assessment)
24. POs and PSOs attainment
 Vision and Mission of the Department

Vision
To produce world class Technocrats suitable for Industries and Organizations at global level
having Leadership Quality, Research ability and a sense of Social Responsibility.

Mission

 To provide an open environment that encourages professional and personal growth with a strong
theoretical and practical background with an emphasis on hardware and software development.
 To prepare graduates for rapidly changing field and a socially responsible citizens.
 To provide training and to collaborate with global entities for quality education and research.
 To prepare graduates to assume leadership roles by possessing good communication skills, and
have ability to work effectively as team members.
 Program Educational Outcomes (PEOs), Program Specific
Outcomes (PSOs), Program Outcomes (POs)

Program Educational Outcomes (PEOs)

S. No. PEOs
PEO 1 Graduates will work in the area of application software development, artificial intelligence &
Machine learning, data analytics, and Internet of things.

PEO 2 Graduates will become successful software professional with leadership and managerial
quality in the modern software industry based on their strong skill on theoretical and practical
foundation.

PEO 3
Graduates will exhibit professional ethics and moral value with capability of working
as an individual and as a team to contribute towards the needs of the industry and
society.

Program Specific Outcomes (PSOs)

S. No. PSOs
PSO 1 Student will be able to use problem solving skills to develop efficient algorithmic solutions.
PSO 2 Student will be able to develop solution for a given problem in the area of artificial intelligence,
data analytics, computer vision and IOT through conducive environment and infrastructure.

Program Outcomes (POs)

S. No. POs
PO 1 Engineering knowledge: Apply the knowledge of mathematics, science,
engineering fundamentals, and an engineering specialization to the solution
of complex engineering problems.

PO 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

PO 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.
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.

PO 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

PO 6 The engineer and society: Apply reasoning informed by the contextual

knowledge to assess societal, healthy, safety, legal and cultural issues and
the consequent responsibilities relevant to the professional engineering
practice.

PO 7 Environment and sustainability: Understand the impact of professional

engineering solutions in societal and environmental contexts and
demonstrate the knowledge of and need for sustainable development.

PO 8 Ethics: Apply ethical principles and commit to professional ethics and

responsibilities and norms of the engineering practice.

PO 9 Individual and teamwork: 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.

PO 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.

PO 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.
Academic Calendar
 Evaluation Scheme

Subject Credit
S. Subject Periods Evaluation Scheme
Course Total Points
No Name
Code Sessional Exam ESE
. (Theory) L T P
CT TA Total
Web
1 BCS 353 Designing 0 0 2 50 50 50 100 1
Workshop
 IEC College of Engineering and Technology, Greater Noida
Department of Computer Science and Engineering
&
Information Technology
Lab Course Name (Code): Web Designing Workshop (BCS-353)

Pre-Requisites: Basic Programming Skills

List of Experiment
Expe Objective COs
rime and
nt POs
Design the following static webpages 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.

1 Logo Website Name

Hom Login Regis Catal Cart
e tratio ogue
n No
CSE
ECE Description of the wesite
EEE
CIVI
L

LOGINPAGE:
This page looks like below:

Logo Website Name

2 Home Login Registration No Catalogue Cart
CSE
ECE Login Page
EEE User Name:
CIVIL Passwords:
 Submit Reset

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.

Logo Website Name

Home Login Registration Catalogue Cart
CSE
Book:XMLBible $40.5
ECE Author : Winston
Publication:Wiel
y
EEE
Book :AI
CIVIL Author:S.Russel $63
Publication:Princ
3 etonhall

Book : java2
Author: Waston $35.5
Publication :
BPBpublications

Book : HTML in
24 hours $50
Author: Sam
Peter
Publication: Sam
publication
 CARTPAGE: The cart page contains the details about the books which are added to the
cart. The cart page should look like this:

REGISTRATION PAGE: Create a “registration form” with the following fields

5 1) Name (Text field)

2) Password (password field)

3) E-mailid(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)

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
6 less than 6 characters).
2. Password (Password should not be less than 6 character length).

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

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

8 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.
 CSS:
1) Control the repetition of the image with the background-repeat property.
9 2) Define styles for links as
 A:link
 A:visited
 A:active
 A:hover

Consider a small topic of your choice on which you can develop static Webpages and try to
10 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
 Lab Manuals
Experiment No: 1
Objective: Design the following static webpages 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 Website Name

Home Login Registration No Catalogue Cart
CSE
ECE Description of the website
EEE
CIVIL

Software Required: Notepad, Web Browser

DESCRIPTION: In this program the entire web paged are created by

using basic HTML tags. Home page is divided into 3 frames by using
<frameset> and <frame> tags. A frame is used to display a web page
within a web page.
<frameset>:
● The <frameset> tag defines a frameset.
● The <frameset> element holds one or more <frame> elements.
● Each <frame> element can hold a separate document.
● The <frameset> element specifies HOW MANY columns or
rows there will be in the frameset, and HOW MUCH
percentage/pixels of space will occupy each of them.
<frame>:
● The <frame> tag defines one particular window (frame) within a <frameset>.
● Each <frame> in a <frameset> can have different
attributes, such as border, scrolling, the ability to resize,
etc.
Program:

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>

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>

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>

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>

OUTPUT:
 Experiment No: 2

Objective: Design the following static webpages required for an online book store website.

LOGINPAGE:
This page looks like below:

Logo Website Name

Home Login Registration No Catalogue Cart
CSE
ECE Login Page
EEE User Name:
CIVIL Passwords:

Submit Reset

Software Required: Notepad, Web Browser

Program:

<html>

<center>

<head>

<title> Login Page </title>

</head>

<body>

<form name="login"> <br> Homepage-

<html>

<frameset rows="15%,9%,70%" bordercolor="black">

<frameset cols="15%,85%" bordercolor="black">

<frame src="logo.html" scrolling="no">

<frame src="title.html" >

</frameset>

<frame src="top.html" name="f2" scrolling="no">

<frameset cols="15%,85%" bordercolor="black">

<frame src="left.html" name="f31">

<frame src="home.html" name="f32">

</frameset>

</frameset>

</html>

Logo-

<html>

<body>

<center>

<img src="C:\Users\91639\Downloads\new-logo-glbajaj.webp" align="center"

width="90"

height="80">
</center></body>
</html>

Top-
<html>
<body>
<font size="60" color="sky blue">
<center> <strong> ONLINE BOOK SHOP </strong> </font></center>
</body>
</html>

Top-
<html>
<body>
<table width="100%">
<tr>
<td> <a href="home.html" target="f32">Home </a></td>
<td> <a href="login.html" target="f32">Login </a></td>
<td> <a href="registration.html" target="f32">Registration</a></td>
<td> <a href="catalogue.html" target="f32">Catalogue </a></td>
<td> <a href="cart.html" target="f32">Cart </a></td>
</tr>
</table>
</body>
</html>

Left-
<html>
<table cellspacing=15>
<tr><td><a href="cse.html" target="f32" >CSE </a></td></tr>
<tr><td><a href="ece.html" target="f32"> ECE </a> </td></tr>
<tr><td><a href="eee.html" target="f32">EEE </a></td></tr>
<tr><td><a href="civil.html" target="f32"> Civil </a> </td></tr>
</table> Login Page:
<h3> <u> Login Page </u> </h3>
username: <input type="text" name="uname"
><br><br> password: <input type="password"
name="pwd" ><br><br>

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

<input type="reset" value="reset">
</center>
</form>
</body>
</center>
</html

Output-
 Experiment No: 3

Objective: Design the following static webpages required for an online book store website.

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

Software Required: Notepad, Web Browser

Program:

<!DOCTYPE html>
<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="C:\Documents and Settings\All users\My Documents\My Pictures\xml.bmp" width=100
height=50>
</img>
</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:\Documents and Settings\All users\My
Documents\My Pictures\cart.bmp" width="150" height="100"></img>
</a> &nbsp; &nbsp;
</td>
</tr>
<tr>
<td> <img src="C:\Documents and Settings\All users\My Documents\My Pictures\java.bmp" 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:\Documents and Settings\All users\My
Documents\My Pictures\cart.bmp" width="150" height="100"></img>
</a> &nbsp; &nbsp;
</td>
</tr>
</table> </center>
</body>
</html>

OUTPUT:
 Experiment No: 4

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

Software Required: Notepad, Web Browser

Program:

<html>
<center>
<head>
<title> cart Page
</title>
</head>
<body>
<table border=1 cellpadding=center width=40%>
<thead>
<tr>
<th>Book Name</th>
<th> Price</th>
<th> Quantity</th>
<th> Amount</th>
<tr>
<thead>
<tr>
<td>java 2</td>
<td>$35.5</td>
<td>2</td>
<td>$70</td>
</tr>
<tr>
<td> XML bible</td>
<td> $40.5</td>
<td> 2</td>

<td> $90</td>
</tr>
<th
colspan=4> total amount=$160
</th>
</tr>
</body>
</center>
</html>

Output-
 Experiment No: 5

Objective: Write JavaScript to validate the following fields of the Registration page
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 (check boxes – English, Telugu, Hindi, Tamil)
8) Address (text area)

Software Required: Notepad, Web Browser

DESCRIPTION: In order to validate the fields of login and registration pages JavaScript is
used. JavaScript is programming code that can be inserted into HTML pages. JavaScript
inserted into HTML pages, can be executed by all modern web browsers. JavaScript is mainly
used for validating the elements in a form submitted by the user. This JavaScript code can
react to user events.

Program:

<html>
<head>
<title>Registration Page</title>
</head>
<body>
<center>
<h3 align="center"><u>REGISTRATION PAGE</u></h3>
<table border="3">
<tr><td>
<form name="f1" action="" method="post" onsubmit="">
<table cellspacing="10" cellpadding="5">
<tr><td>NAME</td><td><input type="text" size="30" name="uname"/></td></tr>
<tr><td>PASSWORD</td><td><input type="password" size="30" name="pass"/></td></tr>
<tr><td>E-MAIL ID</td><td><input type="text" size="30" name="email"/></td></tr>
<tr><td> PHONE NUMBER</td><td><input type="text" size="15"
name="phone"/></td></tr>
<tr><td>GENDER</td><td><input type="radio" name="gen" value="m" />MALE
<input type="radio" name="gen" value="f" />FEMALE </td></tr>
<tr><td>DATE OF BIRTH</td>
<td><select name="day">
<option value="day">DAY</option>
<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>
<select name="month">
<option value="month">MONTH</option>
<option value="jan">JANUARY</option>
<option value="feb">FEBRUARY</option>
<option value="March">MARCH</option>
<option value="apr">APRIL</option>
<option value="may">MAY</option>
<option value="jun">JUNE</option>
<option value="jul">JULY</option>
<option value="aug">AUGUST</option>
<option value="sep">SEPTEMBER</option>
<option value="oct">OCTOBER</option>
<option value="nov">NOVEMBER</option>
<option value="dec">DECEMBER</option>
</select>
<select name="year">
<option value="year">YEAR</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<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">1980</option>
<option value="2012">1981</option>
<option value="2013">1982</option>
<option value="2014">1983</option>
</select></td></tr>
<tr><td>LANGUAGES KNOWN</td>
<td>
<input type="checkbox" value="eng" name="lang" />ENGLISH
<input type="checkbox" value="tel" name="lang" />TELUGU
<input type="checkbox" value="hin" name="lang" />HINDI
<input type="checkbox" value="tam" name="lang" />TAMIL
</td></tr>
<tr>

<td>ADDRESS</td>

<td><textarea name="addr" cols="25" rows="5"></textarea></td></tr>

<tr><td colspan="2" align="center"><input type="submit" value="SUBMIT"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="RESET" /></td>
</tr>
</table>
</form>
</td></tr></table>
</center>
</body>
</html>
OUTPUT:
 Experiment No: 6

Objective: 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).

Software Required: Notepad, Web Browser

DESCRIPTION: In order to validate the fields of login and registration pages

JavaScript is used. JavaScript is programming code that can be inserted into
HTML pages. JavaScript inserted into HTML pages, can be executed by all
modern web browsers. JavaScript is mainly used for validating the elements in
a form submitted by the user. This JavaScript code can react to user events.

Program:

login.html

<!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>
document.addEventListener('DOMContentLoaded', function () {
// Function to validate the
name field function
validateName() {
var nameInput =
document.getElementById('name'); var
nameValue = nameInput.value.trim();
// Check if the name contains only alphabets and has a minimum length of 6
characters var nameRegex = /^[a-zA-Z]{6,}$/;
if (!nameRegex.test(nameValue)) {
alert('Name should contain alphabets only and have a minimum length of 6
characters.'); return false;
}
return true;
}
// Function to validate the password
field function validatePassword() {
var passwordInput =
document.getElementById('password'); var
passwordValue = passwordInput.value.trim();

// Check if the password has a minimum length

of 6 characters if (passwordValue.length < 6) {
alert('Password should have a minimum length of 6
characters.'); return false;
return true;
}
// Function to handle form
submission function
validateForm() {
// Perform individual field
validations var
isNameValid =
validateName();
var isPasswordValid = validatePassword();
// If all validations pass, allow form
submission if (isNameValid &&
isPasswordValid) { alert('Registration
successful!');
} else {
// Prevent form submission if any
validation fails event.preventDefault();
}
}
// Attach the validateForm function to the form's submit event
var registrationForm = document.getElementById('registrationForm');
registrationForm.addEventListener('submit', validateForm);
});
</script>
</head>
<body>
<form id="registrationForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Register</button>
</form>
</body>
</html>

OUTPUT:
 Experiment No: 7

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

Software Required: Notepad, Web Browser

DESCRIPTION: In order to validate the fields of login and registration

pages JavaScript is used. JavaScript is programming code that can be
inserted into HTML pages. JavaScript inserted into HTML pages, can be
executed by all modern web browsers. JavaScript is mainly used for
validating the elements in a form submitted by the user. This JavaScript
code can react to user events.

Program:

<!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>

document.addEventListener('DOMContentLoaded', function () {

// Function to validate the

name field function
validateName() {

var nameInput =
document.getElementById('name'); var
nameValue = nameInput.value.trim();

// Check if the name contains only alphabets and has a minimum length of 6
characters var nameRegex = /^[a-zA-Z]{6,}$/;

if (!nameRegex.test(nameValue)) {

alert('Name should contain alphabets only and have a minimum length of 6

characters.'); return false;

}
return true;

// Function to validate the

password field function
validatePassword() {

var passwordInput =
document.getElementById('password'); var
passwordValue = passwordInput.value.trim();

// Check if the password has a minimum length of 6

characters if (passwordValue.length < 6) {

alert('Password should have a minimum length of 6

characters.'); return false;

return true;

// Function to validate the

email field function
validateEmail() {

var emailInput =
document.getElementById('email'); var
emailValue = emailInput.value.trim();

// Check if the email follows the standard pattern

var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-

Z]{2,4}$/; if (!emailRegex.test(emailValue)) {

alert('Invalid email address. Please use a valid email format (e.g.,

[email protected]).'); return false;

return true;

// Function to validate the phone

number field function
validatePhoneNumber() {
 var phoneInput =
document.getElementById('phoneNumber'); var
phoneValue = phoneInput.value.trim();

// Check if the phone number contains 10

digits only var phoneRegex = /^\d{10}$/;

if (!phoneRegex.test(phoneValue)) {

alert('Phone number should contain 10 digits

only.'); return false;

return true;

// Function to handle form

submission function
validateForm() {

// Perform individual field

validations var isNameValid =
validateName();

var isPasswordValid =
validatePassword(); var
isEmailValid = validateEmail();

var isPhoneNumberValid = validatePhoneNumber();

// If all validations pass, allow form submission

if (isNameValid && isPasswordValid && isEmailValid && isPhoneNumberValid) {

alert('Registration successful!');

} else {

// Prevent form submission if any

validation fails event.preventDefault();

// Attach the validateForm function to the form's submit event

var registrationForm = document.getElementById('registrationForm');

registrationForm.addEventListener('submit', validateForm);

});

</script>
</head>

<body>

<form id="registrationForm">

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

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

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

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

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

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

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

<input type="tel" id="phoneNumber" name="phoneNumber" pattern="[0-9]{10}" required>

<button type="submit">Register</button>

</form>

</body>

</html>

OUTPUT:
 Experiment No: 8
Objective: Develop and demonstrate the usage of inline, internal and external
style sheet using 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.

Software Required: Notepad, Web Browser

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Demo</title>
<link rel="stylesheet" href="styles.css">
<style>
/* Inline Style */ p {
color: blue;
font-style: italic;
}

</style>
</head>
<body>
<h1 class="internal-style">Internal Style</h1>
<p>Some text with <span style="color: green; font-weight:
bold;">inline styles</span>.</p>
<div class="external-style">
<h2>External Style</h2>
<p>This paragraph has external styles applied.</p>
</div>

<p class="external-style">Another paragraph with external styles.</p>

<div class="background-example">
<h2>Background Example</h2>
<p>This div has a background image.</p>
</div>
</body>
</html>
/* Internal Style */
.internal-style {
font-family: 'Arial',
sans-serif; font-
size: 24px;
}

/* External Style */
.external-style { color: red;
font-family: 'Courier New', monospace;
}

/* Background Example */
.background-example {
background-image:
url('background.jpg');
background-size: cover;
color: white;
}
OUTPUT:
 Lab Course Objectives and Lab Course Outcomes (COs)

Lab Course Objectives

S. No. Lab Course Objective

CO 1 Master HTML for Web Structure: Learn to use HTML elements, attributes, forms,
and media to create the foundational structure and content of websites.
CO 2 Apply CSS for Design and Layout: Develop skills to style and layout web pages
using CSS, including techniques for responsive design, typography, and spacing.
CO 3 Implement Responsive Design with Bootstrap: Utilize the Bootstrap framework to create
responsive, mobile-friendly web designs, incorporating components like grids, navigation
bars, and carousels.
CO 4 Develop Interactive Web Features with JavaScript: Understand and apply
JavaScript for adding interactivity, dynamic content, and user engagement to web
pages.

Lab Course Outcomes (COs)

S. No. Lab Course Outcomes (COs)

CO1 Develop static Web page design and about types of Websites
CO2 Implement basic client-side form validation using HTML attributes.
CO3 Develop the basic concept of Javascript and its application
CO4 Develop CSS rules for styling web pages.
CO5 Develop a basic portfolio showcasing HTML projects.
 Mapping of Lab Course Outcomes with POs & PSOs

Course PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12
Outcomes
BCS353.1 3 2 2 2 2 - - - - - - 2
BCS353.2 2 2 2 2 2 - - - - - - 3
BCS353.3 2 2 3 2 2 - - - - - - 2

BCS353.4 3 2 2 2 2 - - - - - - 3
BCS353.5 2 2 2 2 2 - - - - - - 2

COs PSO1 PSO2

BCS353.1 2 3

BCS353.2 3 2

BCS353.3 2 3

BCS353.4 3 2

BCS353.5 2 3

The CO-PO mapping has been done with correlation levels of 3, 2, 1 and ‘-‘. The notation of 3, 2 and 1
denotes substantially (high), moderately (medium) and slightly (low). The meaning of ‘-‘is no
correlation between CO and PO.
List of Students
IEC College of Engineering and Technology, Greater Noida
Department of ___________________________

Time Table

Room No. :

Class 1 2 3 4 5 6 7 8
Hour
9:30 - 10:20– 11:10– 12:00 – 12: 1:40 – 2:30 – 3:20 – 4:10 –
Time 10:20 11:10 12:00 50 2:30 3:20 4:10 5:00

MON

LUNCH BREAK
12:50 – 1:40
TUE

WED

THU

FRI

SAT
 Lab Course Plan
Experi
ment Conduction
Objective Planned date COs
date
No.

Design Homepage for static webpages required for

1.
an online book store website.

2. Design LoginPage for static webpages required for

an online book store website.

3. Design Catologue for static webpages required for

an online book store website.

4. Design Cartpage for static webpages required for an

online book store website.

5. Design Registration Page for static webpages

required for an online book store website.

6. Write Javascript to Validate the fields of

registration page.

7. Write JavaScript to validate Email, phone number

fields of registration pag

8. Design a web page using CSS(Cascading Style

Sheets)
Lab Sessional Marks
COs Attainment Table
Two Good, Average and Poor lab files
 List of Good and Weak Students

List of good students

Criterion of
S. No. Roll No. Name
Consideration
1.
2.

List of weak students

S. No. Roll No. Name Criterion of

Consideration
1.
Action Taken for Improvement
COs, POs and PSOs Attainment Calculations
(Internal Assessment)
COs, POs and PSOs Attainment Calculations
(External Assessment)
POs and PSOs Attainment Calculations