Reeti HTML Project
Uploaded by
www.mohdamir786.comReeti HTML Project
Uploaded by
www.mohdamir786.comDate:- Roll No:- Class:-
Experiment 1: Static Web Pages for Online Bookstore
bjective:Design static web pages (Homepage, Login,Registration, Catalogue, and Cart)
O
for an online bookstore using HTML.
Description:
1 . H omepage:Use frames for layout with links to otherpages.
2. Catalogue Page:Create a table listing books withdetails 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. Thehomepageoftheonlinebookstorecanbe
designed with a layout consisting of three frames: the top frame, the left frame,andthe
right frame.Thisthree-framelayoutofferseasynavigationandadynamicuserexperience.
Here’s a detailed explanation of the design and how each component functions:
1. Top Frame:
Thetop frameserves 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 thebrand, usually placed at the top left
of the page.
● Website Name: The name of the website, typically displayednext to the logo or
beneath it.
● Navigation Links: Links that allow users to navigateto different pages on the
website. These links can include:
o
Homepage: Clicking this link will bring the user backto the homepage.
o
Login Page: A link to the login page where users canenter their credentials to
access their account.
o
Registration Page: A link to the registration pagewhere 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 whereusers 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:
Theleft frameis typically used for displaying additionalnavigation 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 categoriessuch 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 theright
frame. For instance, if a user clicks on "CSE Books",theright framewill display a
list of books under the Computer Science and Engineering category.
● Search Bar: A search bar could also be included inthe left frame, allowing users to
search for specific books by title, author, or ISBN.
3. Right Frame:
Theright frameis the content area where the maininformation 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 loginform 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.
Date:- Roll No:- Class:-
● 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.
● Cart Page: If the user clicks on the "Cart" link inthe 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 todynamically 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 boththe 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 dynamicallyinto 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 ensuresthat 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.
Date:- Roll No:- Class:-
Algorithm
1. Design the Layout:
o
The webpage should have three sections: aTop Frame,aLeft Frame, and a
Right Frame.
o
TheTop Framecontains the website logo, the nameof the website, and
navigation links (Homepage, Login page, Registration page, Catalogue page,
and Cart page).
o
TheLeft Framewill contain links to specific categoriesor book genres (e.g.,
CSE, Literature, Science).
o
TheRight Frameis used to load the content relatedto 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 navigationlinks.
o
Login Page: A simple form for users to log in.
o
Registration Page: A simple form for users to registeran account.
o
Catalogue Page: Display categories of books available.
o
Cart Page: Display items the user has added to theircart.
o
Right Frame Content: This frame dynamically loadscontent based on user
interactions with the navigation links from the left frame.
3. Interaction Flow:
o
When the user clicks a link in theLeft Frame, theRight Frameloads 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>
Date:- Roll No:- Class:-
<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 */
.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) -->
Date:- Roll No:- Class:-
<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>
ome.html
H
<!DOCTYPE html>
<html lang="en">
<head>
<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 Our Online Bookstore!</h2>
<p>We offer a wide selection of books ranging from textbooks to novels and more!</p>
Date:- Roll No:- Class:-
</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-decoration: none;
font-size: 18px;
}
.nav-links td a:hover {
background-color: #666;
}
</style>
</head>
<body>
<h2>Welcome to Online Bookstore!</h2>
Date:- Roll No:- Class:-
<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;
}
</style>
</head>
<body>
Date:- Roll No:- Class:-
<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:
bjective:Create a login page with fields for usernameand password using HTML. Add
O
basic layout using CSS.
Algorithm :-
1. Setup Basic HTML Structure:
o Start with the basic HTML document structure (DOCTYPE,
,head,
html
body
).
o In the
, set the character encoding (metatag)and add atitlefor the
head
page.
o Link an external CSS file (for styling) in the
head .
2. Create a Container for the Form:
o Inside the
body , create adivcontainer 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
formelement with fieldsforusernameand
password.
o Use
inputelements to create the text fields:
▪ One inputforusername( type="text" ).
▪ Oneinputforpassword(type="password").
o Add a
buttonelement for the login action.
o Use
labeltags for accessibility and to describe eachform element.
4. CSS Layout:
o Body Styling: Set a background color and use Flexboxto center the
login-containeron 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 appropriatelysized 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:
Date:- Roll No:- Class:-
o
ptionally, include JavaScript to handle form submission logic (e.g., check if
O
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;
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>
Date:- Roll No:- Class:-
Output:-
Date:- Roll No:- Class:-
Experiment 3:
Objective: CATOLOGUE PAGE: The catalogue page should contain the details of all the books
a vailable 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 . S tart
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
▪ dd to Cart Button
A
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 thumbnailof 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.
▪ dd to Cart Button: Provide a button labeled "Addto Cart" for the
A
user to add the book to their cart.
Date:- Roll No:- Class:-
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.).
▪ dd the selected book to the user’s cart (e.g., store it in session or local
A
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.).
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;
}
Date:- Roll No:- Class:-
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>
</tr>
<tr>
<td><img src="cover2.jpg" alt="Book Cover 2"></td>
<td>Book :AI Author: S. Russel</td>
<td>Publication : Princeton hall</td>
Date:- Roll No:- Class:-
<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 4:
Objective:Design a cart page to display books addedby users.
Algorithm:-
Algorithm for Cart Page (Book Store)
1 . S tart
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)
▪ emove Button
R
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).
Date:- Roll No:- Class:-
▪ Book Title: Display the book’s title.
▪ Author: Display the author's name.
▪ Price: Display the price of the book.
▪ uantity: Display a dropdown or input field to adjustthe quantity of
Q
the book.
▪ Remove Button: Provide an option to remove the bookfrom 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 listingpage to add
more books.
▪ Proceed to Checkout: Allow the user to proceed tothe checkout page.
▪ lear Cart: Allow the user to clear all books fromthe cart.
C
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:-
!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;
Date:- Roll No:- Class:-
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>
</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>
Date:- Roll No:- Class:-
<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:
bjective :-REGISTRATION PAGE:
O
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 . S tart
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
type="email" />
.
Date:- Roll No:- Class:-
o
abel the field as "E-mail ID".
L
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" />forMale
▪ <input type="radio" name="sex" value="Female" />for
emale
F
▪ Label the section as "Sex".
9. D
ate of Birth Field (Select Boxes):
o Create three
<select>elements for day, month, andyear.
▪ Day:
<select name="day">with options from 1 to 31.
▪ onth:<select name="month">with options from Januaryto
M
December.
▪ Year:<select name="year">with options from a startingyear (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" />
rogram:-
P
<!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;
Date:- Roll No:- Class:-
background-color: #f4f4f9;
margin: 0;
padding: 20px;
}
h2 {
text-align: center;
color: #333;
}
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;
}
Date:- Roll No:- Class:-
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;
}
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>
Date:- Roll No:- Class:-
</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>
<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>
Date:- Roll No:- Class:-
<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">
<input type="submit" value="Register">
</div>
</form>
/body>
<
</html>
Output:-
Date:- Roll No:- Class:-
Date:- Roll No:- Class:-
Experiment 6
Objective:
J SVALIDATION:WriteJavaScripttovalidatethefollowingfieldsoftheaboveregistration
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(name@domain.com)
4. Phone Number(Phone number should contain 10 digits only).
Theory: -
JavaScriptformvalidationiscrucialforensuringthatuserinputiscorrectbeforesubmission,
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
ensuresecurity.TheEmailmustfollowastandardpattern(e.g.,name@domain.com),andthe
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
feedbacktotheuserandenhancingtheuserexperiencebycatchingerrorsbeforesubmission.
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.
Date:- Roll No:- Class:-
2. Validate Password:
o
Ensure the password length is at least 6 characters.
3. Validate E-mail ID:
o
Check if the email matches the standard format: name@domain.com.
4. Validate Phone Number:
o
Ensure the 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);
Date:- Roll No:- Class:-
max-width: 400px;
margin: auto;
}
input[type="text"], input[type="password"], input[type="email"],
input[type="tel"] {
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;
Date:- Roll No:- Class:-
}
</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>
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>
Date:- Roll No:- Class:-
<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.";
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
Date:- Roll No:- Class:-
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)) {
e mailError.textContent = "Please enter a valid email address (e.g.,
name@domain.com).";
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)) {
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>
Date:- Roll No:- Class:-
Output:-
Date:- Roll No:- Class:-
Experiment No:-7
Objective:CSS: Design a web page using CSS(CascadingStyle 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: -
CSS(CascadingStyleSheets)isastylesheetlanguageusedtodefinethelookandfeelofweb
pages. It allows developers to createreusablestyledefinitionsforfonts,colors,andlayouts
byassigningspecificpropertiestoselectorssuchasbody,h1,or.class-name.Thesestylescan
be applied globally or to individual elementstoachieveaconsistentandvisuallyappealing
design.Additionally,CSSenablestheuseofbackgroundimagesforboththeentirepageand
individual elements, allowing for creative customization with properties like
background-image, background-size, and background-position.
lgorithm: -
A
Step 1: Define the HTML Structure
1. HTML Tags:
o reate the basic HTML structure with tags like <html>, <head>, and <body>.
C
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. C
reate Page Sections:
o
In the <body>, add the following sections:
▪ Header Section: A header with a main heading <h1>and a paragraph
<p>.
Date:- Roll No:- Class:-
▪ ain Content Section: A section with a subheading <h2> and a
M
paragraph <p>.
▪ Highlighted Section: A section that draws attentionwith 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 etfont familyandfont sizefor the page.
S
o
Set abackground imagefor the entire page.
o
Settext colorfor the page.
2. H
eader Styles:
o efine a differentfontfor the header section.
D
o
Set abackground coloror animagefor the headersection.
o
Define text color for headings and paragraphs in the header.
o
Add padding and margin to position the content properly.
3. M
ain Content Section Styles:
o et a background image for the main content.
S
o
Definefont family,font size, andcolorfor headingsand paragraphs inside
this section.
o Add padding and margin for spacing between content and borders.
4. H
ighlighted Section Styles:
o et another background image for this section to make it stand out.
S
o
Adjust text styles to make this section visually distinct (e.g., bold, different
colors).
o Use padding and margin for spacing.
5. F
ooter Styles:
o et abackground colorfor the footer section.
S
o
Change thefontandtext colorin 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 thecolor,text-decoration, andhover effects(e.g., underline links on
hover).
Step 4: Make the Page Responsive (optional)
1. Use Media Queries:
Date:- Roll No:- Class:-
o
reate media queries to adjust the layout and font size for smaller screens
C
(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;
text-align: center;
color: white; /* White text for contrast */
}
Date:- Roll No:- Class:-
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 */
Date:- Roll No:- Class:-
color: white; /* White text color for footer */
text-align: center; /* Center-align footer text */
padding: 20px;
position: relative;
bottom: 0;
width: 100%;
}
/* 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>
Date:- Roll No:- Class:-
<!-- 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>
<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:-
Date:- Roll No:- Class:-
Experiment 8
Objective:CSS: Design a web page using CSS(CascadingStyle 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:
1. Background Image and Repetition: The background-repeatproperty 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 stylinglinks 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:
1. Create the HTML structure:
Date:- Roll No:- Class:-
o dd a basic structure with a header, main content, and links.
A
o
Use the <style> tag in the <head> section to include internal CSS styles.
2. C
ontrol the background image repetition:
o
se the background-repeat property in CSS to control how the image repeats
U
(e.g., no-repeat, repeat-x, or repeat-y).
3. D
efine link styles using pseudo-classes:
o
se the pseudo-classes a:link, a:visited, a:active, and a:hover to style links for
U
different states.
4. S
ave 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: 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;
Date:- Roll No:- Class:-
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 */
}
a:hover {
color: red; /* Link color when hovered */
text-decoration: underline; /* Underline on hover */
}
Date:- Roll No:- Class:-
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>
<p>Here are some example links:</p>
<ul>
Date:- Roll No:- Class:-
<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
bjective:
O
Develop a static web page on a chosen topic integrating HTML, CSS, and JavaScript.
Topics:
1 . ersonal Portfolio
P
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 {
Date:- Roll No:- Class:-
f ont-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;
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;
Date:- Roll No:- Class:-
}
/* About section */
#about {
background-color: #fff;
color: #333;
}
#about p {
font-size: 1.1em;
margin: 20px 0;
}
/* Projects section */
#projects {
background-color: #f9f9f9;
}
.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;
}
Date:- Roll No:- Class:-
#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;
}
/* 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>Reeti Srivastava</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>
Date:- Roll No:- Class:-
/ul>
<
</nav>
/header>
<
!-- About Section -->
<
<section id="about">
<h2>About Me</h2>
<p>Hello, I am Reeti Srivastava, 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>
<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: johndoe@example.com</p>
<p>Phone: +123 456 7890</p>
<p>LinkedIn: <a href="#">linkedin.com/in/johndoe</a></p>
</section>
!-- Footer Section -->
<
<footer>
<p>© 2025 Reeti Srivastava. All rights reserved.</p>
</footer>
</body>
</html>
Output
Date:- Roll No:- Class:-
You might also like
- Q1) Design The Following Web Page Using HTML5 Sematic ElementsNo ratings yetQ1) Design The Following Web Page Using HTML5 Sematic Elements11 pages
- Web Technologies Lab: Task 1: 1. Home PageNo ratings yetWeb Technologies Lab: Task 1: 1. Home Page49 pages
- Internet Technologies and Services Lab ManualNo ratings yetInternet Technologies and Services Lab Manual72 pages
- WT Lab Manual: Overview Object Web TechnologiesNo ratings yetWT Lab Manual: Overview Object Web Technologies83 pages
- AJWT LAB MANUAL FOR 3-2 Students of IT & CSENo ratings yetAJWT LAB MANUAL FOR 3-2 Students of IT & CSE58 pages
- GitHub - HubSpotContentOffers - Online-Registration-Form - Online Registration Form For Unit 3 of Treehouse TechdegreeNo ratings yetGitHub - HubSpotContentOffers - Online-Registration-Form - Online Registration Form For Unit 3 of Treehouse Techdegree1 page
- Design The Following Static Web Pages Required For An Online Book Store Web SiteNo ratings yetDesign The Following Static Web Pages Required For An Online Book Store Web Site24 pages
- Web Technologies Lab Manual R09 BY BHAVSINGH MALOTHNo ratings yetWeb Technologies Lab Manual R09 BY BHAVSINGH MALOTH47 pages
- WEEK 1 & 2 Static Web Pages Required For An Online Book Store Web SiteNo ratings yetWEEK 1 & 2 Static Web Pages Required For An Online Book Store Web Site11 pages
- UI Redressing: Attacks and Countermeasures Revisited: Marcus Niemietz Marcus - Niemietz@rub - deNo ratings yetUI Redressing: Attacks and Countermeasures Revisited: Marcus Niemietz Marcus - Niemietz@rub - de45 pages
- Prof. Varsha Tank (IT/ICT Dept. - Ljiet) : Presented byNo ratings yetProf. Varsha Tank (IT/ICT Dept. - Ljiet) : Presented by13 pages
- Double Guard: Detecting Intrusions in Multitier Web ApplicationsNo ratings yetDouble Guard: Detecting Intrusions in Multitier Web Applications5 pages
- A Possible Rapid Move Into The Stock Has Been DetectedNo ratings yetA Possible Rapid Move Into The Stock Has Been Detected3 pages
- I. Read The Questions Carefully. Write The Letter of The Correct Answer On The Space Provided For Before Each Number100% (1)I. Read The Questions Carefully. Write The Letter of The Correct Answer On The Space Provided For Before Each Number2 pages
