online

1. Header Component (header.html)
 File Information:
 Purpose: Main header display for the Online Book Store
 Features: Simple header with bookstore title and styling
 Dependencies: Links to style.css for CSS styling
 <!DOCTYPE html>
 <html>
 <head>
 <title>Header</title>
 <link rel='stylesheet' href='style.css'>
 </head>
 <body style="background-color:#A7D8FF; text-align:center;">
 </html>
 <h1>
 📚
 Online Book Store</h1>
 </body>
2. Home Layout (home.html)
 File Information:
 Purpose: Main application layout using HTML frames
 Structure: Nested frameset with header, menu, and content areas
 Technology: Uses HTML frames (deprecated but functional)
 <!DOCTYPE html>
 <html>
 <head>
 <title>Online Book Store - Home</title>
 </head>
 <frameset rows="20%,80%">
 <frame name="top" src="header.html">
 <frameset cols="20%,80%">
 <frame name="menu" src="menu.html">
 <frame name="content" src="welcome.html">
 </frameset>
 </frameset>
 </html>
3. Navigation Menu (menu.html)
 File Information:
 Purpose: Navigation menu with links to different sections
 Features: Three main navigation links with target attributes
 Styling: Light gray background with linked CSS
 <!DOCTYPE html>
 <html>
 <head>
 <link rel='stylesheet' href='style.css'>
 </head>
 <body style="background-color:#F0F0F0;">
 <h3>Menu</h3>
 <a href="login.html" target="content">Login</a>
 <br><br>
 <a href="register.html" target="content">Register</a>
 <br><br>
 <a href="catalogue.html" target="content">Catalogue</a>
 <br><br>
 </body>
 </html>
4. Login Form (login.html)
 File Information:
 Purpose: User login form for authentication
 Fields: Username (text input) and Password (password input)
 Actions: Submit and Clear buttons
 <!DOCTYPE html>
 <html>
 <head>
 <title>Login</title>
 <link rel='stylesheet' href='style.css'>
 </head>
 <body>
 <h2>Login Form</h2>
 <form>
 Username: <input type="text">
 <br><br>
 Password: <input type="password">
 <br><br>
 <input type="submit" value="Login">
 <input type="reset" value="Clear">
 </form>
 </body>
 </html>
5. Registration Form (register.html)
 File Information:
 Purpose: New user registration form
 Fields: Name, Email, Password, Gender (radio buttons), Address (textarea)
 Layout: Table-based form layout
 <!DOCTYPE html>
 <html>
 <head>
 <title>Register</title>
 <link rel='stylesheet' href='style.css'>
 </head>
 <body>
 <h2>User Registration</h2>
 <form>
 <table>
 <tr><td>Name:</td><td><input type="text"></td></tr>
 <tr><td>Email:</td><td><input type="email"></td></tr>
 <tr><td>Password:</td><td><input type="password"></td></tr>
 <tr><td>Gender:</td><td>
 <input type="radio" name="gender">Male
 <input type="radio" name="gender">Female</td></tr>
 <tr><td>Address:</td><td><textarea rows="4"></textarea></td></tr>
 <tr><td></td><td>
 <input type="submit" value="Register">
 <input type="reset" value="Clear">
 </td></tr>
 </table>
 </form>
 </body>
 </html>
6. Book Catalogue (catalogue.html)
 File Information:
 Purpose: Book catalogue with pricing and purchase options
 Features: Table layout with book titles, authors, prices, and "Add" buttons
 Books: 4 books with Indian Rupee pricing
 <!DOCTYPE html>
 <html>
 <head>
 <title>Catalogue</title>
 <link rel='stylesheet' href='style.css'>
 </head>
 <body>
 <h2>Book Catalogue</h2>
 <table width="100%">
 <tr>
 <th>Book Title</th>
 <th>Author</th>
 <th>Price</th>
 <th>Buy</th>
 </tr>
 <tr><td>Web Technology</td><td>A. Sharma</td><td>₹550</td><td><button>Add</button></td></tr>
 <tr><td>Java Programming</td><td>Herbert Schildt</td><td>₹750</td><td><button>Add</button></td></tr>
 <tr><td>Database Systems</td><td>Korth</td><td>₹600</td><td><button>Add</button></td></tr>
 <tr><td>Python for Beginners</td><td>John Doe</td><td>₹500</td><td><button>Add</button></td></tr>
 </table>
 </body>
 </html>
7. CSS Styles (style.css)
 File Information:
 Purpose: Complete CSS styling for all HTML components
 Categories: Base styles, form elements, table styling, hover effects
 Color Scheme: Professional blue theme (#2E4A62)
 body {
 font-family: Arial, sans-serif;
 margin: 20px;
 }
 h2, h1, h3 {
 color: #2E4A62;
 }
 input, textarea, select {
 padding: 6px;
 width: 90%;
 border: 1px solid #ccc;
 border-radius: 4px;
 }
 button, input[type=submit], input[type=reset] {
 padding: 8px 15px;
 border: none;
 background-color: #2E4A62;
 color: white;
 cursor: pointer;
 border-radius: 4px;
 }
 button:hover, input[type=submit]:hover, input[type=reset]:hover {
 background-color: #1b2f40;
 }
 table {
 border-collapse: collapse;
 }
 th {
 }
 background-color: #2E4A62;
 color: white;
 td, th {
 padding: 10px;
 border: 1px solid gray;
 }