Web Page Creation Using Html

WEB PAGE CREATION USING HTML

OBJECTIVE (AIM) OF THE EXPERIMENT

To create a web page which includes a map and display the related information when a hot spot is clicked in the map.

Procedure:

Step no. / Details of the step
1 / Create a html file with map tag
2 / Set the source attribute of the img tag to the location of the image and also set the use map attribute
3 / Specify an area with name, shape and href set to the appropriate values
4 / Repeat step 3 as many hot spots you want to put in the map
5 / Create html files for each and every hot spots the user will select

India.html

<html xmlns="

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " /xhtml1-transitional.dtd">

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

<head>

<title>Tourisam Information System using DHTML</title>

</head>

<h1<center>India Tourism Information Center</center</h1>

<center<img src="file:///z:/lab/india_images/india_map.jpg" alt="India-Map" usemap="#indiamap" /</center>

<center<blink<font color="red" size="8">Click the Center position for the Tamilnadu, Kerla and Karnataka</font</blink</center>

</map>

</body>

</html>

//Tamilnadu.html

<html xmlns="

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " /xhtml1-transitional.dtd">

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

<head>

<title>Tourisam Information System using DHTML</title>

img1 = new Image();

img2 = new Image();

img3 = new Image();

img4 = new Image();

img1.src = "vaigai_dam.jpeg";

img2.src = "surulifalls.jpeg";

img3.src = "kurangani.jpeg";

img4.src = "meenachiamman.jpeg";

function vaigai_dam()

{

document.getElementById('image').src= img1.src;

}

function suruli_falls()

{

document.getElementById('image').src= img2.src;

}

function kurangani()

{

document.getElementById('image').src= img3.src;

}

function meenachi()

{

document.getElementById('image').src= img4.src;

}

</script>

</head>

<marquee<font size="30" color="red" >Tamilnadu Tourist Information Center</font</marquee>

<caption>Tamilnadu Tourist Information System</caption>

<tr>

<th>Places</th>

</tr>

<tr>

<td onmouseover="vaigai_dam()">Vaigai Dam</td>

</tr>

<tr>

<td onmouseover="suruli_falls()">Surulifalls</td>

</tr>

<tr>

<td onmouseover="kurangani()">Kurangani</td>

</tr>

<tr>

<td onmouseover="meenachi()">MeenachiAmman</td>

</tr>

</table>

</body>

</html>

//Kerla.html

<html xmlns="

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " /xhtml1-transitional.dtd">

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

<head>

<title>Tourisam Information System using DHTML</title>

img1 = new Image();

img2 = new Image();

img3 = new Image();

img4 = new Image();

img1.src = "Thakkadey.jpeg";

img2.src = "athirapally_falls.gif";

img3.src = "cochin_Harbour.jpeg";

img4.src = "munnar.jpeg";

function Thakkadey()

{

document.getElementById('image').src= img1.src;

}

function Athirapally_Falls()

{

document.getElementById('image').src= img2.src;

}

function Cochin_Harbour()

{

document.getElementById('image').src= img3.src;

}

function Munnar()

{

document.getElementById('image').src= img4.src;

}

</script>

</head>

<marquee<font size="30" color="red" >Kerla Tourist Information Center</font</marquee>

<caption>Tamilnadu Tourist Information System</caption>

<tr>

<th>Places</th>

</tr>

<tr>

<td onmouseover="Thakkadey()">Thakkadey</td>

</tr>

<tr>

<td onmouseover="Athirapally_Falls()">Athirapally Falls</td>

</tr>

<tr>

<td onmouseover="Cochin_Harbour()">Cochin Harbour</td>

</tr>

<tr>

<td onmouseover="Munnar()">Munnar</td>

</tr>

</table>

</body>

</html>

//Karnataka.html

<html xmlns="

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " /xhtml1-transitional.dtd">

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

<head>

<title>Tourisam Information System using DHTML</title>

img1 = new Image();

img2 = new Image();

img3 = new Image();

img4 = new Image();

img1.src = "bangalore_lal_park.jpeg";

img2.src = "mangalore.jpeg";

img3.src = "mysore_palace.jpeg";

img4.src = "mysore_samundeswari_temple.jpg";

function Lal_Park()

{

document.getElementById('image').src= img1.src;

}

function Mangalore()

{

document.getElementById('image').src= img2.src;

}

function Mysore_Palace()

{

document.getElementById('image').src= img3.src;

}

function Samuntieswari_Temple()

{

document.getElementById('image').src= img4.src;

}

</script>

</head>

<marquee<font size="30" color="red" >Karnataka Tourist Information Center</font</marquee>

<caption>Tamilnadu Tourist Information System</caption>

<tr>

<th>Places</th>

</tr>

<tr>

</tr>

<tr>

<td onmouseover="Mangalore()">Mangalore</td>

</tr>

<tr>

<td onmouseover="Mysore_Palace()">Mysore Palace</td>

</tr>

<tr>

<td onmouseover="Samuntieswari_Temple()">Samuntieswari Temple</td>

</tr>

</table>

</body>

</html>

Output

India_Map

Tamilnadu

Kerla

Karnataka

Result

Thus the creation of a web page which includes a map and display the related in-formation when a hot spot is clicked in the map was executed successfully

CASCADING STYLE SHEETS

OBJECTIVE (AIM) OF THE EXPERIMENT

To create a web page that displays college information using various style sheets

Procedure:

Step no. / Details of the step
1 / Create a web page with frame sets consisting two frames
2 / In the first frame include the links
3 / In the second frame set display the web page of the link
4 / create a external style sheets
5 / create a inline and internal style sheets and make it link to the external style sheets

<html>

<head>

<h1<center>ALL STYLE SHEETS</center</h1>

<title>USE of INTERNAL and EXTERNAL STYLESHEETS</title>

.vid

{

font-family:verdana;font-style:italic;color:red;text-align:center

}

.ani

{

font-family:tahoma;font-style:italic;font-size:20;text-align:center;

}

font

{

font-family:georgia;color:blue;font-size:20

}

{

list-style-type:circle

}

</style>

</head>

<body>

<ol style="list-style-type:lower-alpha"<b>CHTTINAD GROUP OF COLLEGE</b<br<br<br>

<li>Chettinad College of Engineering and Technology

<li>Chettinad Medical College

<li>Chettinad Vidhya Mandir

<li>Chettinad Cement College

</ol>

<p style="font-size:20pt;color:purple">M.A.M. Ramasamy Chettiyar College</p>

<p class="ani">Chettinad Group of college is owned by M.A.M. Ramasamy Chettiyar<br>

It is approved by AICTE(All India Council for Technical Education). It is affliated to Anna University.<br</p>

<h2 class="vid"> Chettinad College of Engineering College</h2> <br>

<font>It is an ISO certified Institution</font<br> <br>

<font> <h2>List of Courses offered</h2>

<ul>

</ul>

</font>

<h3>Results of cse students</h3>

<tr>

<th>MARKS</th>

<th>RESULT</th>

</tr>

<tr>

<td align="center">Surulivelu</td>

</tr>

<tr>

<td align="center">Sureshbabu</td>

</tr>

<tr>

<td align="center">Vinayagam</td>

</tr>

</table>

</body>

</html>

Output:

Result:

Thus the creation of a web page that displays college information using various style sheet was successfully executed and verified.

VALIDATING WEB FORM CONTROLS USING DHTML

OBJECTIVE (AIM) OF THE EXPERIMENT

To create a Client Side Scripts for Validating Web Form Controls using DHTML

Procedure:

Step no. / Details of the step
1 / The form will include text fields and password fields called firstname, lastname, username. Password, phone number number etc and a submit and reset buton.
2 / Validation script will ensure that the user exits their text fields after the form is sent to the server.
3 / Open this page to see it in action.
4 / Try pressing the Send Details button without filling anything in the field.
5 / We might like to open the source code for this form in the separate window.
6 / The page consists of a JavaScript function called validate_form() that per-forms the form validation, followed by the form itself.

Program

<html>

<head>

<title>Form Validation using JavaScript</title>

function fname()

{

if(f1.ffname.value == null || f1.ffname.value == "")

{

alert("Please enter the first name");

}

function lname()

{

if(f1.llname.value == null || f1.llname.value == "")

{

alert("Please enter the last name");

}

function uname()

{

if(f1.uuname.value == null || f1.uuname.value == "")

{

alert("Please enter the user name");

}

else if(f1.uuname.value.length <= 5 || f1.uuname.value.length >= 10)

{

alert("Username is in between of 5 and 10 character");

}

function ffpass()

{

if(f1.fpass.value == null || f1.fpass.value == "")

{

alert("Please enter the password");

}

if((f1.fpass.value.search(/[a-zA-Z]+/)==-1) || (f1.fpass.value.search(/[0-9]+/)==-1))

{

alert("Password is in between of 5 and 15 character and password is min. one number, one upper and one lower case letter");

}

else

{

alert("OK");

}

function Confirmpass()

{

var pass1 = f1.fpass.value;

var pass2 = f1.cpass.value;

if(pass1 == pass2)

alert("Password is Matched");

else

alert("Password is not Matched");

}

function Email()

{

x = f1.mailid.value;

atpos = x.indexOf('@');

dotpos = x.lastIndexOf('.');

if(atpos<1 || dotpos - atpos <2)

alert("Invalid Email ID");

else

alert("Mail ID Ok");

}

function Phone()

{

if(f1.phoneno.value=="")

alert("Please Enter the phone Number");

else if(f1.phoneno.value.length<10)

alert("Please Enter the Valid Phone Number");

}

</script>

</head>

<body<center>

<form name="f1" action=""<font face="arial black" size="10">FORM VALIDATION USING JAVASCRIPT</font>

<tr>

<td align="right">Enter the First Name</td>

<td<input type="text" name="ffname" onblur="fname()"</td>

</tr>

<tr>

<td align="right">Enter the Last Name</td>

<td<input type="text" name="llname" onblur="lname()"</td>

</tr>

<tr>

<td align="right">Enter the User Name</td>

<td<input type="text" name="uuname" onblur="uname()"</td>

</tr>

<tr>

<td align="right">Enter the Password</td>

<td<input type="password" name="fpass" onblur="ffpass()"</td>

</tr>

<tr>

<td align="right">Enter the Confirm Password</td>

<td<input type="password" name="cpass" onblur="Confirmpass()"</td>

</tr>

<tr>

<td align="right">Select the Gender</td>

<td>

<input type="radio" name="gender">Male

<input type="radio" name="gender">Female

</td>

</tr>

<tr>

<td align="right">Enter the Mail ID</td>

<td<input type="text" name="mailid" onblur="Email()"</td>

</tr>

<tr>

<td align="right">Enter the Phone Number</td>

<td<input type="text" name="phoneno" onblur="Phone()" maxlength="10"</td>

</tr>

<tr>

<td align="right">Choose your Hobbies</td>

<td>

<input type="checkbox" name="cricket">Cricket

<input type="checkbox" name="football">Football<br>

<input type="checkbox" name="hockey">Hockey

<input type="checkbox" name="basketball">Basketball

</td>

</tr>

<tr>

<td<input type="reset" name="reset" value="Reset"</td>

</tr>

</table>

</form>

</center</body>

</html>

Output:

Result:

Thus to create a Client Side Scripts for Validating Web Form Controls using DHTML was successfully executed and verified.

JAVA PROGRAMS TO CREATE APPLETS

OBJECTIVE (AIM) OF THE EXPERIMENT

To create applets with the following features

i. Create a color palette with matrix of buttons.

ii. Set background and foreground of the control text area by selecting a color from color palette.

iii. In order to select foreground or background use checkbox controls as radio buttons.

iv. To set background images.

Procedure:

Step no. / Details of the step
1 / Import all necessary packages and classes
2 / Define a class that extends applet and implements action listener and item listener
3 / Declare an array of buttons to set colors, two checkboxes for foreground and background colors
4 / Declare a text area to hold the text, a checkbox group for checkboxes
5 / Add the array of buttons in the init function
6 / In the actionPerformed() method, do the following: i) Get the action command in the string, color ii) If foreground is checked then set the foreground color to the selected color iii) If background is checked then set the background color to the selected color

Program

import java.awt.*;

import java.awt.event.*;

import java.applet.*;

</applet>

public class ColorPattern extends Applet implements ItemListener

{

int currcolor=5;

int flag=1;

String text="Click any of the buttons";

Button buttons[]=new Button[5];

String colours[]={"Red","Blue","Green","Yellow","Magenta"};

Image img;

CheckboxGroup cbg=new CheckboxGroup();

Checkbox box1=new Checkbox("Background Color",cbg,true);

Checkbox box2=new Checkbox("Text Color",cbg,false);

Checkbox box3=new Checkbox("Loading Image",cbg,false);

public void init()

{

for(int i=0;i<5;i++)

{

buttons[i]=new Button(" ");

add(buttons[i]);

}

buttons[0].setBackground(Color.red);

buttons[1].setBackground(Color.blue);

buttons[2].setBackground(Color.green);

buttons[3].setBackground(Color.yellow);

buttons[4].setBackground(Color.magenta);

add(box1);

add(box2);

add(box3);

box1.addItemListener(this);

box2.addItemListener(this);

box3.addItemListener(this);

}

public void itemStateChanged(ItemEvent ev)

{

if(box1.getState()==true)

flag=1;

else if(box2.getState()==true)

{

text="Default color is black";

flag=2;

}

else if(box3.getState()==true)

{

img=getImage(getDocumentBase(),"Water lilies.jpg");

flag=3;

}

repaint();

}

public void paint(Graphics g)

{

if(flag==2)

{

g.drawString(text,30,100);

switch(currcolor)

{

case 0:

g.setColor(Color.red);

break;

case 1:

g.setColor(Color.blue);

break;

case 2:

g.setColor(Color.green);

break;

case 3:

g.setColor(Color.yellow);

break;

case 4:

g.setColor(Color.magenta);

break;

case 5:

g.setColor(Color.black);

break;

}

g.drawString(text,30,100);

}

else if(flag==1)

{

g.drawString(text,30,100);

switch(currcolor)

{

case 0:

setBackground(Color.red);

break;

case 1:

setBackground(Color.blue);

break;

case 2:

setBackground(Color.green);

break;

case 3:

setBackground(Color.yellow);

break;

case 4:

setBackground(Color.magenta);

break;

case 5:

setBackground(Color.white);

break;

}

else if(flag==3)

{

g.drawImage(img,20,90,this);

}

public boolean action(Event e,Object o)

{

for(int i=0;i<5;i++)

{

if(e.target==buttons[i])

{

currcolor=i;

text="You have chosen "+colours[i];

repaint();

return true;

}

return false;

}

Output:

Result:

Thus the java program to create applet was successfully executed and verified.

PROGRAMS IN JAVA USING SERVLETS

OBJECTIVE (AIM) OF THE EXPERIMENT

To write html and servlet to demonstrate invoking a servlet from a html.

Procedure:

Step no. / Details of the step
Client:
1 / In index.jsp on the client side declare the contents that you like to transfer to the server using html form and input type tags.
2 / create a submit button and close all the included tags.
Server:
1 / In the servlet side using the parameter request get the stings declared in the client side (requst.getparameter)
2 / Include necessary html coding that helps to display the content
Database
1. / Create the student database and student table using ms – access
2. / Creating the Data Source Name (DSN) corresponding database

Client Program

<html>

<head>

<title>Student Mark Statement</title>

</head>

<body<center<h1>STUDENT MARK STATEMENT</h1>

<tr>

<td align="right">Enter the Student ID</td>

<td<input type="text" name="studid"</td>

</tr>

<tr>

<td align="right">Enter the Student Name</td>

<td<input type="text" name="studname"</td>

</tr>

<tr>

<td align="right">Enter the Mark1</td>

<td<input type="text" name="mark1"</td>

</tr>

<tr>

<td align="right">Enter the Mark2</td>

<td<input type="text" name="mark2"</td>

</tr>

<tr>

<td align="right">Enter the Mark3</td>

<td<input type="text" name="mark3"</td>

</tr>

<tr>

<td<input type="reset" name="reset" value="reset"</td>

</tr>

</table>

</form>

</center</body>

</html>

Server Program

import java.io.*;

import javax.servlet.*;

import javax.servlet.http.*;

import java.sql.*;

public class Student extends HttpServlet

{

int studid,mark1,mark2,mark3,total;

String studname,result,grade;

double average;

Connection conn;

Statement stmt;

ResultSet rs;

PrintWriter out;

public void init(ServletConfig config) throws ServletException

{

try

{

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

conn = DriverManager.getConnection("jdbc:odbc:st");

stmt = conn.createStatement();

}

catch(Exception e)

{

e.printStackTrace();

}

public void service(HttpServletRequest req,HttpServletResponse res) throws IOException,ServletException

{

res.setContentType("text/html");

out = res.getWriter();

try

{

studid = Integer.parseInt(req.getParameter("studid"));

studname = req.getParameter("studname");

mark1 = Integer.parseInt(req.getParameter("mark1"));

mark2 = Integer.parseInt(req.getParameter("mark2"));

mark3 = Integer.parseInt(req.getParameter("mark3"));

total = mark1 + mark2 + mark3;

average = total / 3;

if(mark1>=50 & mark2>=50 & mark3>=50)

result = "Pass";

else

result = "Fail";

if(mark1>=50 & mark2>=50 & mark3>=50)

{

if(average>=91 & average<=100)

grade = "S Grade";

else if(average>=81 & average<=90)

grade = "A Grade";

else if(average>=71 & average<=80)

grade = "B Grade";

else if(average>=61 & average<=70)

grade = "C Grade";

else if(average>=56 & average<=60)

grade = "D Grade";

else if(average>=50 & average<=55)

grade = "E Grade";

}

else

{

grade = "No Grade";

}

String insert = "insert into stud values("+studid+",'"+studname+"',"+mark1+","+mark2+","+mark3+","+total+","+average+",'"+result+"','"+grade+"')";

stmt.executeUpdate(insert);

out.println("Record was Successfully inserted");

String select = "select * from stud";

rs = stmt.executeQuery(select);

out.println("<table border='1'>");

out.println("<tr>");

out.println("<th>STUDENT ID</th>");

out.println("<th>STUDENT NAME</th>");

out.println("<th>MARK1</th>");

out.println("<th>MARK2</th>");

out.println("<th>MARK3</th>");

out.println("<th>TOTAL</th>");

out.println("<th>AVERAGE</th>");

out.println("<th>RESULT</th>");

out.println("<th>GRADE</th>");

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

while(rs.next())

{

out.println("<tr>");

out.println("<td>" + rs.getString(1) + "</td>");

out.println("<td>" + rs.getString(2) + "</td>");

out.println("<td>" + rs.getString(3) + "</td>");

out.println("<td>" + rs.getString(4) + "</td>");

out.println("<td>" + rs.getString(5) + "</td>");

out.println("<td>" + rs.getString(6) + "</td>");

out.println("<td>" + rs.getString(7) + "</td>");

out.println("<td>" + rs.getString(8) + "</td>");

out.println("<td>" + rs.getString(9) + "</td>");

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

}

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

}

catch(Exception e)

{

e.printStackTrace();

}

Output:

Result:

Thus to write html and servlet to demonstrate invoking a servlet from a html was successfully executed and verified.

PROGRAMS IN JAVA TO CREATE THREE-TIER APPLICATIONS USING JSP AND DATABASES