Program No.
-:01
Objective: Design the static web pages required for an online book store web
site
Code:
home.html:
<frameset rows="40%,*">
<frame src="top.html" noresize scrolling="NO" name="topframe">
<frameset cols="15%,*">
<frame src="left.html" noresize scrolling="NO" name="leftframe">
<frame src="right.html" noresize name="rightframe" scrolling="auto">
</frameset>
</frameset>
top.html:
<html>
<head>
<title>Top Frame</title>
</head>
<body bgcolor="YellowGreen ">
<img src="images/logo1.png" width="125" height="115" align="left">
<img src="images/cse.png" width="125" height="115" align="right">
<center>
<marquee bgcolor="yellow" width="650" behavior="alternate">
<font face="Brush Script MT" size="8" color="green"><b><i>Online Book
Store</i></b>
</font>
</marquee> <br>
<font face="Brush Script" size="6" color="white"><b>Created & Maintained
By
AKGEC</b></font>
</center>
<br>
<table width="100%" height="50%" cellspacing=10>
<tr align="center">
<td> <a href="Home.html" target="_parent"><font face="Brush Script"
size="6"
color="navy">HOME </a> </td>
<td> <a href="login.html" target="rightframe"><font face="Brush Script"
size="6"
color="navy">LOGIN</a> </td>
<td> <a href="registration.html" target="rightframe"> <font face="Brush
Script"
size="6" color="navy">REGISTER </a> </td>
<td> <a href="catalogue.html" target="rightframe"> <font face="Brush
Script"
size="6" color="navy">CATALOGUE</a> </td>
</tr>
</table>
</body>
</html>
left.html:
<html>
<body align="center" bgcolor="bisque"> <br>
<a href="cse.html" target="rightframe"><font
size="6">CSE</font></a><br><br>
<a href="ece.html" target="rightframe"><font
size="6">ECE</font></a><br><br>
<a href="eee.html" target="rightframe"><font
size="6">EEE</font></a><br><br>
<a href="mech.html" target="rightframe"><font
size="6">MECH</font></a><br>
</body>
</html>
right.html:
<html>
<body bgcolor="orange">
<center>
<img src="images/Books.jpg" height="170"><br>
<font face="Brush Script MT" size="5" color="blue">
<h1><b>Welcome to the Online Book Store!!!</b></font><br />
<font face="Brush Script MT" size="5" color="red">
<h2><b> "A Huge Collection Of Engineering E-Books"</b></h2></font>
</center>
</body>
</html>
cse.html:
<html>
<head><title>CSE</title></head>
<body bgcolor="cyan">
<center><font color="blue"><h1>Computer Science and
Engineering</h1></font></center>
<br>
<table align="center">
<tr>
<td>Text Books</td>
<td>
<select >
<option value="select the book" selected>Select the book
<option value="C&Ds">C&Ds
<option value="Ads">Ads
<option value="Java">Java
<option value="Oracle">Oracle
<option value="Ms SQL Server">Ms SQL Server
<option value="MySql">MySql
</select>
</td></tr>
<tr>
<td>Quantity</td>
<td><input type="text" id="q"></td>
</tr>
<tr>
<td></td>
<td>
<form method=post action="order.html">
<input type="submit" value=ok />
</form>
</td>
</tr>
</table>
<center>
<pre> Cost of one book is"500" + shipping "100" </pre>
</center>
</body>
</html>
ece.html:
<html>
<body bgcolor="Plum">
<h1><font color="blue">Electronics and Communication
Engineering</font></h1>
<h2>
<ul>
<li>Digital Circuits</li> <li>Signals and Systems</li> <li>Digital
Communication</li>
</ul>
</h2>
</body>
</html>
eee.html:
<html>
<body bgcolor="Plum">
<h1><font color="blue">Electrical and Electronics Engineering</font></h1>
<h2>
<ul type="square">
<li>Concepts in Electric Circuits</li>
<li>Introduction to Electronic Engineering</li>
<li>Electrical Power</li>
</ul>
</h2>
</body>
</html>
mech.html:
<html>
<body bgcolor="Plum">
<h1><font color="blue">Electronics and Communication
Engineering</font></h1>
<h2>
<ol type="I">
<li>Theory of Machines</li>
<li>Automation and Robotics</li>
<li>Engineering Fluid Mechanics</li>
</ol>
</h2>
</body>
</html>
catalogue.html:
<html>
<head>
<title> Catalogue </title>
</head>
<body bgcolor="pink">
<form action="order.html">
<table border="1" width="100%">
<tr>
<td>
<img src="images/wt.jpg" width=100 height=100/>
</td>
<td> Book: Web Technologies <br> Author: Uttam K. Roy <br> Publication:Oxford
University Press</td> <td>531 </td>
<td> <input type="submit" value="Add to cart"/></td> </tr>
<tr>
<td> <img src="images/php.jpg" width=100 height=100/></td>
<td> Book: PHP & MySQL Web Development <br> Author:Luke Welling & Laura
Thompson <br> Publication:PEARSON</td> <td> 898 </td>
<td> <input type="submit" value="Add to cart"/></td> </tr>
</table> </form>
</body> </html>
login.html:
<html>
<body bg color="pink">
<basefont face="Cambria" size="4"> <br>
<center>
<img src="images/login.jpg" width="385" height="135" /><br />
<font face="Brush Script MT" size="7" color="purple">
<b>Enter Login Details:</b>
</font>
</center>
<form name="f1" method="post" action="right.html">
<table align="center" width="100" height="150" cellspacing=”15”>
<tr><td><b>Login ID:</b></td>
<td><input type="text" name="t1"></td>
</tr>
<tr>
<td><b>Password:</b></td>
<td><input type="password" name="t2"></td>
</tr>
<tr align="center">
<td><input type="submit" name="b1" value="Submit"></td>
<td><input type="reset" name="b2" value="Reset"></td>
</tr>
</table> </form> </basefont> </body> </html>
Registration.html:
<html>
<head><title>Registration Form</title></head>
<body bgcolor="#E4F0F8">
<center><font color="blue" size="6" face="arial">Registration
Form</font></center><br />
<form action="right.html">
First Name(Minimum 6 characters)<font color="red">* </font>
<input type='text' id='firstname' /><br /><br />
Last Name<font color="red"><font color="red">* </font> </font>
<input type='text' id='lastname' /><br /><br />
EmailAddress<font color="red">* </font>
<input type='text' id='email' /><br />
<font color="red">(one e-mail id only):</font>
<font color="redblue">e.g. smith@hotmail.com</font><br /><br/>
Password(minimum 6 characters)<font color="red">* </font>
<input type='password' id='pass'><br /><br/>
Address<font color="red">* </font>
<textarea rows="2" cols="20" id='addr' /></textarea> <br /> <br/>
Mobile No<font color="red">* </font>
<input type='text' id='mobileno' /><br />
Gender: <input type='radio' name="gender">male
<input type='radio' name="gender">female<br/><br />
<input type='Submit' value='submit' />
<input type='Reset' value='reset' />
</form> </body> </html>
order.html:
<html>
<head><title>order conformation</title></head>
<body bgcolor="cyan">
<center>
<pre><strong>
<b>Your order Is Conformed
</strong></pre>
<h2><b>THANK YOU...Visit Again</h2>
</center>
</body>
</html>
Output:
Program No.-:02
Objective-: Design Login Page with User name and password
Code-:
<html>
<body bg color="pink">
<basefont face="Cambria" size="4"> <br>
<center>
<img src="images/login.jpg" width="385" height="135" /><br />
<font face="Brush Script MT" size="7" color="purple">
<b>Enter Login Details:</b>
</font>
</center>
<form name="f1" method="post" action="right.html">
<table align="center" width="100" height="150" cellspacing=”15”>
<tr><td><b>Login ID:</b></td>
<td><input type="text" name="t1"></td>
</tr>
<tr>
<td><b>Password:</b></td>
<td><input type="password" name="t2"></td>
</tr>
<tr align="center">
<td><input type="submit" name="b1" value="Submit"></td>
<td><input type="reset" name="b2" value="Reset"></td>
</tr></table> </form> </basefont> </body> </html>
Output-:
Program No.-: 03
Objective-: Design
Catalogue Page which should contain details of
author, book publisher and price of books and provide add to cart
option in catalogue section.
Code-:
<html>
<head>
<title> Catalogue </title>
</head>
<body bgcolor="pink">
<form action="order.html">
<table border="1" width="100%">
<tr>
<td>
<img src="images/wt.jpg" width=100 height=100/>
</td>
<td> Book: Web Technologies <br> Author: Uttam K. Roy <br> Publication:Oxford
University Press</td> <td>531 </td>
<td> <input type="submit" value="Add to cart"/></td> </tr>
<tr>
<td> <img src="images/php.jpg" width=100 height=100/></td>
<td> Book: PHP & MySQL Web Development <br> Author:Luke Welling & Laura
Thompson <br> Publication: PEARSON</td> <td> 898 </td>
<td> <input type="submit" value="Add to cart"/></td> </tr>
</table> </form></body> </html>
Output-:
Program No.-:04
Objective-: Design Cart Page which should contain the details of added books in
cart.
Code-:
Cart.html
cse.html:
<html>
<head><title>CSE</title></head>
<body bgcolor="cyan">
<center><font color="blue"><h1>Computer Science and Engineering</h1></font></center>
<br>
<table align="center">
<tr>
<td>Text Books</td>
<td>
<select >
<option value="select the book" selected>Select the book
<option value="C&Ds">C&Ds
<option value="Ads">Ads
<option value="Java">Java
<option value="Oracle">Oracle
<option value="Ms SQL Server">Ms SQL Server
<option value="MySql">MySql
</select>
</td></tr>
<tr>
<td>Quantity</td>
<td><input type="text" id="q"></td>
</tr>
<tr>
<td></td>
<td>
<form method=post action="order.html">
<input type="submit" value=ok />
</form>
</td>
</tr>
</table>
<center>
<pre> Cost of one book is"500" + shipping "100" </pre>
</center>
</body>
</html>
ece.html:
<html>
<body bgcolor="Plum">
<h1><font color="blue">Electronics and Communication Engineering</font></h1>
<h2>
<ul>
<li>Digital Circuits</li> <li>Signals and Systems</li> <li>Digital Communication</li>
</ul>
</h2>
</body>
</html>
eee.html:
<html>
<body bgcolor="Plum">
<h1><font color="blue">Electrical and Electronics Engineering</font></h1>
<h2>
<ul type="square">
<li>Concepts in Electric Circuits</li>
<li>Introduction to Electronic Engineering</li>
<li>Electrical Power</li>
</ul>
</h2>
</body>
</html>
mech.html:
<html>
<body bgcolor="Plum">
<h1><font color="blue">Electronics and Communication Engineering</font></h1>
<h2>
<ol type="I">
<li>Theory of Machines</li>
<li>Automation and Robotics</li>
<li>Engineering Fluid Mechanics</li>
</ol>
</h2>
</body></html>
Output-:
Program No.-: 05
Objective-: Design the registration page which should contain field of Name,
Password, E-Mail, Phone Number, Gender, and Address.
Code-:
Registration.html:
<html>
<head><title>Registration Form</title></head>
<body bgcolor="#E4F0F8">
<center><font color="blue" size="6" face="arial">Registration Form</font></center><br />
<form action="right.html">
First Name(Minimum 6 characters)<font color="red">* </font>
<input type='text' id='firstname' /><br /><br />
Last Name<font color="red"><font color="red">* </font> </font>
<input type='text' id='lastname' /><br /><br />
EmailAddress<font color="red">* </font>
<input type='text' id='email' /><br />
<font color="red">(one e-mail id only):</font>
<font color="redblue">e.g. smith@hotmail.com</font><br /><br/>
Password(minimum 6 characters)<font color="red">* </font>
<input type='password' id='pass'><br /><br/>
Address<font color="red">* </font>
<textarea rows="2" cols="20" id='addr' /></textarea> <br /> <br/>
Mobile No<font color="red">* </font>
<input type='text' id='mobileno' /><br />
Gender: <input type='radio' name="gender">male
<input type='radio' name="gender">female<br/><br />
<input type='Submit' value='submit' /><input type='Reset' value='reset' /></form> </body>
</html>
Output-:
Program No.-: 06
Objective-: Design the registration page and validate name and password field with java
script
a. Name: (Name should contain alphabets and the length should not be less than 6
characters).
b. Password (Password should not be less than 6 characters length).
Code-:
<html>
<head><title>Registration Form Validation</title></head>
<body bgcolor="#E4F0F8">
<script type='text/javascript'>
function formValidator()
// Make quick references to our fields
var firstname = document.getElementById('firstname');
var lastname = document.getElementById('lastname');
var pass = document.getElementById('pass');
// Check each input in the order that it appears in the form!
if(notEmpty(firstname, "can not be null")){
if(isAlphabet(firstname, "Please enter only letters for your Firstname")){
if(lengthRestriction(firstname, 6)){
if(isAlphabet(lastname, "Please enter only letters for your Lastname")){
if(emailValidator(email, "Please enter a valid email address")){
if(lengthRestriction(pass, 6)){
if(isAlphanumeric(pass, "please enter Numbers and Letters Only for password")){
if(notEmpty(addr, "please enter the address")){
if(isNumeric(mobileno, "Please enter a valid mobileno")){
if(lengthRestriction1(mobileno, 10 , 10)){
return true;
}}}}
}}}
return false;
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
return true;
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
function isAlphanumeric(elem, helperMsg){
var alphaExp = /^[0-9a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
function lengthRestriction(elem, min){
var uInput = elem.value;
if(uInput.length >= min){
return true;
}else{
alert("Please enter minimum " +min+ " characters");
elem.focus();
return false;
function emailValidator(elem, helperMsg)
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp))
else{
return true;
alert(helperMsg);
elem.focus();
return false;
function lengthRestriction1(elem, min, max)
var uInput = elem.value;
if(uInput.length >= min && uInput.length <= max)
else {
return true;
alert("Please enter 10 numbers only");
elem.focus();
return false;
</script>
<center><font color="blue" size="6" face="arial">Registration Form</font></center><br />
<form onsubmit='return formValidator()' action="right.html">
First Name(Minimum 6 characters)<font color="red">* </font>
<input type='text' id='firstname' /><br /><br />
Last Name<font color="red"><font color="red">* </font> </font>
<input type='text' id='lastname' /><br /><br />
Email Address<font color="red">* </font>
<input type='text' id='email' /><br />
<font color="red">(one e-mail id only):</font>
<font color="redblue">e.g. smith@hotmail.com</font><br /><br/>
Password(minimum 6 characters)<font color="red">* </font>
<input type='password' id='pass'><br /><br/>
Address<font color="red">* </font>
<textarea rows="2" cols="20" id='addr' /></textarea> <br /> <br/>
Mobile No<font color="red">* </font>
<input type='text' id='mobileno' /><br />
Gender: <input type='radio' name="gender">male
<input type='radio' name="gender">female<br/><br />
<input type='Submit' value='submit' />
<input type='Reset' value='reset' />
</form>
</body>
</html>
Output-:
Program No.-: 07
Objective-: Design the registration page and validate email id and phone number
field with java script
a. E-Mail Id (should not contain any invalid and must follow the standard
pattern name@domain.com).
b. Phone Number (Phone number should contain 10 digits only).
Code-:
<html>
<head><title>Registration Form Validation</title></head>
<body bgcolor="#E4F0F8">
<script type='text/javascript'>
function formValidator()
// Make quick references to our fields
var firstname = document.getElementById('firstname');
var lastname = document.getElementById('lastname');
var pass = document.getElementById('pass');
// Check each input in the order that it appears in the form!
if(notEmpty(firstname, "can not be null")){
if(isAlphabet(firstname, "Please enter only letters for your Firstname")){
if(lengthRestriction(firstname, 6)){
if(isAlphabet(lastname, "Please enter only letters for your Lastname")){
if(emailValidator(email, "Please enter a valid email address")){
if(lengthRestriction(pass, 6)){
if(isAlphanumeric(pass, "please enter Numbers and Letters Only for password")){
if(notEmpty(addr, "please enter the address")){
if(isNumeric(mobileno, "Please enter a valid mobileno")){
if(lengthRestriction1(mobileno, 10 , 10)){
return true;
}}}}
}}}
return false;
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
return true;
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
function isAlphanumeric(elem, helperMsg){
var alphaExp = /^[0-9a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
function lengthRestriction(elem, min){
var uInput = elem.value;
if(uInput.length >= min){
return true;
}else{
alert("Please enter minimum " +min+ " characters");
elem.focus();
return false;
function emailValidator(elem, helperMsg)
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp))
else{
return true;
alert(helperMsg);
elem.focus();
return false;
function lengthRestriction1(elem, min, max)
var uInput = elem.value;
if(uInput.length >= min && uInput.length <= max)
else {
return true;
alert("Please enter 10 numbers only");
elem.focus();
return false;
</script>
<center><font color="blue" size="6" face="arial">Registration Form</font></center><br />
<form onsubmit='return formValidator()' action="right.html">
First Name(Minimum 6 characters)<font color="red">* </font>
<input type='text' id='firstname' /><br /><br />
Last Name<font color="red"><font color="red">* </font> </font>
<input type='text' id='lastname' /><br /><br />
Email Address<font color="red">* </font>
<input type='text' id='email' /><br />
<font color="red">(one e-mail id only):</font>
<font color="redblue">e.g. smith@hotmail.com</font><br /><br/>
Password(minimum 6 characters)<font color="red">* </font>
<input type='password' id='pass'><br /><br/>
Address<font color="red">* </font>
<textarea rows="2" cols="20" id='addr' /></textarea> <br /> <br/>
Mobile No<font color="red">* </font>
<input type='text' id='mobileno' /><br />
Gender: <input type='radio' name="gender">male
<input type='radio' name="gender">female<br/><br />
<input type='Submit' value='submit' />
<input type='Reset' value='reset' />
</form>
</body>
</html>
Output-:
