Web Technologies Lab Manual-20MCA29 (1)

WEB TECHNOLOGIES LAB PROGRAMS 20MCA29
1. Create an XHTML page that provides information about your department. Your XHTML page
must use the following tags:
a. Text Formatting tags
b. Horizontal rule
c. Meta element
d. Links
e. Images
f. Tables
(If needed use additional tags)
Lab1a.xhtml
<?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>
<title> This is my lab1 program </title>
Prof.Sunita S Goravanakolla Dept of CSE, CPGS VTU, Belagavi Page 1

</head>
<body>
<p> WELCOME TO VTU </p>
<p id="top"> WELCOME TO VTU </p> <p> WELCOME TO
MCA Department </p>
<p>
My Name is ABC,
I am from MCA Department. <br/> VTU PG Center,
Belagavi </p>
<p align="right"><a href="#bottom">Bottom^</a></p>
<br />
<hr /> <hr />
<pre> [ preserving whitespaces tag ]
WELCOME
TO
VTU
</pre>
<hr /> <hr />
<h1> [ Heading 1 tag ] WELCOME TO VTU </h1>
<h3> [ Heading 3 tag ] WELCOME TO VTU </h3> <h4> [ Heading 4
tag ] WELCOME TO VTU </h4>
<hr /> <hr />
<p> Swami Vivekananda says [ paragraph tag ]</p>

<blockquote> "Arise..!! Awake..!!" [ blockquote tag (i am
different from surrounded text ) ] </blockquote>
<p> He is my Role model [ paragraph tag 8 ]</p>
<hr /> <hr />
<b> Font Styles and Sizes: </b>
<br />
<b> This is Bold </b> <br /> <i>
This is Italics </i> <br />
<u> This is Underline </u> <br />
<p> Content based tags are :</p>
<em> This is Emphasis </em>
<strong> This is strong </strong>
<code> Total = Internals + Externals //this is code </code>
<p>
<pre>
Illustration of Font Sizes (subscripts and superscripts)
x<sub>2</sub><sup>3</sup> + y<sub>1</sub><sup>2</sup>
</pre>
</p>
<hr /> <hr />
<b> Character entities </b>
<br />
<p>
<pre>
Illustration of character entities

if you get > 70%, then you will get " FCD "
if you get < 35%, then you are ' Fail '
½ of my classmates get very good marks &
Now, the temperature is 30° C
WELCOME TO VTU
</pre>
</p>
<p id="bottom" align="right"><a href="#top">Top^</a></p>
<hr /> <hr />
<a href="lab1b.xhtml"> click to go form.xhtml </a>
<br />
<p> Metadata will not be displayed on the page, but will be
machine parsable. </p>
<meta name="book name" content="World Wide Web" />
<meta name="Author" content="Robert W Sabesta" />
<meta name="Publisher" content="Pearson" />
<meta name="Edition" content="Fourth Edition" />
</body>
</html>

Lab1b.xhtml
<head>
</head>
<body>
<img src="image.jpg" height="130" width="130" alt="Image not
found" />
<hr />
<table border="border" cellspacing="5" cellpadding="10">
<caption> Kannada Film Industry </caption>
<tr>
<th align="Center" colspan="4">Actors Details</th>
</tr>
<tr align="center">
<th> Names</th>
<th> Dr. Vishnuvardhan </th>
<th> Ramesh Aravind </th>
<th> Ananthanag </th>
<th> Darshan Toogudeep </th>
<th> Upendra </th>
</tr>
<tr>

<th>Suhasini</th>
<td align="left">Bandana</td>
<td align="center">Muttinahara</td>
<td align="right">Amruthavarshini</td>
</tr>
<tr>
<th rowspan="2"> <br /> Sudharani <br /> <br /> </th>
<td >Panchamaveda</td>
<td valign="top">Aragini</td>
<td
valign="bottom">rathasapthami</td>
</tr>
</table>
</body>
</html>

2. Develop and demonstrate the usage of inline, external and internal style sheet using CSS. Use
XHTML page that contains at least three paragraphs of text, listed elements and a table with four
rows and four columns
Lab2.xhtml
<head>
<link rel="stylesheet" type="text/css" href="abc.css" />
<style type="text/css">
p { font-size:28pt; color:green; }
li.a { list-style-type: square; }
.b { list-style-type: circle; }
#c { list-style-type: upper-alpha; }
#d { list-style-type: lower-alpha; }
#e { list-style-type: upper-roman; }
#f { list-style-type: lower-roman; }
table, th
{ border-left-style:dashed;
border-right-style:double;
border-top-style:dotted;
border-left-width:thick;
border-right-width:medium;
border-top-width:thin;
border-left-color:red;

border-right-color:green;
border-top-color:blue;
border-bottom-color:maroon;
p.two
{ padding-left:0.5in;
padding-top:0.2in;
padding-bottom: 0.1in;
margin:0.9in;
color:yellow;
</style>
</head>
<body>
<p style="font-size:24pt; color:red;"> I am Inline Style Sheet
</p>
<p> I am Internal or Document Level Style Sheet </p>
<p class="one"> I am External Level Style Sheet </p>
<ul>
<li> I am Disc </li>
<li class="a"> I am Square </li>
<li class="b"> I am Circle </li>
</ul>
<ol>
<li> C </li>
</ol>

<ol>
<li id="c"> Unix </li>
</ol>
<ol>
<li id="d"> Web Technology</li>
</ol>
<ol>
<li id="e"> Computer Organization </li>
</ol>
<ol>
<li id="f"> DMS </li>
</ol>
<table border="2" cellspacing="5" cellpadding="10" >
<caption> The Box Model </caption>
<tr>
<th> USN </th> <th>
Name </th> <th>
Address </th> <th>
Mobile No </th>
</tr>
<tr>
<td> 1VX21MCA02 </td>
<td> VTU </td>
<td> Belagavi </td>
<td> 1234567890 </td>
</tr>

</table>
<p class="two" style=" background-color:green;"> I am Padding
and Margin element </p>
</body>
</html>

3. Develop and demonstrate a XHTML file that includes Javascript script for the following problems: a)
Input : A number n obtained using prompt Output : The first n Fibonacci numbers b) Input : A number
n obtained using prompt Output : A table of numbers from 1 to n and their squares using alert.
3a).INPUT: A number n obtained using prompt.

OUTPUT: The first n Fibonacci numbers.
<?xml version="1.0" encoding="utf-f"?>

<! 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>
<title> Fibonacci numbers </title>
</head>
<body bgcolor="yellow">
<font color="red">
<h1> FIBONACCI NUMBERS </h1>
<script type="text/Javascript">
var n, a=0,b=1,i,c
n=prompt ("enter a number", ' ')
if(n<=0) alert ("Invalid number")
else
{
if(n==1) document.write(a)
else document.write(a+ "<br/>" +b)
for(i=2;i<n;i++)
{
c=a+b
a=b
b=c
document.write("<br />" +c)
}
}
</script></font>
</body>
</html>

3a)OUTPUT:

3b).INPUT: A number of obtained using prompt

OUTPUT: A table of numbers from 1 to n and their squares using alert.
<?xml version="1.0" encoding="utf-8"?>
<! DOCTYPE html PUBLIC "-/w3c // DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml/11DTD/xhtml 11.dtd">
<head>
<title>Numbers and Squares</title>
</head>
<body>
<h1> printing the numbers and their squares... </h1>
<script type="text/javascript">
var n=prompt("enter n value:")
if(n>0)
{
msg="number and its squares:!:!:!:!:"
for(var i=1;i<=n;i++)
{
msg=msg+i+"--->"+i*i+"\n"
alert(msg)
}
}
else
alert("invalid")
</script>
</body>
</html>

3b)Output:

4.Develop, test and validate an XHTML document that has checkboxes for apple (59 cents each),
orange (49 cents each), and banana (39 cents each) along with submit button. Each check boxes
should have its own onclick event handler. These handlers must add the cost of their fruit to a total
cost. An event handler for the submit button must produce an alert window with the message ‘your
total cost is $xxx’, where xxx is the total cost of the chose fruit, including 5 percent sales tax. This
handler must return ‘false’ (to avoid actual submission of the form data). Modify the document to
accept quantity for each item using textboxes.
Lab4.xhtml
<?xml version="1.0" encoding ="utf-8?">
<!doctype html PUBLIC "-//w3c//DTD XHTML 1.1// EN" "http://www.w3.org/TR/xhtml

1,DTD/xhtml//.dtd">
<html>
<head>
var sum=0;
function add(n)
sum=sum+n;
function display()
sum=(0.05*sum+sum);
alert("your total amount$"+sum);
</script>
</head>
<body>
<form>

<center>Test and validate XHTML doc
<label>Apple
<input type ="checkbox" name="app" value="50" onclick="add(50);"/>
</label>
</br></br>
<label>Orange
<input type ="checkbox" name="org" value="40" onclick="add(40);"/>
</label>
</br></br>
<label>Banana
<input type ="checkbox" name="ban" value="20" onclick="add(20);"/>
</label>
</br>
<input type ="submit" value="Submit" onclick="display();"/>
</center>
</form>
</body>
</html>

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 three upper-case characters followed by two 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.
b) Modify the above program to get the current semester also (restricted to be a number from 1 to 6).
Lab5a.html

<!DOCTYPE html PUBLIC "-/w3c // DTD XHTML 1.1//EN"
"http://www.w3.org /TR /xhtml11 / DTD / xhtml11.dtd"
<html xmlrs="http://www.w3.org//1999/xhtml">
<head> <tittle>
<h1><center>usn validation </center></h1>
</tittle>
</head>
<body>
function fun(usn)
{
var pattern1=/^[1-4][A-Z]{2}[0-9]{2}[A-Z]{3}[0-9]{3}$/
if((!usn.value.match(pattern1)) || usn.value.length==0)
{
alert("inavlid usn!\n enter valid usn")
return false
}
else
alert("usn valid")
}
</script>
<form action="">
<center>
<p>
usn: <input type="text" name="usn" /><br />
<input type="button" value="validate" onClick="fun(usn)" /><br />
</p>
</center>
</form>
</body>
</html>

5a.OUTPUT:

5b) Modify the above program to get the current semester also (restricted to be a number from 1 to 6)

<!DOCTYPE html PUBLIC "-/w3c // DTD XHTML 1.1//EN"
"http://www.w3.org /TR /xhtml11 / DTD / xhtml11.dtd"
<html xmlrs="http://www.w3.org//1999/xhtml">
<head>
<tittle><h1> <center>usn validation </h1></tittle> </center>
</head>
<body>
function fun(usn,sem)
{
var pattern1=/^[1-4][A-Z]{2}[0-9]{2}[A-Z]{3}[0-9]{3}$/
var pattern2=/^[1-6]$/
if((!usn.value.match(pattern1)) || usn.value.length==0 || !sem.value.match(pattern2)
|| sem.value.length==0)
{
alert("inavlid us
n,sem\n enter valid usn & sem")
return false
}
else
alert("usn and sem valid")
}
</script>
<form action=""> <center>
<p>
usn: <input type="text" name="usn" /><br />
sem: <input type="text" name="sem" /> <br/>
<input type="button" value="validate" onClick="fun(usn,sem)" /><br />
</p>
</center>
</form>
</body>
</html>

5b.OUTPUT:

8.a)Develop and demonstrate, using JavaScript script, a XHTML document that contains three short
paragraphs of 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.
b)Modify the above document so that when a text is moved from the top stacking position, it returns
to its original position rather than to the bottom.
Lab8a.xhtml
//- - it works only in Internet Explorer --
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
<html>
<head> <title> paragraphs </title>
<script type="text/javascript" src="new3aa.js"></script>
<style type="text/css" >
.div1
{ color:blue;
font-size:20pt;
background-color:yellow;
Z-index:1;
width:200;
position:absolute;
top:25px;
left:25px;

.div2
{ color:blue;
font-size:20pt;
background-color:green;
Z-index:2;
width:200;
position:absolute;
top:50px;
left:75px;
.div3
color:blue;
font-size:20pt;
background-color:white;
Z-index:3;
width:200;
position:absolute;
top:75px; left:100px;
</style>
</head>
<body bgcolor="gray">

<div class="div1" id="d1" onmouseover = "sendtop('d1');">
<p> PARAGRAPH1
PARAGRAPH1
PARAGRAPH1
PARAGRAPH1
</p>
</div>
<div class="div2" id="d2" onmouseover="sendtop('d2');">
<p> PARAGRAPH2
PARAGRAPH2
PARAGRAPH2
PARAGRAPH2
</p>
</div>
<div class="div3" id="d3" onmouseover="sendtop('d3');">
<p>
PARAGRAPH3
PARAGRAPH3
PARAGRAPH3
PARAGRAPH3
</p> </div>
</body>
</html>
new3a.js:
var top='d3';

function sendtop(newtop)
{ var dom=new Array(3);
dom[0]=document.getElementById('d1');
for(i=0;i<3;i++)
if( dom[i].id==newtop )
dom[i].style.zIndex="99";
else
top=parseInt(dom[i].style.zIndex);
top=top-1;
dom[i].style.zIndex=top.toString();

OUTPUT:
Lab8b.xhtml
Modify the above document so that when a text is moved from the top stacking position, it returns to
its original position rather than to the bottom.
//- - it works only in Internet Explorer --
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN"

"http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>paragraphs</title>
<script type="text/javascript" src="new3b.js"></script>
<style type="text/css" >
.div1
{
color:blue;
font-size:20pt;
background-color:yellow;
Z-index:0;
width:200;
position:absolute;
top:25px;
left:25px;
}

.div2
{
color:blue;
font-size:20pt;
background-color:green;
Z-index:0;
width:250;
position:absolute;
top:50px;
left:75px;
}
.div3
{
color:blue;
font-size:20pt;
background-color:white;
Z-index:0;
width:300;
position:absolute;
top:75px; left:100px;
}
</style>
</head>
<body bgcolor="gray">
<div class="div1" id="d1" onmousedown= "sendtop('d1');">
<p>
PARAGRAPH1
PARAGRAPH1
PARAGRAPH1
PARAGRAPH1
</p>
</div>
<div class="div2" id="d2" onmousedown="sendtop('d2');">

<p>
PARAGRAPH2
PARAGRAPH2
PARAGRAPH2
PARAGRAPH2
</p>
</div>
<div class="div3" id="d3" onmousedown="sendtop('d3');">

<p>

PARAGRAPH3
PARAGRAPH3
PARAGRAPH3
PARAGRAPH3
</p>
</div>
</body>
</html>
New3b.js:
var top='d1';
function sendtop(newtop)
{
domtop=document.getElementById(top).style;
domnew=document.getElementById(newtop).style;
domtop.zIndex="0";
domnew.zIndex="25";
top=newtop;
}
OUTPUT:

9. Develop a simple calculator to perform arithmetic (addition, subtraction, multiplication and

division) operations on given two numbers. Use an HTML tag that allows the user to input two
numbers and to display the result of arithmetic operation. Write suitable HTML and JavaScript and
CSS to your simple calculator. The following figure show sample document display.

Lab9.html
<?xml version="1.0" encoding = "utf-8"?>
<head>
<title> Lab-8ab Program </title>
<link rel="stylesheet" type="text/css" href="view.css" />
function add()
var a = document.getElementById("t1").value;
var b = document.getElementById("t2").value;
c = +a + +b;
document.getElementById("t3").value = c;
function sub()
c = a - b;
function mul()

c = a * b;
function div()
c = a/b;
</script>
</head>
<body>
<center>
<h3> A SIMPLE CALCULATOR </h3>
<form>
<label> Number 1 = </label>
<input type="text" id="t1" /> <br /> <br />
<label> Number 2 = </label>
<input type="text" id="t2" /> <br /> <br />
<label> Result = </label>
<input type="text" id="t3" readonly="readonly" />
<br /> <br />
<input type="button" value="ADD" onclick="add()"/>

<input type="button" value="SUB" onclick="sub()"/>
<input type="button" value="MUL" onclick="mul()"/>
<input type="button" value="DIV" onclick="div()"/>
<input type="reset" value="CLEAR"/>
</form>
</center>
</body>
</html>
OUTPUT:

10.Develop and demonstrate using jQuery to solve the following: a) Limit character input in the text
area including count. b) Based on check box, disable/enable the form submit button.
Lab10a.html
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.3.min.js"></script>
<meta charset="utf-8">
<title>Limit character input in the textarea including count</title>
<style type="text/css">
textarea {
display:block;
margin:1em 0;
</style>
</head>
<body>
<form>
<label>Maximum 15 characters</label>
<textarea id="textarea" maxlength="15"></textarea>
<span id="rchars">15</span> Character(s) Remaining
</form>
</body>
</html>
<script>
var maxLength = 15;

$('textarea').keyup(function() {
var textlen = maxLength - $(this).val().length;
$('#rchars').text(textlen);
});
</script>
Lab10b.html
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.3.min.js"></script>
<meta charset="utf-8">
<title>Disable/enable the form submit button</title>
</head>
<body>
<input id="accept" name="accept" type="checkbox" value="y"/>I accept<br>
<input id="submitbtn" disabled="disabled" name="Submit" type="submit" value="Submit" />
</body>
</html>
<script>
$('#accept').click(function() {
if ($('#submitbtn').is(':disabled')) {
$('#submitbtn').removeAttr('disabled');
} else {
$('#submitbtn').attr('disabled', 'disabled');
});</script>

Web Technologies Lab Manual-20MCA29 (1)

Uploaded by

Copyright:

Available Formats

You might also like

Web Technologies Lab Manual-20MCA29 (1)

Uploaded by

Document Information

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

Web Technologies Lab Manual-20MCA29 (1)

Uploaded by

Copyright:

Available Formats

WEB TECHNOLOGIES LAB PROGRAMS 20MCA29

must use the following tags:

a. Text Formatting tags

(If needed use additional tags)

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

<html xmlns = "http://www.w3.org/1999/xhtml">

<title> This is my lab1 program </title>

Prof.Sunita S Goravanakolla Dept of CSE, CPGS VTU, Belagavi Page 1

<p> WELCOME TO VTU </p>

<p id="top"> WELCOME TO VTU </p> <p> WELCOME TO

MCA Department </p>

I am from MCA Department. <br/> VTU PG Center,

<p align="right"><a href="#bottom">Bottom^</a></p>

<hr /> <hr />

<pre> [ preserving whitespaces tag ]

<hr /> <hr />

<h1> [ Heading 1 tag ] WELCOME TO VTU </h1>

<h2> [ Heading 2 tag ] WELCOME TO VTU </h2>

<h3> [ Heading 3 tag ] WELCOME TO VTU </h3> <h4> [ Heading 4

tag ] WELCOME TO VTU </h4>

<h5> [ Heading 5 tag ] WELCOME TO VTU </h5>

<h6> [ Heading 6 tag ] WELCOME TO VTU </h6>

<hr /> <hr />

<p> Swami Vivekananda says [ paragraph tag ]</p>

Prof.Sunita S Goravanakolla Dept of CSE, CPGS VTU, Belagavi Page 2

<blockquote> "Arise..!! Awake..!!" [ blockquote tag (i am

different from surrounded text ) ] </blockquote>

<p> He is my Role model [ paragraph tag 8 ]</p>

<hr /> <hr />

<b> Font Styles and Sizes: </b>

<b> This is Bold </b> <br /> <i>

This is Italics </i> <br />

<u> This is Underline </u> <br />

<p> Content based tags are :</p>

<em> This is Emphasis </em>

<strong> This is strong </strong>

<code> Total = Internals + Externals //this is code </code>

Illustration of Font Sizes (subscripts and superscripts)

<hr /> <hr />

<b> Character entities </b>

Illustration of character entities

Prof.Sunita S Goravanakolla Dept of CSE, CPGS VTU, Belagavi Page 3

&frac12; of my classmates get very good marks &amp;

Now, the temperature is 30&deg; C

WELCOME &nbsp;&nbsp;&nbsp; TO &nbsp;&nbsp;&nbsp; VTU

<p id="bottom" align="right"><a href="#top">Top^</a></p>

<hr /> <hr />

<a href="lab1b.xhtml"> click to go form.xhtml </a>

<p> Metadata will not be displayed on the page, but will be

machine parsable. </p>

<meta name="book name" content="World Wide Web" />

<meta name="Author" content="Robert W Sabesta" />

<meta name="Publisher" content="Pearson" />

<meta name="Edition" content="Fourth Edition" />

Prof.Sunita S Goravanakolla Dept of CSE, CPGS VTU, Belagavi Page 4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

<html xmlns = "http://www.w3.org/1999/xhtml">

<title> This is my lab1 program </title>

½ of my classmates get very good marks &

Now, the temperature is 30° C

WELCOME TO VTU