Lab 1-5

EX NO:1
DATE:
WEB PAGE USING IMAGE MAP
AIM
To write a program in HTML to demonstrate the use of AREA LINK concept.
ALGORITHM :
STEP 1. Create an html page to load the India map.
STEP 2. Create four hot spots using coordinates in four major cities.
STEP 3. Give area link to those four major cities.
STEP 4. If any area is clicked then that area information should be shown.
STEP 5. From this page give link to home page.
PROGRAM:
India.html
<HTML>
<HEAD>
<TITLE>INFORMATION</TITLE>
</HEAD>
<BODY>
<P><map NAME="MAP">
<AREA HREF="DELHI.HTML" SHAPE="RECT" COORDS="120,113,125,117">
<AREA HREF="KOLKATTA.HTML" SHAPE="RECT" COORDS="249,189,256,195">
<AREA HREF="MUMBAI.HTML" SHAPE="RECT" COORDS="71,233,77,240">
<AREA HREF="CHENNAI.HTML" SHAPE="RECT" COORDS="149,313,157,320">
<IMG BORDER="0" SRC="MAP4.BMP" USEMAP="#MAP" WIDTH="371"
HEIGHT="408"></P>
</BODY>
</HTML>
Delhi.html
<HTML>
<HEAD>
<TITLE>NEW DELHI</TITLE>
</HEAD>
<BODY>
<H1>NEW DELHI</H1>
<H3><PRE>NEW DELHI IS THE CAPITAL OF INDIA
PARLIMENT HOUSE IS SITUATED HERE
NEW DELHI
NEW DELHI
NEW DELHI
</PRE>
<A HREF="INDIA.HTML">CLICK HERE TO HOME PAGE
</H3>
</BODY>
</HTML>
Chennai.html
<HTML>
<HEAD>
<TITLE>CHENNAI</TITLE>
</HEAD>
<BODY>
<H1>CHENNAI</H1>
<H3><PRE>CHENNAI IS THE CAPITAL OF TAMILNADU
CHENNAI
CHENNAI
CHENNAI
</PRE>
</H3>
</BODY>
</HTML>
Kolkatta.html
<HTML>
<HEAD>
<TITLE>KOLKATTA</TITLE>
</HEAD>
<BODY>
<H1>KOLKATTA</H1>
<H3><PRE>KOLKATTA IS CAPTITAL OF WEST BENGAL
KOLKATTA
KOLKATTA
KOLKATTA
</PRE>
</H3>
</BODY>
</HTML>
Mumbai.html
<HTML>
<HEAD>
<TITLE>mumbai</TITLE>
</HEAD>
<BODY>
<H1>MUMBAI</H1>
<H3><PRE>MUMBAI IS THE CAPITAL OF MAHARASTRA
MUMBAI
MUMBAI
MUMBAI
</PRE>
<A HREF="INDIA.HTML" link="blue" alink="red"
vlink="cyan">CLICK HERE TO HOME PAGE
</H3>
</BODY>
</HTML>
RESULT:
Thus the program in HTML to demonstrate the use of AREA LINK concept was
executed and output verified succesfully.
EX.NO:2
DATE:
WEB PAGE USING CASCADING STYLE SHEETS
AIM:
To create a webpage using Cascading styles Sheet embedded and inline style sheet.
ALGORITHM:
Step 1. Design a web page containing college information.
Step 2. For an Embedded style sheet the text is formatted by importing the format
specified in style tag.
Step 3. For an linked style sheet the text is formatted by importing the format
specified in different file.
Step 4. For an Inline style sheet the text is formatted by using the style specified in
each and every tag.
Step 5. The web page is displayed in a browser.
PROGRAM:
EMBEDDED
<html>
<head>
<title>stylesheet</title>
</head>
<style>
body
{ background:white;
margin-left:1 in; marginright:1.5in;
} H1
{
font-size:16pt;
color:green;
font-family:verdana;
text-align:center;
}
</style>
</head>
<body>
<p>Hi!Hello<br> V V College of Engg.The college has a good infrastructure and
campus
</p>
<h1>THIS IS H1</h1>
</body>
</html>
EXTERNAL
<html>
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css"></link>
</head>
<body>
Hi there!<p><br> V V College of Engg has seperate labs for each department. The college
also encourages the students to excel in extra curicular activities and other cultural activities.
</p>
</body>
</html>
MYSTYLE.CSS
Body
{
font-size:12pt; fontfamily:arial;
color:brown;
background:white;
}
p
{
font-size:10pt;
font-family:verdana;
color:blue;
text-indent:0.5in;
margin-left:50px;
margin-right:50px;
}
INLINE
<html>
<head>
<style>
.tech
{
font-weight:bold;
color:blue;
}
</style>
</head>
<body>
<p class ="tech">Hi this is class style sheet<br> This is V V College of Engg
</p>
</body>
</html>
RESULT:
Thus the web page using Cascading styles Sheet embedded and inline
style sheet was created and output verified successfully
EX NO:3
DATE:
FORM VALIDATION USING JAVA SCRIPT
AIM:
To design a web page to validates a form client side scripting language

Java Script(DHTML)
ALGORITHM:
1. Design a page for sign up from with rich user interface.

2. Create control using input tag they are like name, experience, age
address, phone number, area of specification.
3. Using java script we are going to validate each & every contol after
the submit button is clicked. So a function validate() as created.
4. Write the java script function is validate all mandatory fields on your web
page.
5. Validation should be done after the submit operation.
6. Use appropriate tags to displays the contents.
7. Make sure the page is working efficiently.
PROGRAM:
<html>
<head>
<title>javascript</title>
<script type="text/javascript">
function validate(mainform)
{
if(mainform.Name.value=="")
{
alert("Enter your Name");
mainform.Name.focus();
return(false);
}
if(mainform.des.value=="")
{
alert("Enter your Designation");
mainform.des.focus();
return(false);
}
if(mainform.dob.value == "")
{
alert("Enter your Date of Birth");
mainform.dob.focus();
return(false);
}
if((mainform.gender[0].checked==false)&&(mainform.gender[1].checked==false))
{
alert("Enterselect the gender");
mainform.gender[0].focus();
return(false);
}
if(mainform.fName.value == "")
{
alert("Enter your Father's");
mainform.fName.focus();
return(false);
}
if(mainform.res.value == "")
{
alert("Enter your Residential Address");
mainform.res.focus();
return(false);
}
phone=mainform.phone.value;
if(phone=="")
{
alert("please enter the phone no");
mainform.phone.focus();
return(false);
}
if(mainform.email.value == "")
{
alert("Please enter emailaddress");
mainform.email.focus();
return(false);
}
if(mainform.aos.value == "")
{
alert("Enter your Area of Specialization");
mainform.aos.focus();
return(false);
}
if((mainform.loc[0].checked == false) && (mainform.loc[1].checked == false) &&
(mainform.loc[2].checked == false))
{
alert("Enter language known to your");
mainform.loc[0].focus();
return(false);
}
}
</script>
</head>
<body bgcolor="pink">
<form name="mainform" method="post" onsubmit="return validate(this);">
<h1><center>FORM VALIDATION</center></h1>
<table border="0" align="center" bgcolor="#E3FBF9">
<tr>
<td>
<table border="0" align="center">
<caption style="font-size:20"><strong> BIO - DATA </strong></caption>
<tr><td></td></tr>
<tr><td>Name:</td>
<td><input type="textbox" name="Name"></td>
</tr>
<tr>
<td>Designation & Address:</td>
<td><textarea type="text" name="des" ></textarea></td>
</tr>
<tr>
<td>Date of Birth:</td>
<td><input type="textbox" name="dob"></td>
</tr>
<tr>
<td>Gender:</td>
<td><input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="Female">Female</td>
</tr>
<tr>
<tr>
<td>Father's Name:</td>
<td><input type="textbox" name="fName"></td>
</tr>
<tr>
<td>Experience in Years:</td>
</TD>
</TR>
<tr>
<td>Residential Address:</td>
<td><textarea type="text" name="res" ></textarea></td>
</tr>
<tr>
<td>Telephone no:</td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td>Email id:</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td>Area of Specialisation:</td>
<td><input type="text" name="aos"></td>
</tr>
<tr>
<td>Language known:</td>
<td><input type="checkbox" name="loc" value="English">English
<input type="checkbox" name="loc" value="Tamil">Tamil
<input type="checkbox" name="loc" value="Hindi">Hindi</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td><center><input type="submit" value="submit"></center></td>
<td><center><input type="reset" value="reset"></center></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
RESULT:
Thus the design a web page to validates a form client side scripting
language Java Script(DHTML) was executed successfully.
EX NO:4
DISPLAYING BACKGROUND COLOR USING AWT BUTTON AND

ACTION EVENT
DATE:
AIM:
To demonstrate the AWT controls for simple calculator application using Action
event
ALGORITHM:
1. Create the controls for each label, Text field, Text area and Button.
2. Add the items to the choice using addition() method.
3. Now using ActionListener listen the action performed by each button.
4. Add ActionEvent to perform addition, subtraction, division and
multiplication.
5. Compile the code.
6. View it using AppletViewer.
7. Stop the program.
PROGRAM:
import java.io.*;
import java.awt.*;
import java.applet.*;
import java.awt.event.*;
public class calci extends Applet implements ActionListener
{
Label l1,l2,l3,l4;
TextField t1,t2,t3;
Button add,sub,mul,div;
TextArea a1;
public void init()
{
l1=new Label("NUMBER 1");
l2=new Label("NUMBER 2");
l3=new Label("RESULT ");
l4=new Label("ENTER YOUR NAME ");
t1=new TextField(10);
add=new Button("ADD");
sub=new Button("SUB");
mul=new Button("MUL");
div=new Button("DIV");
a1=new TextArea(5,15);
add(l1);
add(t1);
add(l2);
add(t2);
add(l3);
add(t3);
add(l4);
add(a1);
add(add);
add(sub);
add(mul);
add(div);
add.addActionListener(this);
sub.addActionListener(this);
mul.addActionListener(this);
div.addActionListener(this);
}
public void actionPerformed(ActionEvent ae)
{
if(ae.getSource()==add)
{
setBackground(Color.pink);
int sum=(Integer.parseInt(t1.getText()))+(Integer.parseInt(t2.getText()));
t3.setText(String.valueOf(sum));
}
if(ae.getSource()==sub)
{
setBackground(Color.blue);
int sum=(Integer.parseInt(t1.getText()))-(Integer.parseInt(t2.getText()));
}
if(ae.getSource()==mul)
{
setBackground(Color.green);
int sum=(Integer.parseInt(t1.getText()))*(Integer.parseInt(t2.getText()));
}
if(ae.getSource()==div)
{
setBackground(Color.yellow);
int sum=(Integer.parseInt(t1.getText()))/(Integer.parseInt(t2.getText()));
}
repaint();
}
public void paint(Graphics g)

{
g.drawRect(180,180,220,220);
g.drawString("NUMBER 1="+t1.getText(),200,200);
g.drawString("NUMBER 2="+t2.getText(),200,210);
g.drawString("RESULT ="+t3.getText(),200,220);
g.drawString("Name is ="+a1.getText(),200,230);
}
}
/*<applet code="calci.class" height=200 width=200></applet>*/
RESULT:
Thus the demonstration of the AWT controls for simple calculator application using
Action event was executed successfully.
EX NO:5
DATE:
COLOUR PALETE PROGRAM USING ITEM EVENT
AIM:
To demonstrate color palette program using itemevent
ALGORITHM:
1.Create the controls for each label,textfield,textarea and checkbox.

2.Add the item yo the choice using additem() method.
3.Now using itemlistener liaten the item performed by each checkbox.
4.Add item event to perform various background colors.
5.Compile the code.
5.View it using applet viewer.
7.Stop the process.
PROGRAM:
import java.awt.*;
import java.awt.event.*;
import java.applet.*;
/*
<applet code="colorpal" width=450 height=250>
</applet>
*/
public class colorpal extends Applet implements ItemListener
{
TextArea text=new TextArea("sampleText welcome");
int fr=0,fb=0,br=0,bb=0,bg=0,fg=0;
Checkbox fred,fgreen,fblue,bred,bgreen,bblue;
Font f=new Font("sanserif",Font.BOLD,18);
public void init()
{
fred=new Checkbox("Forecolor Red");
fgreen=new Checkbox("Forecolor Green");
fblue=new Checkbox("Forecolor Blue");
bred=new Checkbox("Backcolor Red");
bgreen=new Checkbox("Backcolor Green");
bblue=new Checkbox("Backcolor Blue");
add(fred);
add(fgreen);
add(fblue);
add(bred);
add(bgreen);
add(bblue);
add(text);
fred.addItemListener(this);
fgreen.addItemListener(this);
fblue.addItemListener(this);
bred.addItemListener(this);
bgreen.addItemListener(this);
bblue.addItemListener(this);
}
public void itemStateChanged(ItemEvent ie)
{
repaint();
}
public void paint(Graphics g)
{
if(fred.getState())
fr=255;
else
fr=0;
if(fgreen.getState())
fg=255;
else
fg=0;
if(fblue.getState())
fb=255;
else
fb=0;
if(bred.getState())
br=255;
else
br=0;
if(bgreen.getState())
bg=255;
else
bg=0;
if(bblue.getState())
bb=255;
else
bb=0;
Color c=new Color(fr,fg,fb);
Color c1=new Color(br,bg,bb);
text.setForeground(c);
text.setBackground(c1);
}
}
RESULT:
Thus the simple program to demonstrate color palette program using
itemevent was executed sucessfully.

Lab 1-5

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

Lab 1-5

Uploaded by

Copyright:

Available Formats

EX NO:1

WEB PAGE USING IMAGE MAP

WEB PAGE USING CASCADING STYLE SHEETS

FORM VALIDATION USING JAVA SCRIPT

To design a web page to validates a form client side scripting language

1. Design a page for sign up from with rich user interface.

DISPLAYING BACKGROUND COLOR USING AWT BUTTON AND

public void paint(Graphics g)

COLOUR PALETE PROGRAM USING ITEM EVENT

1.Create the controls for each label,textfield,textarea and checkbox.

You might also like