****************************************************************
Program No : 1
Program statement: Develop and demonstrate a XHTML document that
illustrates the use of external style sheet, ordered list , table , borders ,
padding,color,and the<span> tag
*****************************************************************
<?xml version="1.0"encoding="utf-8"?>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML1.1//EN"
"[Link]
<html xmlns="[Link]
<head>
<title>Program:1</title>
<link rel="stylesheet"type="text/css"
href="[Link]"/>
</head>
<body>
<h1>This is a xhtml program</h1>
<h3><u>Ordered list</u></h3>
<big>
<ol>
<li>Computer fundamentals
<ol>
<li>First generation
<ol><li>Vaccum tubes</li>
</ol></li>
<li>Second generation
<ol><Transistor</li>
<li>Cobol</li>
<li>Fortran</li>
</ol></li>
</ol></li></ol>
</big>
<table border="20" cell padding="10" cell spacing="10">
<th>Name</th>
<th>E-mail</th>
<th>Phone NO</th>
<tr><td>Vani K S</td>
<td><a href="mail
to:[Link]@[Link]">[Link]@[Link]</a></td>
<td>9591131911</td>
</tr>
<tr><td>Vandana</td>
<td><a href="mail
to:[Link]@[Link]">[Link]@[Link]</a></td>
<td>9491156234</td>
</tr>
</table>
<p class="one">
<b>Now all MCA students are going to learn the use of style sheets. XHTML
welcomes you in the web world
Padding and margin property applies in all the four sides</b>
<br />
</p>
rel:Define the relationship between
<span class="blue">this current document and the target document
</span>
</body>
</html>
Cascading Style Sheets
body
{
background-color="lavender";
}
h1
{
color="red";
font-family="verdana";
}
ol{list-style-type:upper-roman;}
ol ol{list-style-type:upper-alpha;}
ol ol ol{list-style-tyoe:decimal;}
table
{
font-family="times new roman";
background-color="yellow";
}
th
{
text-align="center";
font-family="arial";
}
[Link]
{
margin:0.2in;
padding:0.2in;
background-color:#c0c0c0;
border-style:dashed;
}
[Link]
{
color:darkblue;
font-weight:bold;
font-size:20pt;
}
Program No : 2a
Program statement :Develop and demonstrate a XHTML file that includes
SJavascript
for the following a)Input:A number n obtained using prompt.
Output:the first n Fibonacci number
<?xml version="1.0"encoding="utf-8"?>
<!DOCTYPE html PUBLIC"-//w3c//DTD XHTML1.1//EN"
"[Link]
<html xmlns="[Link]
<head>
<title>Fibonacci Series</title>
</head>
<body bgcolor="yellow">
<h3>Fibonacci Series</h3>
<script type="text/javascript" src="[Link]">
</script>
</body>
</html>
[Link]
var num=prompt("Enter the range:");
if(num<=0)
alert("Wrong input");
else
{
var fib1=0,fib2=1,fib=0;
[Link]("Fibonacci numbers are:<br />");
[Link](fib+" "+fib2);
for(i=2;i<num;++i)
{
fib=fib1+fib2;
[Link](" "+fib);
fib1=fib2;
fib2=fib;
}}
Program No : 2b
Program statement :Develop and demonstrate a XHTML file
that includes SJavascript
for the following a)Input:A number n obtained using prompt.
Output: A table of numbers from 1 to n and their square using Alert
<?xml version="1.0"encoding
<?xml version="1.0"encoding="utf-8"?>
<!DOCTYPE html PUBLIC"-//w3c//DTD XHTML1.1//EN"
"[Link]
<html xmlns="[Link]
<head><title>Square</title>
</head>
<body bgcolor="pink">
<script type="text/javascript">
var n=prompt("Enter a no:");
msgstr="No and its square are:\n";
if(n<0)
{
for(i=n;i<0;i++)
{
msgstr=msgstr+i+"-"+i*i+"\n";
}
alert(msgstr)
}
else if(n>0)
{
for(i=1;i<=n;i++)
{
msgstr=msgstr+i+"-"+i*i+"\n";
}
alert(msgstr);
}
else
{
[Link]("Invalid input");
}
</script></body>
</html>
Program No: 3a
Program statement: Develop and demonstrarte a XHTML file that includes JAVA
Script that uses function or the following problems
a)Parameter:A string output:position in the string of the leftmost vowel
<?xml version="1.0"encoding="utf-8"?>
<!DOCTYPE html PUBLIC"-//w3c//DTD XHTML1.1//EN"
"[Link]
<html xmlns="[Link]
<head><title>Vowel Position</title>
</head>
<body bgcolor="candyman">
<script type="text/javascript">
var flag=0;
var n=prompt("Enter string"," ");
[Link]("Entered string is:"+n);
var str=[Link]();
var pos=stops(str);
if(flag==1)
{
alert("position of leftmost vowel is:"+pos);
}
else
{
alert("vowel not found");
}
function stops(str)
{
var len=[Link];
for(var i=0;i<len;i++)
{
if([Link](i)=='a'||[Link](i)=='e'||[Link](i)=='i'||
[Link](i)=='o'||[Link](i)=='u')
{
flag=1;
break;
}
}
return(i+1);
}
</script>
</body>
</html>
Program No: 3b
Program statement: Develop and demonstrarte a XHTML file that includes JAVA
Script that uses function or the following problems
a)Parameter:Number, Output: The number with its digits in the reverse order
<?xml version="1.0"encoding="utf-8"?>
<!DOCTYPE html PUBLIC"-//w3c//DTD XHTML1.1//EN"
"[Link]
<html xmlns="[Link]
<head><title>Reverse of a Number</title>
</head>
<body bgcolor="lightgreen">
<script type="text/javascript">
var num=prompt("Enter a sequence of number"," ");
[Link]("Given sequence is:"+num+"</br>");
var rev=0;
var rem=0;
while(num!=0)
{
rem=num%10;
rev=(rev*10)+rem;
num=parseInt(num/10);
}
[Link]("The reverse sequence is:"+rev);
</script>
</body>
</html>
Program No: 4a
Program statement:Develop and demonstrate, using JAVA script,a XHTML
Document that collects the USN of the user and current semester [Link]
handler must be included for the Form element that collects this information to
validate the [Link] in the Alert windows must be produced when
errors are detected.
<?xml version=”1.0” encoding=”utf-8”?>
<!doctype html public"-//w3c//dtd xhtml 1.1/en"
"[Link] 11/dtd/xhtml [Link]">
<html xmlns="[Link]
<head>
<title> Input <?xml version="1.0"encoding="utf-8"?>
validation of USN and semester</title>
<script type="text/javascript">
function chkusn()
{
var myusn=[Link]("usn");
var pos=[Link](/^[1-4][A-Z][A-Z]\d{2}[A-Z][A-Z][A-Z]\d{2}$/);
if(pos!=0)
{
alert("USN("+[Link]+") is not in the correct form.\n"
+"correct form is:"+"1PT08MCA12\n"+"please correct your usn");
return false;
[Link]();
[Link]();
}
else
{
alert("USN IS IN CORRECT FORMAT");
return true;
}
}
</script>
</head>
<body>
<h3>Student Information</h3>
<form action=" ">
<p>
USN NO.<input type="text" id="usn"/>(1PT08MCA12)
<br/>
<input type="reset" id="reset">
<input type="submit" name="submit" value="submit">
</p>
</form>
<script type="text/javascript">
[Link]("usn").onchange=chkusn;
</script>
</body>
</html>
PROGRAM NUMBER: 4B
<?xml version="1.0"encoding="utf-8"?>
<!doctype html public"-//w3c//dtd xhtml 1.1/en"
"[Link] 11/dtd/xhtml [Link]">
<html xmlns="[Link]
<head>
<title> Input validation of USN and semester</title>
<script type="text/javascript">
function chkusn()
var myusn=[Link]("usn");
var pos=[Link](/^[1-4][A-Z][A-Z]\d{2}[A-Z][A-Z][A-Z]\d{2}$/);
if(pos!=0)
{
alert("USN("+[Link]+") is not in the correct form.\n"
+"correct form is:"+"1PI08MCA71\n"+"please correct your usn");
return false;
[Link]();
[Link]();
else
alert("USN IS IN CORRECT FORMAT");
return true;
function chksem()
var mysem=[Link]("sem");
var pos=[Link](/[1-6]$/);
if(pos!=0)
alert("SEMESTER("+[Link]+") is not in the correct form.\n"
+"correct form is:"+"(1-6)\n"+"please correct your sem properly");
return false;
[Link]();
[Link]();
else
{
alert("SEMESTER IS IN CORRECT FORMAT");
return true;
</script>
</head>
<body>
<h3>Student Information</h3>
<form action=" ">
<p>
USN NO.<input type="text" id="usn"/>(1PI08MCA71)
<br/>
SEMESTER <input type="text"id="sem"/>(1-6)<br/><br/>
<input type="reset" id="reset">
<input type="submit" name="submit" value="submit">
</p>
</form>
<script type="text/javascript">
[Link]("usn").onchange=chkusn;
[Link]("sem").onchange=chksem;
</script>
</body>
</html>
Program No: 5a
Program statement: Develop and demonstrarte using JAVA Script, a XHTML
Document that contains three short paragraph f text ,stacked on top of each
other With only enough of each showing so that the mouse cursor can be
placed over some part of [Link] the cursor is placed over the exposed part
of any paragraph, it should rise to the top to become completely visible.
****************************************************************************************
<?xml version="1.0"encoding="utf-8"?>
<!DOCTYPE html PUBLIC"-//w3c//DTD XHTML1.1//EN"
"[Link]
<html xmlns="[Link]
<head><title>Dynamic stacking of Paragraphs</title>
<script type="text/javascript">
var top="p1";
function totop(newtop)
{
domtop=[Link](top).style;
domnew=[Link](newtop).style;
[Link]="0";
[Link]="1";
top=newtop;
}
</script>
<style type="text/css">
.paragraph1{position:absolute;
top:50px;
background-color:skyblue;
border-style:solid;
left:50px;
z-index:0;
}
.paragraph2{position:absolute;
top:75px;
background-color:yellow;
border-style:solid;
left:120px;
z-index:0;
}
.paragraph3{position:absolute;
top:90px;
background-color:red;
border-style:solid;
left:190px;
z-index:0;
}
</style></head>
<body><b>
<font face="book antiqua" size=12 color="blue">
<p class="paragraph1" id="p1"
onmouseover="totop('p1')">
WEB PROGRAMMING1
</p>
</font>
<font face="Algerian" size=12 color="red">
<p class="paragraph2" id="p2"
onmouseover="totop('p2')">
WEB PROGRAMMING2
</p>
</font>
<font face="comic sans MS" size=12 color="black">
<p class="paragraph3" id="p3"
onmouseover="totop('p3')">
WEB PROGRAMMING3
</p>
</font>
</body>
</html>
Program No: 5b
Program statement: Modify the document in 5a program so that when a
paragraph is moved from the top stacking position, it returns to its original
position rather than to the bottom
****************************************************************************************
<?xml version="1.0"encoding="utf-8"?>
<!DOCTYPE html PUBLIC"-//w3c//DTD XHTML1.1//EN"
"[Link]
<html xmlns="[Link]
<head><title>Dynamic stacking of Paragraphs</title>
<script type="text/javascript">
var top="p1";
var mid="p2";
var last="p3";
function totop(newtop)
{
domtop=[Link](top).style;
dommid=[Link](mid).style;
domlast=[Link](last).style;
domnew=[Link](newtop).style;
[Link]="0";
[Link]="1";
[Link]="2";
[Link]="3";
}
function tosame(newtop)
{
domtop=[Link](top).style;
dommid=[Link](mid).style;
domlast=[Link](last).style;
domnew=[Link](newtop).style;
[Link]="3";
[Link]="2";
[Link]="1";
[Link]="0";
}
</script>
<style type="text/css">
.paragraph1{position:absolute;
top:50px;
background-color:skyblue;
border-style:solid;
left:50px;
z-index:0;
}
.paragraph2{position:absolute;
top:85px;
background-color:yellow;
border-style:solid;
left:90px;
z-index:0;
}
.paragraph3{position:absolute;
top:110px;
background-color:red;
border-style:solid;
left:120px;
z-index:0;
}
</style></head>
<body><b>
<font face="book antiqua" size=12 color="blue">
<p class="paragraph1" id="p1"
onmouseover="totop('p1')" onmouseout="tosame('p1')">
WEB PROGRAMMING1
</p>
</font>
<font face="Algerian" size=12 color="red">
<p class="paragraph2" id="p2"
onmouseover="totop('p2')" onmouseout="tosame('p2')">
WEB PROGRAMMING2
</p>
</font>
<font face="comic sans MS" size=12 color="black">
<p class="paragraph3" id="p3"
onmouseover="totop('p3')" onmouseout="tosame('p3')">
WEB PROGRAMMING3
</p>
</font>
</body>
</html>
Program No: 6a
Program statement: Design an XML document to store information about a student a
student in an engineering college affiliated to VTU. The information must include
USN,Name,Name of college Branch,year of joining and e-mail [Link] up sample data
for 3 students. Create a CSS style sheet and use it to display the document.
****************************************************************************************
XML File
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="[Link]"?>
<studentlist>
<h1>***************** PESIT ******************
<vtu>
<student>
<e>------------------Student1-----------------</e>
<usn>1PT08MCA11</usn>
<name>Vandana</name>
<email>vandana@[Link]</email>
<branch>MCA</branch>
<college>PEIST</college>
<yof>2008</yof>
<e>------------------Student2-----------------</e>
<usn>1PT08MCA12</usn>
<name>Vani</name>
<email>vani@[Link]</email>
<branch>MCA</branch>
<college>PEIST</college>
<yof>2008</yof>
<e>------------------Student3-----------------</e>
<usn>1PT08MCA71</usn>
<name>Rajata</name>
<email>Rajata@[Link]</email>
<branch>MCA</branch>
<college>PEIST</college>
<yof>2008</yof>
</student>
</vtu>
</h1>
</studentlist>
CSS File
h1
{
text-align:center;
font-family:"Times New Roman";
font-size:40px;
color:#789065;
text-decoration:blink;
background-color:#abcdef;
width:98%;
}
vtu
{
margin-center:30pt;
text-align:left;
width:100%;
}
e
{
diaplay:block;
color:#005050;
font-size:20pt
}
student
{
display:block;
margin-top:20px;
color:#110000;
}
usn
{
display:block;
color:#116868;
font-family:"Bookman Old Style";
font-size:19pt;
text-decoration:underline;
}
college
{
display:block;
color:#086868;
font-family:"Bookman Old Style";
font-size:17pt;
}
branch
{
display:block;
color:#384532;
font-family:"Rockwell Extra Bold";
font-size:17pt;
}
yof
{
display:block;
color:#f86128;
font-family:"Ravie";
font-size:25pt;
}
email
{
display:block;
color:#342156;
font-family:"Monotype Corsiva";
font-size:17pt;
}
Program No: 6b
Program statement: Create XSL Style sheet for one student element of the above
document and use it to create a display of that element.
****************************************************************************************
XML File
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="[Link]"?>
<document>
<studentlist>
<student>
<e>Details of first student</e>
<usn>1PT08MCA12</usn>
<name>Vani</name>
<college>PESIT</college>
<branch>MCA</branch>
<joindate>[Link].2008</joindate>
<emailid>vani@[Link]</emailid>
</student>
</studentlist>
</document>
XSL File
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="[Link]
<xsl:template match="document">
<html>
<head>
<title>VTU Student Information</title>
</head>
<body bgcolor="#ddaacc">
<table bgcolor="#8899aa">
<tr>
<td valign="top">
<xsl:apply-templates select="studentlist"/>
</td>
</tr>
</table>
</body>
</html>
</xsl:template>
<xsl:key name="student-by-usn" match="student" use="usn"/>
<xsl:template match="studentlist">
<table border="1">
<xsl:for-each select="key('student-by-usn','1PT08MCA11')">
<tr>
<th>Usn </th>
<th>Name</th>
<th>College</th>
<th>Branch</th>
<th>Joindate</th>
<th>Email_id</th>
</tr>
<tr>
<td>
<xsl:value-of select="usn"/>
</td>
<td>
<xsl:value-of select="name"/>
</td>
<td>
<xsl:value-of select="college"/>
</td>
<td>
<xsl:value-of select="branch"/>
</td>
<td>
<xsl:value-of select="joindate"/>
</td>
<td>
<xsl:value-of select="emailid"/>
</td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>