Web Technology Lab

WEB TECHNOLOGY LAB
UNIT- 01 Home page Development static pages (using Only HTML) of an

Online Book store.
Online Book Store

Design the following static web pages required for an online book store web site.
1. Home Page
2. Login Page
3. Registration Page
4. Catalogue Page
5. Cart Page
6. Payment by Credit Cart
NOTE:
Create a projectfolder and save all the following html files in the projectfolder. Create
another imagesfolder inside the projectfolder and copy the required images into the
imagesfolder.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Online Book Store</title>
</head>
<frameset rows="20%,6%,*">
<frame name="f1" src="title.html" scrolling="no" noresize/>
<frameset cols="20%,20%,20%,20%,20%" scrolling="no" noresize>
<frame name="f21" src="home.html" />
<frame name="f22" src="login.html" />
<frame name="f23" src="registration.html" />
<frame name="f24" src="catalogue.html" />
<frame name="f25" src="cart.html" />
</frameset>
<frameset cols="20%,*" noresize>
<frame name="f31" src="course.html" scrolling="no" />
<frame name="f32" src="homepage.html" scrolling="auto" />
</frameset>
</frameset>
</html>
title.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center><img src="images/logo.jpg" align="middle" height="135" />
            <font
color="purple" size="12">ONLINE BOOK STORE</font></center>
</body>
</html>
home.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center><a href="homepage.html" target="f32">Home</a></center>
</body>
</html>
login.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center><a href="loginpage.html" target="f32">Login</a></center>
</body>
</html>
registration.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center><a href="regpage.html" target="f32">Registration</a></center>
</body>
</html>
catalogue.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center><a href="catpage.html" target="f32">Catalogue</a></center>
</body>
</html>
cart.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center><a href="cartpage.html" target="f32">Cart</a></center>
</body>
</html>
homepage.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<b>Welcome to Online Book Store</b>
<p> Here you find all types of books, magazines and national and international
journals.</p>
</body>
</html>
loginpage.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 align="center">LOGIN</h1>
<form method="post">
<table align="center" cellspacing="10">
<tr>
<td><b>User ID</b></td>
<td><input name="uid" type="text"></td>
</tr>
<tr>
<td><b>Password</b></td>
<td><input name="pwd" type="password"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="Login">
<input type="reset">
</td>
</tr>
<tr>
<td colspan="2" align="right"><i><a href="regpage.html">New User Click
Here</a></i></td>
</tr>
</table>
</form>
</body> </html>
regpage.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<h1 align="center"> REGISTRATION </h1>
<table align="center" cellspacing="10">
<tr>
<td>Name::</td>
<td> <input name="uname" type="text"> </td>
</tr>
<tr>
<td>Password::</td>
<td> <input name="pwd" type="password"> </td>
</tr>
<tr>
<td> E-mail ID:: </td>
<td> <input name="email" type="text"> </td>
</tr>
<tr>
<td> Phone Number:: </td>
<td> <input name="phno" type="text" maxlength="10"> </td>
</tr>
<tr>
<td> Gender:: </td>
<td><input name="gender" type="radio"
value="Male">  Male
<input name="gender" type="radio" value="Female">  Female</td>
</tr>
<tr>
<td> Date of Birth </td>
<td>
<select name="date">
<option>--Date--</option>
<option>01</option><option>02</option><option>03</option><option>04</option><o
ption>05</option><option>06</option><option>07</option><option>08</option><opti
on>09</option><option>10</option><option>11</option><option>12</option><option
>13</option><option>14</option><option>15</option><option>16</option><option>1
7</option><option>18</option><option>19</option><option>20</option><option>21</
option><option>22</option><option>23</option><option>24</option><option>25</opt
ion><option>26</option><option>27</option><option>28</option><option>29</option
><option>30</option><option>31</option>
</select>
<select name="month">
<option>--MONTH--</option>
<option>JAN</option><option>FEB</option><option>MAR</option><option>APR</o
ption><option>MAY</option><option>JUN</option><option>JUL</option><option>A
UG</option><option>SEP</option><option>OCT</option><option>NOV</option><op
tion>DEC</option>
</select>
<select name="year">
<option>--YEAR--</option>
<option>1980</option><option>1981</option><option>1982</option><option>1983</o
ption><option>1984</option><option>1985</option><option>1986</option><option>1
987</option><option>1988</option><option>1989</option><option>1990</option><op
tion>1991</option><option>1992</option><option>1993</option><option>1994</optio
n><option>1995</option><option>1996</option><option>1997</option><option>1998
</option><option>1999</option>
<option>2000</option>
</select>
</td>
</tr>
<tr>
<td valign="top">Languages Known::</td>
<td>
<input name="lk" type="checkbox" value="English"> English<br>
<input name="lk" type="checkbox" value="Telugu"> Telugu<br>
<input name="lk" type="checkbox" value="Hindi"> Hindi<br>
<input name="lk" type="checkbox" value="Tamil"> Tamil<br> </td>

</tr>
<tr>
<td>Address</td>
<td><textarea></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"> <input type="submit"
value="Register">
<input type="reset" value="Cancel"> </td>
</tr>
</table>
</form>
</body>
</html>
catpage.html
<html>
<head>
</head>
<body>
<form>
<table cellspacing="10">
<tr>
<td><img src="images/html5.jpg" width="100" height="100"></td>
<td> Title : HTML5 and CSS3 <br>
Author : Sasha Vodnik <br> </td>
<td>Rs. 700 /- </td>
<td><input type="image" src="images/add to cart.jpg" width="150" height="100"></td>
</tr>
<tr>
<td><img src="images/php.jpg" width="100" height="100"></td>
<td> Title : PHP and MYSQL <br>
Author : W. Jason Gilmore <br> </td>
<td>Rs. 650 /- </td>
</tr>
<tr>
<td><img src="images/j2ee.jpg" width="100" height="100"></td>
<td> Title : The Complete Reference JAVA 2 <br>
Author : Herbert Schildt <br> </td>
<td>Rs. 850 /- </td>
</tr>
</table>
</form>
</body>
</html>
course.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li>B.Tech.</li>
<li>M.Tech.</li>
<li>MBA</li>
<li>MCA</li>
<li>Polytechnic</li>
</ul>
</body>
</html>
cartpage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<h1 align="center">Shopping Cart</h1>
<form>
<table align="center" cellpadding="20px">
<tr>
<th>Product</th>
<th>Description</th>
<th>Price</th>
<th>Quantity</th>
<th>Subtotal</th>
</tr>
<tr>
<td><img src="images/html5.jpg" width="100" height="100" /></td>
<td>Title : HTML5 and CSS3 <br>Author : Sasha Vodnik</td>
<td>Rs. 700 /-</td>
<td><input type="text" size="2" value="1" readonly /></td>
<td>Rs. 700 /-</td>
</tr>
<tr>
<td><img src="images/php.jpg" width="100" height="100" /></td>
<td>Title : PHP and MYSQL <br>Author : W. Jason Gilmore </td>
<td>Rs. 650 /- </td>
<td><input type="text" size="2" value="1" readonly /></td>
<td>Rs. 650 /- </td>
</tr>
<tr>
<th colspan="2">Promotion Code</td>
<th colspan="3">Cart Totals</td>
</tr>
<tr>
<td colspan="2"><input type="text" placeholder="Coupon code" /> <input
type="button" value="Apply Coupon" /></td>
<th colspan="2">Subtotal</th>
<td>Rs. 1350 /-</td>
</tr>
<tr>
<td colspan="2"></td>
<th colspan="2">Total</th>
<th>Rs. 1350 /-</th>
</tr>
<tr>
<td colspan="5" align="right"><input type="button" value="Proceed to Checkout"
/></td>
</tr>
</table>
</form>
</body>
</html>
PaymentGateway.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Payment Gateway</title>
</head>
<body>
<h1 align="center">Credit Card Payment Gateway</h1>
<hr>
<form>
<table align="center" cellpadding="20px">
<tr>
<td colspan="2" align="center"><h2>Payment Details</h2></td>
</tr>
<tr>
<td colspan="2">
<b>CARD NUMBER</b><br>
<input type="text" placeholder="Valid Card Number" size="52" />
</td>
</tr>
<tr>
<td><b>Expire Date</b><br><input type="text" placeholder="MM/YY" /></td>
<td><b>CV Code</b><br><input type="text" placeholder="CVV" /></td>
</tr>
<tr>
<td colspan="2">
<b>CARD OWNER</b><br>
<input type="text" placeholder="Card Owner Name" size="52" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="Confirm Payment">
</td>
</tr>
</table>
</form>
</body>
</html>
Out Put of the Program

UNIT- 02 Write a JavaScript to design a simple calculator to perform the
following operations: sum, product, difference and quotient.


<!DOCTYPE html>
<html>
<head>
<title>
Calculator Program in JavaScript
</title>


<script>
// Use insert() function to insert the number in textview.

function insert(num)
{
document.form1.textview.value = document.form1.textview.value + num;
}
// Use equal() function to return the result based on passed values.

function equal()
{
var exp = document.form1.textview.value;
if(exp)
{
document.form1.textview.value = eval(exp)
}
}
/* Here, we create a backspace() function to remove the number at the end of the numeric
series in textview. */
function backspace()
{
var exp = document.form1.textview.value;
document.form1.textview.value = exp.substring(0, exp.length - 1); /* remove the element
from total length ? 1 */
}
</script>


<style>
/* Create the Outer layout of the Calculator. */
.formstyle
{
width: 300px;
height: 330px;
margin: 20px auto;
border: 3px solid skyblue;
border-radius: 5px;
padding: 20px;
text-align: center;
background-color: grey;
}
/* Display top horizontal bar that contain some information. */

h1 {
text-align: center;
padding: 23px;
background-color: skyblue;
color: white;
}
input:hover
{
background-color: green;
}
*{
margin: 0;
padding: 0;
}
/* It is used to create the layout for calculator button. */

.btn{
width: 50px;
height: 50px;
font-size: 25px;
margin: 2px;
cursor: pointer;
background-color: red;
color: white;
/* It is used to display the numbers, operations and results. */

.textview{
width: 223px;
margin: 5px;
font-size: 25px;
padding: 5px;
background-color: lightgreen;
}
</style>
</head>
<body>
<h1> Calculator Program in JavaScript </h1>
<div class= "formstyle">
<form name = "form1">
<input class= "textview" name = "textview">
</form>
<center>
<table >
<tr>
<td> <input class = "btn" type = "button" value = "C" onclick =
"form1.textview.value = ' ' " > </td>
<td> <input class = "btn" type = "button" value = "B" onclick = "backspace()" >
</td>
<td> <input class = "btn" type = "button" value = "/" onclick = "insert('/')" > </td>
<td> <input class = "btn" type = "button" value = "x" onclick = "insert('*')" >
</td>
</tr>
<tr>
<td> <input class = "btn" type = "button" value = "7" onclick = "insert(7)" > </td>
<td> <input class = "btn" type = "button" value = "-" onclick = "insert('-')" > </td>
</tr>
<tr>
<td> <input class = "btn" type = "button" value = "+" onclick = "insert('+')" >
</td>
</tr>
<tr>
<td rowspan = 5> <input class = "btn" style = "height: 110px" type = "button"
value = "=" onclick = "equal()"> </td>
</tr>
<tr>
<td colspan = 2> <input class = "btn" style = "width: 106px" type = "button" value
= "0" onclick = "insert(0)" > </td>
<td> <input class = "btn" type = "button" value = "." onclick = "insert('.')"> </td>
</tr>
</table>
</center>
</div>
</body>
</html>
Out Put of the Program
UNIT- 03 Write a PHP program to display a digital clock which display the
current time of the server.
# Program for Digital Clock
Program Output
<head>
<meta http-equiv="refresh"
content="1"/>
<style>
p{
color:yellow;
font-size:90px;
position:absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -
50%);
}
body {
background-color:maroon;
}
</style>
<p> <?php echo date(" h: i : s
A");?> </p>
</head>
UNIT- 04 Write an HTML code to display your CV on a web page.
# Program for Display your CV
<html>
<head><title>My RESUME </title></head>
<body bgcolor="white">
<table align="center" border="2" cellspacing="5" cellpadding="5" >
<td>
<h1 align= center><b> YOUR NAME HERE</b></h1>
<address style="color:red;" align= center> [email protected] <br>
+91-1122334455 </address>
<h2 style="color:blue;">CAREER OBJECTIVE:</h2>
Want to be the part of a software developer organization and utilize my knowledge,Skills
and expertise to contribute<br> towards organization and professional
brilliance and to learn more with the passage of time from all<br>
types of situations and circumstances.
<h2 style="color:blue;">EDUCATION AND QUALIFICATIONS:</h2>
<table border="2" cellspacing="5" cellpadding="5" >
<tr>
<th>Qualification</th>
<th>Maximun Marks</th>
<th>Obtained Marks</th>
<th>Division</th>
<th>Institution</th>
<th>Bord/University</th>
</tr
<tr>
<td>DIPLOMA IN PROGRESS</td>
<td>-----</td>
<td>-----</td>
<td>None</td>
<td>G.P,SITAMARHI</td>
<td>STATE BOARD </td>
</tr>
<tr>
<td>INTERMEDIATE</td>
<td>500</td>
<td>420</td>
<td>FIRST</td>
<td>S.D.S COLLEGE </td>
<td>BSEB </td>
</tr>
<tr>
<td>ITI</td>
<td>1100</td>
<td>661</td>
<td>FIRST</td>
<td>BIHAR ITI </td>
<td>STATE BOARD </td>
</tr>
<tr>
<td>MATRIC</td>
<td>500</td>
<td>353</td>
<td>FIRST</td>
<td>RAHUL H/S BALIA</td>
<td>BESB</td>
</tr>
</table>
<h2 style="color:blue;">TECHNICAL EXPERIENCE:</h2>
Languages: C, C++, JAVA, HTML <br>

Platforms: Windows Seven, Linux <br>
Concepts: Networking, operating systems
<h2 style="color:blue;">EXTRA ACTIVITY:</h2>
1.PCAP: Programming Essential in Python <br>
2.CLP: Advance Programming in C
<h2 style="color:blue;">ABILITIES:</h2>
Skill Level : MS Word, MS Excel, Power point <br>
practiced : More than 1 years
<h2 style="color:blue;">PERSONAL SKILLS:</h2>
1.Honesty<br>
2.Team Spirit<br>
3.Accepting Challenges
<h2 style="color:blue;">LANGUAGES:</h2>
English,Hindi,Urdu
<h2 style="color:blue;">INTEREST:</h2>
1.Internet browsing <br>
2.Reading books
<h2 style="color:blue;">REFERENCE:</h2>
Will be provided on demand
</td
</form>
</body>
</html>
Output of the Program
UNIT- 05 Write an XML program to display products.
# Program for Displaying Data
<?xml version="1.0" encoding="UTF-8"?>

<?xml-stylesheet type="text/css" href="Rule.css"?>
<books>
<heading>Welcome To XML program for Displaying Data</heading><br><br>
<book>
<title>Title -: Web Programming</title>
<author>Author -: Chrisbates</author>
<publisher>Publisher -: Wiley</publisher>
<edition>Edition -: 3</edition>
<price> Price -: 300</price>
</book> <br>
<book>
<title>Title -: Internet world-wide-web</title>
<author>Author -: Ditel</author>
<publisher>Publisher -: Pearson</publisher>
<price>Price -: 400</price>
</book> <br>
<book>
<title>Title -: Computer Networks</title>
<author>Author -: Foruouzan</author>
<publisher>Publisher -: Mc Graw Hill</publisher>
</book> <br>
<book>
<title>Title -: DBMS Concepts</title>
<author>Author -: Navath</author>
<publisher>Publisher -: Oxford</publisher>
</book> <br>
<book>
<title>Title -: Linux Programming</title>
<author>Author -: Subhitab Das</author>
<publisher>Publisher -: Oxford</publisher>
</book>
</books>
UNIT- 06 Create a web page with all types of Cascading style sheets.
Types of Cascading Style Sheets:-

There are three different types of style sheets:
1. Inline
2. Embedded or internal
3. External
1. Inline Style Sheet
 The style specifications are placed within the html elements.

 It uses the style attribute of the html element.
Syntax: <h1 style> … </h1>
 While using the style sheet the language must be specified.

 Language is specified using the <META> tag in the <HEAD> section of the document.
Syntax: <head> <meta http-equiv=“Content-style-type” content=“text/css”> </head>
 It is the most common method of attaching a style sheet to an HTML document.

 The inline style sheet is used to apply declaration style to an individual element in a
particular document.
Inline style sheet should be avoided in two cases:
 If we want to apply the same style declaration to different elements every time.
 Inline style sheet mixes the content with the presentation. So, if you want to avoid this
mixing up, don't use Inline style sheet.
Example: Demonstration of inline style sheet
<html>
<head>
<title> Inline CSS</title>
<meta http-equiv="content-style-type" content="text/css">
</head>
<body style="background:orange">
<h1 style="color:White; font-family:arial; font-size:14pt; text-transform:uppercase;
text-align:left;"> This is an example of inline css</h1>
</body>
</html>
Output:
2. Embedded or internal style sheet
 The style specifications are defined within the head section of the web page or HTML
page.
 In this style sheet type, the alternate method of attaching a style sheet to HTML
document is <STYLE> tag.
 While using <STYLE> tag it must include TYPE attribute.
 TYPE attribute specifies what type of style is included in the document.
The attributes of <STYLE> element tag are:
1. type
 It specifies the internal type of the style language.

 In CSS, the value of type is “text/CSS”.
2. media
 Media specifies the medium on which style sheet is applied.

 Its default value is screen.
 Its value can be screen/print/projection.
Example 1: Demonstration of embedded style sheet
<!DOCTYPE html>
<html>
<head>
<title> Embedded CSS</title>
<style type="text/CSS">
body {
background-color:#ccffff;
}
h1 { color: purple; font-family: arial; font-size: 30 px; text-transform:
uppercase; text-align: left;}
</style>
</head>
<body>
<h1> This is an example of embedded CSS</h1>
<h1> B E </h1>
</body>
</html>
Output:
Example 2: Demonstration of embedded style sheet
<!DOCTYPE html>
<html>
<head>
<title> Embedded CSS</title>
<style type="text/CSS">
body {
background-color:#ccffff;
}
h1 { color: purple; font-family: arial; font-size: 30 px; text-transform:
uppercase; text-align: left;}
</style>
</head>
<body>
<h1>Computer programming languages</h1>
<table border="1">
<tr>
<th>Web-tech</th>
<th>Object-Oriented</th>
</tr>
<tr>
<td>CSS</td>
<td>java</td>
</tr>
</table>
<p>Embedded CSS is better than Inline CSS</p>
</body>
</html>
Output:
3. External style sheet
 In external style sheets, the CSS files are kept separately from an HTML document.
 External CSS file contains only CSS code and it is saved with a “.css” extension.
 The CSS file is used as an external style sheet file in HTML document by using a
<LINK> tag instead of <STYLE> tag.
 The <LINK> tag is placed in the <HEAD> section of the HTML document.
 The main advantage of External style sheet is that external CSS is a “true separation” of
style and content.
 It is easier to reuse CSS code in any separate file.
Syntax:
<HEAD> <LINK REL=“stylesheet” TYPE=“text/css” HREF=“mystyle.css”>
</HEAD>
Attributes of <LINK> tag
1. rel
 It is used to specify a relationship of CSS with HTML document.

 Its default relationship value is “style sheet”.
 Possible relationship values are stylesheet/alternate stylesheet.
2. type
 Type attribute is not used in META tag.

 It specifies which type of style language is used.
 The value of the type attribute is “text/CSS”.
3. href
 It points to the external style sheet file's URL.

 It specifies the path of the style sheet file which is linked with the HTML document.
4. title
 It is optional.
 It indicates the name of the style sheet.
5. media
 It specifies the medium on which style sheet should be applied.

 Its default value is screen.
 The values can be screen/print/projection.
Example: Demonstration of external style sheet
NOTE: Save following program as external.css
body { background:#ccffff;}
h2,p {
color: green;
font-family:arial;
text-align:center;
}
p i{
color: orange;
border-style: solid;
font-weight: lighter;
}
.ex{color:purple}
NOTE: Save following program as external.html and link above CSS file in it.
<html>
<head><title>Extenal style sheet</title>
<link rel= "stylesheet" type= "text/CSS" href="external.css">
</head>
<body>
<h2> It is an example of External style sheet</h2>
<p class="ex"> This is a "true separation" of style and content</p>
<p><i> External CSS </i> </p>
</body>
</html>
Output:
NOTE: To run the program, save the above .css and .html files on the same location or
folder.
Write a JavaScript that calculates the squares and cubes of the
UNIT- 07 numbers from 0 to 10 and outputs HTML text that displays the
resulting values in an HTML table format
# Program For calculates the squares and cubes of the numbers from 0 to 10.
<!DOCTYPE HTML>
<html>
<head> <style>
table,tr,
td
{
border: solid black;
width: 33%;
text-align: center;
border-collapse: collapse;
background-color:lightblue;
}
table { margin: auto;
} </style>
<script>
document.write( "<table><tr><th colspan='3'> NUMBERS FROM 0 TO 10 WITH
THEIR QUARES AND CUBES </th></tr>" );
document.write( "<tr><td>Number</td><td>Square</td><td>Cube</td></tr>" );
for(var n=0; n<=10; n++)
{
document.write( "<tr><td>" + n + "</td><td>" + n*n + "</td><td>"+ n*n*n +
"</td></tr>" ) ;
}
document.write( "</table>" ) ;
</script>
</head>
</html>
Out of The Program
*****

Web Technology Lab

Uploaded by

Copyright:

Available Formats

Web Technology Lab

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Technology Lab

Uploaded by

Copyright:

Available Formats

WEB TECHNOLOGY LAB

UNIT- 01 Home page Development static pages (using Only HTML) of an

Online Book Store

<input name="lk" type="checkbox" value="Hindi">&nbsp;Hindi<br>

<input name="lk" type="checkbox" value="Tamil">&nbsp;Tamil<br> </td>

Out Put of the Program

// Use insert() function to insert the number in textview.

// Use equal() function to return the result based on passed values.

/* Display top horizontal bar that contain some information. */

/* It is used to create the layout for calculator button. */

/* It is used to display the numbers, operations and results. */

# Program for Digital Clock

# Program for Display your CV

Languages: C, C++, JAVA, HTML <br>

# Program for Displaying Data

<?xml version="1.0" encoding="UTF-8"?>

Types of Cascading Style Sheets:-

1. Inline Style Sheet

 The style specifications are placed within the html elements.

 While using the style sheet the language must be specified.

 It is the most common method of attaching a style sheet to an HTML document.

2. Embedded or internal style sheet

 It specifies the internal type of the style language.

 Media specifies the medium on which style sheet is applied.

Example 2: Demonstration of embedded style sheet

3. External style sheet

Attributes of <LINK> tag

 It is used to specify a relationship of CSS with HTML document.

 Type attribute is not used in META tag.

 It points to the external style sheet file's URL.

 It specifies the medium on which style sheet should be applied.

NOTE: Save following program as external.css

You might also like

<input name="lk" type="checkbox" value="Hindi"> Hindi<br>

<input name="lk" type="checkbox" value="Tamil"> Tamil<br> </td>