Scribd
Upload
2 views19 pages

Online Bookstore Static Webpage Design

The document outlines the design and implementation of a static webpage for an online bookstore, detailing various pages including the homepage, login page, catalog page, and cart page. It includes HTML code examples for each page, showcasing features like navigation menus, book listings, and a registration form. The document emphasizes user-friendly design elements and the organization of content for easy navigation.

Uploaded by

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

Online Bookstore Static Webpage Design

The document outlines the design and implementation of a static webpage for an online bookstore, detailing various pages including the homepage, login page, catalog page, and cart page. It includes HTML code examples for each page, showcasing features like navigation menus, book listings, and a registration form. The document emphasizes user-friendly design elements and the organization of content for easy navigation.

Uploaded by

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

​ ​ ​ EXPERIMENT NO.

Aim :
Design a static webpage required for an online bookstore website.

Software used : Visual Studio Code (version 1.104), Chrome


Hardware used : Processor – Intel(R) Core (TM) i7-2.10GHz
​ ​ Operating System – Windows 11 Pro
​ ​ Memory – 16 GB RAM Storage – 500 GB SSD
​ ​ Display – 23.8 inch
​ ​ Network Adaptor – Ethernet 802.3
​ ​ Mouse – HP
​ ​ Keyboard – HP

Theory :
This HTML code creates a simple webpage for an online bookstore, featuring a
welcoming header, a navigation menu, and a list of featured books. The <nav> section
contains links to important pages like Home, Books Catalog, Registration, Login, and
Contact Us, allowing users to easily navigate the site. Below the navigation bar, the
page displays a section titled “Featured Books” with clickable links to individual book
pages, such as The C Programming Language, Data Structures and Algorithms Made
Easy and Introduction to Algorithms. The structure uses basic HTML elements like
headings, unordered lists, and hyperlinks to organize content clearly, making it
user-friendly and easy to explore the bookstore’s offerings.

HOMEPAGE:

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Online Book Store</title>
</head>
<body>

<table border="1" width="100%" cellspacing="0" cellpadding="10">


<!-- Header -->
<tr bgcolor="#f4b183">
<th width="15%">Logo</th>
<th colspan="5">Web Site Name</th>
</tr>

<!-- Menu -->


<tr bgcolor="#f4b183">
<td>&nbsp;</td>
<td align="center"><a href="#">Home</a></td>
<td align="center"><a href="#">Login</a></td>
<td align="center"><a href="#">Registration</a></td>
<td align="center"><a href="#">Catalogue</a></td>
<td align="center"><a href="#">Cart</a></td>
</tr>

<!-- Sidebar + Main content -->


<tr>
<td valign="top" width="15%">
CSE<br/>
ECE<br/>
EEE<br/>
CIVIL
</td>
<td colspan="5" align="center" height="180">
books, coffee, and main character energy — welcome to your digital reading
</td>
</tr>
</table>
</body>
</html>
Webpage:​

​
EXPERIMENT NO. 2

LOGINPAGE:

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Online Book Store - Login Layout</title>
</head>
<body>
<table border="1" width="95%" cellspacing="0" cellpadding="0" align="center">
<!-- Top header -->
<tr bgcolor="#f4b183">
<th width="18%" style="padding:10px;">Logo</th>
<th colspan="5" style="padding:10px;">WebSite Name</th>
</tr>
<!-- Menu row -->
<tr bgcolor="#f8ddd0">
<td>&nbsp;</td>
<td align="center" style="padding:10px;">Home</td>
<td align="center" style="padding:10px;">Login</td>
<td align="center" style="padding:10px;">Registration</td>
<td align="center" style="padding:10px;">Catalogue</td>
<td align="center" style="padding:10px;">Cart</td>
</tr>
<!-- Sidebar + Main content -->
<tr>
<!-- Left sidebar -->
<td valign="top" width="18%" style="padding:18px;">
CSE<br/><br/>
ECE<br/><br/>
EEE<br/><br/>
CIVIL
</td>
<!-- Main content area (spans columns) -->
<td colspan="5" valign="top" height="360" style="padding:20px;">
<!-- Add some vertical space to match screenshot -->
<br/><br/>
<!-- Login panel placed toward the right center using another table -->
<table width="60%" align="right" border="0" cellpadding="6" cellspacing="0">
<tr>
<td colspan="2" align="center"><b>Login Page</b></td>
</tr>
<tr>
<td align="right" width="40">User Name:</td>
<td align="left">
<input type="text" name="username" size="20" />
</td>
</tr>
<tr>
<td align="right">Password:</td>
<td align="left">
<input type="password" name="password" size="20" />
</td>
</tr>
<tr><td colspan="2">&nbsp;</td></tr>
<tr>
<td colspan="2" align="center">
<!-- Buttons grouped and spaced -->
<input type="submit" value="Submit" />
&nbsp;&nbsp;&nbsp;
<input type="reset" value="Reset" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Webpage:
EXPERIMENT NO. 3

CATALOGUE PAGE:

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Online Book Store - CSE Catalog</title>
</head>
<body>

<!-- Outer table matching screenshot layout -->


<table border="1" width="95%" cellspacing="0" cellpadding="0" align="center">
<!-- Header -->
<tr bgcolor="#f4b183">
<th width="15%" style="padding:10px; text-align:left;">Logo</th>
<th colspan="5" style="padding:10px; text-align:center;">WebSite Name</th>
</tr>
<!-- Menu row -->
<tr bgcolor="#f8ddd0">
<td>&nbsp;</td>
<td align="center" style="padding:10px;">Home</td>
<td align="center" style="padding:10px;">Login</td>
<td align="center" style="padding:10px;">Registration</td>
<td align="center" style="padding:10px;">Catalogue</td>
<td align="center" style="padding:10px;">Cart</td>
</tr>
<!-- Content row: sidebar + catalog -->
<tr>
<!-- Left sidebar -->
<td valign="top" width="15%" style="padding:18px;">
CSE<br/><br/>
ECE<br/><br/>
EEE<br/><br/>
CIVIL
</td>
<td colspan="5" valign="top" style="padding:12px;">
<table border="0" width="100%" cellspacing="0" cellpadding="8">
<tr>
<td width="18%"></td>
<td width="45%"><b>Book Details</b></td>
<td width="12%" align="center"><b>Price</b></td>
<td width="25%" align="center"><b>Action</b></td>
</tr>
<tr>
<td valign="top" align="center" style="border-right:1px solid #999;">
<img src="images/data_structures.jpg" alt="Data Structures" width="90"
height="120">
</td>
<td valign="top" style="border-right:1px solid #999;">
<b>Data Structures And Algorithms Made Easy In Java</b><br>
Author: Narasimha Karumanchi<br>
Publication: CareerMonk<br>
<br>
<b>Also includes:</b> theory + solved problems
</td>
<td valign="top" align="center" style="border-right:1px solid #999;">
$42.00
</td>
<td valign="top" align="center">
<img src="images/[Link]" alt="Add to cart" style="cursor:pointer;"><br>
</td>
</tr>
<tr>
<td valign="top" align="center" style="border-right:1px solid #999;">
<img src="images/[Link]" alt="COA" width="90" height="120">
</td>
<td valign="top" style="border-right:1px solid #999;">
<b>Computer Organization and Architecture (COA)</b><br>
Author: William Stallings (or your chosen author)<br>
Publication: Pearson / McGraw-Hill<br>
<br>
Covers CPU organization, memory, I/O, instruction sets.
</td>
<td valign="top" align="center" style="border-right:1px solid #999;">
$50.00
</td>
<td valign="top" align="center">
<img src="images/[Link]" alt="Add to cart"
style="cursor:pointer;"><br>
</td>
</tr>
<tr>
<td valign="top" align="center" style="border-right:1px solid #999;">
<img src="images/programming_python.jpg" alt="Programming Python"
width="90" height="120">
</td>
<td valign="top" style="border-right:1px solid #999;">
<b>Programming Python: Powerful Object-Oriented Programming</b><br>
Author: Mark Lutz<br>
Publication: O'Reilly Media<br>
<br>
In-depth coverage of Python for application development.
</td>
<td valign="top" align="center" style="border-right:1px solid #999;">
$55.00
</td>
<td valign="top" align="center">
<img src="images/[Link]" alt="Add to cart"
style="cursor:pointer;"><br>
</td>
</tr>
<tr>
<td valign="top" align="center" style="border-right:1px solid #999;">
<img src="images/pragmatic_programmer.jpg" alt="Pragmatic Programmer"
width="90" height="120">
</td>
<td valign="top" style="border-right:1px solid #999;">
<b>The Pragmatic Programmer: Your Journey to Mastery</b><br>
Authors: Andrew Hunt, David Thomas<br>
Publication: Addison-Wesley<br>
<br>
Timeless advice and best practices for software developers.
</td>
<td valign="top" align="center" style="border-right:1px solid #999;">
$45.00
</td>
<td valign="top" align="center">
<img src="images/[Link]" alt="Add to cart"
style="cursor:pointer;"><br>
</td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>

Webpage:
EXPERIMENT NO. 4

CARTPAGE:

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Cart Page - Online Book Store</title>
</head>
<body>
<table border="1" width="95%" cellspacing="0" cellpadding="6"
align="center">
<tr bgcolor="#f4b183">
<th width="16%" style="padding:10px; text-align:left;">Logo</th>
<th colspan="5" style="padding:10px; text-align:center;">WebSite
Name</th>
</tr>
<tr bgcolor="#f8ddd0">
<td>&nbsp;</td>
<td align="center" style="padding:8px;">Home</td>
<td align="center" style="padding:8px;">Login</td>
<td align="center" style="padding:8px;">Registration</td>
<td align="center" style="padding:8px;">Catalogue</td>
<td align="center" style="padding:8px;">Cart</td>
</tr>
<!-- Content row -->
<tr>
<!-- Sidebar -->
<td valign="top" width="16%" style="padding:12px;">
CSE<br/><br/>
ECE<br/><br/>
EEE<br/><br/>
CIVIL
</td>
<td colspan="5" valign="top" style="padding:12px;">
<table border="1" width="100%" cellspacing="0" cellpadding="6">
<thead>
<tr bgcolor="#f8f8f8">
<th style="text-align:left;">Book Name</th>
<th style="text-align:right;">Price</th>
<th style="text-align:center;">Quantity</th>
<th style="text-align:right;">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data Structures and Algorithms Made Easy in Java</td>
<td style="text-align:right;">$42.00</td>
<td style="text-align:center;">1</td>
<td style="text-align:right;">$42.00</td>
</tr>
<tr>
<td>Computer Organization and Architecture (COA)</td>
<td style="text-align:right;">$50.00</td>
<td style="text-align:center;">2</td>
<td style="text-align:right;">$100.00</td>
</tr>
<tr>
<td>Programming Python: Powerful Object-Oriented Programming</td>
<td style="text-align:right;">$55.00</td>
<td style="text-align:center;">1</td>
<td style="text-align:right;">$55.00</td>
</tr>
<tr>
<td>The Pragmatic Programmer: Your Journey to Mastery</td>
<td style="text-align:right;">$45.00</td>
<td style="text-align:center;">1</td>
<td style="text-align:right;">$45.00</td>
</tr>
<tr>
<td colspan="3" align="right"><b>Total Amount</b></td>
<td align="right"><b>$242.00</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
</html>

Webpage:
EXPERIMENT NO. 5

LOGIN PAGE:
​
​ Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Registration Form - Online Book Store</title>
</head>
<body>
<h2 align="center">Registration Form</h2>
<form action="#" method="post">
​ <table border="1" cellspacing="0" cellpadding="10" align="center" width="50%">
​ <tr>
<td><b>Name:</b></td>
<td><input type="text" name="name" size="40" required></td>
</tr>
<tr>
<td><b>Password:</b></td>
<td><input type="password" name="password" size="40" required></td>
​ </tr>
<tr>
<td><b>E-mail ID:</b></td>
<td><input type="email" name="email" size="40" required></td>
</tr>
<tr>
<td><b>Phone Number:</b></td>
​ <td><input type="text" name="phone" size="40" required></td>
</tr>
<tr>
<td><b>Sex:</b></td>
<td>
<input type="radio" name="sex" value="Male"> Male
<input type="radio" name="sex" value="Female"> Female
</td>
</tr>
<tr>
<td><b>Date of Birth:</b></td>
<td>
<select name="day">
<option value="">Day</option>
<script>
for(let i=1;i<=31;i++) [Link](`<option value="${i}">${i}</option>`);
</script>
</select>
<select name="month">
<option value="">Month</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<select name="year">
<option value="">Year</option>
<script>
for(let y=1970; y<=2025; y++) [Link](`<option
value="${y}">${y}</option>`);
</script>
</select>
</td>
</tr>
<tr>
<td><b>Languages Known:</b></td>
<td>
<input type="checkbox" name="lang" value="English"> English
<input type="checkbox" name="lang" value="Telugu"> Telugu
<input type="checkbox" name="lang" value="Hindi"> Hindi
<input type="checkbox" name="lang" value="Tamil"> Tamil
</td>
</tr>
<tr>
<td><b>Address:</b></td>
<td><textarea name="address" rows="4" cols="40" placeholder="Enter your
address"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Register">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
Webpage:

You might also like