Scribd
Upload
25 views

Ankit WD File b1

Uploaded by

ankit
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
25 views

Ankit WD File b1

Uploaded by

ankit
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/ 42

Department of computer Science & Engineering

KCC ISTITUTE OF TECHNOLOGY & MANAGEMENT


2B-2C, Knowledge Park-III, Greater Noida, Uttar Pradesh

BCS353-WEB DESIGNING WORKSHOP


LAB FILE
(2023-24)
THIRD SEMESTER

SUBMITTED TO: SUBMITTED BY:


Mr. Chand Babu Student Name: Ankit
(Assistant Professor) B.Tech./CSE CORE (3rd Sem)
Dept. of CSE Univ. Roll No.: 2204920100022
Section: B1
Class Roll No. 02

1
Index
Page
Sr. No. Name of the experiment Date
No.
Design the followings tatic web pages required for an online book
store website.
HOMEPAGE: The static home page must contain three frames.
1
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).
2 Design LOGIN PAGE
CATOLOGUE PAGE: The catalogue page should contain the details of all
the books available in the website in a table. The details should
3
contain the following: 1. Snap shot of Cover Page. 2. Author Name. 3.
Publisher. 4. Price. 5. Add to cart button.
CARTPAGE: The cart page contains the details about the books which
4
are added to the cart.
REGISTRATION PAGE : Create a“ registration form“ with the following
fields
1)Name (Text field)
2)Password (password field)
3) E-mail id(text field)
5
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.
6 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)
Js VALIDATION:
3. E-mailid (should not contain any invalid and must follow the
7
standard pattern([email protected])
4. Phone Number(Phone number should contain 10 digits only).
8 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
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.
2) Define styles for links as
9
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 implement all topics of html, CSS and Js within
10
the topic. Choose any one topic. 1. Your Own Portfolio 2. To-Do List 3.
Survey Form 4. A Tribute Page 5. A Questionnaire

Experiment No.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
3
Code: -
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>

OUTPUT:

4
5
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>
&nbs

6
p;
</h2>
</p>
</body>
</html>

7
OUTPUT:

Leftframe:

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

8
OUTPUT:

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>
9
OUTPUT:

10
Experiment No.2
Aim: - Login Page

DESCRIPTION:

The login page contains the user name and the password of the user to authenticate.
PROGRAM:

<html>
<head>
<p style= "background:yellow; top:100px; left:250px; position:absolute; ">
</head>
<body background=”E:\1.jpg”>
<form action="index.jsp" method="get">
<label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font face="comic sans ms" color="green" size="5">Login </font>
</label> &nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" size="20" maxlength="20" value=' '><br><br><br>
<label>
<font face="comic sans ms" color="green" size="5">Password </font> </label>
<input type="password" size="20" maxlength="20"> <br><br><br> &nbsp; &nbsp;
&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;
<input type="submit" value="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset">
</form>
</body>
</html>

11
OUTPUT:

12
Experiment No.3
Aim: - CATOLOGUE PAGE: The catalogue page should contain the details of all the books available in the website in atable. The details
should contain the following:

1. Snap shot of Cover Page.


2. Author Name.
3. Publisher.
4. Price.
5. Add to cart button

Code: - <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="image.jpg" 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:\Users\kivi2\Downloads\1234.png" width="150" height="100"></img>
</a> &nbsp; &nbsp;
</td>
</tr>

13
<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:\Users\kivi2\Downloads\1234.png" width="150" height="100"></img>
</a> &nbsp; &nbsp;
</td>
</tr>
</table> </center>
</body>
</html>

14
OUTPUT:

15
Experiment No. 4
Aim: - DESCRIPTION:

The cart page contains the details about the books which are added to the cart.

PROGRAM:

<html>
<body>
<center><br><br><br>
<img src=”E:\aa.jpg”>
<table border=1 cellpadding=center>
<thead>
<tr>
<th>Book name</th>
<th>price</th>
<th>quantity</th>
<th>amount</th>
</tr>
</thead>
<tr>
<td>java 2</td>
<td>$45</td>
<td>2</td>
<td>$70</td>
</tr>
<tr>
<td> XML bible</td>
<td> $20</td>
<td> 5</td>
<td> $40</td>
</tr>
<th colspan=4>total amount=$110>
</th>
</tr>
</table>
</center>

16
</body>
</html>

17
OUTPUT:

18
Experiment No. 5

Aim: - 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 (checkboxes–English, Telugu, Hindi, Tamil)
8)Address (text area)

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

</head>

<body>

<h1>Registration Form</h1>

<form action="submit.php" method="post">

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

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

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

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

<label for="email">E-mail:</label>

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

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

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

<label>Sex:</label>
19
<input type="radio" id="male" name="sex" value="male">

<label for="male">Male</label>

<input type="radio" id="female" name="sex" value="female">

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

<input type="radio" id="other" name="sex" value="other">

<label for="other">Other</label><br><br>

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

<select id="day" name="day">

<option value="">Day</option>

<!-- Add day options here -->

20
</select>

<select id="month" name="month">

<option value="">Month</option>

<!-- Add month options here -->

</select>

<select id="year" name="year">

<option value="">Year</option>

<!-- Add year options here -->

</select><br><br>

<label>Languages known:</label>

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

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

<textarea id="address" name="address" rows="4" cols="50"></textarea><br><br>

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

</form>

</body>

</html>

21
Output: -

22
Experiment No. 6
Aim: - 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: - <!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() {
// Name validation
var name =
document.getElementById("name").value; if
(!/^[a-zA-Z]{6,}$/.test(name)) {
alert("Name should contain alphabets only and have at least 6
characters."); return false;
}
// Password validation
var password =
document.getElementById("password").value; if
(password.length < 6) {
alert("Password should be at least 6 characters
long."); return false;
}
// Form is
valid return
true;
}
</script>
</head>
<body>
<h1>Registration Page</h1>
<form onsubmit="return validateForm()">
23
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>

24
Output: -

25
Experiment No. 7
Aim: - JS VALIDATION:

3. E-mail-id (should not contain any invalid and must follow the standard pattern([email protected])
4. 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>Form Validation</title>
<style>
/* Add your CSS styles here */
</style>
</head>
<body>
<h1>Form Validation</h1>
<form id="myForm" onsubmit="return validateForm()">
<label for="email">E-mail:</label>
<input type="text" id="email" name="email" required><br><br>

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


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

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


</form>

<script>
function validateForm() {
var emailInput =
document.getElementById("email").value; var
phoneInput =
document.getElementById("phone").value;
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-
Z]{2,4}$/; var phonePattern = /^\d{10}$/;

if (!emailPattern.test(emailInput)) {
alert("Invalid email address. Please enter a valid
email."); return false;
}
26
if (!phonePattern.test(phoneInput)) {
alert("Invalid phone number. Please enter a 10-digit phone
number."); return false;
}

27
return true; // Form is valid and can be submitted
}
</script>
</body>
</html>

Output: -

28
Experiment No. 8
Aim: - CSS: Design a web page using CSS (Cascading Style Sheets) which includes the following:

1) Use different font, styles:


2) In the style definition you define how each selector should work (font, color etc.). Then, in the body ofyour pages, you refer to these
selectors to activate the styles.
3) 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 name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Styling Example</title>
<style>
/* Define font
styles */ body {
font-family: Arial, sans-
serif; font-size: 16px;
color: #333;
}

h1 {
font-family: "Times New Roman",
Times, serif; font-size: 36px;
color: #009688;
}

p{
font-family: "Courier New", Courier,
monospace; font-size: 18px;
line-height: 1.5;
}

/* Set background image for the entire


page */ body {
background-image:
url('background.jpg'); background-
size: cover;

29
background-repeat: no-repeat;
}

/* Set background image for a specific element */


.highlight-box {
background-image: url('highlight-background.jpg');

30
background-size: cover;
background-repeat: no-
repeat; padding: 20px;
margin: 20px 0;
border-radius:
10px;
}
</style>
</head>
<body>
<h1>Welcome to My CSS Page</h1>
<p>This is an example of a web page styled using CSS. You can use different fonts and set background images for
elements on the page.</p>

<div class="highlight-box">
<h2>Highlighted Section</h2>
<p>This section has a custom background image set using CSS. You can apply various styles to make your content
stand out.</p>
</div>

<p>Feel free to explore and experiment with different styles and backgrounds for your web pages!</p>
</body>
</html>

Output: -

31
32
Experiment No. 9
Aim: - 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: - <!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Styling Example</title>
<style>
/* Control background image repetition
*/ body {
background-image: url('image.jpg');
background-repeat: no-repeat; /* Prevent
repetition */ background-size: cover;
background-attachment: fixed; /* Fixed background position */
}

/* Define styles for


links */ a:link {
color: #3498db; /* Unvisited link color */
text-decoration: none; /* Remove underline */
}

a:visited {
color: #8e44ad; /* Visited link color */
}

a:active {
color: #e74c3c; /* Active link color (when clicked) */
}

a:hover {
color: #e67e22; /* Link color on hover */

33
text-decoration: underline; /* Add underline on hover */
}

/* Additional styling for page content */


.container {

34
max-width:
800px; margin:
0 auto;
padding: 20px;
background-color: rgba(255, 255,
255, 0.8); border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

h1 {
color: #333;
}

p{
font-size:
18px; line-
height: 1.5;
color: #666;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to My CSS Page</h1>
<p>This is an example of a web page styled using CSS. You can control the repetition of background images and
define styles for links.</p>
<p>Feel free to <a href="#">explore</a> and <a href="#">click</a> on the links to see how they change on
interaction.</p>
</div>
</
body>
</
html>

35
Output: -

36
Experiment No. 10
Aim: - Consider a small topic of your choice on which you can develop static Webpages and try to implementall 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

Code: - Survey Form

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Survey Form</title>
<style
> body {
font-family: Arial, sans-
serif; background-
color: #f4f4f4; margin:
0;
padding: 0;
}

header {
background-color:
#3498db; color: white;
text-align:
center;
padding:
20px;
}

.container {
max-width: 800px;
margin: 20px auto;
background-color:
37
#fff; padding:
20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

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

38
}

label {
display: block;
margin-bottom:
10px; font-
weight: bold;
}

input[type="text"],
input[type="email"] { width:
100%;
padding: 10px;
margin-bottom:
20px;
border: 1px solid
#ccc; border-
radius: 5px;
}

select {
width: 100%;
padding: 10px;
margin-bottom:
20px;
border: 1px solid
#ccc; border-
radius: 5px;
}

textarea {
width:
100%;
height: 100px;
padding: 10px;
margin-bottom:
20px;
border: 1px solid
#ccc; border-
radius: 5px;
39
}

.btn {
background-color:
#3498db; color: white;
border: none;
padding: 10px
20px; border-
radius: 5px;
cursor: pointer;
}

.btn:hover {
background-color: #2187c0;
}

40
/* JavaScript Validation */
.error {
color:
#e74c3c;
font-size:
14px;
}
</style>
</head>
<body>
<header>
<h1>Survey Form</h1>
</header>
<div class="container">
<form id="survey-form" action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="age">Age:</label>
<select id="age" name="age">
<option value="">Select your age</option>
<option value="under18">Under 18</option>
<option value="18-30">18-30</option>
<option value="31-50">31-50</option>
<option value="over50">Over 50</option>
</select>

<label for="comments">Comments:</label>
<textarea id="comments" name="comments"></textarea>

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


</form>
<div id="error-message" class="error"></div>
</div>

<script>
41
// JavaScript form validation
document.getElementById('survey-form').addEventListener('submit',
function (e) { var name =
document.getElementById('name').value;
var email = document.getElementById('email').value;

if (name.trim() === '' || email.trim() === '') {


e.preventDefault(); // Prevent form submission

document.getElementById('error-message').innerHTML = 'Name and Email are required fields.';


}
});
</script>
</body>
</html>

Output: -

42

You might also like