Design the following static web pages required for an online book store web site.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Online Book Store</title>
</head>
<frameset rows="15%,10%,*">
<frameset cols="20%,*">
<frame name="f11" src="logo.html" scrolling="no"></frame>
<frame name="f12" src="title.html" scrolling="no"></frame>
</frameset>
<frameset cols="20%,20%,20%,20%,*">
<frame name="f21" src="home.html"></frame>
<frame name="f22" src="login.html"></frame>
<frame name="f23" src="reg.html"></frame>
<frame name="f24" src="cat.html"></frame>
<frame name="f25" src="cart.html"></frame>
</frameset>
<frameset cols="20%,*">
<frame name="f31" src="branches.html"></frame>
<frame name="f32" src="homepage.html"></frame>
</frameset>
</frameset>
</html>
logo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<center><img src="images/logo.jpg" width="100" height="100" /></center>
</body>
</html>
title.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<h1 align="center">Online Book Store</h1>
</body>
</html>
home.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<a href="homepage.html" target="f32">Home</a>
</body>
</html>
login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<a href="loginpage.html" target="f32">Login</a>
</body>
</html>
reg.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<a href="regpage.html" target="f32">Registration</a>
</body>
</html>
cat.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<a href="catpage.html" target="f32">Catalogue</a>
</body>
</html>
cart.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<a href="cartpage.html" target="f32">Cart</a>
</body>
</html>
branches.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<ul>
<li>Civil</li>
<li>EEE</li>
<li>Mech</li>
<li>ECE</li>
<li>CSE</li>
<li>MBA</li>
<li>MCA</li>
</ul>
</body>
</html>
homepage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p align="justify">Welcome to Online Book Store.<br>Here you find all types of books, magazines and national and international journals.</p>
</body>
</html>
loginpage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<form>
<table align="center" cellspacing="15px">
<tr>
<td><b>Login</b></td>
<td><input type="text" name="uname" /></td>
</tr>
<tr>
<td><b>Password</b></td>
<td><input type="password" name="upwd" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" />
<input type="reset" />
</td>
</tr>
</table>
</form>
</body>
</html>
regpage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form>
<h1 align="center"> REGISTRATION </h1>
<table align="center" cellspacing="10">
<tr>
<td>Name::</td>
<td> <input name="uname" type="text"> </td>
</tr>
<tr>
<td>Password::</td>
<td> <input name="pwd" type="password"> </td>
</tr>
<tr>
<td> E-mail ID:: </td>
<td> <input name="email" type="text"> </td>
</tr>
<tr>
<td> Phone Number:: </td>
<td> <input name="phno" type="text" maxlength="10"> </td>
</tr>
<tr>
<td> Gender:: </td>
<td><input name="gender" type="radio" value="Male"> Male
<input name="gender" type="radio" value="Female"> Female</td>
</tr>
<tr>
<td> Date of Birth </td>
<td>
<input type="date" name="dob" />
</td>
</tr>
<tr>
<td valign="top">Languages Known::</td>
<td>
<input name="lk" type="checkbox" value="English"> English<br>
<input name="lk" type="checkbox" value="Telugu"> Telugu<br>
<input name="lk" type="checkbox" value="Hindi"> Hindi<br>
<input name="lk" type="checkbox" value="Tamil"> Tamil<br>
</td>
</tr>
<tr>
<td>Address</td>
<td><textarea></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"> <input type="submit" value="Register">
<input type="reset" value="Cancel"> </td>
</tr>
</table>
</form>
</body>
</html>
catpage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form>
<table cellspacing="10">
<tr>
<td><img src="images/html5.jpg" width="100" height="100"></td>
<td> Title : HTML5 and CSS3 <br>
Author : Sasha Vodnik <br> </td>
<td>Rs. 700 /- </td>
<td><input type="image" src="images/addToCart.jpg" width="150" height="70"></td>
</tr>
<tr>
<td><img src="images/php.jpg" width="100" height="100"></td>
<td> Title : PHP and MYSQL <br>
Author : W. Jason Gilmore <br> </td>
<td>Rs. 650 /- </td>
<td><input type="image" src="images/addToCart.jpg" width="150" height="70"></td>
</tr>
<tr>
<td><img src="images/j2ee.jpg" width="100" height="100"></td>
<td> Title : The Complete Reference JAVA 2 <br>
Author : Herbert Schildt <br> </td>
<td>Rs. 850 /- </td>
<td><input type="image" src="images/addToCart.jpg" width="150" height="70"></td>
</tr>
</table>
</form>
</body>
</html>
cartpage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<h1 align="center">Shopping Cart</h1>
<form>
<table align="center" cellpadding="20px">
<tr>
<th>Product</th>
<th>Description</th>
<th>Price</th>
<th>Quantity</th>
<th>Subtotal</th>
</tr>
<tr>
<td><img src="images/html5.jpg" width="100" height="100" /></td>
<td>Title : HTML5 and CSS3 <br>Author : Sasha Vodnik</td>
<td>Rs. 700 /-</td>
<td><input type="text" size="2" value="1" readonly /></td>
<td>Rs. 700 /-</td>
</tr>
<tr>
<td><img src="images/php.jpg" width="100" height="100" /></td>
<td>Title : PHP and MYSQL <br>Author : W. Jason Gilmore </td>
<td>Rs. 650 /- </td>
<td><input type="text" size="2" value="1" readonly /></td>
<td>Rs. 650 /- </td>
</tr>
<tr>
<th colspan="2">Promotion Code</td>
<th colspan="3">Cart Totals</td>
</tr>
<tr>
<td colspan="2"><input type="text" placeholder="Coupon code" /> <input type="button" value="Apply Coupon" /></td>
<th colspan="2">Subtotal</th>
<td>Rs. 1350 /-</td>
</tr>
<tr>
<td colspan="2"></td>
<th colspan="2">Total</th>
<th>Rs. 1350 /-</th>
</tr>
<tr>
<td colspan="5" align="right"><input type="button" value="Proceed to Checkout" /></td>
</tr>
</table>
</form>
</body>
</html>
PaymentGateway.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Payment Gateway</title>
</head>
<body>
<h1 align="center">Credit Card Payment Gateway</h1>
<hr>
<form>
<table align="center" cellpadding="20px">
<tr>
<td colspan="2" align="center"><h2>Payment Details</h2></td>
</tr>
<tr>
<td colspan="2">
<b>CARD NUMBER</b><br>
<input type="text" placeholder="Valid Card Number" size="52" />
</td>
</tr>
<tr>
<td><b>Expire Date</b><br><input type="text" placeholder="MM/YY" /></td>
<td><b>CV Code</b><br><input type="text" placeholder="CVV" /></td>
</tr>
<tr>
<td colspan="2">
<b>CARD OWNER</b><br>
<input type="text" placeholder="Card Owner Name" size="52" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="Confirm Payment">
</td>
</tr>
</table>
</form>
</body>
</html>
- Home Page
- Login Page
- Registration Page
- Catalogue Page
- Cart Page
- Payment by Credit Cart
Create a projectfolder and save all the following html files in the projectfolder. Create another imagesfolder inside the projectfolder and copy the required images into the imagesfolder.
index.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Online Book Store</title>
</head>
<frameset rows="15%,10%,*">
<frameset cols="20%,*">
<frame name="f11" src="logo.html" scrolling="no"></frame>
<frame name="f12" src="title.html" scrolling="no"></frame>
</frameset>
<frameset cols="20%,20%,20%,20%,*">
<frame name="f21" src="home.html"></frame>
<frame name="f22" src="login.html"></frame>
<frame name="f23" src="reg.html"></frame>
<frame name="f24" src="cat.html"></frame>
<frame name="f25" src="cart.html"></frame>
</frameset>
<frameset cols="20%,*">
<frame name="f31" src="branches.html"></frame>
<frame name="f32" src="homepage.html"></frame>
</frameset>
</frameset>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<center><img src="images/logo.jpg" width="100" height="100" /></center>
</body>
</html>
title.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<h1 align="center">Online Book Store</h1>
</body>
</html>
home.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<a href="homepage.html" target="f32">Home</a>
</body>
</html>
login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<a href="loginpage.html" target="f32">Login</a>
</body>
</html>
reg.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<a href="regpage.html" target="f32">Registration</a>
</body>
</html>
cat.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<a href="catpage.html" target="f32">Catalogue</a>
</body>
</html>
cart.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<a href="cartpage.html" target="f32">Cart</a>
</body>
</html>
branches.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<ul>
<li>Civil</li>
<li>EEE</li>
<li>Mech</li>
<li>ECE</li>
<li>CSE</li>
<li>MBA</li>
<li>MCA</li>
</ul>
</body>
</html>
homepage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p align="justify">Welcome to Online Book Store.<br>Here you find all types of books, magazines and national and international journals.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<form>
<table align="center" cellspacing="15px">
<tr>
<td><b>Login</b></td>
<td><input type="text" name="uname" /></td>
</tr>
<tr>
<td><b>Password</b></td>
<td><input type="password" name="upwd" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" />
<input type="reset" />
</td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form>
<h1 align="center"> REGISTRATION </h1>
<table align="center" cellspacing="10">
<tr>
<td>Name::</td>
<td> <input name="uname" type="text"> </td>
</tr>
<tr>
<td>Password::</td>
<td> <input name="pwd" type="password"> </td>
</tr>
<tr>
<td> E-mail ID:: </td>
<td> <input name="email" type="text"> </td>
</tr>
<tr>
<td> Phone Number:: </td>
<td> <input name="phno" type="text" maxlength="10"> </td>
</tr>
<tr>
<td> Gender:: </td>
<td><input name="gender" type="radio" value="Male"> Male
<input name="gender" type="radio" value="Female"> Female</td>
</tr>
<tr>
<td> Date of Birth </td>
<td>
<input type="date" name="dob" />
</td>
</tr>
<tr>
<td valign="top">Languages Known::</td>
<td>
<input name="lk" type="checkbox" value="English"> English<br>
<input name="lk" type="checkbox" value="Telugu"> Telugu<br>
<input name="lk" type="checkbox" value="Hindi"> Hindi<br>
<input name="lk" type="checkbox" value="Tamil"> Tamil<br>
</td>
</tr>
<tr>
<td>Address</td>
<td><textarea></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"> <input type="submit" value="Register">
<input type="reset" value="Cancel"> </td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form>
<table cellspacing="10">
<tr>
<td><img src="images/html5.jpg" width="100" height="100"></td>
<td> Title : HTML5 and CSS3 <br>
Author : Sasha Vodnik <br> </td>
<td>Rs. 700 /- </td>
<td><input type="image" src="images/addToCart.jpg" width="150" height="70"></td>
</tr>
<tr>
<td><img src="images/php.jpg" width="100" height="100"></td>
<td> Title : PHP and MYSQL <br>
Author : W. Jason Gilmore <br> </td>
<td>Rs. 650 /- </td>
<td><input type="image" src="images/addToCart.jpg" width="150" height="70"></td>
</tr>
<tr>
<td><img src="images/j2ee.jpg" width="100" height="100"></td>
<td> Title : The Complete Reference JAVA 2 <br>
Author : Herbert Schildt <br> </td>
<td>Rs. 850 /- </td>
<td><input type="image" src="images/addToCart.jpg" width="150" height="70"></td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<h1 align="center">Shopping Cart</h1>
<form>
<table align="center" cellpadding="20px">
<tr>
<th>Product</th>
<th>Description</th>
<th>Price</th>
<th>Quantity</th>
<th>Subtotal</th>
</tr>
<tr>
<td><img src="images/html5.jpg" width="100" height="100" /></td>
<td>Title : HTML5 and CSS3 <br>Author : Sasha Vodnik</td>
<td>Rs. 700 /-</td>
<td><input type="text" size="2" value="1" readonly /></td>
<td>Rs. 700 /-</td>
</tr>
<tr>
<td><img src="images/php.jpg" width="100" height="100" /></td>
<td>Title : PHP and MYSQL <br>Author : W. Jason Gilmore </td>
<td>Rs. 650 /- </td>
<td><input type="text" size="2" value="1" readonly /></td>
<td>Rs. 650 /- </td>
</tr>
<tr>
<th colspan="2">Promotion Code</td>
<th colspan="3">Cart Totals</td>
</tr>
<tr>
<td colspan="2"><input type="text" placeholder="Coupon code" /> <input type="button" value="Apply Coupon" /></td>
<th colspan="2">Subtotal</th>
<td>Rs. 1350 /-</td>
</tr>
<tr>
<td colspan="2"></td>
<th colspan="2">Total</th>
<th>Rs. 1350 /-</th>
</tr>
<tr>
<td colspan="5" align="right"><input type="button" value="Proceed to Checkout" /></td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Payment Gateway</title>
</head>
<body>
<h1 align="center">Credit Card Payment Gateway</h1>
<hr>
<form>
<table align="center" cellpadding="20px">
<tr>
<td colspan="2" align="center"><h2>Payment Details</h2></td>
</tr>
<tr>
<td colspan="2">
<b>CARD NUMBER</b><br>
<input type="text" placeholder="Valid Card Number" size="52" />
</td>
</tr>
<tr>
<td><b>Expire Date</b><br><input type="text" placeholder="MM/YY" /></td>
<td><b>CV Code</b><br><input type="text" placeholder="CVV" /></td>
</tr>
<tr>
<td colspan="2">
<b>CARD OWNER</b><br>
<input type="text" placeholder="Card Owner Name" size="52" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="Confirm Payment">
</td>
</tr>
</table>
</form>
</body>
</html>
