Scribd
Upload
440 views10 pages

Ex No:1 Date:: Design The Following Static Web Pages Required For An Online Book Store Web Site

The document outlines requirements for designing static web pages for an online book store, including: - A home page with top, left, and right frames for navigation and content. - A login page with fields for username, password, and submit/reset buttons. - A catalogue page displaying book details in a table with cover image, author, publisher, and price. - A registration page with fields for collecting user name, password, email, and phone number. The document then provides code snippets for each of the outlined pages to fulfill the stated requirements.

Uploaded by

Srisanth
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
440 views10 pages

Ex No:1 Date:: Design The Following Static Web Pages Required For An Online Book Store Web Site

The document outlines requirements for designing static web pages for an online book store, including: - A home page with top, left, and right frames for navigation and content. - A login page with fields for username, password, and submit/reset buttons. - A catalogue page displaying book details in a table with cover image, author, publisher, and price. - A registration page with fields for collecting user name, password, email, and phone number. The document then provides code snippets for each of the outlined pages to fulfill the stated requirements.

Uploaded by

Srisanth
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

EX NO:1 DATE:

DESIGN THE FOLLOWING STATIC WEB PAGES REQUIRED FOR AN


ONLINE BOOK STORE WEB SITE
AIM:
TO DESIGN THE FOLLOWING STATIC WEB PAGES REQUIRED FOR AN ONLINE
BOOK STORE WEB SITE
 HOME PAGE
 LOGIN PAGE
 CATALOGUE PAGE
 REGISTRATION PAGE

PROCEDURE:
i. Home page

The static home page must contain three frames.


Top frame: Logo
and the college name and links to Home page, Login page, Registration page,
Catalogue pageand Cart page (the description of these pages will be given
below).
Left frame: At
least four links for navigation, which will display the catalogue of respective
links.

For e.g.: When you click the link “IT” the catalogue for IT
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 descriptionof the web site.

ii. Login Page

Login
page must contain Login field, Password field, Submit and reset buttons.

iii. Catalogue page

The catalogue page should contain the details of all the


books available in the web site in a table. The detailsshould contain the
following:

1. Snap shot of Cover Page


2. Author Name
3. Publisher
4. Price

iv. Registration page


Create
a “registration form “with the following fields

1. Name (Text field)


2. Password (password field)
3. E-mail id (text
field)
4. Phone number (text field)

CODING:

1. HOME PAGE:

<!DOCTYPE html>

<html>

<head>

<title>

HOME PAGE

</title>

</head>

<BODY>

<br>

<br>

<br>

<center>

<br>

<br>

<img src="C:\Users\Srisanth\Downloads\book-icon.png" height="150" width="150" >

<h1 style="color: white;">WELCOME OUR E-BOOK SHOP</h1>

<br>
<a href="index.html">

<button>REGISTRATION</button>

</a>

<br>

<br>

<a href="login.html">

<button>

LOGIN

</button>

</a>

</center>

<style>

body{

background-image: url(http://wallpapercave.com/wp/wpbppAz.jpg);

</style>

</BODY>

</html>

HOME WEB PAGE :


2. LOGIN PAGE CODE:
<!DOCTYPE html>

<html>

<head>

<title>LOGIN YOUR ACCOUNT</title>

</head>

<BODY>

<br>

<br>

<br>

<br>

<center>

<img src="C:\Users\Srisanth\Downloads\book-icon.png" height="150" width="150" >

<br>

<h1 style="color: aliceblue;">LOGIN</h1>

<input placeholder="EMAIL" type="email" />

<br>

<br>

<input placeholder="PASSWORD" type="password" />

<br>

<br>

<a href="main.html" >

<button>LOGIN

</button>

</a>

</center>

<style>

body{

background-image: url(https://wallpapercave.com/wp/wp8899665.jpg);

</style>

</BODY>

</html>
LOGIN WEB PAGE IMAGE:
3. CATALOGUE PAGE:
<!DOCTYPE html>

<html>

<head>

<title>

catalogue page

</title>

</head>

<style>

table th,td{

border: 5px solid black;

</style>

<body>

<br>

<br>

<br>

<center>

<table>

<tr>

<th>COVER PAGE</th>

<th>AUTHOR NAME</th>

<th>PUBLISHER</th>

<th>PRICE</th>

</tr>

<tr>

<td><img src="C:\Users\Srisanth\Downloads\ps1.jpg" height="90" width="90"></td>

<td>MANI</td>

<td>RED GIANT</td>

<td>1000</td>

</tr>

<tr>

<td><img src="C:\Users\Srisanth\Downloads\ps2.jpg" height="90" width="90"></td>

<td>MANI</td>
<td>RED GIANT</td>

<td>1500</td>

</tr>

</table>

<button>buy

</button>

</center>

</body>

</html>

CATALOGUE WEB PAGE IMAGE :


4. REGISTRATION PAGE CODE:
<!DOCTYPE html>

<html>

<head>

<title>

E-BOOK SHOP

</title>

</head>

<body>

<BR>

<BR>

<center><h1 style="color:white;">REGISTRATION</h1>

<br>

<br>

<input placeholder="NAME" type="text" />

<br>

<br>

<input placeholder="PASSWORD" type="password" />

<br>

<br>

<input placeholder="CONFORM PASSWORD" type="password" />

<br>

<br>

<input placeholder="EMAIL ID" type="text" />

<br>

<br>

<input placeholder="PHONE NUMBER" type="number" />

<br>

<br>

<a href="login.html">

<button>LOGIN</button>

</a>

</center>
<style>

body{

background-image: url(https://wallpaperbat.com/img/384412-bookshelf-wallpaper-top-free-bookshelf-
background.jpg);

</style>

</body>

</html>

REGISTRATION WEB PAGE IMAGE:

Result:
Thus the given program is executed and verified successfully

You might also like