WEEK 1 & 2 static web pages required for an online
book store web site.
Week-1 & 2 Date:
------------------------------------------------------------------------------------------------------------
AIM: Design the static web pages required for an online book store web site.
1) HOME PAGE
DESCRIPTION:
The static home page must contain three frames.
Top frame : Logo and the college name and links to Home page, Login page, Registration page,
Left frame : At least four links for navigation, which will display the catalogue of respective links.
For e.g.: When you click the link “CSE” the catalogue for CSE Books should be displayed
in the Right frame.
Right frame: The pages to the links in the left frame must be loaded here. Initially this page
contains description of the web site.
PROGRAM:
Homepage
<head>
<frameset rows="20%,*">
<frame src="topframe.html"name="f1">
<frameset cols="20%,*">
<frame src="leftframe.html"name="f2">
<frame src="rightframe.html"name="f3">
</frameset>
</frameset>
</head>
OUTPUT:
Top frame:
<html>
<body>
<p>
<img src="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Winter.jpg" align=left
width=100 height=100">
<h1 align=center>Online book store</h1>
</p>
<br>
<p>
<h2> nbsp;
<a href="homepage.html" target=_parent>
Home
</a>
<a href="login.html" target="f3">
login
</a>
<a href="registration.html" target="f3">
registration
</a>
nbsp;
<a href="catalogue.html" target="f3">
Catalogue
</a>
<a href="cart.html" target="f3">
Cart
</a>
</h2>
</p>
</body>
</html>
OUTPUT:
Leftframe:
<html>
<body>
<a href=cse.html target="f3"><h3>CSE</h3> </a><br><br><br><br><br>
<a href=ece.html target="f3"><h3>ECE</h3></a><br><br><br><br><br>
<a href=eee.html target="f3"><h3>EEE</h3></a><br><br><br><br><br>
<a href=civil.html target="f3"><h3>Civil</h3></a>
</body>
</html>
OUTPUT:
Right frame:
<html>
<body bgcolor="pink">
<p>
<h2 align="center"> <font face="times new roman" color="green" >Online book store information </font> </h2>
<h3> <font face="monotype corsiva" color=blue> This is the online book store
developed by students of pvpsit.It contains book catalogue of various branches like cse,ece,eee,civil </font></h3>
</p>
</body>
</html>
OUTPUT:
2) LOGIN PAGE
DESCRIPTION:
The login page contains the user name and the password of the user to authenticate.
PROGRAM:
<html>
<head>
<p style= "background:yellow; top:100px; left:250px; position:absolute; ">
</head>
<body background=”E:\1.jpg”>
<form action="index.jsp" method="get">
<label>
<font face="comic sans ms" color="green" size="5">Login </font>
</label>
<input type="text" size="20" maxlength="20" value=' '><br><br><br>
<label>
<font face="comic sans ms" color="green" size="5">Password </font> </label>
<input type="password" size="20" maxlength="20"> <br><br><br>
<input type="submit" value="submit">
<input type="reset">
</form>
</body>
</html>
OUTPUT:
3) CATOLOGUE PAGE
DESCRIPTION:
The catalogue page should contain the details of all the books available in the web site in
a table.
The details should contain the following:
1. Snap shot of Cover Page.
2. Author Name.
3. Publisher.
4. Price.
5. Add to cart button.
PROGRAM:
<html>
<body>
<center>
<table border=1>
<tr>
<th> Book Preview </th>
<th> Book Details </th>
<th> Price </th>
<th> Payment </th>
</tr>
<tr>
<td> <img src="C:\Documents and Settings\All users\My Documents\My Pictures\xml.bmp" width=100 height=50>
</img>
</td>
<td>
<pre>
<font face="comic sans ms" size=4 color="green" >
book:XML Bible
Author:winston
Publisher:Wiesley
</font>
</pre>
</td>
<td> $40 </td>
<td> <a href="cart.html" target="_blank">
<img src="C:\Documents and Settings\All users\My Documents\My Pictures\cart.bmp" width="150"
height="100"></img>
</a>
</td>
</tr>
<tr>
<td> <img src="C:\Documents and Settings\All users\My Documents\My Pictures\java.bmp" width=100 height=50>
</img>
</td>
<td>
<pre>
<font face="comic sans ms" size=4 color="green" >
book:Java 2
Author:Watson
Publisher:BPB publications
</font>
</pre>
</td>
<td> $40 </td>
<td> <a href="cart.html" target="_blank">
<img src="C:\Documents and Settings\All users\My Documents\My Pictures\cart.bmp" width="150"
height="100"></img>
</a>
</td>
</tr>
</table> </center>
</body>
</html>
OUTPUT:
RESULT:
Thus the home page, login page, catalogue page for the online book store are created
successfully
4) CART PAGE
DESCRIPTION:
The cart page contains the details about the books which are added to the cart.
PROGRAM:
<html>
<body>
<center><br><br><br>
<img src=”E:\aa.jpg”>
<table border=1 cellpadding=center>
<thead>
<tr>
<th>Book name</th>
<th>price</th>
<th>quantity</th>
<th>amount</th>
</tr>
</thead>
<tr>
<td>java 2</td>
<td>$45</td>
<td>2</td>
<td>$70</td>
</tr>
<tr>
<td> XML bible</td>
<td> $20</td>
<td> 5</td>
<td> $40</td>
</tr>
<th colspan=4>total amount=$110>
</th>
</tr>
</table>
</center>
</body>
</html>
OUTPUT:
5) REGISTRATION PAGE
DESCRIPTION:
Create a “registration form “with the following fields
1)Name(Textfield)
2) Password (password field)
3) E-mail id (text field)
4) Phone number (text field)
5) Sex (radio button)
6) Date of birth (3 select boxes)
7) Languages known (check boxes – English, Telugu, Hindi, Tamil)
8) Address (text area)
PROGRAM:
<html>
<body>
<center>
<img src=”E:\aaa.jpg” align=”left”>
<form>
<label>name</label>
<input type="text" size="20"><br><br> <br>
<label>password</label>
<input type="password" size="20" maxsize="28"><br> <br> <br>
<label>email</label>
<input type="text" size="30"><br> <br> <br>
<label>phone no</label>
<input type="text" size="2">
<input type="text" size="6">
<input type="text" size="10"><br> <br> <br>
<label>Sex</label>
<input type="radio" name="sex">m
<input type="radio" name="sex">f <br> <br> <br>
<label> date of birth</label>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select>
<option>jan</option>
<option>feb</option>
<option>mar</option>
<option>apr</option>
</select>
<select>
<option>1980</option>
<option>1981</option>
<option>1982</option>
<option>1983</option>
</select> <br> <br> <br>
<label> Languages Known </label>
<input type="checkbox"> English
<input type="checkbox"> Telugu
<input type="checkbox"> Hindi
<input type="checkbox"> Tamil <br> <br> <br>
<label> Address </label>
<textarea rows=5 cols=20 scrolling="yes"> </textarea>
</center>
</body>
</html>
OUTPUT:
RESULT:
Thus the registration and cart pages for online book store pages are created successfully
