[VR23] Web Technologies Lab Manual MCA II Year I Semester 2024 Week-1
Aim:
Develop static pages (using Only HTML) of an online book store. The pages should resemble: www.amazon.com. The website should consist the following pages. a) Home page b) Registration and user Login c) User Profile Page d) Books catalog e) Shopping Cart f) Payment By credit card g) Order Conformation
Source Code:
Week-1/index.html
<html>
<head>
<title> Welcome to FBS e-Book's website</title>
</head>
<frameset rows="24%,*" >
<frame name=top src="top.html" noresize frameborder=0 scrolling=no />
<frameset cols="15%,*">
<frame name="left" noresize scrolling="no" frameborder=0 src="left.html">
<frame name="right" noresize frameborder=0 src="right.html">
</frameset>
</frameset>
</html>
Week-1/top.html
<html>
<head>
<title> Welcome to FBS e-Book's Website</title>
</head>
<body>
<table width="100%" align="center" cellpadding="0" cellspacing="2">
<tr>
<th width="20%"><img src="images/fbs.png" alt="FBS LOGO" width="130" height="150"/></th>
<th colspan=4>
<h1 style="color:red;">FBS - WORLD BEST ONLINE EBOOKS WEBSITE</h1>
</th>
</tr>
<tbody align="center" bgcolor="#e68aaa" style="font-weight:bold;font-size:18px;"">
<tr>
<td width="20%"><hr><a href="right.html" target="right">Home</a><hr></td>
<td width="20%"><hr><a href="login.html" target="right">Login</a><hr></td>
<td width="20%"><hr><a href="registration.html" target="right">Registration</a><hr></td>
<td width="20%"><hr><a href="userprofile.html" target="right">User Profile</a><hr></td>
<td width="20%"><hr><a href="cart.html" target="right">Cart</a><hr></td>
</tr>
</tbody>
</table>
<hr/>
</body>
</html>
Week-1/left.html
<html>
<body bgcolor="#D6E9EF">
<table align=center>
<tr><td><h3>Catalogue</h3></td></tr>
<tr><td><a href="cse.html" target="right">CSE</a><br><br></td></tr>
<tr><td><a href="it.html" target="right">IT</a><br><br></td></tr>
<tr><td><a href="ece.html" target="right">ECE</a></td></tr>
</table>
</body>
</html>
Week-1/right.html
<html>
<body><br>
<center>
<h2>Welcome to FBS e-Book's Website</h2>
<p>Shopping at <font size=5>FBS</font> can be both <font size=5>fun</font>
and <font size=5>savings</font>.</br>Shop with us in this special <font
size=5>discount</font> season and save upto <font size=5>90%</font> on all your
purchases.</br></p>
<br/><br/><br/><br/><br/><br/><br/><br/><h4>
<font color="red">(C) 2022 All rights reserved by FBS ebooks
</body>
</html>
Week-1/login.html
<html>
<head>
<title> Welcome to FBS e-Book's Website</title>
</head>
<body >
<center><br>
<h3> Login Details</h3> <br/>
<form name="f1">
<table align="center" >
<tr>
<td> User Name : </td>
<td> <input type="text" name="username"></td>
</tr>
<tr><td><br></td></tr>
<tr>
<td> Password : </td>
<td> <input type="password" name="password"></td>
</tr>
<tr><td><br></td></tr>
<tr><td></td>
<td><input type="submit" value="SUBMIT">
<input type="reset" value="RESET"></td>
</tr>
</table>
</form>
</center>
</body>
</html>
Week-1/registration.html
<html>
<head>
<title> Welcome to FBS e-Book's Website</title>
</head>
<body>
<center><br>
<h3>Registration Form </h3>
<br/>
<form name="f1">
<table cellpadding="1" align="center" >
<tr><td> Name:*</td>
<td><input type="text" name="username"></td></tr>
<tr><td>Password:*</td>
<td><input type="password" name="password"></td></tr>
<tr><td>Email ID:*</td>
<td><input type="text" name="email"></td></tr>
<tr><td>Phone Number:*</td>
<td><input type="text" name="phno"></td></tr>
<tr><td valign="top">Gender:*</td>
<td><input type="radio" name="radio" value="1">Male
<input type="radio" name="radio" value="2">Female</td></tr>
<tr> <td valign="top">Language Known:*</td>
<td> <input type="checkbox" name="checkbox" value="English">English<br/>
<input type="checkbox" name="checkbox" value="Telugu">Telugu<br>
<input type="checkbox" name="checkbox" value="Hindi">Hindi<br>
<input type="checkbox" name="checkbox" value="Tamil">Tamil
</td></tr>
<tr> <td valign="top">Address:*</td>
<td><textarea name="address"></textarea></td>
<tr><td></td><td><input type="submit" value="submit" hspace="10">
<input type="reset" value="reset"></td></tr>
<tr> <td colspan=2 >*<font color="#FF0000">fields are mandatory</font>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
Week-1/userprofile.html
<!doctype html>
<html lang="en">
<head>
<title>User Profile</title>
</head>
<body><br><br>
<h1 align="center">User Profile</h1><br>
<table width="30%" align="center">
<tr>
<td>
<strong>First Name : </strong> <br> <input type="text" value="Madhu"></input>
</td>
<td>
<strong>Last Name : </strong> <br> <input type="text" value="T"></input>
</td>
</tr>
<tr>
<td>
<strong>Email ID : </strong> <br> <input type="text" value="madhu.t@studyglance.com"></input>
</td>
<td>
<strong>Phone Number : </strong> <br> <input type="text" value="9988665544"></input>
</td>
</tr>
<tr>
<td>
<strong>Address : </strong> <br> <textarea rows="5" cols="15">Main Street, Good Area, Popular City, Best Country</textarea>
</td>
<td>
<img src="images/user.PNG" width="150px"></img>
</td>
</tr>
<tr>
<td><br/></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="Update"></input>
</td>
</tr>
</table>
</body>
</html>
Week-1/cse.html
<html>
<head>
<title> Welcome to FBS e-Book's website</title>
</head>
<body>
<center><br>
<h2>Computer Science & Engineering Catalogue </h2>
<table width=90% align="center" bgcolor="#ffe1bf">
<tbody bgcolor="#ff6600">
<th width="25%"><hr>BOOK<hr></th>
<th width="35%"><hr>DETAILS<hr></th>
<th width="20%"><hr>PRICE<hr></th>
<th width="20%"><hr>OPTION<hr></th></tbody>
<tbody align="center">
<tr>
<td align="center"><img src="images/cse-cp.jpg" width="90" height="120" ></td>
<td align="center"> Title: C - Programming<br> Author: E.Balaguru Swamy <br/>
Publicher:Tata Mc.Grawhill</td>
<td align="center">Rs. 1200/-</td>
<td align="center"> <input type="button" value="Add to cart"></td>
</tr>
<tr>
<td align="center"><img src="images/cse-cn.jpg" width="90" height="120"></td>
<td align="center"> Title: Computer Networks<br>Author: M.Ananda Rao r<br/>
Publicher:ARS Publications</td>
<td align="center">Rs. 1000/-</td>
<td align="center"> <input type="button" value="Add to cart"></td>
</tr>
<tr>
<td align="center"><img src="images/cse-jp.jpg" width="90" height="120" ></td>
<td align="center"> Title: Java Programming<br/>Author: Jhanaki Ramaya<br/>Publicher:Matches Publications</td>
<td align="center">Rs. 2300/-</td>
<td align="center"> <input type="button" value="Add to cart"></td>
</tr>
<tr>
<td align="center"><img src="images/cse-wt.jpg" width="90" height="120" ></td>
<td align="center"> Title: Web Technologies<br/>Author: Uttam K.Roy <br/>Publicher:Oxpord Publications</td>
<td align="center">Rs. 3000/-</td>
<td align="center"> <input type="button" value="Add to cart"></td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
Week-1/ece.html
<html>
<head>
<title> Welcome to FBS e-Book's website</title>
</head>
<body>
<center><br>
<h2>Electronics & Communication Engineering Catalogue </h2>
<table width=90% align="center" bgcolor="#c4c4ff">
<tbody bgcolor="#5b5bff">
<th width="25%"><hr>BOOK<hr></th>
<th width="35%"><hr>DETAILS<hr></th>
<th width="20%"><hr>PRICE<hr></th>
<th width="20%"><hr>OPTION<hr></th></tbody>
<tbody align="center">
<tr>
<td align="center"><img src="images/ece-adc.jpg" width="90" height="120" ></td>
<td align="center"> Title: Analog Digital Communications <br> Author: Meru Babu <br/>
Publicher:Schuem Outlines</td>
<td align="center">Rs. 1200/-</td>
<td align="center"> <input type="button" value="Add to cart"></td>
</tr>
<tr>
<td align="center"><img src="images/ece-at.jpg" width="90" height="120"></td>
<td align="center"> Title: Anntena Theory<br>Author: M.Dileep Kumar r<br/>Publicher:BRS Publications</td>
<td align="center">Rs. 800/-</td>
<td align="center"> <input type="button" value="Add to cart"></td>
</tr>
<tr>
<td align="center"><img src="images/ece-gate.jpg" width="90" height="120" ></td>
<td align="center"> Title: Gate Study Metireal<br/>Author: Bill Joy <br/>Publicher:Pearson Publications</td>
<td align="center">Rs. 8200/-</td>
<td align="center"> <input type="button" value="Add to cart"></td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
Week-1/it.html
<html>
<head>
<title> Welcome to FBS e-Book's website</title>
</head>
<body>
<center><br>
<h2>Information Technologies Catalogue </h2>
<table width=90% align="center" bgcolor="#bfffbf">
<tbody bgcolor="#03f515">
<th width="25%"><hr>BOOK<hr></th>
<th width="35%"><hr>DETAILS<hr></th>
<th width="20%"><hr>PRICE<hr></th>
<th width="20%"><hr>OPTION<hr></th></tbody>
<tbody align="center">
<tr>
<td align="center"><img src="images/it-lc.jpg" width="90" height="120" ></td>
<td align="center"> Title: Let Us C <br> Author: Yeswant kanetkar <br/>
Publicher:Tata Mc.Grawhill</td>
<td align="center">Rs. 4200/-</td>
<td align="center"> <input type="button" value="Add to cart"></td>
</tr>
<tr>
<td align="center"><img src="images/it-python.jpg" width="90" height="120"></td>
<td align="center"> Title: Python Programming<br>Author: M.Kiran Kumar r<br/>Publicher:ARS Publications</td>
<td align="center">Rs. 1100/-</td>
<td align="center"> <input type="button" value="Add to cart"></td>
</tr>
<tr>
<td align="center"><img src="images/it-wp.jpg" width="90" height="120" ></td>
<td align="center"> Title: Web Programming<br/>Author: Uttam K.Roy <br/>Publicher:Oxpord Publications</td>
<td align="center">Rs. 6200/-</td>
<td align="center"> <input type="button" value="Add to cart"></td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
Week-1/cart.html
<html>
<head>
<title> Welcome to FBS e-Book's website</title>
</head>
<body>
<center>
<h3>Cart</h3>
<table width="90%" align="center" bgcolor="#ffe479">
<tbody bgcolor="#ff7c5b">
<tr>
<th width="40%"><hr>BookName<hr></th>
<th width="20%"><hr>Price<hr></th>
<th width="20%"><hr>Quantity<hr></th>
<th width="20%"><hr>Amount<hr></th> </tr>
</tbody>
<tbody align=center>
<tr> <td>Java Programming </td>
<td>Rs. 2300/-</td>
<td>2</td>
<td>Rs. 4600/-</td></tr>
<tr><td>Web Technologies</td>
<td>Rs. 3000/-</td>
<td>1</td>
<td>Rs. 3000/-</td></tr>
<tr><td></td>
<td><hr><font color="#996600">Total Amount:</font><hr></td>
<td><hr>3<hr></td>
<td><hr>Rs. 7600/-<hr></td> </tr>
<tr><td></td>
<td></td>
<td></td>
<td><input type="button" value="Pay By Credit Card" onclick='window.location.assign("paybycreditcard.html")'></input><br><br></td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
Week-1/paybycreditcard.html
<!doctype html>
<html lang="en">
<head>
<title>Payment By Credit Card</title>
</head>
<body>
<br><br>
<h1 align="center">Payment By Credit Card</h1><br>
<table width="30%" align="center">
<tr>
<td><strong>Card Number : </strong> </td>
<td><input type="text" placeholder="xxxx-xxxx-xxxx-xxxx" required></input> </td>
</tr>
<tr>
<td><br></td>
</tr>
<tr>
<td><strong>Exp Date: </strong></td>
<td><input type="text" placeholder="xx / xx" required></input></td>
</tr>
<tr>
<td><br></td>
</tr>
<tr>
<td><strong>CVV : </strong></td>
<td><input type="password" placeholder="xxx" required></input></td>
</tr>
<tr>
<td><br></td>
</tr>
<tr>
<td>
<strong>Name on the Card : </strong></td>
<td><input type="text" placeholder="Name of the card" required></input></td>
</tr>
<tr>
<td><br/></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="Pay" onclick='window.location.assign("orderconf.html")'></input> <input type="button" value="Cancel"></input>
</td>
</tr>
</table>
</body>
</html>
Week-1/orderconf.html
<!doctype html>
<html lang="en">
<head>
<title>Order Confirmation</title>
</head>
<body><br><br>
<center>
<h1> Thank you for your purchage!</h2><br><br>
<h2 style="color:#009900"> Payment Successful </h3><br>
<h3> Order Info :</h3>
<strong>Books :</strong> 3<br><br>
<strong>Total Amount :</strong> Rs. 7600/-<br><br>
</center>
</body>
</html>
Output:
No comments