Scribd
Upload
4 views

Web Developement File newwww

The document outlines the design and code for various static web pages for an online bookstore, including the main page, logo page, website name page, home page, login page, registration page, catalogue page, cart page, departments page, and description page. Each page is structured using HTML and styled with CSS, showcasing elements like frames, images, and forms. The document also includes a login page for an e-commerce website and specific catalogue pages for different academic disciplines.

Uploaded by

Deepak Upadhyay
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Web Developement File newwww

The document outlines the design and code for various static web pages for an online bookstore, including the main page, logo page, website name page, home page, login page, registration page, catalogue page, cart page, departments page, and description page. Each page is structured using HTML and styled with CSS, showcasing elements like frames, images, and forms. The document also includes a login page for an e-commerce website and specific catalogue pages for different academic disciplines.

Uploaded by

Deepak Upadhyay
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 45

Experiment No.

- 1

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

Code :

Main Page :

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Document</title>
</head>
<frameset rows = “20%,10%,70%” bordercolor=”black” >
<frameset cols=”20%,80%” bordercolor=”black”>
<frame src=”logo.html”>
<frame src=”websitename.html”>
</frameset>
<frameset cols=”20%,20%,20%,20%,20%” bordercolor=”black”>
<frame src=”home.html”>
<frame src=”login.html” >
<frame src=”registration.html”>
<frame src=”1atalogue.html”>
<frame src=”cart.html”>
</frameset>
<frameset cols=”20%,80%” bordercolor=”black”>
<frame src=”departments.html”>
<frame src=”description.html” name=”main” name=”login”>
</frameset>
</frameset>
</html>

Logo Page :

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Document</title>
<style>
body
{
margin-left: 20%;
background-color: rgb(253, 193, 140);

}
</style>
</head>
<body>
1
<img src=”https://cdn.freebiesupply.com/logos/large/2x/ebook-logo-png-transparent.png”
width=”150px” height=”150px”>
</body>
</html>

Website name Page :

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Document</title>
<style>
body
{
background-color: rgb(253, 193, 140);
font-family: ‘Times New Roman’, Times, serif;
font-size: 80px;
margin-top: 45px;
}
</style>
</head>
<body>
<center><b>E-Book Mart</b></center>
</body>
</html>

Home Page :

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Document</title>
<style>
a{
text-decoration: none;
color: black;
}
body
{
font-family: Cambria, Cochin, Georgia, Times, ‘Times New Roman’, serif;
font-size:42px;
margin-top: 20px;
background-color: rgb(255, 223, 182);
}
2
a:hover
{
text-decoration: underline;
color: rgb(94, 94, 94);;
}

</style>
</head>
<body>
<center>
<a href=”description.html” target=”main”>Home</a>
</center>

</body>
</html>

Login Page :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{
text-decoration: none;
color: black;
}
body
{
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size:42px;
margin-top: 20px;
background-color: rgb(255, 223, 182);
}
a:hover
{
color:rgb(94, 94, 94);
text-decoration: underline;
}
</style>
</head>
<body>

Registration Page :

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>

3
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Document</title>
<style>
body
{
font-family: Cambria, Cochin, Georgia, Times, ‘Times New Roman’, serif;
font-size:42px;
margin-top: 20px;
background-color: rgb(255, 223, 182);
}
.abc:hover
{
color: rgb(94, 94, 94);
text-decoration: underline;
}

</style>
</head>
<body>
<div class=abc><center>Registration</center></div>
</body>
</html>

<center><a href=”signin.html” target=”main”>Login</a></center>


</body>
</html>

Catalogue Page :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body
{
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size:42px;
margin-top: 20px;
background-color: rgb(255, 223, 182);
}
.abc:hover
{
color: rgb(94, 94, 94);
text-decoration: underline;
}
</style>
</head>
<body>
4
<div class=abc><center>Catalouge</center></div>
</body>
</html>
Cart Page :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body
{
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size:42px;
margin-top: 20px;
background-color: rgb(255, 223, 182);
}
body:hover
{
text-decoration: underline;
color: rgb(94, 94, 94);;
}
</style>
</head>
<body>
<center>Cart</center>
</body>
</html>

Departments Page :

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Document</title>

</head>
<style>
a{
text-decoration: none;
color: black;
font-size: xx-large;

}
body
{
background-color: rgb(255, 223, 182);
5
}
a:hover
{
text-decoration: underline;
color: rgb(94, 94, 94);
}
</style>
<body>
<center>

<br>
<div class=”box” ><a href=”cse.html” target=”main”>CSE</a></div><br><br>
<div class=”box”><a href=”ece.html” target=”main”>ECE</a></div><br><br>
<div class=”box”><a href=”eee.html” target=”main”>EEE</a></div><br><br>
<div class=”box”><a href=”civil.html” target=”main”>Civil</a></div><br><br>
</center>
</body>
</html>

Description Page :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.des{
font-size: x-large;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode',
Geneva, Verdana, sans-serif;
margin-left: 5%;
margin-right: 5%;
}
body
{
background-color: rgb(252, 200, 131);
}
</style>
</head>
<body>
<center><h1><u>Welcome to the E-Book Mart</u></h1></center>
<p class="des">
This store is simply an online bookstore from where one can download eBooks into eBook
readers.
A publisher can sell eBooks that are already on sale online through affiliate programs offered by
booksellers
like Amazon, Barnes & Noble and Google Books, or they can launch their own eBook store.
</p>
</body>
</html>
6
Output :

7
Experiment No.- 2

Design the login page required for an E-commerce website.

Code :

Sign-in Page :

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Document</title>
<style>
body
{
margin-left: 25%;
margin-top: 12%;
width: 50%;
height: 70%;
background-color: rgb(252, 200, 131);

}
.loghead
{
font-size: xx-large;
text-align: center;
}
.entries
{
font-size: x-large;
margin-left: 5%;
margin-left: 150px;

}
.button
{

padding-left: 15%;
margin-left: 80px;
margin-top: 20px;
margin-bottom: 20px;
}
.btn
{
border: none;
margin-left: 30px;
font-size: 20px;
border-radius: 10px;

}
8
.btn:hover
{
text-decoration:underline;
background-color: rgba(255, 0, 0, 0.596);
}
.sqr
{
background-color: rgba(255, 0, 111, 0.394);
border-radius: 30px;
width: 100%;
height: 50%;
}
</style>
</head>
<body>
<div class=”sqr”>
<div class=”loghead”>
<h1>Login Page</h1>
</div>
<form>
<nav class=”entries”>
Username : <input type=”text” placeholder=”Username” required><br><br>
Password : <input type=”password” placeholder=”Password”>
</nav>
<br>
<div class=”button”>
<button class=”btn”>Submit</button>
<button class=”btn”>Reset</button>
</div>
</form>
</div>
</body>
</html>

9
Output :

10
Experiment No.- 3

Design the catalogue page required for an online book store website.

Code :

CSE Page :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body
{
background-color: rgb(252, 200, 131);
}
</style>
</head>
<body>
<table cellspacing="10px">
<tr>
<td ><img src="https://5.imimg.com/data5/CL/EP/GLADMIN-4755675/computer-science-
500x500.png" height="40%" width="45%"></td>
</tr>
<tr>
<td>Cambridge IGCSE</td>
</tr>
<tr>
<td>400 Rs</td>
</tr>
<tr>
<td>350 Pages</td>
</tr>
</table>
</body>
</html>

ECE Page :

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Document</title>
<style>
body
{
background-color:rgb(252, 200, 131);
}
11
</style>
</head>
<body>
<table cellspacing=”10px”>
<tr>
<td ><img src=”https://m.media-
amazon.com/images/I/71ZYGPjw5ML._AC_UF1000,1000_QL80_.jpg” height=”25%”
width=”30%”></td>
</tr>
<tr>
<td>Handbook</td>
</tr>
<tr>
<td>350 Rs</td>
</tr>
<tr>
<td>300 Pages</td>
</tr>
</table>
</body>
</html>

EEE Page :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body
{
background-color: rgb(252, 200, 131);
}
</style>
</head>
<body>
<table cellspacing="10px">
<tr>
<td ><img src="https://m.media-amazon.com/images/I/5169HHBiz5L.jpg" height="40%"
width="45%"></td>
</tr>
<tr>
<td>Electrical Engineering</td>
</tr>
<tr>
<td>500 Rs</td>
</tr>
<tr>
<td>450 Pages</td>
</tr>
</table>
</body>
12
</html>

Civil Page :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body
{
background-color: rgb(252, 200, 131);
}
</style>
</head>
<body>
<table cellspacing="10px">
<tr>
<td ><img src="https://m.media-
amazon.com/images/I/61ya79uhM5L._AC_UF1000,1000_QL80_.jpg" height="20%"
width="25%"></td>
</tr>
<tr>
<td>Basic Civil</td>
</tr>
<tr>
<td>500 Rs</td>
</tr>
<tr>
<td>350 Pages</td>
</tr>
</table>
</body>
</html>

13
Output:

14
15
16
Experiment No.- 4

Design the cart page required for an online book store website.

Code :

Main Page :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<frameset rows = "20%,10%,70%" bordercolor="black" >
<frameset cols="20%,80%" bordercolor="black">
<frame src="logo.html">
<frame src="websitename.html">
</frameset>
<frameset cols="20%,20%,20%,20%,20%" bordercolor="black">
<frame src="home.html">
<frame src="login.html" >
<frame src="registration.html">
<frame src="catalouge.html">
<frame src="cart.html">
</frameset>
<frameset cols="20%,80%" bordercolor="black">
<frame src="departments.html">
<frame src="description.html" name="main" name="login">
</frameset>
</frameset>
<body>

</body>
</html>

Cart Page :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{
text-decoration: none;
color: black;
}
body
{
17
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size:42px;
margin-top: 20px;
background-color: rgb(255, 223, 182);
}
a:hover
{
color:rgb(94, 94, 94);
text-decoration: underline;
}
</style>
</head>
<body>
<center><a href="shopping.html" target="main">Cart</a></center>
</body>
</html>

Shopping Page :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table
{
border: 80%;
}
body
{
margin-top: 10%;
background-color: rgb(252, 200, 131);
}
td
{
border-top: none;
border-bottom: none;
}
</style>
</head>
<body>
<table align="center" cellpadding="30" cellspacing="0" border="black">
<tr>
<th>Sr no.</th>
<th>Book Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
<tr>
<td>1</td>
<td>Java 2</td>

18
<td>$35.5</td>
<td>2</td>
<td>$70</td>
</tr>
<tr>
<td>2</td>
<td>XML</td>
<td>$40.5</td>
<td>1</td>
<td>$40.5</td>
</tr>
<tr>
<th colspan="3">Total Amount</th>
<th colspan="2">$130.5</th>
</tr>

</table>
</body>
</html>

19
Output:

20
Experiment No.- 5

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)

Code :

Main Page :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<frameset rows = "20%,10%,70%" bordercolor="black" >
<frameset cols="20%,80%" bordercolor="black">
<frame src="logo.html">
<frame src="websitename.html">
</frameset>
<frameset cols="20%,20%,20%,20%,20%" bordercolor="black">
<frame src="home.html">
<frame src="login.html" >
<frame src="registration.html">
<frame src="catalouge.html">
<frame src="cart.html">
</frameset>
<frameset cols="20%,80%" bordercolor="black">
<frame src="departments.html">
<frame src="description.html" name="main" name="login">
</frameset>
</frameset>
<body>
</body>
</html>

Registration Page :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
21
<style>
body
{
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size:42px;
margin-top: 20px;
background-color: rgb(255, 223, 182);
}
a{
text-decoration: none;
color: black;
}
a:hover
{
color:rgb(94, 94, 94);
text-decoration: underline;
}

</style>
</head>
<body>
<div class=abc><center><a href="form.html" target="main">Registration</a></center></div>
</body>
</html>

Form Page :

!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>
<style>
body
{
margin-left: 10%;
margin-top: 0.25%;
width: 50%;
height: 70%;
background-color: rgb(252, 200, 131);
}
.sqr
{
background-color: rgba(255, 0, 111, 0.394);
border-radius: 30px;
width: 900px;
height: 50%;
margin-left: 20px;
}
.pts
{
margin-left: 20px;
}
.txt
22
{
font-size: x-large;
margin-left: 30px;
}
.des
{
margin-left: 60px;

}
input[name=name]
{
border-radius: 8px;
padding: 12px;
width: 33.5%;
background-color: rgb(253, 234, 208);
}
input[name=brt]
{
border-radius: 8px;
padding: 12px;
width: 8.75%;
background-color: rgb(253, 234, 208);
}
input[name=fst]
{
border-radius: 8px;
padding: 12px;
width: 15%;
background-color: rgb(253, 234, 208);
}
input[name=des]
{
border-radius: 8px;
padding: 12px;
width: 50%;
background-color: rgb(252, 243, 232);
}
label
{
display: inline-block;
width: 350px;
margin: 0.2cm;

}
.head
{
font-size: xx-large;
text-align: center;
}
.button
{

padding-left: 15%;
margin-left: 50px;
23
margin-top: 20px;
margin-bottom: 20px;
}
.btn
{
border: none;
margin-left: 30px;
font-size: 20px;
border-radius: 10px;
width: 500px;
height: 35px;

}
.btn:hover
{
text-decoration:underline;
background-color: rgba(255, 0, 0, 0.596);
}
</style>
</head>
<body>
<div class="sqr">
<div class="head"><h1>Registration Form</h1></div><br>
<label for="name"><span class="txt" float="left">Name :</span></label><span
class="box"><input type="text" name="fst" placeholder="First Name"> <input type="text"
name="fst" placeholder="Last Name"></span><br><br>
<label><span class="txt" float="left">Password :</span></label><span class="box"><input
type="password" name="name" placeholder="Password"></span><br><br>
<label><span class="txt" float="left">Email :</span></label><span class="box"><input
type="text" name="name" placeholder="[email protected]"></span><br><br>
<label><span class="txt" float="left">Sex :</span></label>
<span class="txt" class="pts"><input type="radio" name="Male" >Male
<span class="txt" class="pts"><input type="radio" name="Female" >Female<br><br>
<label><span class="txt" float="left">Phone Number :</span></label><span
class="box"><input type="text" name="name" placeholder="+91-
XXXXXXXXXX"></span><br><br>
<label for="name"><span class="txt" float="left">Date Of Birth :</span></label><span
class="box"><input type="text" name="brt" placeholder="Date"> <input type="text" name="brt"
placeholder="Month"> <input type="text" name="brt" placeholder="Year"></span><br><br>
<label><span class="txt" float="left">Language Known :</span></label>
<span class="txt" class="pts"><input type="radio" name="English" >English
<span class="txt" class="pts"><input type="radio" name="Telugu" >Telugu
<span class="txt" class="pts"><input type="radio" name="Hindi" >Hindi
<span class="txt" class="pts"><input type="radio" name="Tamil" >Tamil<br><br>
<label><span class="txt" float="left">Address :</span></label><span class="box"><input
type="text" name="name"></span><br><br><br>
<div class="button">
<button class="btn">Register</button>
</div>
</div>
</body>
</html>

24
Output:

25
26
Experiment No. – 6

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

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() {
// Get input values
var name = document.getElementById('name').value;
var password = document.getElementById('password').value;
// Validate Name
if (!validateName(name)) {
alert('Name should contain alphabets and have a minimum length of characters.');
return false;
}
// Validate Password
if (password.length < 6) {
alert('Password should be at least 6 characters long.');
return false;
}
// Form is valid
alert('Registration successful!');
return true;
}
function validateName(name) {
// Check if the name contains only alphabets and has a minimum length of 6 characters
var regex = /^[a-zA-Z]{6,}$/;
return regex.test(name);
}
</script>
<style>
body{
background-color: rgb(65, 119, 106);
text-align: center;
margin-top: 150px;
}
</style>
</head>
<body>
<form onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
27
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br>
<input type="submit" value="Register">
</form>
</body>
</html>

Output:

28
29
Experiment No- 7

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

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() {
// Get input values
var email = document.getElementById('email').value;
var phoneNumber = document.getElementById('phone').value;
// Validate Email
if (!validateEmail(email)) {
alert('Invalid email address. Please enter a valid email.');
return false;
}
// Validate Phone Number
if (!validatePhoneNumber(phoneNumber)) {
alert('Phone number should contain 10 digits only.');
return false;
}
// Form is valid
alert('Registration successful!');
return true;
}
function validateEmail(email) {
// Check if the email follows the standard pattern
var regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return regex.test(email);
}
function validatePhoneNumber(phoneNumber) {
// Check if the phone number contains exactly 10 digits
var regex = /^\d{10}$/;
return regex.test(phoneNumber);
}
</script>
<style>
body{
background-color: rgb(65, 119, 106);
text-align: center;
margin-top: 150px;
}
</style>
</head>

30
<body>
<form onsubmit="return validateForm()">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br><br>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required>
<br><br>
<input type="submit" value="Register">
</form>
</body>
</html>

Output:

31
32
Experiment No- 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.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inline css</title>
</head>
<link href="style.css" rel="stylesheet" type="css/text">
<style>
.hut{
font-family:cursive;
font-size: large;
background-color: grey;
border:solid;
border-radius: 20px;
border-color:black;
display: flex;
justify-content: center;
}
</style>
<body style="background-image:url(https://www.splitshire.com/wp-
content/uploads/2014/11/SplitShire-03692-1800x1200.jpg)">
<h1 style="font-family:cursive; background-color:grey; border:solid; border-radius:20px;
border-color:black;"><center>Survey Form</center></h1>
<div class="hut">
<div class="info">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" value="John"><br><br>
<div class="infolast">
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
</div>
<div class="infolas">
<label for="lname">Email address:</label>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
</div>
<div class="infolas">
<label for="lname">Phone no:</label>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
</div>
<div class="infolas">
33
<label for="lname">Service address:</label>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
</div>
<div class="infolas">
<label for="lname">How likely you ll use the service again in future:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
</div>
<h2>Rate the following criteria for service excellence</h2>
<table>
<th>
<td colspan="2">Poor</td><td></td>
<td colspan="2">Satisfactory</td><td></td>
<td colspan="2">Good</td><td></td>
<td colspan="2">Excellent</td><td></td>
</th>
<br>
<tr>
<td colspan="2">Timelines</td><td></td>
<td colspan="2"><input type="checkbox"></td><td></td>
<td colspan="2"><input type="checkbox"></td><td></td>
<td colspan="2"><input type="checkbox"></td><td></td>
<td colspan="2"><input type="checkbox"></td><td></td>
</tr>
<tr>
<td colspan="2">Personalization</td><td></td>
<td colspan="2"><input type="checkbox"></td><td></td>
<td colspan="2"><input type="checkbox"></td><td></td>
<td colspan="2"><input type="checkbox"></td><td></td>
<td colspan="2"><input type="checkbox"></td><td></td>
</tr>
<tr>
<td colspan="2">Problem-solving</td><td></td>
<td colspan="2"><input type="checkbox"></td><td></td>
<td colspan="2"><input type="checkbox"></td><td></td>
<td colspan="2"><input type="checkbox"></td><td></td>
<td colspan="2"><input type="checkbox"></td><td></td>
</tr>
</table>
<br>
<input type="submit" value="Submit" align="center">
</div>
</div>
</body>
</html>

34
Output:

35
Experiment No.-9

Design a Web Page using CSS of the college website for the following
controls: 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

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>College Website</title>
<style>
body {
font-family: 'Lato', sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
background-image: url('https://images.unsplash.com/photo-1695664223145-
58fb4b3f5e95?w=500&auto=format&fit=crop&q=60&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fH
x8');
background-size: cover;
background-repeat: no-repeat;
background-color: #0000004d;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.wrapper {
flex: 1;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 30px;
border-bottom: 2px solid #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
27.h1 {
font-family: 'Roboto', sans-serif;
font-size: 36px;
margin: 0;
}
nav ul {
36
list-style-type: none;
margin: 20px 0 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 40px;
}
nav a {
color: #fff;
text-decoration: none;
font-weight: bold;
transition: color 0.3s ease;
}
nav a:hover {
color: orchid;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
nav a:active{
color: red;
}
.btn:visited{
color: green;
}
.abc:link{
color: bisque;
}
.main-content {
max-width: 800px;
margin: 80px auto;
padding: 40px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 5px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<header>
<nav>
<ul>
28.<li><a href="#" class="abc">Home</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Admissions</a></li>
<li><a href="#">Academics</a></li>
<li><a href="#">Placement</a></li>
<li><a href="#">About Us</a></li>
</ul>
</nav>
</header>
<section class="main-content">
<h2>Welcome to Our College Website</h2>
<p>Explore the opportunities and academic programs we offer.</p>
<a href="#" class="btn">Learn More</a>
</section>
37
</body>
</html>

Output:

38
Experiment No.-10

Develop static Webpages and try to implement all topics of html, CSS and Js
within the topic.
To-do list

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f1ae3b;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
h2{
text-align: center;
}
#todo-container {
background-color: #fff;
width: 300px;
padding: 20px;
border-radius: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

ul {
list-style-type: none;
padding: 0;
}
li {
margin: 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ddd;
padding: 8px;
}
.task-text {
flex-grow: 1;
39
}
button {
background-color: #e74c3c;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #c0392b;
}
</style>
</head>

<body>
<div id="todo-container">
<h2>To-Do List</h2>
<input type="text" id="taskInput" placeholder="New Task">
<button onclick="addTask()">Add Task</button>

<ul id="taskList">
<!-- Tasks will be dynamically added here -->
</ul>
</div>

<script>
function addTask() {
var taskInput = document.getElementById("taskInput");
var taskList = document.getElementById("taskList");

if (taskInput.value.trim() === "") {


alert("Please enter a task.");
return;
}

var li = document.createElement("li");
var span = document.createElement("span");
span.className = "task-text";
span.appendChild(document.createTextNode(taskInput.value));

var deleteButton = document.createElement("button");


deleteButton.appendChild(document.createTextNode("Delete"));
deleteButton.onclick = function () {
li.remove();
};

li.appendChild(span);
li.appendChild(deleteButton);

taskList.appendChild(li);

40
// Clear the input field
taskInput.value = "";
}
</script>
</body>
</html>

Output:

41
Experiment No. - 11

Create a HTML form that has number of Textboxes. When the forms
runs in the Browser fill the textboxes with data. Write JavaScript
code that verifies that all textboxes has been filled. If a textbox has
been left empty, popup an alert indicating which textbox has been left
empty.

Code:

<html>
<head>
<title>Form</title>
<style>
body{ background-color: aliceblue;}
.btn{ margin-left: 47%;
background-color: black;
color:white;
padding:4px 14px;
font-size: 20px;
cursor: pointer;
font-family: 'Baloo Bhai';
border: 2px solid white;
border-radius: 8px;}
.btn:hover{ background-color:black;}
form{ margin-top: 60px;}
.form-group input{
text-align: center;
display: block;
width: 304px;
padding: 1px;
border: 2px solid black;
margin: 7px auto;
font-size: 25px;
border-radius: 8px;
font-family: 'Baloo Bhai';}
</style>
<script type = "text/javascript">
function check() {if(document.te.Name.value == "")
{alert("Please Provide Your Name");
document.te.Name.focus();
return false;}
if(document.te.Age.value == ""){
alert("Please Provide Your Age");
document.te.Age.focus();
return false;}
34.if(document.te.Gender.value == ""){
alert("Please Provide Your Gender");
document.te.Gender.focus();
return false;}
if(document.te.Locality.value == ""){
alert("Please Provide Your Locality");
document.te.Locality.focus();
42
return false;}
return true;}
</script>
</head>
<body >
<h1><center>FORM</center></h1>
<form name = "te" onsubmit = "return(check());" >
<div class="form-group">
<input type="text" name="Name" placeholder="Enter your name"></div>
<div class="form-group">
<input type="text" name="Age" placeholder="Enter your Age">
</div>
<div class="form-group">
<input type="text" name="Gender" placeholder="Enter your Gender"></div>
<div class="form-group">
<input type="text" name="Locality" placeholder="Enter your Locality">
</div>
<button class="btn">submit</button>
</form>
</body>
</html>

Output:

43
Experiment No. - 12

Write a JavaScript code to find factorial of N. (Use recursive function).

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function factorial(x) {
if (x == 0) {
return 1;
}
else {
return x * factorial(x - 1);
}
}
const num = prompt('Enter a positive number: ');
if (num >= 0) {
const result = factorial(num);
document.write(`<h1><center>The factorial of ${num} is ${result}
</h1></center>`);
}
else {
alert("Enter a positive number");
}
</script>
</body>
</html>

44
Output:

45

You might also like