XHTML Program Demonstrating CSS, Lists, Tables, and Span Tag

****************************************************************
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"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Program:1</title>
<link rel="stylesheet"type="text/css"
href="style.css"/>
</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:vani.shimoga@yahoo.co.in">vani.shimoga@yahoo.co.in</a></td>
<td>9591131911</td>
</tr>
<tr><td>Vandana</td>
<td><a href="mail
to:bhat.vandana@gmail.com">bhat.vandana@gmail.com</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";
}
p.one
{
margin:0.2in;
padding:0.2in;
background-color:#c0c0c0;
border-style:dashed;
}
span.blue
{
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
<!DOCTYPE html PUBLIC"-//w3c//DTD XHTML1.1//EN"
<head>
<title>Fibonacci Series</title>
</head>
<body bgcolor="yellow">
<h3>Fibonacci Series</h3>
<script type="text/javascript" src="fibo.js">
</script>
</body>
</html>
fibo.js
var num=prompt("Enter the range:");

if(num<=0)
alert("Wrong input");
else
{
var fib1=0,fib2=1,fib=0;
document.writeln("Fibonacci numbers are:<br />");
document.write(fib+" "+fib2);
for(i=2;i<num;++i)
{
fib=fib1+fib2;
document.write(" "+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
<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
{
document.write("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
<head><title>Vowel Position</title>
</head>
<body bgcolor="candyman">
var flag=0;
var n=prompt("Enter string"," ");
document.write("Entered string is:"+n);
var str=n.toLowerCase();
var pos=stops(str);
if(flag==1)
{
alert("position of leftmost vowel is:"+pos);
}
else
{
alert("vowel not found");
}
function stops(str)
{
var len=str.length;
for(var i=0;i<len;i++)
{
if(str.charAt(i)=='a'||str.charAt(i)=='e'||str.charAt(i)=='i'||
str.charAt(i)=='o'||str.charAt(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
<head><title>Reverse of a Number</title>
</head>
<body bgcolor="lightgreen">
var num=prompt("Enter a sequence of number"," ");
document.write("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);
}
document.write("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 also.Event
handler must be included for the Form element that collects this information to
validate the input.Messages 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"
"http://www.w3.org/tr/xhtml 11/dtd/xhtml 11.dtd">
<head>
<title> Input <?xml version="1.0"encoding="utf-8"?>
validation of USN and semester</title>
function chkusn()
{
var myusn=document.getElementById("usn");
var pos=myusn.value.search(/^[1-4][A-Z][A-Z]\d{2}[A-Z][A-Z][A-Z]\d{2}$/);
if(pos!=0)
{
alert("USN("+myusn.value+") is not in the correct form.\n"
+"correct form is:"+"1PT08MCA12\n"+"please correct your usn");
return false;
myusn.focus();
myusn.select();
}
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>
document.getElementById("usn").onchange=chkusn;
</script>
</body>
</html>
PROGRAM NUMBER: 4B
<!doctype html public"-//w3c//dtd xhtml 1.1/en"
"http://www.w3.org/tr/xhtml 11/dtd/xhtml 11.dtd">
<head>
<title> Input validation of USN and semester</title>
function chkusn()
var myusn=document.getElementById("usn");
var pos=myusn.value.search(/^[1-4][A-Z][A-Z]\d{2}[A-Z][A-Z][A-Z]\d{2}$/);
if(pos!=0)
{
alert("USN("+myusn.value+") is not in the correct form.\n"
+"correct form is:"+"1PI08MCA71\n"+"please correct your usn");
return false;
myusn.focus();
myusn.select();
else
alert("USN IS IN CORRECT FORMAT");
return true;
function chksem()
var mysem=document.getElementById("sem");
var pos=mysem.value.search(/[1-6]$/);
if(pos!=0)
alert("SEMESTER("+mysem.value+") is not in the correct form.\n"
+"correct form is:"+"(1-6)\n"+"please correct your sem properly");
return false;
myusn.focus();
myusn.select();
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>
document.getElementById("usn").onchange=chkusn;
document.getElementById("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 them.when the cursor is placed over the exposed part
of any paragraph, it should rise to the top to become completely visible.
****************************************************************************************
<head><title>Dynamic stacking of Paragraphs</title>
var top="p1";
function totop(newtop)
{
domtop=document.getElementById(top).style;
domnew=document.getElementById(newtop).style;
domtop.zIndex="0";
domnew.zIndex="1";
top=newtop;
}
</script>
<style type="text/css">
.paragraph1{position:absolute;
top:50px;
background-color:skyblue;
border-style:solid;
left:50px;
z-index:0;
}
top:75px;
background-color:yellow;
border-style:solid;
left:120px;
z-index:0;
}
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">

WEB PROGRAMMING2
</p>
</font>
<font face="comic sans MS" size=12 color="black">

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
****************************************************************************************
<head><title>Dynamic stacking of Paragraphs</title>
var top="p1";
var mid="p2";
var last="p3";
function totop(newtop)
{
dommid=document.getElementById(mid).style;
domlast=document.getElementById(last).style;
domtop.zIndex="0";
dommid.zIndex="1";
domlast.zIndex="2";
domnew.zIndex="3";
}
function tosame(newtop)
{
dommid=document.getElementById(mid).style;
domlast=document.getElementById(last).style;
domnew.zIndex="3";
domlast.zIndex="2";
dommid.zIndex="1";
domtop.zIndex="0";
}
</script>
<style type="text/css">
top:50px;
background-color:skyblue;
border-style:solid;
left:50px;
z-index:0;
}
top:85px;
background-color:yellow;
border-style:solid;
left:90px;
z-index:0;
}
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">
onmouseover="totop('p1')" onmouseout="tosame('p1')">
WEB PROGRAMMING1
</p>
</font>
<font face="Algerian" size=12 color="red">

WEB PROGRAMMING2
</p>
</font>
<font face="comic sans MS" size=12 color="black">

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 Id.Make 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="6a.css"?>
<studentlist>
<h1>***************** PESIT ******************
<vtu>
<student>
<e>------------------Student1-----------------</e>
<usn>1PT08MCA11</usn>
<name>Vandana</name>
<email>vandana@gmail.com</email>
<branch>MCA</branch>
<college>PEIST</college>
<yof>2008</yof>
<e>------------------Student2-----------------</e>
<name>Vani</name>
<email>vani@gmail.com</email>
<yof>2008</yof>
<e>------------------Student3-----------------</e>
<name>Rajata</name>
<email>Rajata@gmail.com</email>
<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-stylesheet type="text/xsl" href="6b.xsl"?>
<document>
<studentlist>
<student>
<e>Details of first student</e>
<name>Vani</name>
<college>PESIT</college>
<joindate>22.Sept.2008</joindate>
<emailid>vani@gmail.com</emailid>
</student>
</studentlist>
</document>
XSL File
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<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>

XHTML Program Demonstrating CSS, Lists, Tables, and Span Tag

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

XHTML Program Demonstrating CSS, Lists, Tables, and Span Tag

Uploaded by

Copyright:

Available Formats

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

Cascading Style Sheets

var num=prompt("Enter the range:");

<!doctype html public"-//w3c//dtd xhtml 1.1/en"

"http://www.w3.org/tr/xhtml 11/dtd/xhtml 11.dtd">

<title> Input validation of USN and semester</title>

+"correct form is:"+"1PI08MCA71\n"+"please correct your usn");

alert("USN IS IN CORRECT FORMAT");

alert("SEMESTER("+mysem.value+") is not in the correct form.\n"

+"correct form is:"+"(1-6)\n"+"please correct your sem properly");

alert("SEMESTER IS IN CORRECT FORMAT");

<form action=" ">

USN NO.<input type="text" id="usn"/>(1PI08MCA71)

SEMESTER <input type="text"id="sem"/>(1-6)<br/><br/>

<input type="reset" id="reset">

<input type="submit" name="submit" value="submit">

<font face="Algerian" size=12 color="red">

<font face="comic sans MS" size=12 color="black">

<font face="Algerian" size=12 color="red">

<font face="comic sans MS" size=12 color="black">

<xsl:key name="student-by-usn" match="student" use="usn"/>

You might also like