lab 1-5
DESCRIPTION
labTRANSCRIPT
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
INFORMATION
Delhi.html
NEW DELHI
NEW DELHI
NEW DELHI IS THE CAPITAL OF INDIA
PARLIMENT HOUSE IS SITUATED HERE
NEW DELHI
NEW DELHI
NEW DELHI
CLICK HERE TO HOME PAGE
Chennai.html
CHENNAI
CHENNAI
CHENNAI IS THE CAPITAL OF TAMILNADU
CHENNAI
CHENNAI
CHENNAI
CLICK HERE TO HOME PAGE
Kolkatta.html
KOLKATTA
KOLKATTA
KOLKATTA IS CAPTITAL OF WEST BENGAL
KOLKATTA
KOLKATTA
KOLKATTA
CLICK HERE TO HOME PAGE
Mumbai.html
mumbai
MUMBAI
MUMBAI IS THE CAPITAL OF MAHARASTRA
MUMBAI
MUMBAI
MUMBAI
CLICK HERE TO HOME PAGE
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
stylesheet
body
{ background:white; margin-left:1 in; margin-right:1.5in;
} H1
{
font-size:16pt;
color:green;
font-family:verdana;
text-align:center;
}
Hi!Hello
V V College of Engg.The college has a good infrastructure and
campus
THIS IS H1
EXTERNAL
Hi there!
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.
MYSTYLE.CSS
Body
{
font-size:12pt; font-family: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
.tech
{
font-weight:bold;
color:blue;
}
Hi this is class style sheet
This is V V College of Engg
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:
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);
}
}
FORM VALIDATION
BIO - DATA
Name:
Designation & Address:
Date of Birth:
Gender:
Male
Female
Father's Name:
Experience in Years:
Residential Address:
Telephone no:
Email id:
Area of Specialisation:
Language known:
English
Tamil
Hindi
RESULT:
Thus the design a web page to validates a form client side scripting language Java Script(DHTML) was executed successfully.
EX NO:4
DATE:DISPLAYING BACKGROUND COLOR USING AWT BUTTON AND ACTION EVENT
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);
t2=new TextField(10);
t3=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()));
t3.setText(String.valueOf(sum));
}
if(ae.getSource()==mul)
{
setBackground(Color.green);
int sum=(Integer.parseInt(t1.getText()))*(Integer.parseInt(t2.getText()));
t3.setText(String.valueOf(sum));
}
if(ae.getSource()==div)
{
setBackground(Color.yellow);
int sum=(Integer.parseInt(t1.getText()))/(Integer.parseInt(t2.getText()));
t3.setText(String.valueOf(sum));
}
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);
}
}
/**/
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.*;
/*
*/
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.