Create a Static Web Site for Shopping (Experiment 2)
Experimented On : 08-01-2024
Aim:
To design a simple online shopping website with different web pages. (Note: Use frames, hyperlinks, Images, tables etc. for constructing the web page)
Procedure:
Construct the Home Page that must contain two frames in it as follows:- Top frame : Displays the menu for accessing the various pages of the web site. It has to have links to Home page, Login page, Registration page, Catalogue page and Cart page.
- Bottom frame : This is the sub frame in which the target pages of the links provided in the top frame has be displayed here. Initially this frame displays the Welcome message to the web site.
home.html
<html>
<head>
<title>Online Books Store</title>
</head>
<frameset rows="25%,*" border="1">
<frame src="top_frame.html" noresize=noresize scrolling="no" color="grey">
<frame src="welcome.html" name="sub_frame">
</frameset>
</frameset>
</html>
Screen Shot of Home Page (home.html):
welcome.html
<html>
<body>
<h2 align="center"><font color="black">WELCOME TO ONLINE BOOK STORE</font></h2>
</body>
</html>
Screen Shot of right_frame:
login.html
<html>
<head>
<title>LOGIN</title>
</head>
<body align="center" bgcolor="white">
<h3 align="center">LOG IN PAGE</h3>
<table align="center" heigth="20%">
<tr>
<td align="right">LOGIN-ID:</td>
<td align="left"> <input type="text" maxlength="30" size="20"></td>
</tr>
<tr>
<td align="right">PASSWORD:</td>
<td align="left"><input type="password" maxlength="30" size="20"></td>
</tr>
<tr>
<td></td>
<td><font color="black"><a href="regform.html">New User Clik here</font></a></td>
</tr>
<tr>
<td></td>
<td align="left"><input type="SUBMIT" value="SUBMIT"></td>
<td align="left"><input type="RESET" value="RESET"> </td>
</tr>
</table>
</body>
</html>
Screen Shot of Login Page:
catalogue.html
<html>
<head> <title>Caltalogue</title></head>
<body bgcolor="white">
<table align="center" border="1" width="100%" height="100%">
<tr>
<th>Book Image</th>
<th>Book Details</th>
<th>Price to Shop</th>
</tr>
<tr>
<td align="center"><img src="xml_bible.jpg" alt="" width="100" height="120"/></td>
<td align="left"><p>XML Bible</p><p>by Elliotte Rusty Harold </p><p>Wiely
Publication</p></td>
<td>
<table width="60%" align="center">
<tr>
<td></td>
<td align="left">550</td>
<td align="right"><input type="button" value="ADD TO CART"/></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center"><img src="AI_Modern_approach.jpg" alt="" width="60" /></td>
<td align="left"><p>Artificial Integlligence: A Modern Approach</p><p>by S.Russel &
P.Norvig</p><p>Princeton Hall Publication</p></td>
<td>
<table width="60%" align="center">
<tr>
<td></td>
<td align="left">750</td>
<td align="right"><input type="button" value="ADD TO CART"/></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center"><img src="java_complete.jpg" alt="" width="100" height="120"/></td>
<td align="left"><p>Java : The Complete Reference</p><p>by Herbert Schildt</p><p>Tata
McGraw Hill Publication</p></td>
<td>
<table width="60%" align="center">
<tr>
<td> </td>
<td align="left">350</td>
<td align="right"><input type="button" value="ADD TO CART"/></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center"><img src="HTML_CSS.jpg" alt="" width="150" height="200"/></td>
<td align="left"><p>HTML and CSS : Teach Yourself<p>by Julie C. Meloni<p><p>Sam
Tech Publications</p></td>
<td>
<table width="60%" align="center">
<tr>
<td></td>
<td align="left">$63</td>
<td align="right"><input type="button" value="ADD TO CART"/></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Screen Shot of Catalogue Page:
top_frame.html
<html>
<head>
<title>TOP FRAME</title>
</head>
<body bgcolor="white">
<h1 align="center"><font color="black">ONLINE BOOK STORE</font></h1>
<table cellspacing="1" cellpadding="1" align="center" width="70%" border="1">
<tr>
<th align="center"><a href ="welcome.html" target="sub_frame"><font
color="black">Home</font></a></th>
<th align="center"><a href ="login.html" target ="sub_frame"><font
color="black">Login</font></a></th>
<th align="center"><a href ="catalogue.html" target ="sub_frame"><font
color="black">Catalogue</font></a></th>
</tr>
</table>
</body>
</html>
