Scribd
Upload
23 views27 pages

WD File 18306

Uploaded by

anubhavlu114
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
23 views27 pages

WD File 18306

Uploaded by

anubhavlu114
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 27

Department of Computer Science and

Information Technology

DRONACHARYA GROUP OF INSTITUTIONS


Greater Noida

Web Development Workshop

Lab File
(2024-2025)
B.Tech CSIT(2nd Yr., 3rd Sem)

Submitted by: Submitted to:


NAME:HIMANSHU BISHT MS. JYOTI THAKUR
BRANCH: CSIT Asst. Professor
SECTION:G2A
ROLL NO: 18306
UNIVERSITY ROLL NO:2302300110045
INDEX
PRATIC SUBMISSI
S.NO. PRATICAL NAME -AL -ON DATE SIGNATURE REMARK
DATE
Design the static webpages required for
online bookstore website (homepage)
01.

Design the static webpages required for


02. online bookstore websites (login page)

Design the static webpages required for


03. online bookstore websites (catalogue
page)

Design the static webpages required for


04. online bookstore websites (cart page)

Design the static webpages required


05. for online bookstore websites
(registration page)
Js validation: write JavaScript to validate
06. the following field of the above
registration page.
Name
1. password
Js validation: write JavaScript to validate
07. the following field of the above
registration page.
3. E- mail id
4. phone number

Design a webpage using CSS which


include the following:
08. 1. Use different font, styles
2. Set a background image for both
the page and single elements on
the page.

Design a web page using CSS which


09. includes the following:
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
EXPERIMENT NO.01

OBJECTIVE: Design the following statics webpages required for an


online bookstore website.

HOMEPAGE:
1. The static home page must contain three frames.

2.TOP FRAME: Logo and the college name and links to homepage ,login page,
registration page, catalogue page and cart page(the description of these page 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 link in the left frame must be

Code:
<html>
<head>
</head>
<body>
<table border="5">
<center>
<tr bgcolor="cyan">
<td><center>logo</td>
<td colspan="4"> center>website name</td>
</tr>
<tr>
<td><center>home</td>
<td><center>login</td>
<td><center>registration</td>
<td><center>catalogue</td>
<td><center>cart</td>
</tr>
</center>
<tr>
<td rowspan="4">CSE<br>ECE<br>CIVIL<br>EEE</td>
<td rowspan="4",colspan="4"><center>Description of
Website</center></td>
</tr>
</table>
</body>
</html>

OUTPUT:
EXPERIMENT NO.02

OBJECTIVE: Login page

Code:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Document</title>

<style> table

{
border-collapse: collapse; border-

spacing:0px;
}

#first{

text-decoration: none;

</style>

</head>

<body>

<table border="5">

<center>

<tr bgcolor="sky blue">

<td><center>Logo</center></td>

<td colspan="4"><center>Website name</center></td>

<tr bgcolor="grey">

<td><center>Home</center></td>

<td><center><a id="first"
href="./Login.html">Login</a></center></td>

<td><center>Registration</center></td>

<td><center>Catalogue</center></td>

<td><center>Cart</center></td>

</tr>

</center>

<tr>
<td rowspan="4">CSE<br>ECE<br>CIVIL<br>EEE</td> <td

rowspan="4", colspan="4"><center> Login page: <div

class="container">

</tr>
</table>

</body>

</head>

</html>

FOR Login.html:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Document</title>

</head>

<body>

<table border="5">

<center>

<tr bgcolor="sky blue">


<td><center>Logo</center></td>

<td colspan="4"><center>Website name</center></td>

<tr bgcolor="grey">

<td><center>Home</center></td>

<td><center>Login</center></td>

<td><center>Login</center></td>

<td><center>Catalogue</center></td>

<td><center>Cart</center></td>
</tr>

</tr>

</center>

<tr>

<td rowspan="4">CSE<br>ECE<br>CIVIL<br>EEE</td>

<td rowspan="4",

colspan="4"><center> Login page: <div class="container">

<label for="uname"><b>Username</b></label>

<input type="text" placeholder="Enter Username" name="user name"


required><br>

<label for="psw"><b>Password</b></label>

<input type="password" placeholder="Enter Password" name="psw"


required><br>

<button type="submit">Login</button>
<label>

<input type="checkbox" checked="checked" name="remember">


Remember me

</label>

</div>

</center></td>

</tr>

</table>

</body>

</head>

</html>

OUTPUT:

For
OUTPUT:
For login.html :

Experiment No. 03
Objective: Design the following static webpages required for an online

bookstore website CATALOGUE 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.

This page looks like below:


Code :

For link.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Link</title>
<style> table {

border-collapse: collapse;

border-spacing: 2px;

border: 3px solid black;

}
table td, table th {

border: 2px solid black;

}
#first

{ text-decoration:

none

}
</style>
</head>
<body>
<table border="5">
<center>
<tr bgcolor="#f5a142">
<th bgcolor="#f5a142"><a href="https://imgbb.com/"><img
src="https://i.ibb.co/fxLxhQB/dron-resize.png" alt="dron-resize"
height="60" width="100"></a></th>
<td colspan="4"><center>Dronacharya Group of
Instituitions Book Store</center></td> <tr>
<tr bgcolor="yellow">
<td><center>Home</center></td>
<td><center>Login</center></td>
<td><center>Registration</center></td>
<td><center><a id="first"

href="./Catalogue.html">Catalogue</a></center></td>

<td><center>Cart</center></td>

</tr>
</center>
<tr>
<td
rowspan="4"><center>CSE<br>ECE<br>CIVIL<br>EEE</center></td>
<td rowspan="4" colspan="4"><center> Catalogue page: <div
class="container"></div></center></td>
</tr>
</table>
</body>
</html>

For Catalogue.html :
<IDOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Catalogue</title>
<style> table {

border-collapse: collapse;

border-spacing: 2px;

border: 3px solid black;

} table td, table th{

border: 2px solid black;

}
</style>
</head>
<body>
<table border="1", align="center">
<tr>
<th bgcolor="#f5a142"><a href="https://imgbb.com/"><img
src="https://i.ibb.co/fxLxhQB/dron-resize.png" alt="dron-resize"
height="100" width="150"></a></th>
<th colspan="4", bgcolor="#f5a142">Dronacharya Group of
Institutions Book Store</th>
</tr>
<tr>
<td bgcolor="#e6ca8a" border="0"><center><a
href="home.html">Home</a></center></td>
<td bgcolor="#e6ca8a"><center><a
href="login.html">Login</a></center></td>
<td bgcolor="#e6ca8a"><center>Registration</center></td>
<td bgcolor="#e6ca8a"><center><a

href="ap.html">Catalogue</a></center></td> <td
bgcolor="#e6ca8a"><center>Cart</center></td>

</tr>
<tr>
<td><center>CSE</center></td>
<td><a href="https://imgbb.com/"><img
src="https://i.ibb.co/6vZjxk9/xml-resize.jpg" alt="xml-resize"
border="0"></a></td>
<td>Book: XML Bible<br/>
Author: Winston<br/>
Publication: Wiely
</td>
<td><center>$40.5</center></td>
<td><a href="https://imgbb.com/"><img
src="https://i.ibb.co/82rHFvQ/Addto-Cartresize.jpg" alt="Addto-
Cart-resize" width="150" height="100"></a></td>
</tr>
<tr>
<td><center>ECE</center></td>
<td><a href="https://imgbb.com/"><img
src="https://i.ibb.co/37psP2C/dd-resize.jpg" alt="dd-resize"
border="0"></a></td>
<td>Book: Digital Design<br/>
Author: Moris M Mano & Michael D Ciletti<br/>
Publication: Pearson
</td>
<td><center>$37</center></td>
<td><a href="https://imgbb.com/"><img
src="https://i.ibb.co/82rHFvQ/Addto-Cartresize.jpg" alt="Addto-Cart-
resize" width="150" height="100"></a></td>
</tr>
<tr>
<td><center>EEE</center></td>
<td><a href="https://imgbb.com/"><img
src="https://i.ibb.co/1KvKnm1/eee-resize.jpg" alt="eee-resize"
border="0"></a></td>
<td>Book: Electonics and Electrical Engineering: Principles
and Practice<br/>
Author: Lionel Warnes<br/>
Publication: NA
</td>
<td><center>$35</center></td>
<td><a href="https://imgbb.com/"><img
src="https://i.ibb.co/82rHFvQ/Addto-Cartresize.jpg" alt="Addto-Cart-
resize" width="150" height="100"></a></td>
</tr>
<tr>
<td><center>CIVIL</center></td>
<td><a href="https://imgbb.com/"><img
src="https://i.ibb.co/DKRcs4p/ce-resize.jpg" alt="ce-resize"
border="0"></a></td>
<td>Book: Basics of Civil Engineering<br/>
Author: Er. Shrikrishna A. Dhale & Er. Kiran M. Tajne<br/>
Publication: S Chand
</td>
<td><center>$25</center></td>
<td><a href="https://imgbb.com/"><img
src="https://i.ibb.co/82rHFvQ/Addto-Cartresize.jpg" alt="Addto-Cart-
resize" width="150" height="100"></a></td>
</tr>
</table>
</body>
</html>
Output
For link.html :

For catalogue.html :
Experiment No. 04

Objective: Design the following static webpages required for an online


bookstore website
CART PAGE:
The cart page contains the details about the books which are added to the
cart.
The cart page should look like this:

Code :
For Link.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>Link</title>
<style> table {
border-collapse: collapse;
border-spacing: 0px;
border: 3px solid black;
}
table td, table th{
border: 2px solid black;
}
#first {
text-decoration: none;
}
</style>
</head>
<body>
<table border="5">
<tr bgcolor="#f5a142">
<th bgcolor="#f5a142"><a href="https://imgbb.com/"><img
src="https://i.ibb.co/fxLxhQB/dron-resize.png" alt="dron-resize"
height="60" width="100"></a></th>
<td colspan="4">
<center>
Dronacharya Group of Instituitions Book Store
</center>
</td>

</tr>
<tr bgcolor="yellow">
<td><center>Home</center></td>
<td><center>Login</center></td>
<td><center>Registration</center></td>
<td>
<center><a id="cart" href="./cart.html">Cart</a></center>
</td>
<td><center>Cart</center></td>
</tr>
<tr>
<td rowspan="4"><center>CSE<br />ECE<br />CIVIL<br
/>EEE</center></td>
<td rowspan="4" colspan="4">
<center>Cart page:<div
class="container"></div></center>
</td>
</tr>
</table>
</body>
</html>
For Cart.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>Cart</title>
<style> .Mtable{
border-collapse: collapse;
border-spacing: 0px;
border: 4px solid black;
}
.Itable{
border: 2px solid
black; border-
collapse: collapse;
border-spacing: 0px;
}
#first
{ text-decoration:
none;
}
tbody td,
tfoot td { text-align:
left;

padding: 5px;
}
</style>
</head>
<body>
<table class="Mtable" border="5">
<tr bgcolor="#f5a142">
<th bgcolor="#f5a142"><a href="https://imgbb.com/"><img
src="https://i.ibb.co/fxLxhQB/dron-resize.png" alt="dron-resize"
height="60" width="100"></a></th>
<td colspan="4">
<center>
Dronacharya Group of Institutions Book Store
</center>
</td>
</tr>
<tr bgcolor="yellow">
<td><center>Home</center></td>
<td><center>Login</center></td>
<td><center>Registration</center></td>
<td><center>Cart</center></td>
</tr>
<tr>
<td rowspan="4"><center>CSE<br />ECE<br />CIVIL<br
/>EEE</center></td>
<td rowspan="4" colspan="4">
<center>
<table class="Itable" border="1" cellpadding="">
<thead>
<th>Book name</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</thead>
<tbody>
<tr>
<td>Fun with HTML</td>
<td>$40</td>
<td>1</td>
<td>$40</td>
</tr>
<tr>
<td>Learn c</td>
<td>$30</td>
<td>2</td>
<td>$60</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">Total Amount</th>
<td>$100</td>
</tr>
</tfoot>
</table>
<div class="container"></div>
</center>
</td>
</tr>
</table>
</body>
</html>

Output
For link.html :
For cart.html :

You might also like