Embedding an Image Map in an Html Page

EXERCISE: 1

DATE:

EMBEDDING AN IMAGE MAP IN AN HTML PAGE

Aim:

To create an html page with an embedded image and to fix the hotspots for linking.

Algorithm:

Step 1: Start the program.

Step 2: Create an html page and embed an image in it.

Step 3: Using the X-Y co-ordinates, fix the various hotspots used to link other pages.

Step 4: Create 4 different pages separately.

Step 5: Using link tag, connect each hotspot with its respective link page.

Step 6: Load the main html program, and check the links.

Step 7: Stop the program.

PROGRAM CODE:

map.html

<html>

<head>

<h1>INDIA</h1</font>

</head>

</map>

<marquee<font color="green">

<h2>INDIA IS MY COUNTRY</h2>

</font</marquee<img src="map.jpg" usemap="#mymap">

</body>

</html>

chennai.html

<html>

<head<b<h1 align="center">

<font color="green">CHENNAI</font</b</head>

<body bgcolor="cyan"<h2 align="left">About chennai</h2<hr>

<ul<h3 align="left"<li>Chennai is the capital of Tamilnadu<br>

<li>It is one of the 4 metropolitan cities of India<br>

<li>Tamil is the native language of Chennai<br</ul>

</font>

</body>

</html>

mumbai.html

<html>

<head<b<h1 align="center">

<font color="green">MUMBAI</font</b</head>

<body bgcolor="pink"<h2 align="left">About Mumbai</h2<hr>

<ul<h3 align="left"<li>Mumbai is popularly called as Bollywood city<br>

<li>It is one of the 4 metropolitan cities of India<br>

<li>Hindi is the native language of Mumbai<br</ul>

</font>

</body>

</html>

delhi.html

<html>

<head<b<h1 align="center">

<font color="red">DELHI</font</b</head>

<body bgcolor="yellow"<h2 align="left">About Delhi</h2<hr>

<ul<h3 align="left"<li>Delhi is the capital of India<br>

<li>It is one of the 4 metropolitan cities of India<br>

<li>Hindi is the native language of Delhi<br</ul>

</font>

</body>

</html>

kolkatta.html

<html>

<head<b<h1 align="center">

<font color="red">KOLKATTA</font</b</head>

<body bgcolor="violet"<h2 align="left">About Kolkatta</h2<hr>

<ul<h3 align="left"<li>Kolkatta is the capital of West Bengal<br>

<li>It is one of the 4 metropolitan cities of India<br>

<li>Bengali is the native language of Chennai<br</ul>

</font>

</body>

</html>

SCREEN OUTPUT:

RESULT:

Thus an html page with an embedded image has been created and hotspots are fixed for linking.

EXERCISE: 2

DATE:

APPLYING STYLE TO AN HTML PAGE USING CSS

Aim:

To create an html page, and to apply style formatting using external Cascading Style Sheet.

Algorithm:

Step 1: Start the program.

Step 2: Create an html page.

Step 3: Create an external CSS (Cascading Style Sheet).

Step 4: Link the external style sheet page with the main html page.

Step 5: Load the main page.

Step 6: The style formatting will be applied to the main html page.

Step 7: Stop the program.

PROGRAM CODE:

style.html

<html>

<head>

<title>My first styled page</title>

</head>

<body>

<li<a href="About.html">About us</a>

<li<ahref="Dept.html">Department</a>

<li<a href="Contact.html">Contact us</a>

</ul>

<h1>My first styled page</h1>

<p>SHRI ANDAL ALAGAR COLLEGE OF ENGINEERING<BR>

NO 6,G.S.T. ROAD.<br>

MAMANDUR-636111.<br>

<p>

An ISO 9001:2008 institution<br>

NBA Accredited<br>

<p<address>December 28th <br>

Dept. of I.T.</address>

</body>

</html>

mystyle.css

BODY

{

PADDING-LEFT: 11em;

COLOR: purple;

FONT-FAMILY: Georgia, "Times New Roman",

Times, serif;

BACKGROUND-COLOR: #d8da3d

}

UL.navbar

{

PADDING-RIGHT: 0px;

PADDING-LEFT: 0px;

LEFT: 1em;

PADDING-BOTTOM: 0px;

MARGIN: 0px;

WIDTH: 9em;

PADDING-TOP: 0px;

LIST-STYLE-TYPE: none;

POSITION: absolute;

TOP: 2em

}

{

FONT-FAMILY: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif

}

UL.navbar LI

{

BORDER-RIGHT: 1em solid;

PADDING-RIGHT: 0px;

PADDING-LEFT: 0px;

BACKGROUND: white;

PADDING-BOTTOM: 0.3em;

MARGIN: 0.5em 0px;

PADDING-TOP: 0.3em

}

UL.navbar A

{

TEXT-DECORATION: none

}

A: link

{

BORDER-RIGHT: mediumblue;

BORDER-TOP: mediumblue;

BORDER-LEFT: mediumblue;

COLOR: blue;

BORDER-BOTTOM: mediumblue

}

A: visited

{

COLOR: purple

}

ADDRESS

{

BORDER-TOP: thin dotted;

MARGIN-TOP: 1em;

PADDING-TOP: 1em

}

SCREEN OUTPUT:

RESULT:

Thus an html page is created and style formatting is applied using external Cascading Style Sheet.

EXERCISE: 3

DATE:

COLOR PALETTE CREATION USING JAVA APPLET

Aim:

To create a color palette using java applet to change the foreground and background color.

Algorithm:

Step 1: Start the program.

Step 2: Create an applet using 10 buttons for choosing color and 2 checkboxes for

Choosing fore-ground and back-ground color.

Step 3: Place these components on the layout.

Step 4: Load the applet from the command prompt.

Step 5: Stop the program.

PROGRAM CODE:

import java.applet.*;

import java.awt.*;

import java.awt.event.*;

public class Colpal extends Applet implements ActionListener,ItemListener

{

int flag,Col;

Button b1,b2,b3,b4,b5,b6,b7,b8,b9,b10;

Checkbox cb1,cb2;

CheckboxGroup ckb;

Panel p1,p2,p3;

String val="Welcome";

TextArea t1;

@Override

public void init()

{

flag=1;

Col=1;

b1=new Button(" ");

ckb=new CheckboxGroup();

p1=new Panel();

p2=new Panel();

p3=new Panel();

p1.setLayout(new FlowLayout(FlowLayout.CENTER));

p2.setLayout(new GridLayout(1,1));

p3.setLayout(new GridLayout(5,5));

b2=new Button(" ");

b3=new Button(" ");

b4=new Button(" ");

b5=new Button(" ");

b6=new Button(" ");

b7=new Button(" ");

b8=new Button(" ");

b9=new Button(" ");

b10=new Button(" ");

b1.setBackground(Color.blue);

b2.setBackground(Color.red );

b3.setBackground(Color.green );

b4.setBackground(Color.pink );

b5.setBackground(Color.yellow );

b6.setBackground(Color.black );

b7.setBackground(Color.white );

b8.setBackground(Color.gray );

b9.setBackground(Color.darkGray );

b10.setBackground(Color.magenta );

t1=new TextArea(val,15,60);

cb1=new Checkbox("Background",ckb,true);

cb2=new Checkbox("Foreground",ckb,false);

p1.add(cb1);

p2.add(t1);

p1.add(cb2);

p3.add(b1);

p3.add(b2);

p3.add(b3);

p3.add(b4);

p3.add(b5);

p3.add(b6);

p3.add(b7);

p3.add(b8);

p3.add(b9);

p3.add(b10);

b1.addActionListener(this);

b2.addActionListener(this);

b3.addActionListener(this);

b4.addActionListener(this);

b5.addActionListener(this);

b6.addActionListener(this);

b7.addActionListener(this);

b8.addActionListener(this);

b9.addActionListener(this);

b10.addActionListener(this);

cb1.addItemListener(this);

cb2.addItemListener(this);

setLayout(new BorderLayout());

add("North",p1);

add("West",p2);

add("East",p3);

}

public void itemStateChanged(ItemEvent e)

{

if(cb1.getState()==true)

{

flag=1;

}

if(cb2.getState()==true)

{

flag=2;

}

repaint();

}

public void actionPerformed(ActionEvent e)

{

if(e.getSource()==b1)

Col=1;

if(e.getSource()==b2)

Col=2;

if(e.getSource()==b3)

Col=3;

if(e.getSource()==b4)

Col=4;

if(e.getSource()==b5)

Col=5;

if(e.getSource()==b6)

Col=6;

if(e.getSource()==b7)

Col=7;

if(e.getSource()==b8)

Col=8;

if(e.getSource()==b9)

Col=9;

if(e.getSource()==b10)

Col=10;

repaint();

}

@Override

public void paint(Graphics g)

{

if(flag==1)

{

switch(Col)

{

case 1:

t1.setBackground(Color.blue);

break;

case 2:

t1.setBackground(Color.red);

break;

case 3:

t1.setBackground(Color.green);

break;

case 4:

t1.setBackground(Color.pink);

break;

case 5:

t1.setBackground(Color.yellow);

break;

case 6:

t1.setBackground(Color.black);

break;

case 7:

t1.setBackground(Color.white);

break;

case 8:

t1.setBackground(Color.gray);

break;

case 9:

t1.setBackground(Color.darkGray);

break;

case 10:

t1.setBackground(Color.magenta);

break;

}

switch(Col)

{

case 1:

t1.setForeground(Color.blue);

break;

case 2:

t1.setForeground(Color.red);

break;

case 3:

t1.setForeground(Color.green);

break;

case 4:

t1.setForeground(Color.pink);

break;

case 5:

t1.setForeground(Color.yellow);

break;

case 6:

t1.setForeground(Color.black);

break;

case 7:

t1.setForeground(Color.white);

break;

case 8:

t1.setForeground(Color.gray);

break;

case 9:

t1.setForeground(Color.darkGray);

break;

case 10:

t1.setForeground(Color.magenta);

break;

}

@Override

public Insets getInsets()

{

return(new Insets(10,40,180,100));

}

/*<applet code="Colpal.class" width="710" height="500">

</applet>*/

SCREEN OUTPUT:

RESULT:

Thus an html page is created and style formatting is applied using external Cascading Style Sheet.

EXERCISE: 4

DATE:

CLIENT SIDE SCRIPTS FOR VALIDATING WEB FORMS USING HTML

Aim:

To write Client Side Scripts for Validating Web Form Controls using HTML.

Algorithm:

Step 1: Start the program.

Step 2: Design a form using html.

Step 3: Write a JavaScript function to validate all the fields in the form.

Step 4: Call the function from the html page.

Step 5: Stop the program.

PROGRAM CODE:

mark.html

<HTML>

<HEAD>

<TITLE>Student Mark List</TITLE>

function mark()

{

if (parseInt(form1.registerno.value)<=0)

alert ("Register Number Should Not be Negative");

if (parseInt(form1.registerno.value.length)==0)

alert ("Register Number Should Not be Null");

if (form1.name.value.length<=0)

alert ("Name Should not be Null");

if (parseInt(form1.mark1.value) < 0 || parseInt(form1.mark1.value) > 100 || parseInt(form1.mark1.value.length)==0)

alert ("Invalid Mark 1");

if(parseInt(form1.mark2.value) < 0 || parseInt(form1.mark2.value) > 100 || parseInt(form1.mark2.value.length)==0)

alert("Invalid Mark 2");

if(parseInt(form1.mark3.value) < 0 || parseInt(form1.mark3.value) > 100 || parseInt(form1.mark3.value.length)==0)

alert("Invalid Mark 3");

if(parseInt(form1.mark4.value) < 0 || parseInt(form1.mark4.value) > 100 || parseInt(form1.mark4.value.length)==0)

alert("Invalid Mark 4");

if(parseInt(form1.mark5.value) < 0 || parseInt(form1.mark5.value) > 100 || parseInt(form1.mark5.value.length)==0)

alert("Invalid Mark 5");

form1.total.value=parseInt(document.form1.mark1.value)+parseInt(document.form1.

mark2.value) +parseInt(document.form1.mark3.value)+parseInt(document.form1.

mark4.value) +parseInt(document.form1.mark5.value)

form1.avg.value=form1.total.value/5

if(parseInt(form1.mark1.value) < 50 || parseInt(form1.mark2.value) < 50 || parseInt(form1.mark3.value) < 50 || parseInt(form1.mark4.value) < 50 || parseInt(form1.mark5.value) < 50)

form1.result.value="fail"

else if(parseInt(form1.mark1.value) >= 50 & parseInt(form1.mark2.value) >= 50 & parseInt(form1.mark3.value) >= 50 & parseInt(form1.mark4.value) >= 50 & parseInt(form1.mark5.value) >= 50)

form1.result.value="pass"

if(parseInt(form1.avg.value) >= 75 & parseInt(form1.mark1.value) >= 50 & parseInt(form1.mark2.value) >= 50 & parseInt(form1.mark3.value) >= 50 & parseInt(form1.mark4.value) >= 50 & parseInt(form1.mark5.value) >= 50)

form1.grade.value="DISTINCTION"

else if(parseInt(form1.avg.value) >= 60 & parseInt(form1.avg.value) <75 & parseInt(form1.mark1.value) >= 50 & parseInt(form1.mark2.value) >= 50 & parseInt(form1.mark3.value) >= 50 & parseInt(form1.mark4.value) >= 50 & parseInt(form1.mark5.value) >= 50 )

form1.grade.value="First Class"

else if(parseInt(form1.avg.value) >= 50 & parseInt(form1.avg.value) < 60 & parseInt(form1.mark1.value) >= 50 & parseInt(form1.mark2.value) >= 50 & parseInt(form1.mark3.value) >= 50 & parseInt(form1.mark4.value) >= 50 & parseInt(form1.mark5.value) >= 50)

form1.grade.value="Second Class"

else if(parseInt(form1.avg.value) < 50)

form1.grade.value="Fail"

}

</script>

</head>

<body>

<h1<b>STUDENT MARK DETAILS</b</H1>

<tr>

<td width="104"<h4>Register No:</h4</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td width="104"<h4>Total Marks :</h4</td>

</tr>

<tr>

<td width="104"<h4>Average :</h4</td>

</tr>

<tr>

<td width="104"<h4>Grade :</h4</td>

</tr>

<tr<td width="104"<h4>Result:</h4</td>

</tr>

</table>

<br>

<h1<input type="button" value="RESULT" onClick="mark()">

</form>

</body>

</HTML>

SCREEN OUTPUT:

RESULT:

Thus the client side validation of the form fields is done using JavaScript in the html web page.
EXERCISE: 5

DATE:

SIMPLE SERVLET TO DISPLAY MARKS OF STUDENTS

Aim:

To create a java servlet to display the marks of students without a database.

Algorithm:

Step 1: Start the program.

Step 2: Create a servlet using the required packages.

Step 3: Deploy the servlet class file in the webapps directory of tomcat server.

Step 4: Configure the web.xml file.

Step 5: Start the tomcat server.

Step 6: Load the servlet from the browser.

Step 7: Stop the program.

PROGRAM CODE:

marklist.java

import java.io.*;

import javax.servlet.*;

import javax.servlet.http.*;

public class Marklist extends HttpServlet

{

public void doGet(HttpServletRequest request,HttpServletResponse response)throws IOException,ServletException

{

response.setContentType("text/html");

PrintWriter out=response.getWriter();

String s;

s=request.getParameter("reg");

String s1="S.Aarthi";

String s2="komathi";

String s3="Sathish";

int mk10=98,mk11=98,mk12=98,mk20=98,mk21=98,mk22=98,mk30=78,mk31=87,mk32=78;

String r1="4001",r2="4002",r3="4003";

out.println("<html>");

out.println("<body>");

out.println("<head>");

out.println("<title>Marklist</title>");

out.println("</head>");

if(s.equals(r3))

{

out.println("<h3>Name is:"+s3+"</h3>");

out.println("<h3>Regno is:"+s+"</h3>");

out.println("<h3>Mark1:"+mk30+"</h3>");

out.println("<h3>Mark2:"+mk31+"</h3>");

out.println("<h3>Mark3:"+mk32+"</h3>");

}

else if(s.equals(r1))

{

out.println("<h3>Name is:"+s1+"</h3>");

out.println("<h3>Regno is:"+s+"</h3>");

out.println("<h3>Mark1:"+mk10+"</h3>");

out.println("<h3>Mark2:"+mk11+"</h3>");

out.println("<h3>Mark3:"+mk12+"</h3>");

}

else if(s.equals(r2))

{

out.println("<h3>Name is:"+s2+"</h3>");

out.println("<h3>Regno is:"+s+"</h3>");

out.println("<h3>Mark1:"+mk20+"</h3>");

out.println("<h3>Mark2:"+mk21+"</h3>");

out.println("<h3>Mark3:"+mk22+"</h3>");

}

out.println("</body>");

out.println("</html>");

}

SCREEN OUTPUT:

RESULT:

Thus a java servlet has been created to display the student’s marks.

EXERCISE: 6

DATE:

JAVA SERVLET TO CONDUCT ONLINE EXAM

Aim:

To develop a simple Java servlet to conduct online examination.

Algorithm:

Step 1: Start the program.

Step 2: Create a servlet using the required packages.

Step 3: Deploy the servlet class file in the webapps directory of tomcat server.

Step 4: Configure the web.xml file.

Step 5: Start the tomcat server.

Step 6: Load the servlet from the browser.

Step 7: Stop the program.

PROGRAM CODE:

online.html

<html>

<body>

</h1>ONLINE EXAMINATION</h1>

1. What is the capital of tamilnadu? </p>

<input name="r1" type="radio" value="delhi">delhi

<input name="r1" type="radio" value="chennai">chennai

<input name="r1" type="radio" value="kerala">kerala

</p>

2. Who is the president of india? </p>

<input name="r2" type="radio" value="pratiba">prathiba

<input name="r2" type="radio" value="ABDUL Kalam">abdulkalam

<input name="r2" type="radio" value="rajini">rajini

</p>

3. What is the land of cokes?</p>

<input name="r3" type="radio" value="scotland">Scotland

<input name="r3" type="radio" value="greenland">greenland

<input name="r3" type="radio" value="ireland">Ireland

</p>

</p>

</form>

</div>

</body>

</html>

Onli.java

import java.io.*;

import javax.servlet.*;

import javax.servlet.http.*;

public class Onli extends HttpServlet

{

public void doGet(HttpServletRequest request,HttpServletResponse response)throws IOException,ServletException

{

int score=0;

PrintWriter out=response.getWriter();

String r1=request.getParameter("r1");

String r2=request.getParameter("r2");

String r3=request.getParameter("r3");

response.setContentType("text/html");

if(r1.equals("chennai"))

{

score=score+1;

}

if(r2.equals("pratiba"))

{

score=score+1;

}

if(r3.equals("scotland"))

{

score=score+1;

}

out.println("<html>");

out.println("<head>");

out.println("<title>helloworld</title>");

out.println("</head>");

out.println("<body>");

if(score==3)

{

out.println("congratz");

out.println("score is:"+score);

}

else

{

out.println("score is:"+score);

out.println("<body>");

out.println("<html>");

}

SCREEN OUTPUT:

RESULT:

Thus a simple Java servlet has been developed for conducting online examination.

EXERCISE: 7

DATE:

CREATION OF 3-TIER APPLICATION USING SERVLET AND DATABASE

Aim:

To develop a 3-tier application for displaying student’s mark list using java servlet and

MS-Access database.

Algorithm:

Step 1: Start the program.

Step 2: Create a MS-Access database table named student for storing student’s marks.

Step 3: Create an html form for entering the register number of the student.

Step 4: Open control panel and make the database connectivity settings.

Step 5: Create a servlet for processing the student’s marks from the database.

Step 6: Deploy the servlet and the html page in the Netbeans 6.8 IDE to create the application package.

Step 7: Run the application in the IDE.

Step 8: The student’s mark list for the corresponding register number will be displayed.

Step 9: Stop the program.

PROGRAM CODE:

mark.html

<html>

<center<font color=blue<h2>LOGIN FORM</h2</font</center>

<tr<td>REG NUMBER</td<td>:</td<td<input type=text name=login value="">

</td>

</table<br<br<center>

</form>

</body>

</html>

Student.java

import java.io.*;

import javax.servlet.*;

import javax.servlet.http.*;

import java.sql.*;

public class Student extends HttpServlet

{

int m1,m2,m3,m4,m5,m6;

public void doGet(HttpServletRequest r,HttpServletResponse rs)throws

IOException,ServletException

{

try

{

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");

Connection con=DriverManager.getConnection("jdbc:odbc:student");

Statement st=con.createStatement();

ResultSet res;

String query="select *from student";

res=st.executeQuery(query);

rs.setContentType("text/html");

PrintWriter out=rs.getWriter();

out.println("<html<body>");

int reg1=Integer.parseInt(r.getParameter("login"));

int valid=0;

while(res.next())

{

if(res.getInt(1)==reg1)

{

valid=1;

m1=res.getInt(2);

m2=res.getInt(3);

m3=res.getInt(4);

m4=res.getInt(5);

m5=res.getInt(6);

m6=res.getInt(7);

break;

}

if(valid==0)

{

out.println("not valid RegNo");

}

else

{

out.println("<html<body bgcolor=#ccbbaa");

out.println("<p </p>");

out.println("<center<font color=blue<h2>SAACE</h2</font</center>");

out.println("<p align=center>");

out.println("MARK1<input type=text name=mark1 value="+m1+">");

out.println("MARK2<input type=text name=mark2 value="+m2+">");

out.println("<p>");

out.println("<p align=center>");

out.println("MARK3<input type=text name=mark3 value="+m3+">");

out.println("MARK4<input type=text name=mark4 value="+m4+">");

out.println("<p>");

out.println("<p align=center>");

out.println("MARK5<input type=text name=mark5 value="+m5+">");

out.println("MARK6<input type=text name=mark6 value="+m6+">");

int tot1;

double avg1;

tot1=m1+m2+m3+m4+m5+m6;

avg1=((tot1)/6.0);

out.println("<hr>");

out.println("<p </p>");

out.println("<p align=center>");

out.println("TOTAL<input type=text name=total value="+tot1+">");

out.println("AVERAGE<input type=text name=avg value="+avg1+">");

out.println("<p>");

out.println("</body</html>");

}

catch(SQLException e)

{

System.out.println(e);

}

catch(ClassNotFoundException e)

{

System.out.println(e);

}

SCREEN OUTPUT:

RESULT:

Thus a 3-tier application for displaying student’s mark list using java servlet and

MS-Access database has been successfully developed.

EXERCISE: 8

DATE:

CREATION OF 3-TIER APPLICATION USING JSP AND DATABASE

Aim:

To develop a 3-tier application for displaying student’s mark list using java server pages and

MS-Access database.

Algorithm:

Step 1: Start the program.

Step 2: Create a MS-Access database table named student for storing student’s marks.

Step 3: Create an html form for entering the register number of the student.

Step 4: Open control panel and make the database connectivity settings.