WEB Programming Laboratory Manual BSC 6 Sem: Web Design Lab HTML

Web Design Lab HTML
WEB Programming
LABORATORY MANUAL
Bsc 6th Sem
1
Web Design Lab HTML
1. Write java program to demonstrate key events by using Delegation event model
import java.awt.*;
import java.awt.event.*;
import java.applet.*;
/*
<applet code="SimpleKey" width=300 height=100> </applet>
*/
public class SimpleKey extends Applet implements KeyListener {
String msg = "";
int X = 10, Y = 20; // output coordinates
public void init()
addKeyListener(this);
public void keyPressed(KeyEvent ke)
showStatus("Key Down");
public void keyReleased(KeyEvent ke)
showStatus("Key Up");
}
2
Web Design Lab HTML
public void keyTyped(KeyEvent ke)
msg += ke.getKeyChar(); repaint();
// Display keystrokes.
public void paint(Graphics g)
g.drawString(msg, X, Y);
Steps to Execute Program
> javac SimpleKey.java
> appletviewer SimpleKey.java
3
Web Design Lab HTML
2. Write an java program to implement mouse events like mouse pressed, mouse released and
mouse moved by means of an adaptor classes.
import java.awt.*;
/*<applet code="Mouseevents" width=500 height=300></applet>*/
public class Mouseevents extends Applet implements MouseListener,MouseMotionListener
String msg="";
int mousex=0,mousey=0;
public void init()
addMouseListener(this);
addMouseMotionListener(this);
public void mouseClicked(MouseEvent me)
mousex=0;
mousey=10;
msg="mouse clicked";
repaint();
public void mouseEntered(MouseEvent me)

4
Web Design Lab HTML
mousex=0;
mousey=10;
msg="mouse entered";
repaint();
public void mouseExited(MouseEvent me)
mousex=0;
mousey=10;
msg="mouse exited";
repaint();
public void mousePressed(MouseEvent me)
mousex=me.getX();
mousey=me.getY();
msg="down";
repaint();
public void mouseReleased(MouseEvent me)
mousex=me.getX();
mousey=me.getY();
msg="up";
repaint();
5
Web Design Lab HTML
public void mouseDragged(MouseEvent me)
mousex=me.getX();
mousey=me.getY();
msg="*";
showStatus("Dragging mouse at "+mousex+" , "+mousey);
repaint();
public void mouseMoved(MouseEvent me)
showStatus("mouse moving at "+me.getX()+" , "+me.getY());
g.drawString(msg,mousex,mousey);
> javac Mouseevents.java
> appletviewer MouseEvents.java
6
Web Design Lab HTML
3. Write java program to demonstrate window events on frame
import java.awt.*;
public class WindowListenerTest extends Frame implements WindowListener
Label l1,l2;
TextField t1,t2;
Button b1;
public WindowListenerTest()
super("Implementing Window Listener");
setLayout(new GridLayout(4,2));
l1=new Label("Name");
l2=new Label("Password");
t1=new TextField(10);
t2.setEchoChar('*');
b1=new Button("Send");
add(l1);
add(t1);
add(l2);
add(t2);
add(b1);
addWindowListener(this);
7
Web Design Lab HTML
public static void main(String args[])
WindowListenerTest d=new WindowListenerTest();
d.setSize(400,400);
d.setVisible(true);
public void windowClosing(WindowEvent we)
this.setVisible(false);
System.exit(0);
public void windowActivated(WindowEvent we)
public void windowDeactivated(WindowEvent we)
public void windowOpened(WindowEvent we)
public void windowClosed(WindowEvent we)
public void windowIconified(WindowEvent we)
8
Web Design Lab HTML
public void windowDeiconified(WindowEvent we)
P3.html
<html>
<body>
<applet code="WindowListenerTest.class" width=300 height=100> </applet>
</body>
</html>
Run p3.html
> javac WindowListenerTest.java
> java WindowListenerTest
4. Write an applet to display a simple message on a colored background
import java.applet.Applet;
import java.awt.*;
/*
<applet code="ColorApplet" width=300 height=100> </applet>
*/
public class ColorApplet extends Applet
9
Web Design Lab HTML
public static void main(String[] args)
Frame ForegroundBackgroundColor = new Frame("Change Background and Foreground

Color of Applet");
ForegroundBackgroundColor.setSize(420, 180);
Applet ColorApplet = new ColorApplet();
ForegroundBackgroundColor.add(ColorApplet);
ForegroundBackgroundColor.setVisible(true);
ForegroundBackgroundColor.addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent e)
System.exit(0);
});
{
Color c = getForeground();
setBackground(Color.yellow);
setForeground(Color.red);
g.drawString("hello", 100, 50); // Drawing texts on the graphics screen:
g.drawString("Good Morning", 50, 100);
5.Write an applet that computes the payment of loan based on the amount of the loan,interest
rate and number of months
import java.awt.*;
/*
<applet code="Loan" width=300 height=300>
</applet>
10
Web Design Lab HTML
*/
public class Loan extends Applet
implements ActionListener,ItemListener
{
double p,r,n,total,i;
String param1;
boolean month;
Label l1,l2,l3,l4;
TextField t1,t2,t3,t4;
Button b1,b2;
CheckboxGroup cbg;
Checkbox c1,c2;
String str;
public void init()
{
l1=new Label("Balance Amount",Label.LEFT);
l2=new Label("Number of Months",Label.LEFT);
l3=new Label("Interest Rate",Label.LEFT);
l4=new Label("Total Payment",Label.LEFT);
b1=new Button("OK");
b2=new Button("Delete");
cbg=new CheckboxGroup();
c1=new Checkbox("Month Rate",cbg,true);
c2=new Checkbox("Annual Rate",cbg,true);
t1.addActionListener(this);
b1.addActionListener(this);
b2.addActionListener(this);
c1.addItemListener(this);
c2.addItemListener(this);
add(l1);
add(t1);
add(l2);
add(t2);
add(l3);
add(t3);
add(l4);
add(t4);
add(c1);
add(c2);
add(b1);
add(b2);
}
public void itemStateChanged(ItemEvent ie)
11
Web Design Lab HTML
{
}
public void actionPerformed(ActionEvent ae)
{
str=ae.getActionCommand();
if(str.equals("OK"))
{
p=Double.parseDouble(t1.getText());
n=Double.parseDouble(t2.getText());
r=Double.parseDouble(t3.getText());
if(c2.getState())
{
n=n/12;
}
i=(p*n*r)/100;
total=p+i;
t4.setText(" "+total);
}
else if(str.equals("Delete"))
{
t1.setText(" ");
t2.setText(" ");
t3.setText(" ");
t4.setText(" ");
}
}
}
6. Write an applet to perform the 4 basic arithmetic operations as buttons in a form accepting
two integers in textboxes and display the result.
import java.awt.*;
/*
<applet code="Applet5" width=300 height=300>
</applet>
*/
public class Applet5 extends Applet implements ActionListener
12
Web Design Lab HTML
Label label1, label2, label3;
TextField tf1, tf2, tf3;
Button b1, b2, b3, b4;
String whichButtonClk;
public void init()
System.out.println("Initializing an applet");
label1 = new Label("Number1");
tf1= new TextField(10);
label2 = new Label("Number2");
tf2= new TextField(10);
b1 = new Button("Add");
b2= new Button("Subtract");
b3 = new Button("Multiply");
b4= new Button("Divide");
add(label1);
add(tf1);
add(label2);
add(tf2);
13
Web Design Lab HTML
add(b1);
add(b2);
add(b3);
add(b4);
tf1.addActionListener(this); //Applet5 class registering to listen to first textfield event
tf2.addActionListener(this); //Applet5 class registering to listen to second textfield event
b1.addActionListener(this); //Applet5 class registering to listen to first button event
b2.addActionListener(this); //Applet5 class registering to listen to second button event
b3.addActionListener(this); //Applet5 class registering to listen to third button event
b4.addActionListener(this); //Applet5 class registering to listen to fourth button event
public void actionPerformed(ActionEvent ae)
if(ae.getActionCommand().equals("Add") || ae.getActionCommand().equals("Subtract") ||
ae.getActionCommand().equals("Multiply") ||ae.getActionCommand().equals("Divide"))//
checking if an event of clicking the add/subtract/multiply/divide button is generated
whichButtonClk=ae.getActionCommand(); //initializing whichButtonClk to a String value of

Button which is clicked
repaint();
g.drawString("Please enter two numbers to perform math operations", 10,130);
if(tf1.getText().equals("") && tf2.getText().equals("")) //if the add button is clicked when

14
Web Design Lab HTML
textfields are empty
else
Integer i1= new Integer(tf1.getText());
Integer i2= new Integer(tf2.getText());
int sum = i1+i2;
int subtract=i1-i2;
int multiply=i1*i2;
float divide=(float)i1/(float)i2;
if(whichButtonClk.equals("Add"))
g.drawString("Your sum is "+ sum, 10,190);
if(whichButtonClk.equals("Subtract"))
g.drawString("Your subtract is "+ subtract, 10,190);
if(whichButtonClk.equals("Multiply"))
g.drawString("Your multiply is "+ multiply, 10,190);
if(whichButtonClk.equals("Divide"))
g.drawString("Your divide is "+ divide, 10,190);
8. HTML (five assignments may be identified)
A) Program to illustrate various HTML tags:
<! -- A Program to illustrate body and pre tags -->
15
Web Design Lab HTML
<html>
<head>
<title> body and pre tag </title>
</head>
<body text="red" bgcolor="yellow" background="Desert.jpg"> This is an
Illustration of body tag with its properties
<pre>
This text uses
pre tag and preserves
nextline and spaces </pre>
This text doesnt uses

pre tag so doesnt preserves nextline and
spaces.. everything will be printed in the
same line
</body>
</html>
OUTPUT
16
Web Design Lab HTML

<html>
<title>Font tag Example</title>
<body>
<font face="arial" size="1" color="blue">WELCOME </font> <br>
<font size="2" color="cyan">WELCOME</font><br>
<font size="3" color="red">WELCOME</font><br>
<font size="4" color="yellow">WELCOME</font><br>
<font size="5" color="green">WELCOME</font><br>
<font size="6" color="brown">WELCOME</font><br>
<font size="7" color="pink">WELCOME</font><br>
<font size="20" color="gray">WELCOME</font><br>
</body>
</html>
OUTPUT
17
Web Design Lab HTML

<html>
<head>
<title> Illustrating comment, h1...h6 and div tags </title>
</head>
<body>

<div style="color:#00ff00">
<h1 align="center"> This is h1 tag text with center aligned </h1>
<h2 align="left"> This is h2 tag text with left aligned </h2>
<h3 align="right">This is h3 tag text with right aligned </h3>
</div>
<h4> This is h4 tag text without alignment</h4>

<h5> This is h5 tag Text without alignment </h5>
<h6> This is h6 tag text without alignment </h6>
</body>
</html>
OUTPUT
18
Web Design Lab HTML

<html>
<head>
<title> Text Tags </title>
</head>
<body>
<center>
<h1 align="center">To illustrate text formatting tags </h1>
<hr color="red">
<P> <marquee behavior="alternate"> This is an alternate Marquee text
</marquee>
<p> This is <i> italized </i> </p>
<p> This is <u> underlined </u> </p>
<p> This is <b> bold </b> </p>
<p> This is <em> emphasized </em> </p>
<p>This is <Strong> Strong Text </strong> </p>
<p> This is <s> striked text </s> </p>
<p> This is <code> computer code </code> </p>
<p> This is <sup> superscript </sup> code </p>
<p> This is <sub> subscript </sub> code </p>
<p> This is <big> big text </big> </p>
<p> This is <small> small text </small> </p>
</center>
</body>
</html>
19
Web Design Lab HTML
OUTPUT
20
Web Design Lab HTML

<html>
<head>
<title> Order List tag </title>
</head>
<body>
<h3 align="center" style="color:red">To illustrate ORDER list tags</h3>
<hr COLOR="RED">
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Uppercase Letters list:</h4>

<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4>

<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Roman numbers list:</h4>

<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
21
Web Design Lab HTML
</ol>
<h4>Lowercase Roman numbers list:</h4>

<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
OUTPUT
22
Web Design Lab HTML

<html>
<head>
<title> Unorder List </title>
</head>
<body>
<h3 align="center"> To illustrate unorder list tags </h3>
<hr color="red">
<h4>Disc bullets list:</h4>

<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>

<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>

<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
23
Web Design Lab HTML
OUTPUT
24
Web Design Lab HTML

<html>
<head>
<title> Nested and Definition List </title>
</head>
<body>
<h3 align="center" > To illustrate Nested and Definition List Tags </h3>
<hr color="red">
<h4> An ordered nested List: </h4>
<ol type="a">
<li> Coffee </li>
<li> Tea </li>
<li> Black tea </li>
<li> Green tea </li> </ol>
<ol type= "i" >

<li> China </li>
<li> Africa </li>
</ol>
<ol>
<li> Milk </li>
</ol>
<h4> A Definition List: </h4>
<dl>
<dt> Bangalore </dt>
<dd> -Capital City of Karnataka </dd>
<dt> Mumbai</dt>
<dd> -Capital city of Maharashtra </dd>
</dl>
</body>
</html>
25
Web Design Lab HTML
OUTPUT
26
Web Design Lab HTML

<html>
<head>
<title> Image Tag </title>
</head>
<body>
<h3 align="center" style="color:red"> To illustrate image tags</h3> <hr>

<p>
<img src="flower.bmp" align="right" height="100" width="100"/> This image is
right aligned with the text
</p>
<br><br><br><br><hr>
<p>
<img src="flower.bmp" align="left" height="100" width="100"/> This
image is left aligned with the text
</p>
This image is center aligned with the text.
<img src="flower.bmp" align="middle" height="100" width="100"/>
This image is bottom aligned with the text.
<img src="flower.bmp" align="bottom" height="100" width="100"/>
This image is top aligned with the text.
<img src="flower.bmp" align="top" height="100" width="100"/>
</body>
</html>
27
Web Design Lab HTML
OUTPUT
28
Web Design Lab HTML

Home.html
<html>
<head>
<title> Link Tag </title>
</head>
<body>
<h3 align="center" style="color:red">To illustrate link Tags</h3> <hr>
Text as a link/hyperlink to another page : <a href="page1.html "> Click here!!!</a>
<hr>
Image as a link/hyperlink :<a href="page1.html">
<img src="desert.jpg" width="32" height="32" align="bottom"/></a>
<hr>
<p>
<a href="#C8">See also Chapter 8 ( link within a page )</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains Pointers</p>
<h2>Chapter 2</h2>
<p>This chapter explains variables</p>
<h2>Chapter 3</h2>
<p>This chapter explains operator</p>
<h2>Chapter 4</a></h2>
<p>This chapter explains structure</p>
<h2>Chapter 5</h2>
<p>This chapter explains arrays</p>
<h2>Chapter 6</h2>
<p>This chapter explains linked list</p>
<h2>Chapter 7</h2>
<p>This chapter explains expressions</p>
<h2><a name="C8">Chapter 8</h2>
<p>This chapter explains Binary Trees</p>
<h2>Chapter 9</h2>
<p>This chapter explains Unordered trees</p>
<h2>Chapter 10</h2>
<p>This chapter explains Statements</p>
<h2>Chapter 11</h2>
<p>This chapter explains searching</p>
<h2>Chapter 12</h2>
29
Web Design Lab HTML
<p>This chapter explains sorting</p>

<h2>Chapter 13</h2>
<p>This chapter explains Binary sort</p>
<h2>Chapter 14</h2>
<p>This chapter explains merge sort</p>
<h2>Chapter 15</h2>
<p>This chapter explains heap sort</p>
</body>
</html>
Page1.html
<html>
<head>
<title> Page1.html </title>
</head>
<body>
<h1 align="center"> Hello!!! This is a new chapter </h1>
<a href="home.html"> Go to home </a>
</body>
</html>
30
Web Design Lab HTML
OUTPUT
After Clicking On Click Me or the Flower image the output is
31
Web Design Lab HTML
After Clicking on the See also Chapter 8(link within a page) the output is
32
Web Design Lab HTML

<html>
<head>
<title> Table tag </title>
</head>
<body>
<center>
<h4>Table with border, vertical headers, cellpadding and cellspacing</h4>
<table border="10" cellpadding="10" cellspacing="10">
<tr>
<td></td>
<th>Name</th>
<th>Age</th>
<th>Telephone</th>
</tr>
<tr>
<th>Student 1</th>
<td>Radha Desai</td>
<td>20</td>
<td>123 456 789</td>
</tr>
<tr>
<th>Student 2</th>
<td>Geetha Bharadwaj</td>
<td>21</td>
<td>267 891 281</td>
</tr>
</table>
<hr>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Radha</td>
<td>555 77 854</td>
<td>555 77 855</td>
33
Web Design Lab HTML
</tr>
</table>
<hr>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Radha</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</center>
</body>
</html> OUTPUT
34
Web Design Lab HTML


mainframe.html
<html>
<head>
<title> Frame tag </title>
</head>
<frameset cols="20,60">
<frame src="f1.html" name=”f1_page”/>
<frame src="f2.html" name="f2_page"/>
</frameset>
</html>
<html> f1.html
<head>
<title> f1.html </title>
</head>
<body>
<h3> Districts of karnataka </h3>
<a href="demo.html" target="main"> gulbarga<br></a>
<a href="demo1.html" target="main"> Belagavi<br> </a>
</body>
</html>
f2.html
<html>
<head>
<title> f2.html </title>
</head>
<body>
<h1> Click on any District to get a welcome message </h2>
</body>
</html>
demo.html
<html>
<head>
<title> demo.html </title>
</head>
<body bgcolor="green">
<h1> Welcome to gulbarga </h1>
35
Web Design Lab HTML
</body>
</html>
Demo1.html
<html>
<head>
<title> belagavi.html </title>
</head>
<body bgcolor="red">
<h1> Welcome to belagavi</h1>
</body> OUTPUT
</html>
After Clicking On demo the output is:
After Clicking On demo1 the output is :
36
Web Design Lab HTML

<html>
<head>
<title> form tag </title>
</head>
<body>
<center>
<h3 align="center">To illustrate form based tags</h3> <hr color="red">
<form action="">
<p>This is a text box to enter any text.<input type="text" >
<p>This is a text box to enter password.<input type="password" >
<p>This is a text area to enter large text<textarea> </textarea>
<p>This is a button.<input type="button" Value="Click" >
<p><b><u>Radio Options</u></b><br>
<input type="radio" name="y" checked> yes
<input type="radio" name="n" checked> no </p>
<p><b><u>Checkbox Options</u></b><br>
Sunday<input type="checkbox" checked >
Monday<input type="checkbox" > Tuesday<input
type="checkbox" >
</p>
<p><b><u>Menu driven options </u></b>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select></p>
</form>
</center>
</body>
</html>
37
Web Design Lab HTML
OUTPUT
38
Web Design Lab HTML
B) 
<html>
<head>
<title> span tag </title>
<style type="text/css">
span.blue{ color:lightskyblue; font-weight:bold;}
span.green{ color:darkolivegreen; font-weight:bold;}
</style>
</head>
<body>
<p align="center">
<font size=10>
my mother has <span class="blue"> light blue </span> eyes and my father has
<span class="green"> dark green </span> eyes.
</font>
</p>
</body>
</html>
OUTPUT
39
Web Design Lab HTML

<html>
<head>
<title> css demo </title>
<style type="text/css">
body { background-color:red;}
h1 { color:orange; text-align:center;}
p { font-family: "Times new roman "; font-size: 20px;}
</style>
</head>
<body>
<h1> CSS EXAMPLE </h1>
<p> This is a paragraph </p>
</body>
</html>
OUTPUT
40
Web Design Lab HTML
C) 

<html>
<head>
<title> embedding multimedia </title>
</head>
<body>
<center>
<h1> Here is a video embedded on this webpage </h1>
<br>
<video controls>
<source src="wildlife.mp4" >
</video>
</center>
</body>
</html>
OUTPUT
41
Web Design Lab HTML
9. Develop and demonstrate a XHTML document that illustrates the use external style sheet,
ordered list, table, borders, padding, color, and the <span> tag.
// style.css
p,table,li,
{
font-family: "lucida calligraphy", arial, 'sans
serif'; margin-left: 10pt;
}
p { word-spacing: 5px; }
body { background-
color:rgb(200,255,205); } p,li,td
{ font-size: 75%;}
td { padding: 0.5cm; }
th {
text-
align:center;
font-size:
85%;
}
h1, h2, h3, hr
{color:#483d8b;} table
{
border-style: outset;
background-color: rgb(100,255,105);
}
li {list-style-type: lower-
roman;} span
{
color:blue;
42
background- Web Design Lab HTML
color:pink; font-
size: 29pt;
font-style:
italic; font-
weight: bold;
}

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title> Lab program1 </title>
</head>
<body>
<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>
<p>This paragraph has a left margin of 50 pixels</p>
<table border="4" width="5%"> 
<tr>
<tr>
</
tr> </tr>
<tr>
</
tr>
<tr>
</
tr>
<tr>
</
tr>
43
<th Web Design Lab HTML
width="204"
>Name
</th>
<th>Email</
th>
<td
width="204"
>Dr.
HNS</td>
<td>abc@pe
s.edu</td>
<td
width="204"
>Dr.
MKV</td>
<td>xyz@re
diffmail.com
</td>
<td
width="204"
>Dr.
GTR</td>
<td>aaa@ya
hoo.co.in</
td>
<td
width="204"
>Dr.
MVS</td>
<td>bbb@h
otmail.com<
/td>
44
Web Design Lab HTML
</table>
<hr> 
<ol> 
<li> Gowtham</li>
<li> Gowrav </li>
<li> Gopalakrishna </li>
</ol>
<p>
<span>This is a text.</span> This is a text. This is a text. This is a text. This is a text. This is a text. This is
a text. This is a text. This is a text. <span>This is a text.</span>
</p>
</body>
</html>
10. Develop and demonstrate a XHTML file that includes Javascript script for the following
problems: a) Input: A number n obtained using prompt Output: The first n Fibonacci numbers
b) Input: A number n obtained using prompt Output: A table of numbers from 1 to n
and their squares using alert
A)
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml/">
<head><title>Fibonacci Series</title> </head>
<body bgcolor="yellow">
<h3 style="text-align:center;color:red"> Program to generate first n
fibonacci numbers </h3>
<script type="text/javascript">
var limit = prompt("Enter the number");
var f1=0; var f2=1;
document.write("<h3>The limit entered is: </h3>",limit,"<br/>");
document.write("<h3>The fibonacci series is: </h3> <br/>");
if(limit == 1)
{
document.write("",f1,"<br/>");
}
if(limit == 2)
{
}
if(limit > 2)
{
45
Web Design Lab HTML
for(i=2;i<limit;i++)
{
f3 = f2+f1;
f1=f2;
f2=f3;
}
}
</script>
</body>
</html>
B)
<?xml version ="1.0" encoding = "utf-8?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title> square.html </title> </head>
<body style="background-color:yellow">
<h3 style="text-align:center;color:red"> Program to generate a table of numbers from 1

to n and their squares using alert</h3>
<script type="text/javascript" >
var n= prompt("Enter the limit 'n' to generate the table of
numbers from 1 to n:","");
var msg = "";
var res = "0";
for(var x = 1; x <= n; x++)
res = x * x;
msg = msg + " "+ x + " * "+ x + " = " + res + "\n";
alert(msg);
</script>
46
Web Design Lab HTML
</body>
</html>
11. Develop and demonstrate a XHTML file and JavaScript script that uses functions for the
following problems
12. Parameter: A string Output: The position in the string of the left-most vowel.
13. Parameter: A number Output: The number with its digits in the reverse order.
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
var str = prompt("Enter the Input","");
if(!(isNaN(str)))
{
var num,rev=0,remainder;
num = parseInt(str);
while(num!=0)
{
remainder = num%10;
num = parseInt(num/10);
rev = rev * 10 + remainder;
}
alert("Reverse of "+str+" is "+rev);
}
else
{
str = str.toUpperCase();
for(var i = 0; i < str.length; i++)

{
var chr = str.charAt(i);
if(chr == 'A' || chr == 'E' || chr == 'I' || chr == 'O' || chr == 'U')break;
}
if( i < str.length )
alert("The position of the left most vowel is "+(i+1));
else
alert("No vowel found in the entered string");
}
</script>
</body>
47
Web Design Lab HTML
</html
14. Design an XML document to store information about a student in an engineering college
Affiliated to VTU. The information must include USN, Name, Name of the College, Branch,
Year of Joining, and e-mail id.Make up sample data for 3 students. Create a CSS style sheet
and use it to display the document.
P14.xml
<?xml version ="1.0" encoding="utf-8"?>
<!DOCTYPE student[<!ELEMENT student_information (ad+)>
<!ELEMENT ad (usn,name,collegename,branch,year,email)>
<!ELEMENT usn (#PCDATA)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT collegename (#PCDATA)>
<!ELEMENT branch (#PCDATA)>
<!ELEMENT year (#PCDATA)>
<!ELEMENT email (#PCDATA)>
<!ELEMENT label (#PCDATA|email|year|branch|college|name|usn)*>
<!ELEMENT h3 (#PCDATA)> <!ELEMENT h2 (#PCDATA)>]>
<?xml-stylesheet type="text/css" href="stu.css"?>
<student_information>
<h3>Student-Information</h3>
<h2> student 1</h2>
<ad><label> usn:<usn> 4bd06499 </usn></label></ad>
<ad><label> Name:<name> AAA </name></label></ad>
<ad><label> College name:<College> CIT,Gubbi </College></label></ad>
<ad><label> Branch:<branch> CSE </branch></label></ad>
<ad><label> Year of joining:<year> 2006 </year></label></ad>
<ad><label> Email-ID:<email> aaa@gmail.com </email></label></ad>
<h2> student2</h2>
<ad><label> Name:<name> BBB</name></label></ad>
<ad><label> Email-ID:<email> bbb@gmail.com </email></label></ad>
<h2> student 3</h2>
<ad><label> Name:<name> CCC </name></label></ad>
<ad><label> Email-ID:<email> ccc@gmail.com </email></label></ad>
</student_information>
48
Web Design Lab HTML
Stu.css
ad{display: block; margin-top:15px; color: blue; font-size:13pt; }
usn {color: red; font-size:12pt; margin-left:15px; }
name {color: red; font-size:12pt; margin-left:15px; }
college {color: red; font-size:12pt; margin-left:15px; }
branch {color: red; font-size:12pt; margin-left:15px; }
year {color: red; font-size:12pt; margin-left:15px; }
email {color: red; font-size:12pt; margin-left:15px; }
h3{color: red; font-size:16pt; }
h2 {display: block; color: red; font-size:16pt; }
15. Write a Perl program to display various Server Information like Server Name, Server
Software, Server protocol, CGI Revision etc.
#!/usr/bin/perl
print "content-type:text/html \n\n",
"<html>",
"<h1>Welcome to CIT</h1>",
"<h2>Welocome to PWEB LAB</h2>",
"<body>",
"Server Name: $ENV {'SERVER_NAME'}<br>",
"Server Port: $ENV {'SERVER_PORT'}<br>",
"Server Software: $ENV {'SERVER_SOFTWARE'}<br>",
49
Web Design Lab HTML
"Server Protocol: $ENV {'SERVER_PROTOCOL'}<br>",
"CGI VERSION: $ENV {'GATEWAY_INTERFACE'}",
"</html>";
16. Write a Perl program to accept UNIX command from a HTML form and to display the
output of the command executed
#!/usr/bin/perl
use CGI':standard';
print header(),
start_html(-title=>'UNIX COMMAND',-bgcolor=>'#00ffff'),
h1({-align=>'center'},'UNIX COMMAND EXECUTION'),
hr(),
startform(-method=>'get',-action=>'./lab5b.cgi'),
'ENTER UNIX COMMAND:',
textfield(-name=>'cmd'),br(),
br(),
submit(-value=>'EXECUTE'),
endform(),
hr(),
'$',$cmd=param("cmd"),
br(),
pre(`$cmd`),
end_html();
50
Web Design Lab HTML
17. Write a Perl program to keep track of the number of visitors visiting the web page and to
display this count of visitors, with proper headings
#!/usr/bin/perl
use CGI “:standard”;
print header(),
start_html(-bgcolor=>‟lightyellow‟),
h1({-align=>‟center‟},‟PAGE VISITOR INFO‟),
hr,
font({-color=>‟lightblue‟,-size=>‟4‟},‟This page is visited‟),
br,
font({-color=>‟orange‟,-size=>‟7‟},`grep „/cgi-bin/6b.cgi‟ accesslog |
wc –l`),
br,
font({-color=>‟lightblue‟,-size=>‟4‟},‟no of times‟),
br,
hr,
end_html;
51
Web Design Lab HTML
18. Write a Perl program to insert name and age information entered by the user into a table
created using MySQL and to display the current contents of this table
#!/usr/bin/perl
use CGI':standard';
use DBI;
$dbh = DBI->connect (“DBI:mysql:veena”,”root”) or die “can not connect”.DBI->errstr();
$sth = $dbh->prepare („insert into userinfo values (?,?)”) or die “can not insert”.$dbh->errstr();
$sth1 = $dbh->prepare (‘select * from userinfo’) or die “cannot select”.$dbh->errstr();
print header(),
start_html(-title=>'database access',-bgcolor=>'#00ffff'),
h1({-align=>'center'},'Database Access'),
hr(),
h2({-align=>'center'},'Database insert'),
‘ENTER USER INFORMATION’,
start_form(-action=>’./8.cgi’),
‘NAME:’,
textfield(-name=>’name’),
br,
‘AGE:’
52
Web Design Lab HTML
textfield(-name=>’age’),
br,
submit (-value=>’Insert’),
reset (-value=>’Reset’),
end_form(), hr();
$ename = param(‘name’);
$eage = param(‘age’);
if ($ename eq “ ”)
print “do not enter null values”;
else
$sth->execute($ename, $eage) or die “cannot insert”.$sth->errstr();
print “successfully inserted”;
print hr(),
h2({-align=>'center'},'Database display'),
pre(
‘userinfo’
br(),
‘-‘x 50,br(), ‘
NAME AGE’,br(),
‘-‘x 50);
$st1->execute();
while(($ename,$eage)=$sth1->fetchrow())
{
53
Web Design Lab HTML
print “<pre>$ename $eage \n</pre>”;
$sth1->finish();
$sth->finish();
$dbh->disconnect;
end_html();
54

WEB Programming Laboratory Manual BSC 6 Sem: Web Design Lab HTML

Uploaded by

Copyright:

Available Formats

WEB Programming Laboratory Manual BSC 6 Sem: Web Design Lab HTML

Uploaded by

Document Information

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 Programming Laboratory Manual BSC 6 Sem: Web Design Lab HTML

Uploaded by

Copyright:

Available Formats

Web Design Lab HTML

Bsc 6th Sem

<applet code="SimpleKey" width=300 height=100> </applet>

public class SimpleKey extends Applet implements KeyListener {

String msg = "";

int X = 10, Y = 20; // output coordinates

public void init()

public void keyPressed(KeyEvent ke)

public void keyReleased(KeyEvent ke)

public void keyTyped(KeyEvent ke)

msg += ke.getKeyChar(); repaint();

public void paint(Graphics g)

Steps to Execute Program

> javac SimpleKey.java

> appletviewer SimpleKey.java

/*<applet code="Mouseevents" width=500 height=300></applet>*/

public class Mouseevents extends Applet implements MouseListener,MouseMotionListener

public void init()

public void mouseClicked(MouseEvent me)

public void mouseEntered(MouseEvent me)

public void mouseExited(MouseEvent me)

public void mousePressed(MouseEvent me)

public void mouseReleased(MouseEvent me)

public void mouseDragged(MouseEvent me)

showStatus("Dragging mouse at "+mousex+" , "+mousey);

public void mouseMoved(MouseEvent me)

showStatus("mouse moving at "+me.getX()+" , "+me.getY());

public void paint(Graphics g)

Steps to Execute Program

> javac Mouseevents.java

> appletviewer MouseEvents.java

3. Write java program to demonstrate window events on frame

public class WindowListenerTest extends Frame implements WindowListener

super("Implementing Window Listener");

public static void main(String args[])

WindowListenerTest d=new WindowListenerTest();

public void windowClosing(WindowEvent we)

public void windowActivated(WindowEvent we)

public void windowDeactivated(WindowEvent we)

public void windowOpened(WindowEvent we)

public void windowClosed(WindowEvent we)

public void windowIconified(WindowEvent we)

public void windowDeiconified(WindowEvent we)

<applet code="WindowListenerTest.class" width=300 height=100> </applet>

Steps to Execute Program

> javac WindowListenerTest.java

> java WindowListenerTest

4. Write an applet to display a simple message on a colored background

<applet code="ColorApplet" width=300 height=100> </applet>

public class ColorApplet extends Applet

public static void main(String[] args)

Frame ForegroundBackgroundColor = new Frame("Change Background and Foreground

Applet ColorApplet = new ColorApplet();

public void windowClosing(WindowEvent e)

public void paint(Graphics g)

public class Applet5 extends Applet implements ActionListener

Label label1, label2, label3;

TextField tf1, tf2, tf3;

Button b1, b2, b3, b4;

/<applet code="Mouseevents" width=500 height=300></applet>/