LAB MANUAL
Prepared by,
Mr.S.Praveen
Kumar,AP/CSE
Ms.R.Femila
Goldy,AP/CSE
LTPC
1 0 3 2
LIST OF EXPERIMENTS
1. 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.
2. Create a web page with all types of Cascading style sheets.
3. Client Side Scripts for Validating Web Form Controls using DHTML
4. Write programs in Java to create applets incorporating the following features:
5. Create a color palette with matrix of buttons. Set background and foreground of the control
text area by selecting a color from Color palette.
In order to select Foreground or background use check box control as radio buttons
To set background images
6. Write programs in Java using Servlets:
To invoke servlets from HTML forms
To invoke servlets from Applets
7. Write programs in Java to create three-tier applications using JSP and Databases
for conducting on-line examination.
for displaying student mark list. Assume that student information is available in a
database which has been stored in a database server.
8. Programs using XML Schema XSLT/XSL
9. Programs using AJAX
10. Consider a case where we have two web Services- an airline service and a travel
agent and the travel agent is searching for an airline. Implement this scenario using Web
Services and Database.
Ex. No. 1
AIM:
To study basic HTML tags
Basic tags
1. <HTML> and </HTML>
Purpose: Indicates the beginning and the end of an HTML document
2. <HEAD> and </HEAD>
Purpose: Indicates the beginning and the end of an Header section of a document
3. <TITLE> and </TITLE>
Purpose: Specifies the text that should appear on the title bar of a browser window
4. <BODY> and </BODY>
Purpose: Indicates the beginning and the end of the documents content
5. <H1><H6> and </H1></H6>
Purpose: Headings are defined within these tags
<H1> defines the largest heading
<H6> defines the smallest heading
6. <P> and </P>
Purpose: Indicates the beginning and end of a paragraph in a HTML document
7. <BR>
Purpose: Inserts a line break without the need to start a new paragraph
8. <! -- -- >
Purpose: The comment tag, which indicates the browser that the text enclosed within
the tag, should be ignored
9. <HR>
Purpose: Defines a Horizontal rule, inserts a line in the page
Text Formatting tags
10. <B> and </B>
Purpose: Displays the text enclosed with these tags in Bold
11. <I> and </I>
Purpose: Displays the text enclosed with these tags in Italics
12. <BIG> and </BIG>
Purpose: Displays the text enclosed with these tags in bigger size
13. <SMALL> and </SMALL>
Purpose: Displays the text enclosed with these tags in smaller size
14. <SUB> and </SUB>
Purpose: Displays the text enclosed with these tags as a subscript
15. <SUP> and </SUP>
Purpose: Displays the text enclosed with these tags as a superscript
16. <FONT> and </FONT>
Purpose: Displays the text enclosed with these tags in specified font
Anchor tag
17. <A> and </A>
Purpose: HTML uses the <A> (anchor) tag to create a link to another document.
An anchor can point to any resource on the Web
Attributes: 1. HREF - Addresses the document to link to
2. TARGET Defines where the linked document should be displayed
Frames
18. <FRAMESET> and </FRAMESET>
Purpose: Defines how to divide the window into frames
Attributes: 1. COLS No: of columns the window should be divided into
2. ROWS No: of rows the window should be divided into
19. <FRAME> and </FRAME>
Purpose: Defines the page to be displayed in the frame
Attributes: 1. SRC The web page that should be displayed in the frame
2. NAME The name of the frame where other pages are displayed
Tables
20. <TABLE> and </TABLE>
Purpose: Defines a table
Attributes: 1. CELLSPACING Spacing between two cells in table
2. CELLPADDING Spacing between cell and its contents
Ex. No. 2
IMAGE MAPPING
AIM:
To write the html code to perform the Image Mapping.
DESCRIPTION:
usemap attribute
specifies an image as a client-side image-map (an image-map is an image with
clickable areas)
Syntax
<img usemap="#mapname">
Value
#mapname
Description
<map>
Defines an image-map
Attribute:
name
creates a relationship between the image and the map
<area>
Defines a clickable area inside an image-map.
<area> element is always nested inside a <map> tag
Attribute:
alt
specifies an alternate text for an area, if the image cannot be displayed.
Syntax
<area alt="text">
target
Specifies where to open the target URL
Syntax
<area target="_blank | _self | _parent | _top | framename">
Attribute Values
Value
_blank
_self
_parent
_top
frame name
Description
Opens the linked document in a new window or tab
Opens the linked document in the same frame as it was clicked
Opens the linked document in the parent frame
Opens the linked document in the full body of the window
Opens the linked document in a named frame
coords
Specifies the coordinates of an area in an image-map.
Syntax
<area coords="value">
Value
x1,y1,x2,y2
Description
Specifies the coordinates of the left, top, right, bottom corner of the
rectangle (for shape="rect")
x,y,radius
Specifies the coordinates of the circle center and the radius (for
shape="circle")
x1,y1,x2,y2,..,xn,yn Specifies the coordinates of the edges of the polygon. If the first and last
coordinate pairs are not the same, the browser will add the last coordinate
pair to close the polygon (for shape="poly")
href
specifies the hyperlink target for the area.
Value
URL
Description
Possible values:
An absolute URL - points to another web site (like
href="http://www.example.com/sun.htm")
A relative URL - points to a file within a web site (like href="sun.htm")
Shape
Specifies the shape of the area
Syntax
<area shape="default|rect|circle|poly">
Value
default
rect
circle
poly
Description
Specifies the entire region
Defines a rectangular region
Defines a circular region
Defines a polygonal region
PROGRAM:
Usemap.html
<Html>
<Body>
<Img src = india.jpg usemap = #id1>
<map name = id1>
<area shape = "circle" href = "Kashmir.html" coords = "145,38,5" alt =
"Kashmir">
<area shape = "circle" href = "Ooty.html" coords = "190,297,5" alt = "Ooty">
<area shape = "circle" href = "Kochi.html" coords = "157,296,5" alt =
"Kochi">
</map>
</Body>
</Html>
Ooty.html
<Html>
<Body>
OUTPUT:
Ex. No. 3
AIM:
To create a webpage with all types of Cascading style sheets with HTML pages.
DESCRIPTION:
To create a standard set of commands to control the styles of all the subsequent pages.
Web site designed in the CSS are faster to change and update.
Each page must link to the style sheet using the <link> tag
Example:
<head>
<link rel=stylesheet type=text/css href=mystyle.css>
</head>
Embedded (or Internal) Style Sheet:
Example:
<head>
<style type=text/css>
body{background-color:red}
p{margin-left:20px}
</style>
</head>
Inline Style:
Example:
</tr>
</table>
</body>
</html>
Sundae.html
<html>
<head>
<title>sundae</title>
<link rel="stylesheet" type="text/css" href="a.css">
</head>
<body background="9.jpg">
<h1 style="background-color=white;">Welcome!
</h1>
<br>
<font style="background-color:#b0ffff;"
<h2>Sundaes and sundays! Relishing Fun!!
</h2>
<p style="background-color:#b0ffff;">
Enjoy the taste
</p>
<a href="form.html"><img src="10.jpg" width=300>
</a>
<p style="background-color:#b0ffff;">
Order now
</p>
<h1 style="background-color:white;">Thank you for visiting
</h1>
</font>
</body>
</html>
a.css
h3{color:green;}
h2{color:blue;background-color:#b0ffff font-family:Arial;}
p{color:red;}
h1{font-weight:italic; color:"#ff00ff";}
Feasta.html
<html>
<head>
<title>feasta</title>
</head>
<body background="10.jpg">
<marquee>
<h1 style="background-color:white;">
Feast on feastas!
</h1>
</marquee>
<center>
<select style="color:blue;">
<option value="vanilla" style="color:blue;">Vanilla</option>
<option value="strawberry" style="color:blue;">Strawberry</option>
<option value="butterscotch" style="color:blue;">Butterscotch</option>
<option value="deepchocolate" style="color:blue;">Deep Chocolate</option>
</select>
</td>
</tr>
<tr>
<td>Servings for:</td><td><input type="text" maxlength="2"></td>
</tr>
<tr>
<br><td colspan=2 align="center"><input type="submit" value="Order!"></td>
</tr>
</table>
</body>
</html>
Book.html
<html>
<head>
<title>booking</title>
</head>
<body background="8.jpg">
<center>
<br><br><br><br>
<font color=red style="background-color:#cee7ff;">
<h1>Thank you for ordering!</h1><br>
<h2>We will deliver it within 3 hours</h2><br>
<a href="first.html" style="background-color:#b0ffff;">
<h3><<Back to home</h3>
</a>
</body>
</html>
Output:
1.First page
2. Cone
3. Sundae
4. Feasta
5. Form
6. Acknowledgement
Aim:
To validate a web form controls using DHTML.
Algorithm:
Step1: The form will include one text field called "Your Name", and a submit button.
Step2: Validation script will ensure that the user enters their name before the form is sent to the
server.
Step3: Open this page to see it in action.
Step4: Try pressing the Send Details button without filling anything in the "Your Name" field.
You might like to open the source code for this form in a separate window.
Step5: The page consists of a JavaScript function called validate_form() that performs the form
validation, followed by the form itself.
home.html
<html>
<title>Reliance</title>
<head><center><font color="brown"><h1><b>Reliance
world</b></h1></font></center></head>
<body>
<table align="center" background="ind.gif" width="500" height="300" border="0"
cellpadding="50">
<tr>
<td>
<img src="reliance.jpg" alt="reliance logo"><br/>
<a href="onlineregister\onlineregister.html">Online account
registration</a>
</td>
</tr>
</table>
</body>
</html>
Onlneregister\onlineregister.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Online prepaid/postpaid Registration</title>
<script type="text/javascript">
<!--
function checkit()
{
var textstring = '';
// script for text box
for (i=0;i<9;i++)
{
if(i==1)
{
// script for file browser box
var box = document.forms['register'].elements[i];
if (!box.value)
{
alert('You haven\'t uploaded in ' + box.name + '!');
box.focus();
return;
}
document.register.imgphoto.src=box.value;
document.register.imgphoto.alt=box.name;
document.register.imgphoto.width=85;
document.register.imgphoto.height=100;
textstring += box.name + ': ' + box.value + '\n';
}
else if(i==3)
{
// script for select box
user_input =
document.register.gen.options[document.register.gen.selectedIndex].value;
textstring += 'Gender: ' + user_input + '\n';
}
else
{
var box = document.forms['register'].elements[i];
if(i<7)
{
if (!box.value)
{
alert('You haven\'t filled in ' +
box.name + '!');
box.focus()
return;
}
textstring += box.name + ': ' + box.value +
'\n';
}
else
textstring += box.name + ': ' + box.value + '\n';
}
}
// script for radio buttons.
user_input = '';
for (i=0;i<document.forms['register'].acctype.length;i++)
{
if (document.forms['register'].acctype[i].checked)
{
user_input =
document.forms['register'].acctype[i].value;
}
}
textstring += 'Account Type: ' + user_input + '\n';
// script for checkboxes
textstring += 'Address proofs:- '+ '\n';
for (i=11;i<15;i++)
{
if (document.register.elements[i].checked)
{
textstring += document.register.elements[i].name
+ ':';
var box =
document.forms['register'].elements[i+4];
if (!box.value)
{
alert('You haven\'t uploaded in ' +
box.name + '!');
box.focus();
return;
}
textstring += box.value + ',';
}
}
// script for textarea.
document.forms['register'].output.value = textstring;
}
// -->
</script>
</head>
<body>
Output:
home.html
Onlneregister\onlineregister.html
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(),"a.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;
}
}
3.html
<html>
<head>
<title>
applet
</title>
<body bgcolor="#ffffbb" text=blue>
<center>
<h2>Applet checker</h2>
<table border=1>
<tr>
<td>
<applet code="colorpal.class" width=300 height=300>
</applet>
</td>
</tr>
</table>
</center>
Output:
Ex. No. 6
AIM:
To write a program for invoke servlet from HTML form.
Set Environment Variables:
Set Environment variables for Tomcat 6.0 server
1. Control Panel -> System properties
Variable Value
C:\Program Files\Apache Software
Foundation\Tomcat 6.0
C:\Program Files\Apache Software
Foundation \ Tomcat 6.0\lib\servlet-api.jar
C:\Program Files\Java\jdk1.6.0\bin
<body>
<table align="center" background="ind.gif" width="500" height="300" border="0"
cellpadding="50">
<tr>
<td>
<img src="w3c.jpg" alt="w3c logo"><br/><br/>
<a href="form.html">Sign Up</a>
</td>
</tr>
</table>
</body>
</html>
form.html
<html>
<title>CSEmail</title>
<head><center><h1><b>Sign Up</b></h1></center></head>
<body>
<form action="servlet/signup" method="get">
<table align="center" background="ind.gif" width="500" height="600" border="0">
<tr>
<td>First name
:<br/>Last name
:</td>
<td>
<input type="text" name="firstname"/><br/>
<input type="text" name="lastname"/><br/>
</td>
</tr>
<tr>
<td>Email id :</td>
<td><input type="text" name="userid"/><br/></td>
</tr>
<tr>
<td>Password :<br/>Re-Password :<br/></td>
<td><input type="password" name="pwd"/><br/>
<input type="password" name="pwd"/><br/>
</td>
</tr>
<tr>
<td> Gender:</td>
<td> <input type="radio" name="gender" value="male" /> male
<input type="radio" name="gender" value="female" />
female<br/>
</td>
</tr>
<tr>
<td>Preferred City:</td>
<td>
<select name="city">
<option value ="sydney">Sydney</option>
<option value ="melbourne">Melbourne</option>
<option value ="cromwell">Cromwell</option>
<option value ="queenstown">Queenstown</option>
<option value ="chennai">chennai</option>
<option value ="mumbai">mumbai</option>
<option value ="delhi">delhi</option>
</select><br/>
</td>
</tr>
<tr>
<td>Address :</td>
<td><textarea rows="3" cols="20" name="address"></textarea></td>
</tr>
<tr>
<td>
<input type="checkbox" name="terms" value="terms"/>I accept
the terms and conditions<br/><br>
<input type="submit" name="submit" value="submit"/>
<input type="reset" name="reset"/>
</td>
</tr>
</table>
</form>
</body>
</html>
XML Source
web.xml
<web-app>
<servlet>
<servlet-name>signup</servlet-name>
<servlet-class>signup</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>signup</servlet-name>
<url-pattern>/servlet/signup</url-pattern>
</servlet-mapping>
</web-app>
Servlet Source
signup.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class signup extends HttpServlet
{
public void doGet(HttpServletRequest req,HttpServletResponse res) throws
IOException, ServletException
{
res.setContentType("text/html");
PrintWriter out = res.getWriter();
String fn = req.getParameter("firstname");
String ln = req.getParameter("lastname");
String id = req.getParameter("userid");
String gen = req.getParameter("gender");
String city = req.getParameter("city");
String addr = req.getParameter("address");
out.println("<html>");
out.println("<head>");
out.println("<title>");
out.println("Acc verification");
out.println("</title>");
out.println("</head>");
out.println("<body>");
out.println("Servlet Reply<br/><br/>");
out.println("First Name:"+fn+"<br> Last Nmae:"+ln+"<br>
Email ID:"+id+"<br> Gender:"+gen+"<br>City:"+city+"<br> Address:"+addr);
out.println("</body>");
out.println("</html>");
}
}
Output:
Apache Tomcat 6.0 server homepage
http://localhost:8080/
index.html
http://localhost:8080/register/ or http://localhost:8080/register/index.html
form.html
http://localhost:8080/register/form.html
Servlet side:
http://localhost:8080/register/servlet/signup?
firstname=manikandan&lastname=c&userid=manikandan.c.mcc@gmail.com&pwd=123&pwd
=123&gender=male&city=chennai&address=1%2F436+Podhigai+st%2C%0D
%0AInjambakkam%2Cch-41.&terms=terms&submit=submit
Ex. No. 7
AIM:
To write a program to invoke a Servlet from applets
ALGORITHM:
1. Open C:\Program files\ Apache Software Foundation\Tomcat\webapps
2. Create a folder called MyServlets
3. Under this folder create another folder called WEB-INF
4. Create another folder inside WEB-INF called classes
5. Create a HTML file called Applet2Servlet.html and store it under MyServlets
folder
6. Use the applet tag to load the required applet class in the browser
7. Create a Java file FromApplet.java under MyServlets folder
8. Import the necessary packages
9. Create a object for JButton class and associate an ActionListener with it
10. In actionPerformed(), create a URL object called test
11. Create object for URLConnection and call openConnection() for test
12. Set setDoInput(), setDoOutput(), setUseCaches(), setDefaultUseCaches() to false
13. Call the showDocument() of getAppletContext() method and compile the program
14. Create a Java file ReadVal.java under classes folder to display a message
15. Create web.xml inside WEB-INF folder
16. Compile the Servlet code after setting the classpath
17. Create a link to Applet2Servlet.html using <a> in index.html of MyServlets folder
18. Start the Tomcat server
19. Open the browser and type http://localhost:8080/
20. Click Tomcat Manager and enter admin as username
21. Select MyServlets from the list
22. The index.html file is displayed and click the link which points to Applet2Servlet.htm
23. Click the button inside the applet to activate the servlet and display the message
24. Stop the server
25. Stop the program
PROGRAM:
HTML Source - Applet2Servlet.html
<html>
<body>
<applet code="FromApplet.class" width="200" height="40"></applet>
</body>
</html>
Applet code FromApplet.java
import java.net.*;
import java.applet.*;
import javax.swing.*;
import java.awt.event.*;
public class FromApplet extends JApplet implements ActionListener
{
}
}
Servlet Code ReadVal.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
Output:
Ex. No. 8
AIM:
To create three-tier applications using JSP and Databases for conducting on-line
examination and displaying student mark list.
JSP:
Java Server Pages or JSP for short is Sun's solution for developing dynamic web sites.
JSP provide excellent server side scripting support for creating database driven web applications.
JSP pages are efficient, it loads into the web server's memory on receiving the request very first
time and the subsequent calls are served within a very short period of time.
ODBC Connectivity
1. Select Control Panel -> Administrative Tools-> Data Sources (ODBC) then ODBC
4. Then the ODBC Microsoft Access Setup window is opened and select database and
enter the Data Source Name in the text field and click ok
5. Then test2 displayed on the System Data Source area on the System DNS and
Click ok.
PROGRAM:
Sample1.jsp
<%@page language="java" import="java.sql.*" %>
<%@page import="java.io.*" %>
<%@page import="java.util.*" %>
<%
String SeatNum,Name;
String ans1,ans2,ans3,ans4,ans5;
int a1,a2,a3,a4,a5;
a1=a2=a3=a4=a5=0;
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection c = DriverManager.getConnection("jdbc:odbc:st");
if(request.getParameter("action")!=null)
{
SeatNum = request.getParameter("Seat_no");
Name = request.getParameter("Name");
ans1 =request.getParameter("group1");
if(ans1.equals("True"))
a1=2;
else
a1=0;
ans2 = request.getParameter("group2");
if(ans2.equals("True"))
a2=0;
else
a2=2;
ans3 = request.getParameter("group3");
if(ans3.equals("True"))
a3=0;
else
a3=2;
ans4 = request.getParameter("group4");
if(ans4.equals("True"))
a4=2;
else
a4=0;
ans5 = request.getParameter("group5");
if(ans5.equals("True"))
a5=0;
else
a5=2;
int Total=a1+a2+a3+a4+a5;
Statement stmt = c.createStatement();
String query = "INSERT INTO StudentTable (" + "Seat_no,Name,Marks" + ")
VALUES ('" +SeatNum + "', '" + Name + "', '"+Total+ "')";
int result = stmt.executeUpdate(query);
stmt.close();
stmt = c.createStatement();
query = "SELECT * FROM StudentTable WHERE Name="+"'"+Name+"'";
ResultSet rs = stmt.executeQuery(query);
%>
<html>
<head>
<title>Student Mark List
</title>
</head>
<body bgcolor=khaki>
<center>
<h2>Students Marksheet</h2>
<h3>Name of the College: Anand Institute of Higher Technology</h3>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><b>Seat Number</b></td>
<td><b>Name</b></td>
<td><b>Marks Obtained</b></td>
</tr>
<%
while(rs.next())
{
%>
<tr>
<td><%=rs.getInt(1)%></td>
<td> <%=rs.getString(2)%></td>
<td> <%=rs.getString(3)%></td>
</tr>
<%
}
rs.close();
stmt.close();
c.close();
%>
</table>
</center>
<br/> <br/><br/>
<table>
<tr>
<td><br>Date:<%=new java.util.Date().toString() %></td>
</tr>
</table>
<div>
<a href="Sample.html">Click here to attend test again</a>
</body>
</html>
<%
}else{
%>
<html>
<head><title>Online Examination</title>
</head>
</html>
<%
}
%>
Sample.html
<html>
<body text=green>
<center>
<h1>OnLine Examination</h1>
</center>
<form action="Sample1.jsp" method="post" name="entry">
<input type="hidden" value="list" name="action">
<table>
<tr>
<td><h3>Seat Number:</h3></td>
<td><input type="text" name="Seat_no"></td>
</tr>
<tr>
<td><h3>Name:</h3></td>
<td><input type="text" name="Name"></td>
</tr>
<hr/>
<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>
<hr/>
<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>
<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>
<br/>
<b>3. Tim-Berner Lee is the originator of Java.</b><br/>
<input type="radio" name="group3" value="True">True
2.Result page
3.Database
Ex. No. 9
AIM:
To write a xml program for displaying document with CSS
DESCRIPTION:
o XML stands for eXtensible Markup Language.
o XML was designed to transport and store data.
o HTML was designed to display data.
XML Tree:
XML documents form a tree structure that starts at "the root" and branches to "the
leaves".
XML documents must contain a root element. This element is "the parent" of all
other elements
All elements can have sub elements (child elements):
<root>
<child>
<subchild>.....</subchild>
</child>
</root>
<a>
<country>United States of America</country>
<capital>Washington D.C.</capital>
<currency>U.S.Dollar</currency>
</a>
<a>
<country>England</country>
<capital>London</capital>
<currency>Sterling Pound</currency>
</a>
<a>
<country>Australia</country>
<capital>Canberra</capital>
<currency>Australian Dollar</currency>
</a>
</srinivas>
s.css:
JE
{
background-image:url('bg.jpg');
width:100%;
}
a
{
background-color:#ffffbb;
display:block;
margin-bottom:40pt;
margin-left:40pt;
}
country
{
font-style:bold;
color:blue;
font-size:25pt;
}
capital
{
color:red;
display:block;
margin-left:18pt;
font-size:20pt;
}
currency
{
font-size:18pt;
display:block;
color:green;
margin-left:40pt;
}
OUTPUT:
Ex. No. 10
XSLT
AIM:
To write a program to invoke a Servlet from an HMTL file
DESCRIPTION:
XSLT is used to transform an XML document into another XML document, or another
type of document that is recognized by a browser, like HTML and XHTML XML Tree:
<xsl:template>
The match attribute is used to associate a template with an XML element. The match
attribute can also be used to define a template for the entire XML document. The value
of the match attribute is an XPath expression (i.e. match="/" defines the whole
document).
<xsl:value-of>
The <xsl:value-of> element can be used to extract the value of an XML element and add
it to the output stream of the transformation.
<xsl:for-each>
PROGRAM:
stmarklist.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="stmarklist.xsl"?>
<marklist>
<marklistrow1>
<stnameh>St_Name</stnameh>
<subject1>WT</subject1>
<subject2> PCD</subject2>
<subject3> OOAD </subject3>
<subject4> ACA </subject4>
<subject5> AI </subject5>
<subject6> NM </subject6>
</marklistrow1>
<marklistrow2>
<stnameh>Ayyappan</stnameh>
<mark1> 90</mark1>
<mark2> 85 </mark2>
<mark3> 92</mark3>
<mark4> 74</mark4>
<mark5> 85</mark5>
<mark6> 73</mark6>
</marklistrow2>
<marklistrow2>
<stnameh>Anand</stnameh>
<mark1> 93</mark1>
<mark2> 84 </mark2>
<mark3> 97</mark3>
<mark4> 78</mark4>
<mark5> 82</mark5>
<mark6> 76</mark6>
</marklistrow2>
<marklistrow2>
<stnameh>Mathan</stnameh>
<mark1> 96</mark1>
<mark2> 87 </mark2>
<mark3> 93</mark3>
<mark4> 78</mark4>
<mark5> 88</mark5>
<mark6> 77</mark6>
</marklistrow2>
</marklist>
XSL code
stmarklist.xsl
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy -->
<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/1999/xhtml">
<body>
<table align="center" border="3" WIDTH="400" HEIGHT="300"
cellspacing="10" cellpadding="30" background="ind.gif">
<thead><h1><center>MARK LIST</center></h1></thead>
<xsl:for-each select="marklist/marklistrow1">
<tr>
<th><xsl:value-of select="stnameh"/></th>
<th><xsl:value-of select="subject1"/></th>
<th><xsl:value-of select="subject2"/></th>
<th><xsl:value-of select="subject3"/></th>
<th><xsl:value-of select="subject4"/></th>
<th><xsl:value-of select="subject5"/></th>
<th><xsl:value-of select="subject6"/></th>
</tr>
</xsl:for-each>
<xsl:for-each select="marklist/marklistrow2">
<tr>
<th><xsl:value-of select="stnameh"/></th>
<th><xsl:value-of select="mark1"/></th>
<th><xsl:value-of select="mark2"/></th>
<th><xsl:value-of select="mark3"/></th>
<th><xsl:value-of select="mark4"/></th>
<th><xsl:value-of select="mark5"/></th>
<th><xsl:value-of select="mark6"/></th>
</tr>
</xsl:for-each>
</table>
</body>
</html>
Directory Structure
To save source files any location
E:\xml&xslt
E:\xml&xslt\ stmarklist.xml
E:\xml&xslt\ stmarklist.xsl
OUTPUT :