1.
Create an XHTML page to demonstrate the usage of
a. Text Formatting Tags
b. Links
c. Images
d. Tags
<html>
<head>
<title> TEXT FORMATTING ,LINKS ,IMAGES ,TABLES </title>
</head>
<h1> <center> WELCOME T0 THE PAGE </center> </h1>
<p>
<h1>LINKS AND IMAGES</h1>
<a href = "p1.html"> click here for the first link</a></br>
<a href = "p2.html"> click here for the second link</a>
</p>
<body>
<p>
<h1> FOMATTING TAGS</h1><br>
<h2> Italic : <i> This is in Italic </i> </h2></br>
<h2> Bold : <b> This is in Bold </b> </h2></br>
<h2> Underline : <u> This is Underlined </u> </h2></br>
</p>
<p>
<h1> TABLES </h1>
<table border ="3">
<tr>
<th></th>
<th>Boys</th>
<th>Girls</th>
</tr>
<tr>
<th>MCA</th>
<td>30</td>
<td>35</td>
</tr>
</table>
</p>
</body>
</html>
OUTPUT:
2. Develop and demonstrate the usage of inline and external style sheet using
CSS.
<html>
<link rel="stylesheet" type="text/css" href="css.css"/>
<head>
<title>
INLINE AND EXTERNAL STYLE SHEET
</title>
</head>
<body>
<h1 class = "major"> Welcome To MIT Mysore </h1>
<p class="minor">
MIT is one of the top and best college in Mysore
</p>
<p class="minor" style="color.red">
there are more than 2000 students in mit
</p>
</body>
</html>
EXTERNAL CSS FILE:
<style>
.pree
{
color: red ;
}
h1.major
{
font size :25pt;
font-family :'ariel';
font -style:bold;
text-align :center;
text-indent:0.5in;
color:black ;
background-color : blue;
}
p.minor
{
font size :15pt;
font-family :'algerian';
font -style:bold;
text-align :left;
text-indent:1.5in;
color:blue ;
background-color : red;
}
</style>
OUTPUT:
3. Develop and demonstrate a XHTML file that includes JavaScript for the
following problems:
a. INPUT: A number n obtained using prompt.
OUTPUT: The first n Fibonacci numbers.
<html>
<head>
<title>FIBONACCI SERIES</title>
<script type ="text/Javascript" language="Javascript">
var m= prompt("enter a number:"," ");
var fib="\n0\n1";
var fib1=0, fib2=1,fib3, i=2;
while(i<m)
{
fib3=fib1+fib2;
fib1=fib2;
fib2=fib3;
i++;
fib=fib+"\n"+fib3;
}
alert (" fibonacci number are\n"+fib);
</script>
</head>
<body>
</body>
</html>
OUTPUT:
b. INPUT: A number n obtained using prompt.
OUTPUT: A table of numbers from 1 to n and their squares using alert.
<html>
<title>SQUARE OF A NUMBER</title>
<body>
<Script type ="text/Javascript">
var num = prompt ("enter a number:\n", " ");
if (num>0 && num!=null)
{
m="number and its square are \n" ;
for ( i=1 ;i<=num ;i++)
{
m = m+i+"_"+i*i+"\n";
}
alert (m)
}
else
alert("no input given");
</script >
</body>
</html>
OUTPUT:
4. Develop and demonstrate using JavaScript, a XHTML document that
displays random numbers.
<html>
<head>
<title>
RANDOM NUMBERS</title>
<script type ="text/Javascript">
function myFunction ()
{
document.getElementById("demo1").innerHTML=(Math.random()*100);
}
</script>
</head>
<body>
<p id= "demo1"> Click the button to display a random number</p>
<input type ="Submit" value ='Generate random numbers' onClick =
'myFunction()' ;/>
</body>
</html>
OUTPUT:
5. a) Develop and demonstrate using JavaScript script, a XHTML document
that collects the USN( the valid format is: A digit from 1 to 4 followed by two
upper-case characters followed by two digits followed by two upper-case
characters followed by three digits; no embedded spaces allowed) of the user.
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/XHTML11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<script type='text/javascript'>
function formValidator()
{
var alphaExpr1 = /[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][A-Z][0-9][0-9]$/
var usn = document.getElementById('req1');
if(usn.value.length == 0)
{
alert("USN Field is empty");
usn.focus();
return
false;
}
else
if(!usn.value.match (alphaExpr1))
{
alert("USN should be in DAADDAAADD format");
usn.focus();
return false;
}
else alert("USN is correct");
return true;
}
</script>
</head>
<body>
<form onsubmit='return formValidator()'>
Enter your USN in DAADDAAADD format:
<input type='text' id='req1'/>
<br/>
<input type='submit' value='CHECK FIELD'/>
<br>
D-Digit, A-Alphabet
</form>
</body>
</html>
OUTPUT:
5. B) Modify the above program to get the current semester also (restricted to
be a number from 1 to 6.)
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/XHTML11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<script type='text/javascript'>
function formValidator()
{
var alphaExpr1 = /[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][A-Z][0-9][0-9]$/
var
usn = document.getElementById('req1').value;
if(usn.length == 0)
{
alert("USN field is empty");
usn.focus();
return false;
}
if(usn.match(alphaExpr1))
{
alert("USN number should be in DAADDAADDD format");
usn.focus();
return false;
}
alert("USN is correct");
var yno = usn[3] +usn[4];
switch(yno)
{
case "15": alert("1st Sem");
break;
case "14": alert("3rd Sem");
break;
case "13": alert("5th Sem");
break;
default: alert("Invalid sem No");
}
}
</script>
</head>
<body>
<form onsubmit='return formValidator()'>
Enter your USN in DAADDAAADD format:
<input type='text' id='req1'/><br/>
<input type='submit' value='CHECK FIELD'/>
</br>
D-Digit, A-Alphabet
</form>
</body>
</html>
OUTPUT:
6. a) Develop and demonstrate using JavaScript script, a XHTML document
that contains three images, 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.
<!DOCTYPE HTML PUBLIC "-//w3c//DTD XHTML 1.1//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>The Stacking Order</title>
<style type="text/css">
.layer1Style
{
text-align:center;
border: solid thick black;
padding: 1em;
width:400px;
background-color:yellow;
position:absolute;
top:100px;
left:300px;
z-index:0;
}
.layer2Style
{
text-align:center;
border: solid thick blue;
padding: 1em;
width:400px;
background-color:pink;
position:absolute;
top:120px;
left:320px;
z-index:0;
}
.layer3Style
{
text-align:center;
border: solid thick green;
padding: 1em;
width:400px;
background-color:white;
position:absolute;
top:140px;
left:340px;
z-index:0;
}
</style>
<script type="text/javascript">
var topLayer="layer3";
function mover(toTop)
{
var oldTop=document.getElementById(topLayer).style;
var newTop=document.getElementById(toTop).style;
oldTop.zIndex="0";
newTop.zIndex="10";
topLayer=document.getElementById(toTop).id;
}
</script>
</head>
<body bgcolor="#799624">
<h2>Lab-6A</h2><hr><hr>
<div style="z-index: 10;" class="layer1Style" id="layer1"
onmouseover="mover('layer1')">
<img src="first.jpg" height=250 width=400>
</div>
<div style="z-index: 0;" class="layer2Style" id="layer2"
onmouseover="mover('layer2')">
<img src="second.jpg" height=250 width=400>
</div>
<div style="z-index: 0;" class="layer3Style" id="layer3"
onmouseover="mover('layer3')">
<img src="third.jpg" height=250 width=400>
</div>
<script type="text/javascript">
</script>
</body>
</html>
OUTPUT:
6. B) Modify the above document so that when an image is moved from the
top stacking position, it returns to its original position rather than to the
bottom.
<!DOCTYPE HTML PUBLIC "-//w3c//DTD XHTML 1.1//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>The Stacking order</title>
<style type="text/css">
.layer1Style
{
border: sol
id thick violet;
padding: 1em;
width:400px;
background-color:yellow;
position:absolute;
top:200px;
left:400px;
z-index:1;
}
.layer2Style
{
border: solid thick blue;
padding: 1em;
width:400px;
background-color:pink;
position:absolute;
top:220px;
left:420px;
z-index:2;
}
.layer3Style
{
border: solid thick green;
padding: 1em;
width:400px;
background-color:gray;
position:absolute;
top:240px;
left:440px;
z-index:3;
}
</style>
<script type="text/javascript">
var topLayer="layer3";
var origPos;
function mover(toTop,pos)
{
var newTop=document.getElementById(toTop).style;
newTop.zIndex="10";
topLayer=document.getElementById(toTop).id;
origPos=pos;
}
function moveBack()
{
document.getElementById(topLayer).style.zIndex=origPos;
}
</script>
</head>
<body bgcolor="teal">
<h2>Lab 6B:</h2>
<hr>
<hr>
<div style="z-index: 1;" class="layer1Style" id="layer1"
onmouseover="mover('layer1','1')" onmouseout="moveBack()">
<img src= "first.jpg" width="400"height="230">
</div>
<div style="z-index: 2;" class="layer2Style" id="layer2"
onmouseover="mover('layer2','2')" onmouseout="moveBack()">
<img src= "second.jpg" width="400"height="230"></div>
<div style="z-index: 3;" class="layer3Style" id="layer3"
onmouseover="mover('layer3','3')" onmouseout="moveBack()">
<img src= "third.jpg" width="400"height="230"></div>
<script type="text/javascript">
</script>
</body>
</html>
OUTPUT:
7. Develop using JavaScript, an XHTML document that make use of onload
and onfocus events.
<html>
<head><title>onfocus_events</title>
<script type="text/javascript" href="load.js">
function computecost()
{
var nb1 = document.getElementById("French").value;
var nb2 = document.getElementById("hazelnut").value;
var nb3 = document.getElementById("Columbian").value;
var nb4 = (nb1 * 3.49) + (nb2 * 5.40)+ (nb3 * 6.20);
document.getElementById("cost").value = nb4;
}
</script>
</head>
<body onload="myFunction()">
<script>
function myFunction() {
alert("Onload Event!");
}
function color1(x) {
x.style.background = "yellow";
}
</script>
<form action="load.html">
<h3>Coffee Order Form</h3>
<table border="border">
<tr>
<th>Product name</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<th>French vanilla</th>
<td>Rs.3.49</td>
<td><input type="text" id="French" size="2"/></td>
</tr>
<tr>
<th>Hazelnut cream</th>
<td>Rs.5.40</td>
<td><input type="text" id="hazelnut" size="2" onfocus="color1(this)"/></td>
</tr><tr>
<th>Columbian</th>
<td>Rs.6.20</td>
<td><input type="text" id="Columbian" size="2"/></td>
</tr>
</table>
<p>
<input type="button" value="Total cost" onmousemove="computecost()";/>
<input text="text" size="5" id="cost" onfocus="this.blur()";/>
</p>
<p>
<input type="submit" value="Submit order" onClick="computecost"();/>
<input type="reset" value="Reset order"/>
</p>
</form>
</body>
</html>
OUTPUT:
8. a)Design an XML document to store information about a student in a
college affiliated to VTU. The information must include USN, Name, Name of
the College, Branch, YOJ and email id. Make a sample data for 3 students.
Create a CSS style sheet and use it to display the document.
<?xml version = "1.0"?>
<?xml-stylesheet type = "text/xsl" href = "8a.xsl" ?>
<students>
<VTU>
<USN> 4MH15MCA01 </USN>
<name> Vishak </name>
<college> MITMYSORE </college>
<branch> M.C.A. </branch>
<YOJ> 2015 </YOJ>
<email> [email protected] </email>
</VTU>
<VTU>
<USN> 4MH15MCA02 </USN>
<name> Test </name>
<college> MITMYSORE </college>
<branch> M.C.A. </branch>
<YOJ> 2015 </YOJ>
<email> [email protected] </email>
</VTU>
</students>
XSL FILE:
<?xml version = "1.0"?>
<!--8a.xsl-->
<xsl:stylesheet version = "1.0" xmlns:xsl =
"http://www.w3.org/1999/XSL/Transform"
xmlns = "http://www.w3.org/1999/xhtml" >
<xsl:template match = "students">
<h2>VTU Students' Descriptions</h2>
<xsl:for-each select = "VTU">
<span style = "font-style: italic; color: green;">USN:</span>
<xsl:value-of select = "USN" /><br />
<span style ="font-style: italic; color: red;">
Name:</span>
<xsl:value-of select = "name" /><br/>
<span style = "font-style: italic; color: green;">
College:</span>
<xsl:value-of select = "college" /><br/>
<span style = "font-style: italic; color: yellow;">Branch:</span>
<xsl:value-of select = "branch" /><br/>
<span style = "font-style: italic; color: violet ;">Year of Join:</span>
<xsl:value-of select = "YOJ" /><br/>
<span style = "font-style: italic; color:indigo;">E-Mail:</span>
<xsl:value-of select = "email" /><br/><br/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
OUTPUT:
8. b) create XSLT style sheet for one student element of the above document
and use it to create a display of that element.
<?xml version = "1.0" ?>
<!--8b.xml-->
<?xml-stylesheet type = "text/xsl" href = "8b.xsl" ?>
<VTU>
<USN>TMCAMIT15MC015</USN>
<name>Vishak</name>
<college>M.I.T</college>
<branch>M.C.A</branch>
<YOJ>2015</YOJ>
<email>[email protected]</email>
</VTU>
XSL FILE:
<?xml version = "1.0" ?>
<!--8b.xsl -->
<xsl:stylesheet version = "1.0" xmlns:xsl =
"http://www.w3.org/1999/XSL/Transform"
xmlns = "http://www.w3.org/1999/xhtml" >
<xsl:template match="VTU">
<html>
<head>
<title>Style sheet for 8b.xml </title>
</head>
<body>
<h2>VTU Students Descriptions</h2>
<span style="font-style: italic; color: green;">USN:</span>
<xsl:value-of select="USN" /><br />
<span style="font-style: italic; color: blue;">NAME:</span>
<xsl:value-of select="name" /><br />
<span style="font-style:italic; color: yellow;">COLLEGE:</span>
<xsl:value-of select="college" /><br />
<span style="font-style:italic; color:black;">BRANCH:</span>
<xsl:value-of select="branch" /><br />
<span style="font-style:italic; color: pink;">Year Of Join:</span>
<xsl:value-of select="YOJ" /><br />
<span style="font-style:italic; color: grey;">E-MAIL:</span>
<xsl:value-of select="email" /><br />
<br />
</body>
</html>
</xsl:template>
</xsl:stylesheet>
OUTPUT:
9. Write a Perl program which demonstrates the usage of scalar variables and
arrays.
#!"C:\xampp\perl\bin\perl.exe"
use CGI':standard';
print "content-type:text/html\n\n";
$str=param('cmd');
@split_nos=split/\s/,$str;
@sorted=sort{$a<=>$b}@split_nos;
$length=$#split_nos+1;
if($length%2==1)
{
$median=$sorted[$length/2];
print "Median of @sorted is $median";
}
else
{
$median=($sorted[$length/2]+$sorted[$length/2-1])/2;
print "Median of @sorted is $median";
exit ();
}
Median.html
<html>
<body>
<form action="http://localhost/xampp/9.pl">
<h1>Median Calculator</h1>
<h2>Enter numbers separated by a Space</h2>
<input type="text" name="cmd"/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
OUTPUT:
10. Write a Perl program to display various server information like server name,
server software, server protocol, CGI revision etc.
#!"C:\xampp\perl\bin\perl.exe"
print "Content-Type: text/plain; charset=iso-8859-1\n\n";
foreach $var(sort(keys(%ENV))){
$val=$ENV{$var};
$val=~s|\n|\\n|g;
$val=~s|"|\\"|g;
print "${var}=\"${val}\"\n";
}
OUTPUT:
11. Write a Perl program to display a digital clock which displays the current
time of the server.
#!"C:\xampp\perl\bin\perl.exe"
use CGI ':standard';
print "Content-Type: text/html\n\n";
print start_html(-title=>"Program 11",-bgcolor=>"Green",-text=>"yellow");
print "<META HTTP-EQUIV='Refresh' CONTENT='1'>";
($s,$m,$h)=localtime(time);
print br,br,"The current system time is $h:$m:$s";
print br,br,hr,"In words $h hours $m minutes $s seconds";
print end_html;
OUTPUT:
12. Write a Perl program to accept the username and display a greeting
message randomly chosen from a list of 4 greeting messages.
#!"C:\xampp\perl\bin\perl.exe"
use CGI ':standard';
@coins=("Good Morning","Welcome to MIT","This is Web Lab","Good Luck");
$range=4;
$random_number=int(rand($range));
if(param)
{
print header();
print start_html(-title=>"Username",-bgcolor=>"blue",-text=>"white");
$cmd=param("name");
print b("Hello $cmd,$coins[$random_number]"),br();
print start_form();
print submit(-value=>"Back");
print end_form();
print end_html();
}
else
{
print header();
print start_html(-title=>"Username",-bgcolor=>"purple",-text=>"white");
print start_form(),textfield(-name=>"name",-value=>""),submit(-
name=>"submit",-value=>"submit"),reset();
print end_form();
print end_html();
}
OUTPUT:
13. Write a Perl program to keep track of the number of visitors visiting the
web page and to display this count of visitors, with proper headings.
#!"C:\xampp\perl\bin\perl.exe"
use CGI ':standard';
print "Content-Type: text/html\n\n";
print "Number of Visitors:";
open(FILE,'<count.txt');
$count=<FILE>;
$count++;
print "$count";
open(FILE,'>count.txt');
print FILE "$count";
close(FILE);
exit(0);
OUTPUT:
14. Write a CGI-Perl program to use a cookie to remember the day of the last
login from a user and display it when run.
#!"C:\xampp\perl\bin\perl.exe"
# day_cookie.pl
# A CGI-Perl program to use a cookie to remember the
# day of the last login from a user and display it when run
use CGI ":standard";
#>>> Get the existing day cookie, if there was one
@last_day = cookie('last_time');
#>>> Get the current date and make the new cookie
$day_of_week = (qw(Sunday Monday Tuesday Wednesday Thursday
Friday Saturday)) [(localtime)[6]];
$month = (qw(January February March April May June July
August September October November December))
[(localtime)[4]];
$day_of_month = (localtime)[3];
@day_stuff = ($day_of_week, $day_of_month, $month);
$day_cookie = cookie(-name => 'last_time',
-value => \@day_stuff,
-expires => '+5d');
#>>> Produce the return document
#>>> First, put the cookie in the new header
print header(-cookie => $day_cookie);
print start_html('This is day_cookie.pl');
#>>> If there was no day cookie, this is the first visit
if (scalar(@last_day) == 0) {
print "Welcome to you on your first visit to our site <br />";
}
#>>> Otherwise, welcome the user back and give the date of the
#>>> last visit
else {
($day_of_week, $day_of_month, $month) = @last_day;
print "Welcome back! <br /> ",
"Your last visit was on ",
"$day_of_week, $month $day_of_month <br />";
}
print end_html;
OUTPUT:
