You are on page 1of 83

******************************************************************

EX.NO:1

BASIC HTML TAGS

**************************************************************

HTML documents describe web pages.


HTML documents contain HTML tags and plain text.
HTML documents are also called web pages.
Tags are HTML commands every text is marked up between HTML tags.
There tags instruct the browser how to display a text.
A tag consist of
A Left operator
Tag Name
A Right operator

<HTML> - The HTML stands for Hyper Text Markup Language. The
HTML element represents the root of an HTML document.
o <HTML>
o <HEAD></HEAD>
o <BODY></BODY>
o </HTML>
<HEAD> - The HEAD element represents a collection of metadata for the
document.
o <HEAD><TITLE>header</TITLE></HEAD>
<TITLE> - The title element represent the document's title or name.

o <TITLE>WELCOME SCREEN</TITLE>
<META> - The meta element can represent document-level metadata with
the name attribute, http-equiv attribute, and the file's character encoding
declaration.
o <META http-equiv=Content-Type content=text\HTML;
charset=UTF-8>
o </META>
<STYLE> - The style element allows authors to embed style information in
their documents. The style element is one of several inputs to the styling
processing model. The element does not represent content for the user.
o <style type=text\css>
o body { color: black; background: white; }
o em { font-style: normal; color: red; }
o </style>
<SCRIPT> - The script element allows authors to include dynamic script
and data blocks in their documents. The element does not represent content
for the user.
o <script src="game-engine.js"></script>

<LINK> - The link element allows authors to link their document to other
resources. The link element allows authors to link their document to other
resources.
o <LINK rel="stylesheet" href="B" type="text/css"></LINK>
<BOBY> - The BOBY element represents the main content of the
document.
o <HTML>
o <BOBY> Welcome Screen</BOBY>
o </HTML>
<DIV> - The div element has no special meaning at all. It represents its
children. It can be used with the class, Lang, and title attributes to mark up
semantics common to a group of consecutive elements.
o <div>
o <P>My other cat, colored black and white.</P>
o <P>He apparently visited our neighbors. </P></div>
<H1> - These elements represent headings for their sections.
o <H1>Let's call it a drawing surface</H1>
o <H2>Let's call it a drawing surface</H2>
o <H3>Let's call it a drawing surface</H3>
o <H4>Let's call it a drawing surface</H4>
o <H5>Let's call it a drawing surface</H5>

<CENTER> - These elements represent the center alignment of group of


elements.
o <CENTER><INPUT TYPE=TEXT /></CENTER>
<TABLE> - The table element represents data with more than one
dimension, in the form of a table.
o < TABLE ><TH> Negative <TH> Characteristic <TH>
Positive</TH>
o <TR><TD> sad<TD>mood <TD>happy</TD></TR>
o <TR><TD>Failing<TD>grade<TD>passing</TD></TR>
o <TABLE>
<IMG> - An IMG element represents an image. The image given by the src
attribute is the embedded content, and the value of the alt attribute is the
IMG element's fallback content.
o <IMG src="carouge.svg" alt="">
<A> The A element has an href attribute, then it represents A hyperlink (a
hypertext anchor).
o <A href="http://www.your.com">click</A>
<MARQUEE> - This element is used for scrolling text.

o <MARQUEE bgcolor=#909090 loop=-1scrollamount=6


width=50%>
o </MARQUEE>
<MENU> The menu element represents a list of commands.
o <MENU><LI type=disc>list item1
o <LI type=disc>list item2
o </MENU>

<DD> - The DD element represents the description, definition, or value, part


of a term-description group in a description list (DL element). A DL can be
used to define a vocabulary list, like in a dictionary. In the following
example, each entry, given by a DT with a DFN, has several DDS, showing
the various parts of the definition.
o <DL>
o <DT><DFN>happiness</DFN></DT>
o <DD> The state of being happy.</DD>
o <DD> Good fortune success</DD>
o <DT><DFN>rejoice</DFN></DT>
o <DD> To cause one to be delighted.</DD>

o </DL>
<EMBED> - The embed element represents an integration point for an
external application or interactive content.
o <embed src="catgame.swf" quality="high">
<OL> - The OL element represents a list of items, where the items have
been intentionally ordered, such that changing the order would change the
meaning of the document. The items of the list are the li element child nodes
of the OL element, in tree order.
o <OL>
o <LI>United Kingdom
o <LI>Switzerland
o </OL>
<UL> - The UL element represents a list of items, where the order of the
items is not important that is, where changing the order would not
materially change the meaning of the document. The items of the list are the
LI element child nodes of the UL element.
o <UL>
o <LI>Switzerland
o <LI>Norway

o </UL>
<FORM> - The FORM element represents a collection of form-associated
elements, some of which can represent editable values that can be submitted
to a server for processing.
o <FORM action="http://www.google.com/search" method="get">
o Google: <input type="search" name="q"/>
o <input type="submit" value="Search">
o </FORM>
<INPUT> - The input element represents a typed data field, usually with a
FORM control to allow the user to edit the data.
o <input type="button" value="cLIck">
o <input type="text" name=text>
o <input type="radio" name=radio>
o <input type="checkbox" name="checkbox">
<BUTTON> - The button element represents a button. If the element is not
disabled, then the user agent should allow the user to activate the button.
o <button onclick="alert(hello')"> Show hint</button>

<TEXTAREA> -The TEXTAREA element represents a multiline plain text


edit control for the element's raw value. The contents of the control represent
the control's default value.
o <TEXTAREA name=textarea>Feed back<TEXTAREA>
<FRAMESET> - The FRAMESET element contains set of frames in rows
or columns.
<FRAME> - The FRAME element used to divide the document into
partitions. It depends upon the FRAMESET rows or cols value.
o <FRAMESET rows=25%,75%>
o <FRAME src=file1.html/>
o <FRAMESET cols=20%,*>
o <FRAME src=file1.html name=first/>
o <FRAME src=file2.html name=second/>
o </FRAMESET>
<P> - The P element represents a paragraph.
o <P>There was once an example from Femley,<BR/>Whose markup
was of
o dubious quality.<BR/>To move the error from the markup to the
rhyming.

o </P>
<BR> - The BR element represents a line break.
o <BR/>The valuator complained<BR/> So the author was pained
<FONT> - The FONT element changes the font style, size, color of the text
in the document.
o <FONT face=Arial sixe=43 color=blue>visit again</font>
<APPLET> - The APPLET element use to display the java file in the html
document file.
o <APPLET code=javafile.class height=50% width=50%>
o </APPLET>

******************************************************************
EX.NO:2

CREATING A WEBPAGE USING IMAGE MAP

******************************************************************
Aim

To Create a web page with the following using HTML


i) To embed an image map in a web page
ii) To fix the hot spots
iii) Show all the related information when the hot spots are clicked.
Algorithm
Step1 :Open a notepad.
Step 2:Write the code for imagemap.html.
Step 3: Enter a program that includes tags for <MAP> and other tags.
Step 4: Insert Hyperlink using <A href>.
Step5: Save the file with .html extension.
Step6: Run the program in a web browser
Step: Display Results.

Program:
HOME.HTML
<html>
<head>
<title>Home - States of India!!!</title>
</head>
<body bgcolor="gold">
<h1><u><center>Republic of India</center></u></h1>
<p>

India is the Seventh Lagest country in the world by geographical area, the
second

most populous country with over 1.2 billion people, and the

populus democracy in the world. India is a federal constitutional republic


with a parliamentry democracy consisting of 28 states and 7 union
Terriories.
</p>
<center>
<img align="center" size="100" src="IndiaMap.jpg" usemap="#india"/>
<map name="india">
<area shape="circle" coords="160,340,20"
href="ANDHRAPRADESH.html">
<area shape="circle" coords="120,440,10" href="KERALA.html">
<area shape="circle" coords="110,370,20" href=" KARNATAKA.html">
<area shape="circle" coords="140,420,20" href="TAMILNADU.html">
</map>
</center>
<h2> Features</h2>
<ul>
<li><b>Population</b> - 1,028,783,343(2001 census).
<li><b>Capital</b> - New Delhi

<li><b>Largest City</b> - Mumbai


<li><b>Currency</b> - Indian Rupee
<li><b>Time Format</b> - IST (UTC + 5:30)
<li><b>NAtion Sport</b> - Hockey
<li><b>Current PM</b> - Manmohan Singh
<li><b>Current President</b> - Prathiba Patil
</li>
</ul>
<h2>
<b>To view details of states please click on the specified area in the
map !!!</b>
</h2>
</body>
</html>
ANDHRAPRADESH.HTML
<html>
<head><title>Andhra Pradesh - India</title></head>
<body bgcolor="tan">
<h1><center>Andhra Pradesh</center></h1>

<h3>A.P., is a state situated on the southeastern coast of India. It is


India's fourth largest state by area and fifth largest by population.</h3>
<h3>
<ul>
<li>Districts<i> - 23</i>
<li>Capital City<i> - Hyderabad</i>
<li>Largest City<i> - Hyderabad</i>
<li>Governor<i> - E. S. L. Narasimhan</i>
<li>Chief Minister<i> - N. Kiran Kumar Reddy</i>
<li>Population<i> - 78,323,330</i>
<li>Tourist spots<i> - Tirumala Tirupati, Charminar, Golconda Fort,
Chandragiri, Chowmahalla Place, Falaknuma Palace etc.,</i>
</ul>
<a href="Home.html">back</a>
</body>
</html>
KARNATAKA.HTML
<html>
<head><title>Karnataka - India</title></head>

<body bgcolor="wheat">
<h1><center>Karnataka</center></h1>
<h3>
<ul>
<li>Districts<i> - 30</i>
<li>Capital City<i> - Bangalore</i>
<li>Largest City<i> - Bangalore</i>
<li>Governor<i>- Hansraj Bhardwaj</i>
<li>Chief Minister<i> - D. V. Sadananda Gowda</i>
<li>Population<i> - 61,130,704</i>
<li>Tourist spots<i> - Gol Gumbaz, Mysore Palace, Keshava Temple
etc.,</i>
</ul>
</h3>
<a href="Home.html">back</a>
</body></html>
KERALA.HTML
<html>
<head><title>Kerala - India</title></head>

<body bgcolor="indianred">
<h1><center>Kerala</center></h1>
<h3>
<ul>
<li>Districts<i> - 14</i>
<li>Capital City<i> - Thiruvanandapuram</i>
<li>Largest City<i> - Thiruvanandapuram</i>
<li>Governor<i> - Hansraj Bhardwaj</i>
<li>Chief Minister<i> -Oommen Chandy </i>
<li>Population<i> - 33,387,677</i>
<li>Tourist spots<i> - Edakkal Caves, Palayur, Kovalam Beach,Munnar,
Kochi, Alapuzha etc.,</i>
</ul>
</h3>
<a href="Home.html">Back</a>
</body></html>
TAMILNADU.HTML
<html>
<head><title>Tanil Nadu - India</title></head>

<body bgcolor="palegreen">
<h1><center>Tamil Nadu</center></h1>
<h3>is one of the 28 states of India. Its capital and largest city is Chennai.
Tamil Nadu lies in the southernmost part of the Indian Peninsula and
is bordered by the States of puducherry, Kerala, Karnataka, Andha
Pradesh.
</h3>
<h3> <ul>
<li>Districts<i> - 32</i>
<li>Capital City<i> - Chennai</i>
<li>Largest City<i> - Chennai</i>
<li>Governor<i> - Konijeti Rosaiah</i>
<li>Chief Minister<i> - Jayalalithaa</i>
<li>Population<i> - 72,138,958</i>
<li>Tourist spots<i> - Mamallapuran, Ooty, Kodaikanal, Marina,
Mudurai Meenakshi Amman Temple, Thanjavur etc.,</i>
</ul>
<a href="Home.html">back</a>
</body>

</html>
SCREEN SHOTS

****************************************************************
EX.NO:3

STUDY OF CASCADING STYLE SHEETS (CSS)

**************************************************************
Cascading Style Sheets (CSS) is a stylesheet language used to describe the
presentation of a document written in a markup language. Its most common
application is to style web pages written in HTML and XHTML, but the language
can be applied to any kind of XML document.
In CSS, selectors are used to declare which elements a style applies to, a
kind of match expression. Selectors may apply to all elements of a specific type, or
only those elements which match a certain attribute; elements may be matched
depending on how they are placed relative to each other in the markup code, or on
how they are nested within the document object model
A style sheet consists of a list of rules. Each rule or rule-set consists of one
or more selectors and a declaration block. A declaration-block consists of a list of
semicolon-separated declarations in braces. Each declaration itself consists of a
property, a colon (:), a value, then a semi-colon (;)
Syntax
The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property: value}

The selector is normally the HTML element/tag you wish to define, the property is
the attribute you wish to change, and each property can take a value. The property
and value are separated by a colon, and surrounded by curly braces:
body {color: black}
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an
external style sheet, you can change the look of an entire Web site by changing one
file. Each page must link to the style sheet using the <link> tag.
The <link> tag goes inside the head section:
<head><link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
The browser will read the style definitions from the file mystyle.css, and format the
document according to it.
Internal Style Sheet
An internal style sheet should be used when a single document has a unique
style. You define internal styles in the head section by using the <style> tag,
<head><style>
selector {property:value; property:value;..}
</style></head>

Inline Styles
An inline style loses many of the advantages of style sheets by mixing
content with presentation. Use this method sparingly, such as when a style is to be
applied to a single occurrence of an element. To use inline styles you use the style
attribute in the relevant tag. The style attribute can contain any CSS property.
<p style="color: sienna; margin-left: 20px">
This is a paragraph </p>

******************************************************************
EX.NO:4

CREATION OF HTML PAGE USING CASCADING STYLE


SHEET

******************************************************************
Aim:
To create a HTML page using types of Cascading Style Sheet.
ALGORITHM
Internal CSS:
STEP 1: Create a HTML program with <style> tag.
STEP 2: Inside the <style> tag, specify the format required for that web page.
STEP3 : Run the program with a web browser.
External CSS:

STEP 4: Open a notepad, type the needed CSS in it and save it with .css extension.
STEP5: Refer this .css file in the HTML using the tag <link>.
STEP 6: Run the program with a web browser.
ROBUST
CSSFILE.HTML
<html>
<head>
<title>FLOWERS</title>
<!--Extended Style Sheet -->
<link rel="stylesheet" type="text/css" href="newcss.css">
<!--

Embed Style Sheet-->

<style type="text/css">
p{
background-color: lightgrey;
text-align: justify;
margin: 2em 7em;
}

</style>
</head>

<body id="body">
<h1>FLOWER</h1>
<p>
<span style="font: 200 x-large fantasy">Flower</span>
sometimes known as a bloom or blossom,
is the reproductive structure found in flowering plants.
The flower is God's finest workmanship in the world.
It is his finest gift to the mankind.
We have seen the flowers of many kinds and to many colors.
In India we see the flowers like
</p>
<!--

Inline Sytle Sheet-->

<table style="background-position: center;text-align: center;padding: 3px;">


<tr>
<td align="left">
<div class="div">
<ul>
<li><a href="">Lily</a></li>
<li><a href="">Lotus</a></li>

<li><a href="">Rose</a></li>
<li><a href="">Jasmine</a></li>
</ul>
</div>
</td>
</tr>
</table>
</body>
</html>

CSS.CSS
h1,h2{
text-decoration: underline;
font-style: italic;
text-align: center;
}
#body{
background-color: tan;

border: red dotted;


text-align: center;
}
.div{
border: peru solid ;
}
*{
letter-spacing: 1px;
}
a:link{
color: black;
}
a:visited{
color: yellow;
}
a:hover{
color: green;
}
a:active{

color: blue;
}
ul li{
font-size: small;
}

OUTPUT

SCREEN SHOT

******************************************************************
EX.NO:5

WEB FORM VALIDATION USING DHTML

******************************************************************
AIM
To write a java script program that performs form validation.

ALGORITHM:
STEP 1: Start the program,
STEP 2: Create a Form using form elements,
STEP 3: Write a script program for validate the form using javascript,
STEP 4: Save the file with extension html.
STEP 5: Execute the page by opening html file from any browser.
STEP 6: Stop the program.
STUDENTVALIDATION.HTML
<html>
<head>
<title>CGPA CALCULATION</title>
<script type="text/Javascript">
function mark()
{ var name=document.getElementById('name');
var regno=document.getElementById('regno');
var dept=document.getElementById('dept');
var sem1=document.getElementById('sem1');
var sem2=document.getElementById('sem2');
var sem3=document.getElementById('sem3');
var sem4=document.getElementById('sem4');
var sem5=document.getElementById('sem5');

var sem6=document.getElementById('sem6');
var sem7=document.getElementById('sem7');
var sem8=document.getElementById('sem8');
var cgpa=document.getElementById('cgpa');
var dest=document.getElementById('dest');
if(name.value == 0 ){alert("pls enter the name");return false;}
if(regno.value == 0 ){alert("pls enter the register number");return false;}
if(dept.value == 0 ){alert("pls enter the department");return false;}
if(sem1.value == 0 ){alert("pls enter semester 1 gpa");return false;}
if(sem1.value > 10 ){alert("pls enter semester 1 gpa between 1-10");return
false;}
if(sem2.value == 0 ){alert("pls enter semester 2 gpa");return false;}
if(sem2.value > 10 ){alert("pls enter semester 2 gpa between 1-10");return
false;}
if(sem3.value == 0 ){alert("pls enter semester 3 gpa");return false;}
if(sem3.value > 10 ){alert("pls enter semester 3 gpa between 1-10");return
false;}
if(sem4.value == 0 ){alert("pls enter semester 4 gpa");return false;}
if(sem4.value > 10 ){alert("pls enter semester 4 gpa between 1-10");return
false;}

if(sem5.value == 0 ){alert("pls enter semester 5 gpa");return false;}


if(sem5.value > 10 ){alert("pls enter semester 5 gpa between 1-10");return
false;}
if(sem6.value == 0 ){alert("pls enter semester 6 gpa");return false;}
if(sem6.value > 10 ){alert("pls enter semester 6 gpa between 1-10");return
false;}
if(sem7.value == 0 ){alert("pls enter semester 7 gpa");return false;}
if(sem7.value > 10 ){alert("pls enter semester 7 gpa between 1-10");return
false;}
if(sem8.value == 0 ){alert("pls enter semester 8 gpa");return false;}
if(sem8.value > 10 ){alert("pls enter semester 8 gpa between 1-10");return
false;}
cgpa.value=parseInt(sem1.value)+parseInt(sem2.value)+
parseInt(sem3.value)+parseInt(sem4.value)+parseInt(sem5.value)+
parseInt(sem6.value)+parseInt(sem7.value)+parseInt(sem8.value);
var result=cgpa.value/8
if(result >= 7.5){dest.value="First Class";}
if(result < 7.5){dest.value="Second Class";}
if(result < 5){dest.value="Third Class";}
}

</script>
</head>
<body bgcolor="pink" align="center">
<form>
<h2><center><u>STUDENT CGPA VALIDATION</u></center></h2>
<br/>
<table align="center">
<tr><td>Student Name</td>
<td><input type="text" id="name" /></td></tr>
<tr><td>Register No:</td>
<td><input type="text" id="regno"/></td></tr>
<tr><td>Department</td>
<td><input type="text" id="dept"/></td></tr>
<tr><td>Semester 1</td>
<td><input type="text" id="sem1"/></td></tr>
<tr><td>Semester 2</td>
<td><input type="text" id="sem2"/></td></tr>
<tr><td>Semester 3</td>
<td><input type="text" id="sem3"/></td></tr>

<tr><td>Semester 4</td>
<td><input type="text" id="sem4"/></td></tr>
<tr><td>Semester 5</td>
<td><input type="text" id="sem5"/></td></tr>
<tr><td>Semester 6</td>
<td><input type="text" id="sem6"/></td></tr>
<tr><td>Semester 7</td>
<td><input type="text" id="sem7"/></td></tr>
<tr><td>Semester 8</td>
<td><input type="text" id="sem8"/></td></tr>
<tr><td>CGPA</td>
<td><input type="text" id="cgpa"/></td></tr>
<tr><td>Destinction</td>
<td><input type="text" id="dest"/></td></tr>
</table>
<br/>
<center>
<input type="button" value="Calculate" onclick="mark();"/>
<input type="Reset" size="25" value="reset"/>

</center>
</form>
</body>
</html>

OUTPUT

SAMPLE SCREEN SHOT

******************************************************************
EX.NO:6

CREATING A COLOUR PALETTE USING JAVA

******************************************************************
AIM:

To Write a Program in JAVA to create applets incorporating the following features.


1. Create a color palette with matrix of buttons
2. Set background and foreground control text area by selecting a color from
color palatte.
3. To set background images.
ALGORITHM:
STEP 1: Start the program,
STEP 2: Write a program for applet using java,
STEP 3: Save the applet program with extension .java,
STEP 4: Compile that program by javac command.
STEP 5: Run the applet by entering appletviewer command.
STEP 6: Stop the program.
AppletClass.java
import java.awt.*;
import java.awt.event.*;
import java.applet.*;
public class AppletClass extends Applet implements ItemListener {
int curcolor = 6;
int flag = 1;
String text = "Click any of the Button";
Button buttons[] = new Button[6];
String colors[] = {"Red", "Blue", "Green", "Yellow", "Magenta", "pink"};

Image img1;
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 < 6; 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);
buttons[5].setBackground(Color.pink);
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) {
img1 = getImage(getDocumentBase(), "sample.gif");
flag = 3;
}
repaint();
}
public void paint(Graphics g) {
if (flag == 2) {
g.drawString(text, 30, 100);

switch (curcolor) {
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.pink);

break;

case 6: g.setColor(Color.black);

break;

}
g.drawString(text, 30, 100);
} else if (flag == 1) {
g.drawString(text, 30, 100);
switch (curcolor) {
case 0: setBackground(Color.red);

break;

case 1: setBackground(Color.blue);
case 2: setBackground(Color.green);
case 3: setBackground(Color.yellow);

break;
break;
break;

case 4: setBackground(Color.magenta); break;


case 5: setBackground(Color.pink);

break;

case 6: setBackground(Color.white);
}
} else if (flag == 3) {
g.drawImage(img1, 200, 300, this);
}
}
public boolean action(Event e, Object o) {
for (int i = 0; i < 6; i++) {
if (e.target == buttons[i]) {
curcolor = i;
text = "You have Chosen" + colors[i];
repaint();
return true;
}
}
return false;
}
}
APPLET.HTML

break;

<applet code="AppletClass.class" width="100%" height="100%">


</applet>
OUTPUT :
SCREEN SHOT:1

SCREEN SHOT: 2

******************************************************************
EX.NO:7

INVOKING SERVLETS FROM HTML FORM

******************************************************************
AIM:
To write a program to invoke Servlet from HTML form.

ALGORITHM
STEP1: Create a HTML page including some form elements.
STEP2: Inside the <form> tag, for the action attribute specify the full path name of
the File.
STEP3: Create a .java file that imports javax.http.servlet.*;
STEP4: Set classpath where servlet-api.jar file resides.
STEP5: Compile the servlet program using javac programname.java
STEP6: Place the class file \Tomcat 5.5\webapps\Examples\WEBINF\classes\folder.
STEP7: Define the doPost function to process the data obtained from the HTML
file.
STEP8: Modify the web.xml file using your servletClassName.
STEP9: Invoke the class file using http://localhost:8080/servetClassName from
your browser

Postparam.java
import java.io.*;
import java.util.*;
import javax.servlet.*;
public class postparam extends GenericServlet
{
public void service(ServletRequest request,ServletResponse response)throws
ServletException,IOException

{
PrintWriter pw=response.getWriter();
Enumeration e=request.getParameterNames();
while(e.hasMoreElements())
{
String pname=(String)e.nextElement();
pw.print(pname+"=");
String pvalue=request.getParameter(pname);
pw.println(pvalue);
}
pw.close();
}
}

Postparam.html

<html>
<body>

<center>
<form name="Postparam" method=POST
action="http://localhost:8080/examples/postparam">
<table>
<tr>
<td><B>Employee</B></td>
<td><input type="textbox" name="ename" size="25" value=""></td>
</tr>

<tr>
<td><B>phone</B></td>
<td><input type="textbox"name="phoneno" size="25" value=""></td>
</tr>
</table>
<input type="submit" value="Submit">
</body>
</html>

XML CODE:

//Include the code in Web.xml document//

<servlet>
<servlet-name>Postparam</servlet-name>
<servlet-class>Postparam</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>Postparam</servlet-name>
<url-pattern>/Postparam</url-pattern>
</servlet-mapping>

OUTPUT
SCREEN SHOTS:

******************************************************************
EX.NO:8

ONLINE EXAMINATION USING JSP AND DATABASE

******************************************************************

AIM:
To write an online Examination using JSP with three tier architecture
ALGORITHM:
STEP 1: Create a user interface form for getting Seat number and Name
STEP2: Create jsp file which calculates the total marks on the server
STEP3: Place the jsp file \Tomcat 5.5\webapps\Examples\WEB-INF\jsp\ folder.
STEP4: Create a data base to store the existing user details. If a new login has to be
created, then display the corresponding page.
STEP5: Create a table in MS ACCESS or ORACLE that contains three fields .
STEP6: Create a DSN to map the Microsoft Access Driver using ODBC in
Administrative Tools.
STEP7: Import java.sql.* in the java program to execute the SQL queries.
STEP8: Load the database driver by using Class.forName().
STEP9: Create a Connection and Statement Object.
STEP10: Establish a Database Connection with DSN using
DriverManager.getConnection( ).
STEP11: Execute the query using executeQuery() and that gets stored in a
Resultset.
STEP12: Until there are records in table specified get the fields in each record one
by one and display onto the screen.
STEP13: Close the Statement and Connection Object.
STEP 14: DIsplay the results
Home.html

<html>
<head>
<title>Online Examination</title>
</head>
<body bgcolor=lightgreen>
<center>
<h1>OnLine Examination</h1>
</center>
<form action="http://localhost:8080/examples/jsp/exam/exam.jsp" method=post
name="f1">
<table>
<tr>
<td><h3>Seat Number:</h3></td>
<td><input type="text" name="seatno"></td>
</tr>
<tr>
<td><h3>Name:</h3></td>
<td><input type="text" name="name" size="50"></td>
</tr>

<br/>
<tr>
<td><b>Total Marks:10(Each question carries equal marks) </b></td>
<td></td><td></td><td></td><td><b>Time: 15 Min.</b></td>
</tr>
</table>
<br/>
<b>1. Apache is an open source web server</b><br/>
<input type="radio" name="group1" value="True">True
<input type="radio" name="group1" value="False">False
<br/>
<b>2. In Modern PC there is no cache memory.</b><br/>
<input type="radio" name="group2" value="True">True
<input type="radio" name="group2" value="False">False
<br/>
<b>3. Tim-Berner Lee is the originator of Java.</b><br/>
<input type="radio" name="group3" value="True">True
<input type="radio" name="group3" value="False">False
<br/>

<b>4.JPG is not a video file extension.</b><br/>


<input type="radio" name="group4" value="True">True
<input type="radio" name="group4" value="False">False
<br/>
<b>5. HTTP is a statefull protocol</b><br/>
<input type="radio" name="group5" value="True">True
<input type="radio" name="group5" value="False">False
<br/>
<center>
<input type = "submit" value="Submit">
<input type = "reset" value="Clear"><br><br>
</center>
</form>
</body>
</html>

exam.jsp

<%@ page language="java" contentType="text/html"%>


<%@ page import="java.sql.*"%>
<%@ page import="java.util.*"%>
<%@ page import="java.io.*"%>
<%
int a1=0,a2=0,a3=0,a4=0,a5=0;
Connection conn=null;
ResultSet rs=null;
Statement stmt=null;
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
String url="jdbc:odbc:S1";
conn=DriverManager.getConnection(url,"","");
String myquery;
out.write("Connected with Database....");
String seatno=request.getParameter("seatno");
String name=request.getParameter("name");
String ans1=request.getParameter("group1");
if(request.getParameter("group1")!=null){
if(ans1.equals("True"))

a1=1;
else
a1=0;
}
String ans2=request.getParameter("group2");
if(request.getParameter("group2")!=null){
if(ans2.equals("True"))
a2=0;
else
a2=1;
}
String ans3=request.getParameter("group3");
if(request.getParameter("group3")!=null){
if(ans3.equals("True"))
a3=0;
else
a3=1;
}
String ans4=request.getParameter("group4");

if(request.getParameter("group4")!=null){
if(ans4.equals("True"))
a4=1;
else
a4=0;
}
String ans5=request.getParameter("group5");
if(request.getParameter("group5")!=null){
if(ans5.equals("True"))
a5=0;
else
a5=1;
}
int tot=a1+a2+a3+a4+a5;
if(seatno!=""){
stmt=conn.createStatement();
myquery="INSERT INTO STUDENTTABLE
VALUES('"+seatno+"','"+name+"',"+tot+")";
stmt.executeUpdate(myquery);

stmt.close();
}
stmt=conn.createStatement();
myquery="select * from StudentTable";
rs=stmt.executeQuery(myquery);
%>
<html>
<head>
<title>Online Examination</title>
</head>
<body bgcolor="pink"> <br/><br/>
<center>
<h1>Student Database</h1> <br/>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><b>Seat No</b></td>
<td><b>Name</b></td>
<td><b>Mark</b></td>
</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("</tr>");
}
rs.close();
stmt.close();
conn.close();
%>
</table>
<br/><br/>
<h1>Thanks!....</h1>
</center>
</body>
</html>

OUTPUT:

******************************************************************
EX.NO:9

PROGRAMS USING XML SCHEMA XSLT/XSL

******************************************************************
Aim:
Programs using XML-Schema-XSLT/XSL
Algorithm:
Step 1: Start the Program
Step 2: Create a root process for food
Step 3: Create a style for XSLT with focus on each item
Step 4: Output the items
Step 5: Stop
STRUCTURE.XML

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


<?xml-stylesheet type="text/xsl" href="stock.xsl"?>
<breakfast_menu>
<food>
<name>apple</name>
<price>$4.56</price>
<description>good energy</description>
<calories>650</calories>
</food>

<food>
<name>strawberry</name>
<price>$56.7</price>
<description>a good ice cream</description>
<calories>450</calories>
</food>
<food>
<name>chapathy</name>
<price>$5.89</price>
<description>morning meal</description>
<calories>780</calories>
</food>
<food>
<name>bread</name>
<price>$6.78</price>
<description>with jam and butter</description>
<calories>670</calories>
</food>
</breakfast_menu>

STOCK.XSL
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body bgcolor="tomato">
<h2><center>FOOD STRUCTURE</center></h2>
<table border="1" align="center">
<tr bgcolor="silver">
<th>Name</th>
<th>Price</th>
<th>Description</th>
<th>Calories</th>
</tr>
<xsl:for-each select="breakfast_menu/food">
<tr bgcolor="tan">
<td><xsl:value-of select="name"/></td>
<td><xsl:value-of select="price"/></td>

<td><xsl:value-of select="description"/></td>
<td><xsl:value-of select="calories"/></td>
</tr>
</xsl:for-each>
</table></body> </html>
</xsl:template>
</xsl:stylesheet>
OUTPUT :
SCREEN SHOT

******************************************************************
EX.NO:10

PROGRAM USING AJAX

******************************************************************
AIM:
To write programs to search and display chemistry elements definition detail using
JSP.
Algorithm:

Step 1: Start the Program


Step 2: Enter the chemistry element in index.html
Step 3: Read the data by request document.getElementById
Step 4: Check given element in element list
Step 5: Display the definition of given element.
Step 6: Stop the Program
Program:
<html>
<head>
<title> Ajax </title>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;

xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","info",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>This line is going to change</h2></div>
<h3> Welcome to Ajax program</h3>
<h3> Press the button to get the definition of ajax</h3>
<button type="button" onclick="loadXMLDoc()">Change</button>
</body>
</html>
Info.txt
Ajax exchanges the data with the server, and update parts of a web page without
reloading the whole page.
OUTPUT:

******************************************************************
EX.NO:11 IMPLEMENTING AN APPLICATION WITH WEB SERVICES
AIM:
To implement an application using web services and database .
Algorithm:
Step 1: Start the Program
Step 2: Create a root process for Reservation
Step 3: Create a service with focus on each item
Step 4: Output the items
Step 5: Stop
Program:
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Solution11.16 -->
<!-- Airline Reservation System-->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Airline Reservation System</title>

<script type = "text/javascript">


<!-var input;
var secondInput;
var element;
var secondElement;
var firstCount = 0;
var economyCount = 0;
var seats = [ ,0,0,0,0,0,0,0,0,0,0]; //allocate 10-element Array
function startArray()
{
for(var i=0; i<11; i++)
{
input = window.prompt("Please type 1 for First Class and Please type 2 for
Economy.","0");
if (input == 1 || input == 2)
{
element = linearSearch(seats);
if(element==-1&&input==1)

{
document.writeln("The First Class is already fully
booked<br/>");
secondQuestion(seats);
}
else if (element ==-1 && input == 2)
{
document.writeln("The Economy Class is already fully
booked<br/>");
secondQuestion(seats);
}
else
boarding Pass(input);
}
//to terminate the program
else
{
window.status="Bye-bye!";
System.exit(0);

}
}
}
function linear Search(the Array)
{
if (input == 1)
{
for (var n=0; n<6 ; n++)
if (the Array [n] == 0)
return n;
}
else if (input == 2)
{
for (var n=6; n<11 ; n++)
if (the Array [n] == 0)
return n;
}
return -1;
}

function boarding Pass(the Input)


{
if (input ==1)
{
document.writeln("----------BOARDING PASS----------<br/>");
document.writeln("You are allocated in the First Class<br/>");
document.writeln("Your seat number is "+ element+"<br/>");
document.writeln("-----------------------------------------<br/>");
seats[element]= 1;
firstCount++;
}
else if (input ==2)
{
document.writeln("----------BOARDING PASS----------<br/>");
document.writeln("You are allocated in the EconomyClass<br/>");
document.writeln("Your seat
number is "+ element +"<br/>");
document.writeln("-----------------------------------------<br/>");
seats[element]= 1;

economyCount++;
}
}
functionsecondQuestion(theArray)
{
if (input == 1)
{
for (var n=6; n<11 ;n++)
{
if (theArray [n] == 0)
{
second Input = window.prompt("Do you want to move to Economy Class?
(If YES, please press 1. If NO, please press 2)","0");
if ( second Input == 1)
{
input = 2;
element=linear Search(seats);
document.writeln("You have been allocated to Economy
Class<br/>");

boardingPass(input);
break;
}
else if (secondInput == 2)
{
document.writeln("Next flight leaves in 3 hours<br/>"); break;
}
}
}
}
else if (input == 2)
{
for (var n=0; n<6 ;n++)
{
if (theArray [n] == 0)
{
secondInput = window.prompt("Do you want to move to First Class? (If YES,
please press 1. If NO, please press 2)","0");
for (var n=0; n<6 ;n++)

{
if (theArray [n] == 0)
{
secondInput = window.prompt("Do you want to move to First Class? (If YES,
please press 1. If
NO, please press 2)","0");
boarding Pass(input); break;
}
else if (secondInput == 2)
{
document.writeln("Next flight leaves in 3 hours<br/>");
break;
}
}
}
}
}
//-->
</script>

</head>
<body onload = "startArray()"></body>
</html>

Output:

******************************************************************
EX.NO:12

MENUS AND MENU GROUPING

AIM:
To create menus and menu grouping using HTML.
Algorithm:
Step 1: Start the program.
Step 2: Create a HTML file content for creating menus and menu group
Step 3: Use javascript to display the group of elements
Step 4: Use option command for selection
Step 5: Display the output with menus and menu groups
Step 6:Stop the program

Algorithm:
Menus.Html <html>
<body>
<select> <option>volvo</option>
<option>saab</option>
<option>mercedes</option>
<option>audi</option>
</select> </body>
</html>

Menugroup.html

<html>
<body>
<select> <optgroup label="swedish cars">
<option value="volvo">volvo</option>
<option value="saab">saab</option>
<optgroup> <optgroup label="German cars">
<option value="mercedes">mercedes</option>
<option values="audi">audi</option> </optgroup>
</select>
</body>
</html>

Output:

******************************************************************
EX.NO:13

CREATING TIME TABLE USING CSS

******************************************************************
Aim:
To create timetable using CSS in html.
Algorithm:
Step 1: Start the program.
Step 2: Create the table using<table><tr> <th><td> tags
Step 3: Apply the rowspan and colspan tags in table
Step 4: Apply the styles in html program
Step 5:Stop the program
Program:
Table.html
<!doctype html>
<html>
<head>
<title>Timetable</title>
<style type="text/css">
body
{
font-family: arial;

}
th,td
{
margin: 0;
text-align: center;
border-collapse: collapse;
outline: 1px solid #e3e3e3;
}
td
{
padding: 5px 10px;
}
th
{
background: #666;
color: white;
padding: 5px 10px;
}
td:hover
{
cursor: pointer;
background: #666;
color: white;
}

</style>
</head>
<body>
<table width="80%" align="center" >
<div id="head_nav">
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thrusday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
</div>
<tr>
<th>10:00 - 11:00</th>
<td>Physics-1</td>
<td>English</td>
<td title="No Class" class="Holiday"></td>
<td>Chemestry-1</td>
<td>Alzebra</td>
<td>Physical</td>
</div>
</tr>

<tr>
<th>11:00 - 12:00</td>
<td>Math-2</td>
<td>Chemestry-2</td>
<td>Physics-1</td>
<td>Hindi</td>
<td>English</td>
<td>Soft Skill</td>
</div>
</tr>
<tr>
<th>12:00 - 01:00</td>
<td>Hindi</td>
<td>English</td>
<td>Math-1</td>
<td>Chemistry</td>
<td>Physics</td>
<td>Chem.Lab</td>
</div>
</tr>
<tr>
<th>01:00 - 02:00</td>

<td>Cumm. Skill</td>
<td>Sports</td>
<td>English</td>
<td>Computer Lab</td>
<td>Header</td>
<td>Header</td>
</div>
</tr>
<tr>
<th>02:00 - 03:00</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
</div>
</tr>
</table>
</body>
</html>
Output:

You might also like