Date-Roll No:-Class:-

Experiment 1: Static Web Pages for Online Bookstore

Objective: Design static web pages (Homepage, Login, Registration, Catalogue, and Cart)
for an online bookstore using HTML.
Description:

1. Homepage: Use frames for layout with links to other pages.

2. Catalogue Page: Create a table listing books with details like author, publisher, price,
etc.
3. Cart Page: Display added books in a table format.
4. Registration Page: Design a form for user registration.

Theory:-

Online Bookstore Website Design Overview

An online bookstore website typically consists of several core pages that allow users to
browse, register, log in, and purchase books. The homepage of the online bookstore can be
designed with a layout consisting of three frames: the top frame, the left frame, and the
right frame. This three-frame layout offers easy navigation and a dynamic user experience.
Here’s a detailed explanation of the design and how each component functions:

1. Top Frame:

The top frame serves as the header for the website, and its purpose is to provide essential
navigation options for the user. This section typically includes:

• Logo: An image that represents the website or the brand, usually placed at the top left
of the page.
• Website Name: The name of the website, typically displayed next to the logo or
beneath it.
• Navigation Links: Links that allow users to navigate to different pages on the
website. These links can include:
o Homepage: Clicking this link will bring the user back to the homepage.
o Login Page: A link to the login page where users can enter their credentials to
access their account.
o Registration Page: A link to the registration page where new users can create
an account.
 Date-Roll No:-Class:-

o Catalogue Page: A link to the catalog page where books are organized and
displayed for browsing. o Cart Page: A link to the shopping cart page where
users can view and manage the items they’ve selected to purchase.

Each of these links in the top frame provides easy access to critical sections of the website,
helping users navigate smoothly between different areas.

2. Left Frame:

The left frame is typically used for displaying additional navigation options related to
specific categories or features of the website. In the case of an online bookstore, the left
frame might include:

• Categories or Genres: Links to various book categories such as "CSE Books",

"Literature", "Science", "History", etc. These links are interactive; clicking on a
category link in the left frame will load the corresponding content into the right
frame. For instance, if a user clicks on "CSE Books", the right frame will display a
list of books under the Computer Science and Engineering category.
• Search Bar: A search bar could also be included in the left frame, allowing users to
search for specific books by title, author, or ISBN.

3. Right Frame:
The right frame is the content area where the main information is displayed. Initially, this
frame may contain a welcome message or an introduction to the website. As users click on
links in the left frame, the content in the right frame dynamically changes to match the
selected category or page. For example:

• Homepage Content: If the user clicks on the "Home" link in the top frame, the right
frame will display a welcome message and an overview of what the online bookstore
offers.
• Login Form: When the "Login" link is clicked, a login form will appear in the right
frame, prompting the user to enter their username and password.
• Registration Form: Similarly, when the "Registration" link is clicked, a registration
form will appear in the right frame.
• Catalogue Listings: If a user clicks on a category like "CSE Books" in the left frame,
the right frame will dynamically load a list of books related to that category, along
with information like book titles, authors, prices, and brief descriptions.
Date-Roll No:-Class:-

• Cart Page: If the user clicks on the "Cart" link in the top frame, the right frame will
show the user's shopping cart contents, including a list of books they’ve added to their
cart, along with the total price.

Dynamic Loading of Content:

One of the key features of the three-frame design is the ability to dynamically load content
into the right frame based on user interactions with the left frame. This helps provide a
seamless experience for the user, as they can easily browse through different book
categories, view their cart, or log in without the need for page reloads. The content in the
right frame changes in real-time based on the user’s selection from the navigation links in the
left and top frames.

Benefits of the Three-Frame Layout:

• User-Friendly Navigation: With links placed in both the top and left frames, users
can quickly access various sections of the website without the need to scroll or search
through long pages.
• Seamless Experience: The ability to load content dynamically into the right frame
allows users to explore different pages (e.g., book categories, login, registration, cart)
without refreshing the entire page.
• Clean and Organized: The three-frame layout ensures that content is organized and
visually separated, helping users focus on the specific area they are interested in (e.g.,
book categories, cart contents).

In summary, the static homepage with a three-frame layout provides a clean, organized
structure for an online bookstore. It offers users easy access to important sections of the
website and allows for smooth navigation between pages, improving the overall user
experience.

Algorithm

1. Design the Layout:

o The webpage should have three sections: a Top Frame, a Left Frame, and a
Right Frame. o The Top Frame contains the website logo, the name of
the website, and navigation links (Homepage, Login page, Registration page,
Catalogue page, and Cart page).
Date-Roll No:-Class:-

o The Left Frame will contain links to specific categories or book genres (e.g.,
CSE, Literature, Science).
o The Right Frame is used to load the content related to the links clicked from
the left frame. Initially, this will display a general description of the website.
2. Page Flow:
o Homepage: Displays the website logo, name, and navigation links.
o Login Page: A simple form for users to log in. o Registration Page: A
simple form for users to register an account. o Catalogue Page: Display
categories of books available. o Cart Page: Display items the user has
added to their cart.
o Right Frame Content: This frame dynamically loads content based on user
interactions with the navigation links from the left frame.
3. Interaction Flow:
o When the user clicks a link in the Left Frame, the Right Frame loads the
relevant page (for example, clicking "CSE" will load the CSE catalogue in the
right frame).
o The website should support links that load content dynamically into the right
frame without refreshing the entire page.

Program:-

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Bookstore</title>
<style> body { font-family: Arial,
sans-serif;
margin: 0; padding:
0;
}
/* Styling for the Top Frame (Logo and Website Name) */
.top-frame { background-
color: #333;
color: white;
padding: 15px;
text-align:
center;
}

/* Styling for the navigation links */

Date-Roll No:-Class:-

.nav-links { list-style-
type: none;
padding: 0; margin:
0;
}

.nav-links li { background-
color: #444; margin:
5px; padding: 10px;
text-align: center;
}

.nav-links li a { color:
white; text-
decoration: none;
font-size: 18px;
}

.nav-links li a:hover { background-

color: #666;
}
</style>
</head>

<!-- Frameset Structure for Left, Right, and Top Frames -->
<frameset rows="150px, *">
<!-- Top Frame (Logo and Website Info) -->
<frame src="about.html" name="top-frame" noresize scrolling="no">

<!-- Horizontal Split: Left Frame for Navigation, Right Frame for Content --> <frameset
cols="200px, *">
<!-- Left Frame (Navigation) -->
<frame src="nav.html" name="left-frame" scrolling="yes">

<!-- Right Frame (Content Area, initially displaying homepage) -->

<frame src="home.html" name="right-frame" scrolling="yes">
</frameset>
</frameset>

<!-- In case the browser doesn't support frames, we display this message -->
<noframes>
<p>Your browser does not support frames. Please upgrade your browser.</p>
</noframes>

</html>

Home.html
<!DOCTYPE html>
<html lang="en">
<head>
Date-Roll No:-Class:-

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<style> body { font-family: Arial,
sans-serif; text-align: center;
padding: 20px;
} h2 { color:
#333;
} p { font-size:
18px;
}

</style>
</head>
<body>

<h2>Welcome to Book Haven !</h2>

<p>We offer a wide selection of books ranging from textbooks to novels and more!</p>

</ul>
</body>
</html>
About.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
<style> body { font-family: Arial,
sans-serif; background-color:
#f4f4f4; text-align: center;
} h2
{
color: #333;
}
.nav-links { list-style-
type: none;
padding: 0; margin:
0;
}
.nav-links td
{ background-color:
#444; margin: 5px;
padding: 10px; text-
align: center;
}
.nav-links td a { color:
white; text-
Date-Roll No:-Class:-

decoration: none;
font-size: 18px;
}
.nav-links td a:hover { background-
color: #666;
}
</style>
</head>
<body>

<h2>Welcome to Book HAven!</h2>

<p>Your one-stop shop for textbooks, novels, and educational material!</p>
<table align="center">
<tr class="nav-links">
<td><a href="home.html" target="right-frame">Home</a></td>
<td><a href="login.html" target="right-frame">Login</a></td>
<td><a href="register.html" target="right-frame">Register</a></td>
<td><a href="catalogue.html" target="right-frame">Catalogue</a></td>
<td><a href="cart.html" target="right-frame">Cart</a></td>
</tr></table>
</body>
</html>

Nav.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation</title>
<style> body { font-family: Arial,
sans-serif; background-color:
#f4f4f4;
}
.nav-links { list-style-
type: none;
padding: 0; margin:
0;
}
.nav-links li { background-
color: #444; margin:
5px; padding: 10px;
text-align: center;
}
.nav-links li a { color:
white; text-
decoration: none;
font-size: 18px;
}
.nav-links li a:hover { background-
color: #666;
Date-Roll No:-Class:-

}
</style>
</head>
<body>

<ul class="nav-links">
<li><a href="CSE.html" target="right-frame">CSE</a></li>
<li><a href="EC.html" target="right-frame">EC</a></li>
<li><a href="EEE.html" target="right-frame">EEE</a></li>
<li><a href="civil.html" target="right-frame">Civil</a></li>
</ul>

</body>
</html>

Output:-
Date-Roll No:-Class:-

Experiment 2:

Objective: Create a login page with fields for username and password using HTML. Add
basic layout using CSS.

Algorithm :-

1. Setup Basic HTML Structure:

o Start with the basic HTML document structure (DOCTYPE, html, head, body).

oIn the head, set the character encoding (meta tag) and add a title for the
page.
o Link an external CSS file (for styling) in the head.
2. Create a Container for the Form:
o Inside the body, create a div container with a class (e.g., login-container) to
hold the login form.
o This container will help center the form and apply styles uniformly.
3. Create the Form:
o Inside the container, create a form element with fields for username and
password.
o Use input elements to create the text fields:
▪ One input for username (type="text").
▪ One input for password (type="password").
o Add a button element for the login action.
Use label tags for accessibility and to describe each form element.
o
4. CSS Layout:
o Body Styling: Set a background color and use Flexbox to center the login-
container on the page (both vertically and horizontally). o Login
Container Styling: Give the container some padding, border-radius, and a
slight shadow for aesthetics. o Form Field Styling: Ensure the input
fields are appropriately sized with padding and borders.
o Button Styling: Style the button with color, padding, and a hover effect.
o Ensure the layout is responsive and looks good on various screen sizes.
5. Form Submission:
o Optionally, include JavaScript to handle form submission logic (e.g., check if
username and password are provided, show error messages).

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> body { font-family:
Arial, sans-serif; margin:
20px;
Date-Roll No:-Class:-

background-color: #f9f9f9;
}</style>
</head>
<body>
<div align="center">
<h1>Login Page</h1>
<form action="/login" method="POST">

<label for="username">Username:</label><br>
<input type="text" id="username" name="username" required><br><br>

<label for="password">Password:</label><br>
<input type="password" id="password" name="password" required><br><br>

<button type="submit">Login</button>
<button type="reset">Login</button>
</form>

</div>
</body>
</html>

Output:-
Date-Roll No:-Class:-

Experiment 3:

Objective: CATOLOGUE PAGE: The catalogue page should contain the details of all the books available
in the web site 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

Algorithm for Catalogue Page (Book Store)

1. Start
2. Create Catalogue Page Structure:
o Initialize the HTML page with the required structure (e.g., <html>, <body>).
3. Display Catalogue Title:
o Display a heading or title at the top of the page, e.g., "Book Catalogue".
4. Create Table/Container for Book Details:
o Create a table or a grid layout to display the books.
o The table should have columns such as:
▪ Cover Page (Snapshot)
▪ Author Name
▪ Publisher
▪ Price
▪ Add to Cart Button
5. Loop through Available Books:
o Retrieve the list of books from the database or any data source (e.g., an array
of book objects).
o For each book, display the following details:
▪ Cover Page (Snapshot): Display an image or thumbnail of the book’s
cover.
▪ Author Name: Display the name of the book’s author. ▪ Publisher:
Display the publisher’s name. ▪ Price: Display the price of the book.
▪ Add to Cart Button: Provide a button labeled "Add to Cart" for the
user to add the book to their cart.
6. Handle Add to Cart Action:
o When a user clicks the "Add to Cart" button: ▪ Capture
the book’s details (e.g., book ID, name, price, etc.).
▪ Add the selected book to the user’s cart (e.g., store it in session or local
storage).
▪ Optionally, update the cart icon to show the number of items in the
cart.
7. Display Pagination (Optional):
o If the catalogue contains a large number of books, display pagination controls
(e.g., "Next", "Previous", page numbers) to allow users to navigate between
pages of books.
8. Filter and Sort Options (Optional):
o Provide filter options for users to narrow down their search (e.g., by author,
publisher, genre, etc.).
 Date-Roll No:-Class:-

o Provide sorting options to sort books by price, author, or rating.

9. Display Catalogue in a Responsive Layout:
o Use CSS to make sure the catalogue is displayed in a grid or table format that
adjusts to different screen sizes (e.g., use a 3-column grid for desktops and a
1-column layout for mobile devices).
10. End

Program:-
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Book Catalogue</title>
<style> body { font-family: Arial,
sans-serif; margin: 20px;
background-color: #f9f9f9;
}
table { width: 100%;
border-collapse:
collapse;
margin-top: 20px;
}
th, td { padding: 10px;
text-align: center;
border: 1px solid #ddd;
}
th { background-color:
#f2f2f2;
} img { max-width:
100px; height: auto;
border-radius: 5px;
}
.add-to-cart { background-
color: #28a745;
color: white;
border: none;
padding: 8px
15px; border-
radius: 4px;
cursor: pointer;
font-size: 14px;
}
.add-to-cart:hover { background-
color: #218838;
}
</style>
</head>
<body>
Date-Roll No:-Class:-

<h1>Book Catalogue</h1>
<table>
<thead>
<tr>
<th>Cover Page</th>
<th>Author Name</th>
<th>Publisher</th>
<th>Price</th>
<th>Add to Cart</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="cover1.jpg" alt="Book Cover 1"></td>
<td>Book :XML Bible Author : Winston</td>
<td>Publication : Wiely</td>
<td>$10.99</td>
<td><button class="add-to-cart">Add to Cart</button></td>
</tr>
<tr>
<td><img src="cover2.jpg" alt="Book Cover 2"></td>
<td>Book :AI Author: S. Russel</td>
<td>Publication : Princeton hall</td>
<td>$15.99</td>
<td><button class="add-to-cart">Add to Cart</button></td>
</tr>
<tr>
<td><img src="cover3.jpg" alt="Book Cover 3"></td>
<td>Book : Java 2 Author : Watson</td>
<td>Publication : BPB</td>
<td>$20.99</td>
<td><button class="add-to-cart">Add to Cart</button></td>
</tr>
</tbody>
</table>
</body>
</html>

Output:-
Date-Roll No:-Class:-
Date-Roll No:-Class:-

Experiment 4:

Objective: Design a cart page to display books added by users.

Algorithm:-

Algorithm for Cart Page (Book Store)

1. Start
2. Create Cart Page Structure:
o Initialize an HTML page with the required structure (e.g., <html>, <body>).
3. Display Cart Title:
o Display a title at the top of the page, e.g., "Your Cart".
4. Create Cart Table/Container:
o Initialize a table or container to display the list of books added to the cart.
o The table should have columns such as:
▪ Book Image (Optional)
▪ Book Title
▪ Author
▪ Price
▪ Quantity (with option to change quantity)
▪ Remove Button 5. Loop through the Cart Items:
o Retrieve the list of books from the cart (this could be from a session, local
storage, or a database).
o For each book in the cart, display the following details:
▪ Book Image: Display an image of the book (if available). ▪ Book
Title: Display the book’s title. ▪ Author: Display the author's name.
▪ Price: Display the price of the book.
▪ Quantity: Display a dropdown or input field to adjust the quantity of
the book.
▪ Remove Button: Provide an option to remove the book from the cart.
6. Display Total Cost:
o Calculate the total cost based on the quantity and price of each book in the
cart.
o Display the total cost at the bottom of the table.
7. Provide Cart Actions:
o Include buttons such as:
▪ Continue Shopping: Redirect the user to the book listing page to add
more books.
▪ Proceed to Checkout: Allow the user to proceed to the checkout page.
▪ Clear Cart: Allow the user to clear all books from the cart.
8. Optional: Apply Discount:
o Provide an input field for users to enter a discount code (if applicable) and
apply it to the cart total.
9. Optional: Display Shipping Information:
o Include a section for shipping options and delivery time, or a message that
shipping information will be provided during checkout.
10. End

Program:-
Date-Roll No:-Class:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Book Catalogue</title>
<style> body { font-family: Arial,
sans-serif; margin: 20px;
background-color: #f9f9f9;
} table { width: 100%;
border-collapse: collapse;
margin-top: 20px;
} th, td { padding:
10px; text-align:
center;
border: 1px solid #ddd;
} th
{
background-color: #f2f2f2;
} img { max-width:
100px; height: auto;
border-radius: 5px;
}
.add-to-cart { background-
color: #28a745; color:
white; border: none;
padding: 8px 15px; border-
radius: 4px; cursor:
pointer; font-size: 14px; }
.add-to-cart:hover { background-
color: #218838;
}
</style>
</head>
<body>
<h1>Book Catalogue</h1>
<table>
<thead>
<tr>
<th>Cover Page</th>
<th>Author Name</th>
<th>Publisher</th>
<th>Price</th>
<th>Add to Cart</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="cover1.jpg" alt="Book Cover 1"></td>
<td>Book :XML Bible Author : Winston</td>
<td>Publication : Wiely</td>
<td>$10.99</td>
<td><button class="add-to-cart">Add to Cart</button></td>
Date-Roll No:-Class:-

</tr>
<tr>
<td><img src="cover2.jpg" alt="Book Cover 2"></td>
<td>Book :AI Author: S. Russel</td>
<td>Publication : Princeton hall</td>
<td>$15.99</td>
<td><button class="add-to-cart">Add to Cart</button></td>
</tr>
<tr>
<td><img src="cover3.jpg" alt="Book Cover 3"></td>
<td>Book : Java 2 Author : Watson</td>
<td>Publication : BPB</td>
<td>$20.99</td>
<td><button class="add-to-cart">Add to Cart</button></td>
</tr>
</tbody>
</table>
</body>
</html>

Output:-
Date-Roll No:-Class:-

Experiment 5:
Objective :-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 (check boxes – English, Telugu, Hindi, Tamil) 8) Address (text area)

Algorithm for Registration Form

1. Start
2. Create a Web Page: Initialize an HTML page structure.
3. Create Form Element:
o Start with a <form> tag to define the form structure.
4. Name Field:
o Add a text field for the user to input their name using <input type="text"
/>.
o Label the field as "Name".
5. Password Field:
o Add a password field using <input type="password" />.
o Label the field as "Password".
6. E-mail ID Field:
o Add a text field for the user to input their e-mail ID using <input
Date-Roll No:-Class:-

type="email" />. o Label

the field as "E-mail ID".
7. Phone Number Field:
o Add a text field for the phone number using <input type="tel" />.
o Label the field as "Phone Number".
8. Sex Field (Radio Buttons):
o Add radio buttons for the user to select their sex.
▪ <input type="radio" name="sex" value="Male" /> for Male ▪
<input type="radio" name="sex" value="Female" /> for
Female
▪ Label the section as "Sex".
9. Date of Birth Field (Select Boxes):
o Create three <select> elements for day, month, and year.
▪ Day: <select name="day"> with options from 1 to 31.
▪ Month: <select name="month"> with options from January to
December.
▪ Year: <select name="year"> with options from a starting year (e.g.,
1900) to the current year.
o Label the section as "Date of Birth".
10. Languages Known Field (Check Boxes):
o Add checkboxes for each language the user knows.
▪ <input type="checkbox" name="language" value="English" />
English
▪ <input type="checkbox" name="language" value="Telugu" />
Telugu
▪ <input type="checkbox" name="language" value="Hindi" />
Hindi
▪ `<input type="checkbox" name="language" value="Tamil" /> Tamil o
Label the section as "Languages Known".
11. Address Field:
o Add a text area for the address using <textarea></textarea>.
o Label the field as "Address".
12. Submit Button:
o Add a submit button to submit the form: <input type="submit"
value="Register" />

Program:-
<!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 { font-family: Arial,
sans-serif; background-color:
#f4f4f9; margin: 0;
padding: 20px;
}

h2 { text-align:
center; color:
#333;
Date-Roll No:-Class:-

form { width: 50%;

margin: 0 auto;
background-color:
#fff; padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }

table { width:
100%;
margin-bottom: 20px;
}

td { padding:
10px; text-
align: left;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
textarea,
select {
width: 100%; padding:
8px; margin: 5px 0;
border: 1px solid
#ccc; border-radius:
4px;
}

textarea {
resize: vertical;
}

input[type="radio"],
input[type="checkbox"] {
margin-right: 5px;
}

.button-container { text-
align: center;
}

input[type="submit"] {
background-color:
#4CAF50; color: white;
padding: 10px 20px; border:
none; border-radius: 4px;
cursor: pointer;
}
Date-Roll No:-Class:-

input[type="submit"]:hover {
background-color: #45a049;
}

</style>
</head>
<body>

<h2>Registration Form</h2>

<form action="/submit" method="post">

<table>
<!-- Name Field -->
<tr>
<td><label for="name">Name:</label></td>
<td><input type="text" id="name" name="name" required></td>
</tr>

<!-- Password Field -->

<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" id="password" name="password" required></td>
</tr>

<!-- E-mail ID Field -->

<tr>
<td><label for="email">E-mail ID:</label></td>
<td><input type="email" id="email" name="email" required></td>
</tr>

<!-- Phone Number Field -->

<tr>
<td><label for="phone">Phone Number:</label></td>
<td><input type="tel" id="phone" name="phone" required></td>
</tr>

<!-- Sex (Radio Buttons) -->

<tr>
<td><label>Sex:</label></td>
<td>
<input type="radio" id="male" name="sex" value="Male" required>
<label for="male">Male</label><br>
<input type="radio" id="female" name="sex" value="Female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="sex" value="Other">
<label for="other">Other</label>
</td>
</tr>

<!-- Date of Birth (Select Boxes) -->

<tr>
Date-Roll No:-Class:-

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

<td>
<select name="day" id="day" required>
<option value="">Day</option>
<!-- Days 1 to 31 -->
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<!-- Continue with all days -->
</select>
<select name="month" id="month" required>
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<!-- Continue with all months -->
</select>
<select name="year" id="year" required>
<option value="">Year</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<!-- Continue with years -->
</select>
</td>
</tr>

<!-- Languages Known (Checkboxes) -->

<tr>
<td><label>Languages Known:</label></td>
<td>
<input type="checkbox" id="english" name="languages" value="English">
<label for="english">English</label><br>
<input type="checkbox" id="telugu" name="languages" value="Telugu">
<label for="telugu">Telugu</label><br>
<input type="checkbox" id="hindi" name="languages" value="Hindi">
<label for="hindi">Hindi</label><br>
<input type="checkbox" id="tamil" name="languages" value="Tamil">
<label for="tamil">Tamil</label>
</td>
</tr>

<!-- Address Field -->

<tr>
<td><label for="address">Address:</label></td>
<td><textarea id="address" name="address" rows="4" required></textarea></td>
</tr>
</table>

<div class="button-container">
Date-Roll No:-Class:-

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

</div>
</form>

</body>
</html>

Output:-
 Date-Roll No:-Class:-

Experiment 6

Objective:

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

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

Theory: -

JavaScript form validation is crucial for ensuring that user input is correct before submission,
preventing incorrect data from reaching the server. In this case, validating fields such as
Name, Password, Email, and Phone Number ensures that each input adheres to specified
rules. For example, the Name field should only contain alphabets and be at least six
characters long, while the Password should have a minimum length of six characters to
ensure security. The Email must follow a standard pattern (e.g., [email protected]), and the
Phone Number must contain exactly 10 digits. These validations can be performed using
JavaScript’s built-in functions like test() and regular expressions, providing immediate
feedback to the user and enhancing the user experience by catching errors before submission.
By using JavaScript validation, we ensure data integrity and improve the efficiency of the
registration process.

Algorithm
1. Validate Name:
o Check if the name contains only alphabetic characters.
o Ensure the name is at least 6 characters long.

2. Validate Password:
Date-Roll No:-Class:-

o Ensure the password length is at least 6 characters.

3. Validate E-mail ID:

o Check if the email matches the standard format: [email protected].

4. Validate Phone Number:

o Ensurethe phone number contains exactly 10 digits.

Program

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

/* Simple CSS for styling the form

*/ body { font-family: Arial, sans-

serif; background-color: #f4f4f4;

padding: 20px;

}
form {

background-color: #fff;
padding: 20px; border-radius: 8px; box-

shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

max-width: 400px;

margin: auto;

input[type="text"], input[type="password"], input[type="email"],

input[type="tel"] {
 Date-Roll No:-Class:-

width: 100%;

padding: 8px; margin:

10px 0; border: 1px

solid #ccc; border-

radius: 4px;

}
button {

width: 100%; padding: 10px;

background-color:

#4CAF50; color: white;

border: none; border-radius:

4px; cursor: pointer;

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

}
.error {
color: red;
font-size: 12px;

</style>

</head>

<body>

<h2>Registration Form</h2>

<form id="registrationForm" onsubmit="return validateForm()">

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

<input type="text" id="name" name="name" placeholder="Enter your name"

required>

<div id="nameError" class="error"></div>

<label for="password">Password:</label>
Date-Roll No:-Class:-

<input type="password" id="password" name="password" placeholder="Enter

your password" required>

<div id="passwordError" class="error"></div>

<label for="email">Email:</label>

<input type="email" id="email" name="email" placeholder="Enter your email"

required>

<div id="emailError" class="error"></div>

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

<input type="tel" id="phone" name="phone" placeholder="Enter your phone

number" required>

<div id="phoneError" class="error"></div>

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

</form>

<script>

function validateForm()

{ let valid = true;

// Validate Name

const name = document.getElementById('name').value;

const nameError =

document.getElementById('nameError'); const

namePattern = /^[A-Za-z]+$/;

if (name.length < 6 || !namePattern.test(name)) {

nameError.textContent = "Name must contain only alphabets and be at least

6 characters long.";
 Date-Roll No:-Class:-

valid = false;

} else {
nameError.textContent = "";

// Validate Password

const password = document.getElementById('password').value; const

passwordError = document.getElementById('passwordError'); if

(password.length < 6) { passwordError.textContent = "Password must be at

least 6 characters long."; valid = false;

} else {
passwordError.textContent = "";

// Validate Email

const email = document.getElementById('email').value; const emailError =

document.getElementById('emailError'); const emailPattern = /^[a-zA-Z0-9._

%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; if (!emailPattern.test(email)) {

emailError.textContent = "Please enter a valid email address (e.g.,

[email protected]).";
valid = false;

} else {
emailError.textContent = "";

// Validate Phone Number

const phone = document.getElementById('phone').value;

const phoneError =

document.getElementById('phoneError'); const

phonePattern = /^[0-9]{10}$/;

if (!phonePattern.test(phone)) {
 Date-Roll No:-Class:-

phoneError.textContent = "Phone number must be exactly 10 digits.";

valid = false;

} else {
phoneError.textContent = "";

}
return valid; // Return false to prevent form submission if invalid

</script>
</body>

</html>

Output:-
Date-Roll No:-Class:-

Figure 1

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

Theory: -
Date-Roll No:-Class:-

CSS (Cascading Style Sheets) is a stylesheet language used to define the look and feel of web
pages. It allows developers to create reusable style definitions for fonts, colors, and layouts
by assigning specific properties to selectors such as body, h1, or .class-name. These styles
can be applied globally or to individual elements to achieve a consistent and visually
appealing design. Additionally, CSS enables the use of background images for both the entire
page and individual elements, allowing for creative customization with properties like
background-image, background-size, and background-position.

Algorithm: -

Step 1: Define the HTML Structure

1. HTML Tags: o Create the basic HTML structure with tags like <html>, <head>,
and <body>. o Inside the <head>, include the meta tags for character set and
viewport settings.
o Include the page title inside the <title> tag.
o Create a <style> tag in the <head> section to add the internal CSS.
2. Create Page Sections:
o In the <body>, add the following sections:
▪ Header Section: A header with a main heading <h1> and a paragraph
<p>.
▪ Main Content Section: A section with a subheading <h2> and a
paragraph <p>.
▪ Highlighted Section: A section that draws attention with another
background image.
▪ Footer Section: A footer with some copyright text.

Step 2: Define CSS for Global and Specific Elements

1. Global Styles (applied to the body of the page):

o Set font family and font size for the page. o Set a background
image for the entire page.
o Set text color for the page.
2. Header Styles:
o Define a different font for the header section. o Set a background color
or an image for the header section. o Define text color for headings
and paragraphs in the header.
o Add padding and margin to position the content properly.
3. Main Content Section Styles:
o Set a background image for the main content. o Define font family, font
size, and color for headings and paragraphs inside this section.
o Add padding and margin for spacing between content and borders.
4. Highlighted Section Styles:
o Set another background image for this section to make it stand out. o
Adjust text styles to make this section visually distinct (e.g., bold,
different colors). o Use padding and margin for spacing.
5. Footer Styles:
Date-Roll No:-Class:-

o Set a background color for the footer section. o Change the font and
text color in the footer. o Center align the text inside the footer.
o Set padding for spacing.

Step 3: Apply Link Styles (optional)

1. Link States:
o Define styles for links using a:link, a:visited, a:hover, and a:active pseudo-
classes.
o Change the color, text-decoration, and hover effects (e.g., underline links on
hover).

Step 4: Make the Page Responsive (optional)

1. Use Media Queries:

o Create media queries to adjust the layout and font size for smaller screens
(e.g., mobile phones).
o Reduce padding, font sizes, and margins for smaller screens to improve
readability and layout.

Step 5: Testing and Debugging

1. Preview the Page:

o Test the page in different screen sizes and devices.
o Verify the background images load correctly. o Check if all fonts and styles
are applied as intended.
o Debug any issues with positioning, alignment, or responsiveness.

Program
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylish Web Page</title>

<!-- Internal CSS -->

<style>
/* General Page Style */
body { font-family: 'Arial', sans-serif; /* Use Arial font for the entire page
*/ font-size: 16px; /* Set the base font size */ line-height: 1.6; /*
Increase line height for readability */ margin: 0; padding: 0;
background-image: url('background.jpg'); /* Set a background image for the whole
page */ background-size: cover; /* Ensure the background image covers the entire
page */ background-position: center; /* Center the background image */
color: #333; /* Set default text color */
}

/* Header Section */ header { background-color: rgba(0, 0, 0, 0.5); /* Semi-

transparent black background */ padding: 40px;
Date-Roll No:-Class:-

text-align: center;
color: white; /* White text for contrast */
}

header h1 { font-family: 'Georgia', serif; /* Use a serif font for the

header */ font-size: 3em; /* Larger font size for the main title */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add a subtle text
shadow for better visibility */
}

header p { font-family: 'Verdana', sans-serif; /* Use sans-serif font for

paragraphs */ font-size: 1.2em; /* Slightly larger text for paragraph */
}

/* Main Content Section */

.main-content { background-image: url('content-bg.jpg'); /* Set background image for
this section */ background-size: cover; /* Ensure the image covers the section */
background-position: center; /* Center the background image */ padding: 40px;
margin: 20px;
color: white; /* White text to contrast with the background */ border-radius: 10px; /*
Rounded corners for a softer look */
}

/* Subheading in Main Content Section */

.main-content h2 { font-family: 'Helvetica', sans-serif; /* Use Helvetica font for
subheadings */ color: #f39c12; /* Set golden yellow color for subheadings */
font-size: 2.5em; /* Larger font size for subheadings */
}

/* Highlighted Section */
.highlight { background-image: url('highlight-bg.jpg'); /* Different background
image for this
section */
background-size: cover; /* Ensure the image covers the section */
background-position: top; /* Align the image to the top */
padding: 50px;
color: white; /* White text for contrast */
text-align: center; /* Center-align the text */
margin: 20px;
border-radius: 10px; /* Optional rounded corners */
}

/* Footer Section */
footer {
background-color: #333; /* Dark background for footer */
color: white; /* White text color for footer */
text-align: /* Center-align footer text */
center; padding:
20px; position:
relative; bottom:
0;
width: 100%;
Date-Roll No:-Class:-

/* Link Styling */
a:link, a:visited {
color: #3498db; /* Blue color for links */ text-decoration: none;
/* Remove underline from links */
}

a:hover {
color: #1abc9c; /* Green color when the link is hovered */ text-decoration: underline;
/* Underline on hover */
}

a:active {
color: #e74c3c; /* Red color when the link is clicked */
}

/* Media Query for Smaller Screens */

@media (max-width: 768px) { header
h1 {
font-size: 2.5em; /* Adjust header font size for small screens */
}

.main-content, .highlight {
padding: 20px; /* Reduce padding for small screens */
}

footer {
padding: 10px; /* Reduce footer padding */
}
}
</style>
</head>
<body>

<!-- Header Section -->

<header>
<h1>Welcome to My Stylish Web Page</h1>
<p>This page uses CSS for different font styles and background images.</p>
</header>

<!-- Main Content Section -->

<section class="main-content">
<h2>About This Page</h2>
<p>This page demonstrates how to use CSS to design a web page with various font
styles and background images.</p>
</section>

<!-- Highlighted Section -->

<section class="highlight">
<h2>Special Features</h2>
Date-Roll No:-Class:-

<p>This section has a unique background image to highlight the content.</p>

</section>

<!-- Footer Section -->

<footer>
<p>© 2025 Stylish Web Page</p>
</footer>

</body>
</html>

Output:-

Experiment 8

Objective: CSS: Design a web page using CSS(Cascading Style Sheets) which 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

Theory:-

To design a web page using CSS that meets the given requirements, we can implement styles
for background images and links in the following manner:
Date-Roll No:-Class:-

1. Background Image and Repetition: The background-repeat property in CSS

controls how the background image is repeated across the page. By default, it repeats
both horizontally and vertically. If you want to limit repetition, you can set it to no-
repeat, repeat-x (horizontal), or repeat-y (vertical).
2. Link Styling: CSS provides pseudo-classes for styling links in various states:
o A:link: Defines the style for unvisited links. o A:visited: Styles the link
after it has been visited by the user. o A:active: Applies when the link is
being clicked or activated. o A:hover: Specifies the style when the user
hovers over the link.

Algorithm:
2. Create the HTML structure:
o Add a basic structure with a header, main content, and links.
o Use the <style> tag in the <head> section to include internal CSS styles.
3. Control the background image repetition:
o Use the background-repeat property in CSS to control how the image repeats
(e.g., no-repeat, repeat-x, or repeat-y).
4. Define link styles using pseudo-classes:
o Use the pseudo-classes a:link, a:visited, a:active, and a:hover to style links for
different states.
5. Save and test the page:
o Save the file as .html and open it in a web browser to verify the results.

Program:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>CSS Background and Link Styles</title>

<style>

/* Background styles */ body { background-image:

url('background.jpg'); /* Set a background image */ background-repeat:

Date-Roll No:-Class:-

no-repeat; /* Prevents the image from repeating */ background-size:

cover; /* Makes the image cover the entire page */ background-

position: center; /* Centers the background image */ font-family: Arial,

sans-serif; /* Default font for the page */ color: #333;

margin: 0;

padding: 0;

/* Header styles */

header { text-

align: center;

padding: 20px;

background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */

color: white;

/* Link styles */

a:link {

color: blue; /* Default link color */

text-decoration: none; /* No underline */

a:visited {

color: purple; /* Color for visited links */

}
 Date-Roll No:-Class:-

a:hover {

color: red; /* Link color when hovered */

text-decoration: underline; /* Underline on hover */

a:active {

color: orange; /* Link color when clicked */

/* Main content styles

*/ main { padding:

20px; text-align: center;

ul {

list-style-type: none; /* Remove bullet points */

padding: 0;

}
li {

margin: 10px 0;

</style>

</head>

<body>

<header>

<h1>Welcome to My Styled Web Page</h1>

</header>

<main>
Date-Roll No:-Class:-

<p>Here are some example links:</p>

<ul>

<li><a href="https://example.com" target="_blank">Visit Example 1</a></li>

<li><a href="https://example.org" target="_blank">Visit Example 2</a></li>

</ul>

</main>

</body>

</html>

Output:-
Date-Roll No:-Class:-

Experiment 9: Complete Web Page

Objective:
Develop a static web page on a chosen topic integrating HTML, CSS, and JavaScript.
Topics:

1. Personal Portfolio
2. To-Do List
3. Survey Form
4. Tribute Page
5. Questionnaire

Project(Personal Portfolio)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio</title>
<style>
/* General reset for margin and padding */
* { margin:
0;
padding:
0;
box-sizing: border-box;
}

/* Body styles */ body { font-

family: Arial, sans-serif; line-
height: 1.6; background-color:
#f4f4f4; color: #333;
}

/* Header styles */
header {
background-color: #333;
color: white; padding:
20px 0; text-align:
center; }

header h1 {
font-size: 2.5em;
Date-Roll No:-Class:-

margin-bottom: 10px;
}

header p {
font-size: 1.2em;
margin-bottom: 20px;
}

header nav ul { list-

style-type: none;
padding: 0;
}

header nav ul li
{ display: inline;
margin-right:
20px;
}

header nav ul li a
{ color: white; text-
decoration: none;
font-size: 1.1em;
}

/* Section styles */
section {
padding: 60px 0; text-
align: center;
}

section h2 {
font-size: 2em;
margin-bottom:
20px; color: #333;
}

/* About section */
#about { background-
color: #fff; color:
#333;
}

#about p { font-
size: 1.1em;
margin: 20px 0;
}

/* Projects section */
#projects { background-color:
#f9f9f9;
}
Date-Roll No:-Class:-

.project-card { display: inline-block; width:

280px; margin: 15px; padding: 20px;
background-color: #fff; border-radius:
8px; box-shadow: 0 2px 10px rgba(0, 0,
0, 0.1);
text-align: left;
}

.project-card h3 { margin-
bottom: 10px;
}

.project-card p { font-
size: 1em;
margin-bottom: 15px;
}

.project-card a { text-
decoration: none;
color: #333; font-
weight: bold;
}

/* Contact section */
#contact { background-
color: #fff; color:
#333;
}

#contact p { font-
size: 1.2em;
margin-bottom: 10px;
}

#contact a { text-
decoration: none;
color: #007bff; font-
weight: bold;
}

/* Footer styles */
footer { background-color:
#333;
color: white; padding:
10px 0; text-align:
center;
}

footer p { font-
size: 1em;
}
Date-Roll No:-Class:-

/* Media Query for responsive design */

@media (max-width: 768px) {
header h1 { font-size: 2em;
}

header p { font-
size: 1em;
}

.project-card
{ width: 100%;
}
}

</style>
</head>
<body>
<!-- Header Section -->
<header>
<h1>Dia Dwivedi </h1>
<p>Web Developer</p>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<!-- About Section -->

<section id="about">
<h2>About Me</h2>
<p>Hello, I am Dia Dwivedi ,a passionate web developer with a keen interest in front-
end and back-end development. I have experience working with modern web technologies
and enjoy solving complex problems. In my free time, I like to explore new trends in web
development and contribute to open-source projects.</p>
<p>Skills: HTML, CSS, JavaScript, React, Node.js, MongoDB</p>
</section>

<!-- Projects Section -->

<section id="projects">
<h2>My Projects</h2>
<div class="project-card">
<h3>Project 1</h3>
<p>This project is a simple portfolio website built using HTML, CSS, and JavaScript.
It showcases my work and skills as a web developer.</p>
<a href="#">View Project</a>
</div>
<div class="project-card">
<h3>Project 2</h3>
Date-Roll No:-Class:-

<p>A full-stack web application built using React for the front-end and Node.js for
the back-end. It allows users to manage their tasks and to-dos.</p>
<a href="#">View Project</a>
</div>
</section>

<!-- Contact Section -->

<section id="contact">
<h2>Contact Me</h2>
<p>Email: [email protected]</p>
<p>Phone: +123 456 7890</p>
<p>LinkedIn: <a href="#">linkedin.com/in/Dia </a></p> </section>

<!-- Footer Section -->

<footer>
<p>&copy; 2025Dia Dwivedi. All reserved.</p> </footer>
</body>
</html>

Output
Date-Roll No:-Class:-
Date-Roll No:-Class:-