[Approved by AICTE, Govt. of India & Affiliated to Dr.

APJ Abdul

Grater Noida
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Department of Applied Computational Science & Engineering

Lab File

Web Designing Workshop

(BCS-353)

Submitted By:
Student Name: XYZ
University Roll No.: 112232
Branch: CSE-DS
Section: DS
Group:

Submitted To:
Mr. Rakesh Kumar

GL BAJAJ Institute of Technologies & Management

Greater Noida

Department of Applied Computational Science & Engineering

 [Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul

Grater Noida
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Department of Applied Computational Science & Engineering

Index
S.No Name of experiment Date of Date of Signatur
. Experimen Submissio e
t n
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 website.

2 LOGINPAGE:
This page looks like below:

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.

Department of Applied Computational Science & Engineering

 [Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul

Grater Noida
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Department of Applied Computational Science & Engineering

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-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)
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-mailid (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
10 Consider a small topic of your choice on which
you can develop static Webpages and try to
implement
all topics of html, CSS and Js within the topic.
Choose any one topic.
1. Your Own Portfolio

Department of Applied Computational Science & Engineering

 [Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul

Grater Noida
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Department of Applied Computational Science & Engineering

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

PRACTICAL-1
AIM: 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.

SOFTWARE REQUIRED: Notepad, SDK

DESCRIPTION: In this program the entire web paged are created by
using basic HTML tags. Home page is made using using GRID
Container Definition:
Use display: grid; on the container to establish a grid context.
Grid Columns and Rows:
Define the grid structure using properties like grid-template-columns and grid-template-rows.
Column and Row Sizing:
Specify the size of columns and rows using units like pixels, percentages, or the fr unit for
fractions.
Grid Gaps:
Set the gap between columns and rows using grid-column-gap and grid-row-gap, or use grid-gap
for both.
Item Placement:
Position grid items using properties like grid-column and grid-row or shorthand grid-area.
Alignment:
Align and justify items within the grid using properties like justify-items, align-items, justify-
content, and align-content.

Department of Applied Computational Science & Engineering

 [Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul

Grater Noida
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Department of Applied Computational Science & Engineering

Auto Placement:
Let the grid automatically place items with grid-auto-flow and control the direction with grid-
auto-columns and grid-auto-rows.

PROGRAM:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<style>
.i0 {
width: 140px;
background-position: center;
background-size: cover;
}

#i1 {
padding-left: 40px;
display: flex;
font-size: 25px;
}

.c1 {
display: grid;
grid-template-columns: 200px 800px;
background-color: whitesmoke;
}

.cc1 {
height: 50px;
text-align: center;
align-items: center;
border: 2px solid black;
}

.c2 {
display: grid;
grid-template-columns: 200px 200px 200px 200px 200px;

Department of Applied Computational Science & Engineering

 [Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul

Grater Noida
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Department of Applied Computational Science & Engineering

.cc2 {
padding-left: 40px;
display: flex;
align-items: center;
background-color: yellow;
height: 50px;
text-align: center;
border: 2px solid black;
}

.c3 {
display: grid;
grid-template-columns: 200px 800px;
}

.cc3 {
background-color: rgb(255, 243, 220);
height: 150px;
text-align: center;
border: 2px solid black;
}

#i2 {
background-color: gold;
}
</style>
</head>

<body>
<div class="c1">
<div class="cc1" id="i0"><img class="i0" src="/HTML/logo.webp" alt=""></div>
<div class="cc1" id="i1"><b>GL BAJAJ INSTITUTE OF TECHNOLOGY AND
MANAGEMENT</b></div>
</div>
<div class="c2">
<div class="cc2" id="i2">HOME</div>
<div class="cc2" id="i3">LOGIN</div>
<div class="cc2" id="i4">REGISTRATION</div>
<div class="cc2" id="i5">CATALOGUE</div>
<div class="cc2" id="i6">CART</div>
</div>
<div class="c3">
<div class="cc3"
id="i7">CSE<br>&nbsp<br>ECE<br>&nbsp<br>EEE<br>&nbsp<br>CIVIL<br></div>
<div class='cc3' id="i8">GL Bajaj is a prominent educational institution that stands out

Department of Applied Computational Science & Engineering

 [Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul

Grater Noida
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Department of Applied Computational Science & Engineering

for its commitment to

academic excellence and holistic development. Located in [provide location], GL
Bajaj offers a diverse range
of undergraduate and postgraduate programs across various disciplines. Known for its
state-of-the-art
infrastructure, experienced faculty, and vibrant campus life, the college provides
students with a conducive
environment for learning and personal growth. With a focus on fostering innovation,
critical thinking, and
practical skills, GL Bajaj prepares students to meet the challenges of the dynamic
professional world. The
college is dedicated to nurturing a culture of curiosity, creativity, and leadership,
making it a
distinguished choice for those seeking a comprehensive and enriching
education.</div>
</div>

</body>

</html>

OUTPUT:

Department of Applied Computational Science & Engineering

 [Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul

Grater Noida
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Department of Applied Computational Science & Engineering

PRACTICAL-2
AIM: Design the following static webpages required for an online book store website.

LOGIN PAGE: In computer security, logging in is the process by which an individual gains
access to a computer system by identifying and authenticating themselves. The user
credentials are typically some form of username and a matching password, and these
credentials themselves are sometimes referred to as a login.

SOFTWARE REQUIRED: Notepad, SDK THEORY

Theory:
Basic Text Input:
<input type="text"> creates a simple single-line text input.
Placeholder Text:
Use the placeholder attribute to provide a hint or example text inside the input.
Submit Input:
The <input type="submit"> element is used to create a button that, when clicked, submits the
form data to the server for processing.
Reset Input:
The <input type="reset"> element is used to create a button that, when clicked, resets all the
form fields back to their default values.

Program:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<style>
.i0 {
width: 190px;
background-position: center;
background-size: cover;
}

Department of Applied Computational Science & Engineering

 [Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul

Grater Noida
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Department of Applied Computational Science & Engineering

#i1 {
font-size: 25px;
display: flex;
padding-left: 20px;
}
.c1 {
display: grid;
grid-template-columns: 200px 800px;
background-color: whitesmoke;
}

.cc1 {
height: 50px;
text-align: center;
align-items: center;
justify-content: center;
border: 2px solid black;
}

.c2 {

display: grid;
grid-template-columns: 200px 200px 200px 200px 200px;
}

.cc2 {
display: flex;
align-items: center;
text-align: center;
padding-left: 40px;
background-color: yellow;
height: 50px;
text-align: center;
border: 2px solid black;
}

.c3 {
display: grid;
grid-template-columns: 200px 800px;
}

.cc3 {
background-color: beige;
height: 150px;
text-align: center;
border: 2px solid black;

Department of Applied Computational Science & Engineering

 [Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul

Grater Noida
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Department of Applied Computational Science & Engineering

}
#i3{
background-color: gold;
}

</style>
</head>

<body>
<div class="c1">
<div class="cc1" id=""><img class="i0" src="/HTML/logo.webp" alt=""></div>
<div class="cc1" id="i1"><b>GL BAJAJ INSTITUTE OG TECHNOLOGY AND
MANAGEMENT</b></div>
</div>
<div class="c2">
<div class="cc2" id="i2">HOME</div>
<div class="cc2" id="i3">LOGIN</div>
<div class="cc2" id="i4">REGISTRATION</div>
<div class="cc2" id="i5">CATALOGUE</div>
<div class="cc2" id="i6">CART</div>
</div>
<div class="c3">
<div class="cc3"
id="i7">CSE<br>&nbsp<br>ECE<br>&nbsp<br>EEE<br>&nbsp<br>CIVIL<br></div>
<div class="cc3">LOGIN PAGE<br>&nbsp<br>USER NAME: <input
type="text"><br>&nbsp<br>
PASSWORD: <input type="text"><br>&nbsp<br>
<input type="submit" value="SUBMIT">
<input type="reset" value="RESET">

</div>
</div>

</body>

</html>

OUTPUT:

Department of Applied Computational Science & Engineering

 [Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul

Grater Noida
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Department of Applied Computational Science & Engineering

PRACTICAL-3
AIM: Design the following static webpages required for an online book store website.

Catalogue Page: A catalog page is a web page or document that presents a curated collection
of products or services, providing users with organized information, visuals, and navigation
options to facilitate browsing and decision-making.

SOFTWARE REQUIRED: Notepad, SDK THEORY:

Theory:
In CSS, the term "image tag" is not used directly. Instead, CSS is mainly responsible for
styling and positioning elements on a web page, including images. However, I believe you
might be referring to the <img> tag in HTML, which is used to embed images in a webpage.
In that case, here's a brief overview without specific code:
Source (src):
The src attribute in the <img> tag specifies the URL or file path of the image.
Alternate Text (alt):
The alt attribute provides alternative text for the image, which is displayed if the image
cannot be loaded. It is also used for accessibility.

Program:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<script src="https://kit.fontawesome.com/2b05ff5e6f.js"
crossorigin="anonymous"></script>
<style>
.i0 {
width: 140px;
background-position: center;
background-size: cover;
}

#i1 {
padding-left: 40px;
display: flex;
font-size: 25px;
}
.c1 {

Department of Applied Computational Science & Engineering

 [Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul

Grater Noida
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Department of Applied Computational Science & Engineering

display: grid;
grid-template-columns: 200px 800px;
background-color:beige;
}

.cc1 {
height: 50px;
text-align: center;
align-items: center;
border: 2px solid black;
}

.c2 {
display: grid;
grid-template-columns: 200px 200px 200px 200px 200px;
}

.cc2 {
padding-left: 40px;
display: flex;
align-items: center;
background-color:yellow;
height: 50px;
text-align: center;
border: 2px solid black;
}

.c3 {
display: grid;
grid-template-columns: 200px 800px;
}

.cc3 {
background-color:whitesmoke;
text-align: center;
border: 2px solid black;
}
.img{
width: 100px;
}
.img1{
width:100px;
}
.row{
display: grid;
grid-template-columns: 200px 200px 200px 200px;
}

Department of Applied Computational Science & Engineering

 [Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul

Grater Noida
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Department of Applied Computational Science & Engineering

#i5{
background-color: gold;
}
.cart{
height: 20px;
width: 150px;
background-color: yellow;
border: 2px solid black;
border-radius: 20px ;
}
.icon{
background-color: rgb(0, 123, 255);
border: 1px solid black;
border-radius: 20px;
}
</style>
</head>

<body>
<div class="c1">
<div class="cc1" id="i0"><img class="i0" src="/HTML/logo.webp" alt=""></div>
<div class="cc1" id="i1"><b>GL BAJAJ INSTITUTE OF TECHNOLOGY AND
MANAGEMENT</b></div>
</div>
<div class="c2">
<div class="cc2" id="i2">HOME</div>
<div class="cc2" id="i3">LOGIN</div>
<div class="cc2" id="i4">REGISTRATION</div>
<div class="cc2" id="i5">CATALOGUE</div>
<div class="cc2" id="i6">CART</div>
</div>
<div class="c3">
<div class="cc3"
id="i7">CSE<br>&nbsp<br>ECE<br>&nbsp<br>EEE<br>&nbsp<br>CIVIL<br></div>
<div class="cc3" id="i7">
<div class="row">
<div class="book1"><img class="img1"
src="https://m.media-amazon.com/images/I/51519VP4QKL._AC_UF1000,1000_QL80_.jpg"
alt=""></div>
<div>Book: XML Bible<br>Author: Winston<br>Publication: Wiely</div>
<div>$40.5</div>
<div class="cart"><i class="fa-solid fa-cart-shopping icon"></i>ADD TO
CART</div>
</div>
<div class="row">
<div class="book2"><img class="img1" src="https://images-na.ssl-images-
amazon.com/images/S/compressed.photo.goodreads.com/books/1385600294i/27543.jpg"

Department of Applied Computational Science & Engineering

 [Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul

Grater Noida
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Department of Applied Computational Science & Engineering

alt=""></div>
<div>Book: AI<br>Author: S Russel<br>Publication: Princetonhall</div>
<div>$63</div>
<div class="cart"><i class="fa-solid fa-cart-shopping icon"></i>ADD TO
CART</div>
</div>
<div class="row">
<div class="book3"><img class="img1"
src="https://rukminim1.flixcart.com/image/300/300/book/1/0/2/web-enabled-commercial-
applications-development-using-java-2-original-imadyxxjpcxmhhna.jpeg" alt=""></div>
<div>Book: Java 2<br>Author: Watson<br>Publication: BPBpublication</div>
<div>$35.5</div>
<div class="cart"><i class="fa-solid fa-cart-shopping icon"></i>ADD TO
CART</div>
</div>
<div class="row">
<div class="book4"><img class="img1"
src="https://cdn.kobo.com/book-images/d8508530-b17e-4cb8-9832-
43ab34c228f6/1200/1200/False/html-and-css-in-24-hours-sams-teach-yourself.jpg"
alt=""></div>
<div>Book: HTML in 24 hours<br>Author: Sam peter<br>Publication:
Sampublication</div>
<div>$50</div>
<div class="cart"><i class="fa-solid fa-cart-shopping icon"></i>ADD TO
CART</div>
</div> </div></body></html>
OUTPUT:

PRACTICAL-4

Department of Applied Computational Science & Engineering

 [Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul

Grater Noida
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Department of Applied Computational Science & Engineering

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

Cart Page:A cart page is a section of an online shopping website where users can view and
manage the items they have selected for purchase before proceeding to checkout.

SOFTWARE REQUIRED: Notepad, SDK THEORY:

Theory:
CSS is primarily responsible for styling and layout, and it works in conjunction with HTML,
which defines the structure of a webpage. Tables in HTML are created using the <table>, <tr>
(table row), <th> (table header), and <td> (table data) tags. While CSS doesn't directly create
tables, it can be used to style and enhance them. Here's a short overview:
Styling Table Elements:
CSS is used to style the appearance of <table>, <tr>, <th>, and <td> elements, controlling
aspects like font, color, borders, and spacing.

Program:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<style>
.i0 {
width: 190px;
background-position: center;
background-size: cover;
}

#i1 {
font-size: 25px;
display: flex;
padding-left: 20px;
}

.c1 {
display: grid;
grid-template-columns: 200px 800px;
background-color: whitesmoke;
}

Department of Applied Computational Science & Engineering

 [Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul

Grater Noida
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Department of Applied Computational Science & Engineering

.cc1 {
height: 50px;
text-align: center;
align-items: center;
justify-content: center;
border: 2px solid black;
}

.c2 {

display: grid;
grid-template-columns: 200px 200px 200px 200px 200px;
}

.cc2 {
display: flex;
align-items: center;
text-align: center;
padding-left: 40px;
background-color: yellow;
height: 50px;
text-align: center;
border: 2px solid black;
}

.c3 {
display: grid;
grid-template-columns: 200px 800px;
}

.cc3 {
background-color: beige;
height: 150px;
text-align: center;
border: 2px solid black;
}

#i6 {
background-color: gold;
}

.table {
background-color: beige;
padding-left: 200px;
display: flex;
justify-content:space-between;
border: 2px solid black;

Department of Applied Computational Science & Engineering

 [Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul

Grater Noida
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Department of Applied Computational Science & Engineering

}
</style>
</head>

<body>
<div class="c1">
<div class="cc1" id=""><img class="i0" src="/HTML/logo.webp" alt=""></div>
<div class="cc1" id="i1"><b>GL BAJAJ INSTITUTE OG TECHNOLOGY AND
MANAGEMENT</b></div>
</div>
<div class="c2">
<div class="cc2" id="i2">HOME</div>
<div class="cc2" id="i3">LOGIN</div>
<div class="cc2" id="i4">REGISTRATION</div>
<div class="cc2" id="i5">CATALOGUE</div>
<div class="cc2" id="i6">CART</div>
</div>
<div class="c3">
<div class="cc3"
id="i7">CSE<br>&nbsp<br>ECE<br>&nbsp<br>EEE<br>&nbsp<br>CIVIL<br></div>
<div class="table">
<table>
<thead>
<tr>
<th>Book name</th>
<th>Price</th>
<th>Quality</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<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>1</td>
<td>$40.5</td>
</tr>
<tr>
<td>Total amount: </td>
<td>$130.5</td>
</tr>

Department of Applied Computational Science & Engineering

 [Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul

Grater Noida
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Department of Applied Computational Science & Engineering

</tbody>
</table>
</div>
</div>

</body>

</html>

OUTPUT:

PRACTICAL-5
AIM: Design the following static webpages required for an online book store website.

Cart Page:A cart page is a section of an online shopping website where users can view and
manage the items they have selected for purchase before proceeding to checkout.

Department of Applied Computational Science & Engineering

 [Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul

Grater Noida
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Department of Applied Computational Science & Engineering

SOFTWARE REQUIRED: Notepad, SDK THEORY:

Theory:
Text input: Allows users to enter a single line of text.
Password input: Similar to text input but hides the entered characters for password entry.
Textarea: Allows users to input multiple lines of text, suitable for longer responses.
Checkbox: Presents a binary choice, where users can either check or uncheck a box.
Radio button: Allows users to select one option from a group of options.
Dropdown menu (select): Provides a list of options, and users can select one from the
list.
File input: Enables users to upload files from their local device.
Submit button: Submits a form to the server for processing.
Reset button: Resets the form to its default state.
Number input: Allows users to enter a numeric value, with optional restrictions.
Date input: Allows users to pick a date from a date picker.
Email input: Specifically designed for entering email addresses.
URL input: Intended for entering website URLs.

PROGRAM:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<style>
.i0 {
width: 190px;
background-position: center;
background-size: cover;
}

#i1 {
font-size: 25px;
display: flex;
padding-left: 20px;
}

.c1 {

Department of Applied Computational Science & Engineering

 [Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul

Grater Noida
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Department of Applied Computational Science & Engineering

display: grid;
grid-template-columns: 200px 800px;
}

.cc1 {
height: 50px;
text-align: center;
align-items: center;
justify-content: center;
border: 2px solid black;
background-color: whitesmoke;
}

.c2 {

display: grid;
grid-template-columns: 200px 200px 200px 200px 200px;
}

.cc2 {
display: flex;
align-items: center;
text-align: center;
padding-left: 40px;
background-color: yellow;
height: 50px;
text-align: center;
border: 2px solid black;
}

.c3 {
display: grid;
grid-template-columns: 200px 800px;
}

.cc3 {
background-color: beige;
height: 350px;
text-align: center;
border: 2px solid black;
}

#i4 {
background-color: gold;
}
</style>
</head>

Department of Applied Computational Science & Engineering

 [Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul

Grater Noida
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Department of Applied Computational Science & Engineering

<body>
<div class="c1">
<div class="cc1" id=""><img class="i0" src="/HTML/logo.webp" alt=""></div>
<div class="cc1" id="i1"><b>GL BAJAJ INSTITUTE OG TECHNOLOGY AND
MANAGEMENT</b></div>
</div>
<div class="c2">
<div class="cc2" id="i2">HOME</div>
<div class="cc2" id="i3">LOGIN</div>
<div class="cc2" id="i4">REGISTRATION</div>
<div class="cc2" id="i5">CATALOGUE</div>
<div class="cc2" id="i6">CART</div>
</div>
<div class="c3">
<div class="cc3"
id="i7">CSE<br>&nbsp<br>ECE<br>&nbsp<br>EEE<br>&nbsp<br>CIVIL<br></div>
<div class="cc3"><b>REGISTRATION PAGE</b><br>&nbsp<br>
Email ID: <input type="text"><br>&nbsp<br>
Phone Number: <input type="text"><br>&nbsp<br>
Sex: Male<input type="radio" name="Sex">
Female<input type="radio" name="Sex"><br><br>
Date of Birth: <input type="date"><br><br>
Languages known: English<input type="checkbox">
Hindi<input type="checkbox">
Tamil<input type="checkbox">
Telugu<input type="checkbox"><br><br>
Address: <textarea name="text" id="" cols="30" rows="3"></textarea><br><br>
<input type="submit" value="SUBMIT">
<input type="reset" value="RESET">
</div>
</div>

</body>
</html>

OUTPUT:

Department of Applied Computational Science & Engineering

 [Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul

Grater Noida
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Department of Applied Computational Science & Engineering

Department of Applied Computational Science & Engineering