Scribd
Upload
7 views42 pages

WD File

The document outlines a web designing workshop for B.Tech students at NITRA Technical Campus, detailing various experiments including the creation of static web pages such as Home, Login, Catalogue, Cart, and Registration pages. Each experiment includes HTML code examples and descriptions of the required functionalities for an online bookstore website. Additionally, it covers CSS styling and JavaScript validation for form inputs.

Uploaded by

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

WD File

The document outlines a web designing workshop for B.Tech students at NITRA Technical Campus, detailing various experiments including the creation of static web pages such as Home, Login, Catalogue, Cart, and Registration pages. Each experiment includes HTML code examples and descriptions of the required functionalities for an online bookstore website. Additionally, it covers CSS styling and JavaScript validation for form inputs.

Uploaded by

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

NITRA TECHNICAL CAMPUS

Name : AMIT RAI Type equation here. Roll No : 2308020100014

Subject : Web Designing Workshop Code: BCS353

INDEX Course/Branch/Semester: B.Tech, CSE ,III Sec: A

S. Experiment/Topic Page Date Signature


No. No.

1 Home Page 2 18-09-2024

2 Login Page 7 25-09-2024

3 Catalogue Page 9 23-10-2024

4 Cart Page 12 06-11-2024

5 Registration Page 14 13-11-2024

6 CSS: Design a web page 17 20-11-2024

7 CSS: link, visited, hover, active 22 27-11-2024

8 Js VALIDATION: Name, Password 25 04-12-2024

9 Js VALIDATION: Email, Phone number 31 11-12-2024

10 Survay Form 34 18-12-2024

11 Project snapshot 41 27-12-2024

1
Experiment No. -1
Design the following static web pages required for an online books store website.
HOMEPAGE: The static home page must contain three frames.

Top frame: Logo and the college name and links to Homepage, Logig 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.

Code :-
File: index.html
<!DOCTYPE html>
<html>
<head>
<title>NITRA Book Store</title>
</head>
<frameset rows="113,*" noresize>
<frame src="header.html" />
<frameset cols="15%,85%">
<frame src="nav.html" />
<frame src="welcome.html" name="content" />
</frameset>
</frameset>
</html>

File: header.html
<!DOCTYPE html>
<html>
<body>
<tabl
<tr>
2
<td><a href="eventlogo.html" target="content"><img src="image/logo.png" alt="Logo"
width="70"
height="70" /></a></td>
<td>
<h1>NITRA - Online Books Store</h1>
</td>
<td class="searchbox">
<input type="text" , id="search_box" , placeholder="Search Books">
<button type="Search" id="search_button"> <img src="image/search.svg" alt="">
</button>
</td>
<td>
<div class="profile">
<label for="username">Guest</label>
<img src="image/profile.png" alt="" width="30px" ,height="30px">
</div>
</td>
</tr>
</table>
<table class="navbar" width="100%" border="0">
<tr>
<td><a href="welcome.html" target="content">Home</a></td>
<td><a href="login.html" target="content">Login</a></td>
<td><a href="registration.html" target="content">Registration</a></td>
<td><a href="catalogue.html" target="content">Catalogue</a></td>
<td><a href="cart.html" target="content">Cart</a></td>
</tr>
</table>
</body>
</html>

3
File: nav.html
<!DOCTYPE html>
<html>
<body>
<div class="section1">
<h2>Departments</h2>
<ul>
<li><a href="catalogue.html#CSE" target="content">CSE</a></li>
<li><a href="catalogue.html#ECE" target="content">ECE</a></li>
<li><a href="catalogue.html#EEE" target="content">EEE</a></li>
<li><a href="catalogue.html#Civil" target="content">CIVIL</a></li>
</ul>
</div>
<div>
<h4><a href="survay _form.html" target="content">Feedback</a></h4>
<h5><a href="https://nitra.ac.in/" target="content">About</a></h5>
</div>
</body>
</html>

File: welcome.html
<!DOCTYPE html>
<html>

<body id="book-list">
<div>
<ul>
<li><img src="image/Book-4.jpg" alt=""></li>
<li>Java</li>
<li>Dr.Gaurav </li>
4
<li>Publisher</li>
<li>₹1200</li>
<li><button class="addbutton"><img src="image/cart.svg" alt="">Add to
cart</button></li>
</ul>
</div>

<!-- Add more -->

</body>

</html>

5
Output:

6
Experiment No. 2
LOGINPAGE:
This page look like below:
Login Page
User Name:
Password:

Code:
File: login.html
<!DOCTYPE html>
<html>
<body>
<div>
<h2>Login Page</h2>
<form id="login">
<label for="username">User Name:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<input type="submit" value="Login">
<input type="reset" value="Reset">
</form>
</div>
</body>

</html>

7
Output:

8
Experiment No. 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:
i. Snap shot of Cover Page
ii. Author Name
iii. Publisher
iv. Price
v. Add to cart button

Code:
File: catalogue.html
<!DOCTYPE html>
<html>

<body>
<h2>Catalogue Page</h2>
<table>
<tr id="cse">
<th colspan="6">CSE Department</th>
</tr>
<tr>
<th>Snap Shot</th>
<th>Book Name</th>
<th>Author Name</th>
<th>Publisher</th>
<th>Price</th>
<th>Add to cart</th>
</tr>
<tr>
<td><img src="image/Book-1.jpg" alt="Book-CSE"
style="width:100px;height:150px;"></td>
<td>Python Programing</td>
9
<td>Dr. Kavita Mittal</td>
<td>Dhanpat Rai Co</td>
<td>Rs 699</td>
<td><button class="addbutton"><img src="image/cart.svg" alt="">Add to
cart</button></td>
</tr>

<!-- Add more rows for other books -->


</table>
</body>

</html>

10
Output:

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

Code:
File: cart.html
<!DOCTYPE html>
<html>

<body>
<h2>Your Cart</h2>
<table>
<thead>
<tr>
<th>Book</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="image/Book-1.jpg" alt="Book-CSE"
style="width:50px;height:70px;"><br>Python</br></td>
<td>3</td>
<td>₹2550</td>
</tr>
</tbody>
</table>

<h3>Total Amount: 0</h3>

12
<button>Proceed to Checkout</button>
</body>

</html>

Output:

13
Experiment No. 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. Language known(checkboxes- English, Telgu, Hindi, Tamil)
8. Address(text area)

Code:
File: registration.html
<!DOCTYPE html>
<html>

<body>
<h1>Registration Page</h1>
<form id ="registrationForm" >
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<label for="email">E-mailid:</label>
<input type="text" id="email" name="email">
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone">
<label for="sex">Sex:</label>
<div><input type="radio" id="male" name="sex" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="sex" value="female">

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

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


<div> <select id="day" name="day">
<option value="1">1</option>
<option value="2">2</option>
<!-- Add more options here -->
</select>
<select id="month" name="month">
<option value="1">January</option>
<option value="2">February</option>
<!-- Add more options here -->
</select>
<select id="year" name="year">
<option value="2021">2021</option>
<option value="2020">2020</option>
<!-- Add more options here -->
</select><br></div>

<label for="languages">Languages known:</label>


<div> <input type="checkbox" id="english" name="languages[]" value="English">
<label for="english">English</label>
<input type="checkbox" id="telugu" name="languages[]" value="Telugu">
<label for="telugu">Telugu</label>
<input type="checkbox" id="hindi" name="languages[]" value="Hindi">
<label for="hindi">Hindi</label>
<input type="checkbox" id="tamil" name="languages[]" value="Tamil">
<label for="tamil">Tamil</label></div>

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

15
<textarea id="address" name="address" rows="4" cols="50"></textarea>
<input type="submit" value="Register">
</form>
</body>
</html>

Output:

16
Experiment No. 6
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:
File: eventlogo.html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Design Example</title>
<link rel="stylesheet" href="eventlogo.css">

</head>

<body>

<header>
<h1>Welcome to NITRA Technical Campus</h1>
<p>Created with HTML and CSS</p>
</header>

<section class="content">
17
<h2>About This Page</h2>
<p>This page demonstrates the use of different fonts, styles, and background images.</p>
</section>

<div class="image-section">
<h3>Image Section</h3>
<p>This section has its own background image.</p>
</div>

<footer>
<p>Footer Content</p>
</footer>

</body>

</html>

File: eventlogo.css
body {
font-family: 'Arial', sans-serif;
color: #333;
background-image: url('image/backimage.jpg');
background-size: cover;
background-position: center;
margin: 0;
padding: 0;
line-height: 1.6;
height: 100vh;
}

header {
18
background-color: rgba(0, 0, 0, 0.5);
color: white;
text-align: center;
padding: 50px 0;
}

header h1 {
font-family: 'Verdana', sans-serif;
font-size: 3rem;
margin: 0;
}

header p {
font-family: 'Georgia', serif;
font-size: 1.2rem;
margin-top: 10px;
}

section.content {
background-color: rgba(255, 255, 255, 0.8);
padding: 40px;
margin: 20px;
border-radius: 10px;
}

.image-section {
background-image: url('image/backimage.jpg');
background-size: cover;
background-position: center;
padding: 50px;

19
color: white;
text-align: center;
}

.image-section h3 {
font-family: 'Courier New', Courier, monospace;
font-size: 2rem;
}

.image-section p {
font-size: 1.2rem;
}

footer {
background-color: #222;
color: white;
text-align: center;
padding: 20px;
position: fixed;
width: 100%;
bottom: 0;
}

footer p {
font-family: 'Tahoma', sans-serif;
font-size: 1rem;
margin: 0;
}

20
Output:

21
Experiment No. 7
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

Code:
File: Catalogue.css
body{
font-family: Arial, sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #f4f4f9;
text-align: center;
}
table{
border: 2px solid black;
background: rgb(226, 226, 242);
width: 98vw;
margin-left: 2px;

}
td, th{
border: 1px solid black;

22
text-align: center;
vertical-align: middle;
padding-top: 3px;
padding-bottom: 3px;

}
.addbutton{
background: rgba(26, 247, 26, 0.585);
padding: 10px;
border-radius: 8px;
font-size: 20px;
cursor: pointer;

}
.addbutton:link{
background-color: rgba(26, 247, 26, 0.585);
}
.addbutton:hover{
background-color: blue;
}
.addbutton:active{
background-color: yellow;
border: 2px solid red;
}
.addbutton:visited{
background-color: rgb(239, 236, 236);
}

23
Output:

Active actively being clicked

Visited

hovers over a link

24
Experiment No. 8
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).

Code:
File: registration.js
function password_check( password){
check = true;
if (password.length <= 6) {
check = false
alert("Password less than 6 Charecter");
return check;
}
if (!string_check(password,65,90)) {
check = false
alert("Password not contain Capital alphabets")
return check;
}
if (!string_check(password,97,122)) {
check = false
alert("Password not contain small alphabets")
return check;

}
if (!string_check(password,48,57)) {
check = false
alert("Password not contain numerical value")

25
return check;

}
if (!(string_check(password,33,47) ||string_check(password,58,64))) {
check = false
alert("Password not contain symbal value")
}
return check;
}

function string_check(password,start,end) {
check = false;
for (let i = 0; i< password.length; i++) {
// console.log("string:"+password.charCodeAt(i)+"="+start+end)
if ((password.charCodeAt(i)>= start )&& (password.charCodeAt(i)<= end)) {
check = true;
return check;
}

}
return check;
}

function name_check(name) {
check1 = true
if(name.length <= 6){
check1 = false;
alert("Name lessthan 6 charecters");
return check1;

26
}
if ((string_check(name, 48, 57)||string_check(name,33, 47)||string_check(name,58,64))) {
check1 = false;
alert("Do not contain symbols and numerical value");
return check1;

return check1;

document.addEventListener('DOMContentLoaded', function () {
day = document.getElementById('day')
month = document.getElementById('month')
year = document.getElementById('year')
list_of_month = ["January","February","March", "April","May","June","July", "August",
"September","October","November", "December"]
// add day
for (let i = 1; i <=31; i++) {
let option = document.createElement('option')
option.textContent = i
option.value = `"${i}"`
day.appendChild(option)

}
// add month
for (let i =0; i <12;i++) {
let option = document.createElement('option')

27
option.textContent = list_of_month[i]
option.value = `${i+1}`
month.appendChild(option)

}
//add year
for (let i =1980; i < 2025; i++) {
let option = document.createElement('option')
option.textContent = i
option.value = `${i}`
year.appendChild(option)
}

});

document.getElementById('registrationForm').addEventListener('submit', function(event) {
event.preventDefault();
const formData = new FormData(event.target);
const data = {};
formData.forEach((value, key) => {
if (data[key]) {
if (!Array.isArray(data[key])) {
data[key] = [data[key]];
}
data[key].push(value);
} else {
data[key] = value;
}
});

28
if ((password_check(data.password))&& name_check(data.name)) {
localStorage.setItem('username', data.name);
localStorage.setItem('password', data.password);
alert("Rasistration succesfull!")
window.location.href = "login.html"
}

console.log('Profile', data);
});

29
Output:

30
Experiment No. 9
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)

Code:
File: registration.js
function validateForm(email,phone) {

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

const phonePattern = /^\d{10}$/;


if (!emailPattern.test(email)) {
alert("Please enter a valid email address ([email protected]).");
return false;
}

if (!phonePattern.test(phone)) {
alert("Please enter a valid phone number (exactly 10 digits).");
return false;
}

return true;
}

document.getElementById('registrationForm').addEventListener('submit', function(event) {
event.preventDefault();
31
const formData = new FormData(event.target);
const data = {};
formData.forEach((value, key) => {
if (data[key]) {
if (!Array.isArray(data[key])) {
data[key] = [data[key]];
}
data[key].push(value);
} else {
data[key] = value;
}
});

if ((password_check(data.password))&&
name_check(data.name)&&validateForm(data.email,data.phone)) {
localStorage.setItem('username', data.name);
localStorage.setItem('password', data.password);
alert("Ragistration successfull!")
window.location.href = "login.html"
}

console.log('Profile', data);
});

32
Output:

33
Experiment No. 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
2. To-Do List
3. Survey Form
4. A Tribute Page
5. A Questionnaire

Survey Form
Code:
File: survey_form.html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bookstore Survey Form</title>
<link rel="stylesheet" href="survay_form.css">
</head>

<body>
<div class="survey-container">
<h1>Bookstore Customer Survey</h1>
<form id="surveyForm">
<p>1. How satisfied are you with our bookstore?</p>
<label>

34
<input type="radio" name="satisfaction" value="Very Satisfied"> Very Satisfied
</label>
<label>
<input type="radio" name="satisfaction" value="Satisfied"> Satisfied
</label>
<label>
<input type="radio" name="satisfaction" value="Neutral"> Neutral
</label>
<label>
<input type="radio" name="satisfaction" value="Dissatisfied"> Dissatisfied
</label>

<p>2. What type of books do you prefer?</p>


<label>
<input type="checkbox" name="bookType" value="Fiction"> Fiction
</label>
<label>
<input type="checkbox" name="bookType" value="Non-Fiction"> Non-Fiction
</label>
<label>
<input type="checkbox" name="bookType" value="Sci-Fi"> Sci-Fi
</label>
<label>
<input type="checkbox" name="bookType" value="Biography"> Biography
</label>

<p>3. How often do you visit our bookstore?</p>


<select name="visitFrequency" id="visitFrequency">
<option value="Once a Week">Once a Week</option>
<option value="Once a Month">Once a Month</option>

35
<option value="Rarely">Rarely</option>
<option value="This is my first visit">This is my first visit</option>
</select>

<p>4. What improvements would you suggest for our bookstore?</p>


<textarea name="improvements" rows="4" placeholder="Write your suggestions
here..."></textarea>

<p>5. Would you recommend our bookstore to others?</p>


<label>
<input type="radio" name="recommend" value="Yes"> Yes
</label>
<label>
<input type="radio" name="recommend" value="No"> No
</label>

<button type="submit">Submit Feedback</button>


</form>
<div id="responseMessage"></div>
</div>
</body>
<script src="survay _form.js"></script>

</html>

File: survey_form.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}

36
.survey-container {
max-width: 600px;
margin: 0 auto;
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
color: #333;
}

form {
display: flex;
flex-direction: column;
}

label {
margin: 10px 0;
}

textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #ccc;

37
}

button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
margin-top: 20px;
}

button:hover {
background-color: #45a049;
}

File: survey_form.js
document.getElementById('surveyForm').addEventListener('submit', function
(event) {
event.preventDefault();

const formData = new FormData(event.target);


const data = {};
formData.forEach((value, key) => {
if (data[key]) {

if (!Array.isArray(data[key])) {
data[key] = [data[key]];
}
38
data[key].push(value);
} else {
data[key] = value;
}
});

const responseMessage = document.getElementById('responseMessage');


responseMessage.innerHTML = `<h2>Thank You for Your Feedback!</h2>
<p>Your responses have been recorded.</p>`;

console.log('Survey Data:', data);


});

39
Output:

40
COMPLETE PROJECT
Home Page

Login Page

41
Catalogue Page

Cart Page

42

You might also like