Online Book Store Website
Static Web Pages Design
Homepage
• • Contains three frames:
• - Header (Top Frame)
• - Navigation Menu (Left Frame)
• - Main Content (Right Frame)
• Provides easy navigation across pages.
Login Page
• Allows users to login with username and
password.
• Contains input fields:
- Username
- Password
• Buttons for Login and Reset.
Catalogue Page
• Displays list of books in tabular format.
• Columns:
- Book ID
- Title
- Author
- Price
• Users can browse available books.
Registration Page
• Allows new users to register.
• Fields include:
- Full Name
- Email
- Password & Confirm Password
- Phone
- Address
• Buttons for Register and Clear.
Summary
• This static website includes:
• • Homepage with frames
• • Login page for users
• • Catalogue page displaying books
• • Registration page for new users
• ✔ Simple and easy-to-navigate design.
Forms in HTML
• Forms are used to collect user input.
• Elements: text fields, password, radio buttons,
checkboxes, etc.
• Example code:
• <form>
Username: <input type="text" name="username"><br>
Password: <input type="password“
name="password"><br>
<input type="submit" value="Login">
</form>
Frames in HTML
• Frames divide the browser window into multiple sections.
• Each section can load a different HTML page.
• Example code:
• <frameset rows="20%,*">
• <frame src="header.html">
• <frameset cols="20%,*">
• <frame src="menu.html">
• <frame src="content.html">
• </frameset>
• </frameset>
Links in HTML
• Links (anchors) allow navigation between
pages.
• Example:
<a href="catalogue.html">View Catalogue</a>
• To open inside a frame:
• <a href="login.html"
target="content">Login</a>
Login and Reset Buttons
• Buttons are used to perform actions in forms.
• Common buttons in login forms:
✔ Login (Submit) button → sends data to the
server
✔ Reset button → clears the form fields
Example Code
• <form>
• <label>Username: </label>
• <input type="text" name="username"><br><br>
• <label>Password: </label>
• <input type="password" name="password"><br><br>
• <input type="submit" value="Login"> <!-- Login Button --
>
• <input type="reset" value="Reset"> <!-- Reset Button -->
• </form>
Explanation
• <input type="submit">
– Creates a Login button
– Submits form data to the server
• <input type="reset">
– Creates a Reset button
– Clears all input fields in the form
Homepage (with Frameset) → index.html
• <!DOCTYPE html>
• <html>
• <head>
• <title>Online Book Store - Home</title>
• </head>
• <frameset rows="20%,*">
• <!-- Top frame (Header) -->
• <frame src="header.html" name="header" scrolling="no" noresize>
• <!-- Body frames (Left navigation + Content) -->
• <frameset cols="20%,*">
• <frame src="menu.html" name="menu">
• <frame src="welcome.html" name="content">
• </frameset>
• </frameset>
• </html>
header.html
• <!DOCTYPE html>
• <html>
• <head>
• <title>Header</title>
• </head>
• <body bgcolor="lightblue" align="center">
• <h1>📚 Welcome to Online Book Store</h1>
• </body>
• </html>
menu.html
• <!DOCTYPE html>
• <html>
• <head>
• <title>Menu</title>
• </head>
• <body bgcolor="lightgrey">
• <h3>Menu</h3>
• <a href="login.html" target="content">Login</a><br>
• <a href="registration.html" target="content">Register</a><br>
• <a href="catalogue.html" target="content">Catalogue</a><br>
• </body>
• </html>
welcome.html
• <!DOCTYPE html>
• <html>
• <head>
• <title>Welcome</title>
• </head>
• <body>
• <h2>Welcome to the Online Book Store</h2>
• <p>Find your favorite books at the best price!</p>
• </body>
• </html>
2) Login Page → login.html
• <!DOCTYPE html>
• <html>
• <head>
• <title>Login</title>
• </head>
• <body bgcolor="lightyellow">
• <h2>Login</h2>
• <form>
• <label>Username: </label>
• <input type="text" name="username"><br><br>
• <label>Password: </label>
• <input type="password" name="password"><br><br>
• <input type="submit" value="Login">
• <input type="reset" value="Clear">
• </form>
• </body>
• </html>
3) Catalogue Page → catalogue.html
• <!DOCTYPE html>
• <html>
• <head>
• <title>Catalogue</title>
• </head>
• <body bgcolor="lightgreen">
• <h2>Book Catalogue</h2>
• <table border="1" cellpadding="10">
• <tr>
• <th>Book ID</th>
• <th>Title</th>
• <th>Author</th>
• <th>Price</th>
• </tr>
• <tr>
• <td>101</td>
• <td>Let Us C</td>
• <td>Yashavant Kanetkar</td>
• <td>₹350</td>
• </tr>
• <tr>
• <td>102</td>
• <td>Java Programming</td>
• <td>E. Balagurusamy</td>
• <td>₹450</td>
• </tr>
• <tr>
• <td>103</td>
• <td>Python Crash Course</td>
• <td>Eric Matthes</td>
• <td>₹550</td>
• </tr>
• <tr>
• <td>104</td>
• <td>Introduction to Algorithms</td>
• <td>Cormen</td>
• <td>₹950</td>
• </tr>
• </table>
• </body>
• </html>
Registration Page → registration.html
• <!DOCTYPE html>
• <html>
• <head>
• <title>Registration</title>
• </head>
• <body bgcolor="lightpink">
• <h2>User Registration</h2>
• <form>
• <label>Full Name: </label>
• <input type="text" name="fullname"><br><br>
• <label>Email: </label>
• <input type="email" name="email"><br><br>
•
• <label>Password: </label>
• <input type="password" name="password"><br><br>
•
• <label>Confirm Password: </label>
• <input type="password" name="confirmpassword"><br><br>
•
• <label>Phone: </label>
• <input type="text" name="phone"><br><br>
•
• <label>Address: </label><br>
• <textarea name="address" rows="4" cols="30"></textarea><br><br>
•
• <input type="submit" value="Register">
• <input type="reset" value="Clear">
• </form>
• </body>
• </html>
