DETAILS OF THE EXPERIMENTS CONDUCTED
(TO BE USED BY THE STUDENTS IN THEIR RECORDS)
INDEX
S TITLE OF THE EXPERIMENT DATE OF FACULTY
No SUBMISSIO SIGNATURE
N
1 Design the following static web pages required for an online book store web site.
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 page and 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 “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.
Logo Web Site Name
Home Login Registration Catalogue Cart
CSE
ECE
Description of the
EEE Web Site
CIVIL
2 Logo Web Site Name
Home Login Registration Catalogue Cart
CSE Login Page
ECE User Name:
EEE Passwords:
Submit Reset
CIVIL
3 CATOLOGUE PAGE:
The catalogue page should contain the details of all the books
available in the web site in a [Link] details should contain
the following:
1. Snap shot of Cover Page.
2. Author Name.
3. Publisher.
4. Price.
5. Add to cart button.
Logo Web Site Name
Home Login Registration Catalogu Cart
e
Book : XML
CSE BibleAuthor :
Winston $ 40.5
Publication : Wiely
ECE
Book :AI
EEE
Author : $ 63
[Link]
CIVIL
Publication : Princeton
hall
Book : Java 2
Author : Watson $ 35.5
Publication : BPB
publications
Book : HTML in 24
hours Author : Sam $ 50
Peter Publication :
Sam publication
4 CART PAGE:
The cart page contains the details about the books which are added to the cart.
The cart page should look like this:
Logo Web Site Name
Home Login Registration Catalogue Cart
CSE Book name Price Quantity Amount
Java 2 $35.5 2 $70
ECE
XML bible $40.5 1 $40.5
EEE
Total amount -
CIVIL $130.5
5
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)
5) Sex (radio button)
6) Date of birth (3 select boxes)
7) Languages known (check boxes – English, Telugu, Hindi, Tamil)
8) Address (text area)
6 Js VALIDATION: Write JavaScript to validate the following fields of the above
registration page.
1. Name (Name should contains alphabets and the length should not be less
than 6 characters).
2. Password (Password should not be less than 6 characters length).
7 Js VALIDATION:
3. E-mail id (should not contain any invalid and must follow the standard
pattern (name@[Link])
4. Phone number (Phone number should contain 10 digits only).
8 CSS : Design a web page using CSS (Cascading Style Sheets) which includes the
following:
1. Use different font, styles:
In the style definition you define how each selector should work (font, color
etc.). Then, in the body of yourpages, you refer to these selectors to activate
the styles.
2. Set a background image for both the page and single elements on the page.
9 CSS :
1. Control the repetition of the image with the background-repeat property.
As background-repeat: repeat Tiles the image until the entire page is
filled, just like an ordinary backgroundimage in plain HTML.
2. Define styles for links as
A:link
A:visited
A:active
A:hover
1 Consider a small topic of your choice on which you can develop static web pages and
0 try to implement all topics of html,CSS, and Js within the topic
Choose any topic:
1. Your own portfolio
2. To –Do List
3. Survey Form
4. A Tribute Page
5. A Questionnaire
EXPERIMENT NO. - 4
Design the following static cart page with required data.
4 CART PAGE:
The cart page contains the details about the books which are added to the [Link] cart page should look like
this:
Logo Web Site Name
Home Login Registration Catalogue Cart
CSE Book name Price Quantity Amount
Java 2 $35.5 2 $70
ECE
XML bible $40.5 1 $40.5
EEE
Total amount -
CIVIL $130.5
[Link]
<html>
<body>
<table cellspacing="20" cellpadding="10">
<tr><td>Book Name</td>
<td>Price</td>
<td>Quantity</td>
<td>Amount</td>
</tr>
<tr>
<td>Java 2</td>
<td>$35.5</td>
<td>2</td>
<td>$70</td>
</tr>
<tr>
<td>XML Bible</td>
<td>$40.5</td>
<td>1</td>
<td>$40.5</td>
</tr>
<tr>
<td>Total Amount</td>
<td>$130.5</td>
</tr>
