Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
59 views

Web Programming Lab Manual-009

The document contains code for an HTML program that demonstrates different types of style sheets. It includes examples of: 1. Inline style sheet - Applied styles directly to an <h1> tag 2. Internal style sheet - Styles defined within the <style> tags in the <head> and applied to the <body> and <h1> 3. External style sheet - Styles defined in an external .css file and linked via the <link> tag The code shows how each type of style sheet can be used to style elements on an HTML page. Inline styles are applied directly to elements, internal styles are defined internally but can target all elements, and external styles are defined externally and linked

Uploaded by

Paran Jai
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
59 views

Web Programming Lab Manual-009

The document contains code for an HTML program that demonstrates different types of style sheets. It includes examples of: 1. Inline style sheet - Applied styles directly to an <h1> tag 2. Internal style sheet - Styles defined within the <style> tags in the <head> and applied to the <body> and <h1> 3. External style sheet - Styles defined in an external .css file and linked via the <link> tag The code shows how each type of style sheet can be used to style elements on an HTML page. Inline styles are applied directly to elements, internal styles are defined internally but can target all elements, and external styles are defined externally and linked

Uploaded by

Paran Jai
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 76

1.Write a program in html containing all the tags.

<html>
<head>
<title> WP LAB EXPERIMENT-1 </title>
</head>
<body style="background-color:grey;">
<h1 style="color:maroon;font-size:40px;"> WELCOME TO WEB
PROGRAMMING </h1>
<h1> WELCOME TO VVISM1 </h1>
<h2> WELCOME TO VVISM2 </h2>
<h3> WELCOME TO VVISM3 </h3>
<h4> WELCOME TO VVISM4 </h4>
<h5> WELCOME TO VVISM5 </h5>
<h6> WELCOME TO VVISM6 </h6>
<hr>
<p style="color:white;font-size:30px;"> Batch-1 <br> Second Year <br> BS-CS
</p>
<hr>
<p style="font-size:20px;"> Started in June,2023</p>
<hr>
<p style="color:blue;"> for reference click <a
href="https://www.w3schools.com/"> Visit this website </a></p>
<img src="https://dmlab.edu.gr/assets/media/2019/09/Web_Development.png"
" alt="Web Programming" height=200 width=200>
</body>
</html>

1
OUTPUT:

2
2.Write a program in html containing all the TEXT tags.
<html>
<head>
<title> WP LAB EXPERIMENT-2 </title>
</head>
<body style="background-color:peachpuff;">
<p style="color:red;"> It is normal text. </p>
<p><b> It is bold text. </b></p>
<p> It is normal text. </p>
<p><em> It is emphasized text. </em></p>
<p> It is strong text. </p>
<p><strong> It is important text. </strong></p>
<p> It is small text. </p>
<p><small> It is small text. </small></p>
<p> Welcome to <mark> VVISM. </mark></p>
<p> It is normal text. </p>
<p><i> It is itallic text. </i></p>
<p> Welcome to VVISM <ins> college. </ins></p>
<p> Welcome to VVISM <del> college. </del></p>
<p> Welcome to VVISM <sup> BSCS. </sup></p>
<p> Welcome to VVISM <sub> HYD. </sub></p>
<h1 style="background-color:orange;"> WELCOME TO WEB PROGRAMMING
</h1>
<h1 style="border:2px solid blue;"> FINISHED </h1>
</body></html>

3
OUTPUT:

4
3.Implement a program in html on Lists.
<html>
<head>
<title> WP LAB EXPERIMENT-3 </title>
</head>
<body style="background-color:#578ca9;">
<h1> This is program 3 of Web Programming Lab. </h1>
<h1 style="border:2px solid violet;"> ORDERED LIST </h1>
<ol type="I">
<li> Mango </li>
<li> Pear </li>
<li> Kiwi </li>
<li> Water Melon </li>
<li> Litchi </li>
</ol>
<hr>
<h1 style="background-color:LightBlue;"> UNORDERED LIST </h1>
<ul style="list-style-type:circle;">
<li> RAM </li>
<li> ARJUN</li>
<li> LAKSHMAN </li>
<li> HANUMAN</li>
<li> SHIVA</li>
</ul>
<hr>
<h1 style="color:#51064a;"> NESTED LIST </h1>
<ul>
<li> Mountain Dew</li>
<li> Minute Maid</li>
<ul>
<li> Pulpy Orange</li>
<li> Mango </li>
</ul>
<li> Real Fruit Juice </li>
</ul>

5
<hr>
<h6 style="font-size:20px;"> DESCRIPTION LIST </h6>
<dl>
<dt> Coffee </dt>
<dd>-hot and sweet drink. </dd>
<dt> Chocolate Milk </dt>
<dd>-cold and chocolate flavored milkshake. </dd>

OUTPUT:

6
7
4.Write a program in html about tables creation containing
all the types.
<html>
<head>
<title> Tables Creation. </title>
</head>
<style>
body
{
background-color:lightblue;
}
table th,td
{
border:2px solid white;
border-style:dotted;
border-collapse:collapse:
padding:25px;
text-align:center;
}
th,td
{
font-size:16px;
color:white;
}
caption
{
font-size:20px;
}
</style>
<body>
<h1> Table Creation and its properties. </h1>
<table style="width:100%; background-color:black;">
<caption><ins><b>HTML TABLE</b></ins></caption>
<tr style="height:40px;">
<th style="width:40%"> Employee name </th>
<th> Employee ID</th>
<th> Job</th>
<th> Salary </th>
</tr>
<tr>
<td> JOHN </td>
<td> 15021</td>
<td> DATA ANALYST</td>
<td> 52000</td>
</tr>
<tr>

8
<td> ALEX </td>
<td> 15236 </td>
<td> GRAPHIC DESIGNER</td>
<td> 45000</td>
</tr>
<tr>
<td> SURYA DEV</td>
<td> 15322</td>
<td> FULLSTACK DEVELOPER</td>
<td> 71000</td>
</tr>
</table>
<br>
<table style="width:100%;">
<caption><ins><b> Vertical Header, Colspan, Rowspan, Colgroup </b></ins></caption>
<colgroup>
<col span="2" style="background-color:green;">
<col span="1" style="background-color:blue;">
<col span="1" style="background-color:purple;">
<col span="1" style="visibility:collapse;">
</colgroup>
<tr>
<th colspan="2"> Fruits </th>
<td> Apple </td>
<td> Banana </td>
<td> Pineapple </td>
</tr>
<tr>
<th> Vegetables </th>
<td> Brinjal </td>
<td> Carrot </td>
<td> Potato </td>
</tr>
<tr>
<th rowspan="2"> Colors </th>
<td> Machenta </td>
<td> Blue </td>
<td> Purple </td>
</tr>
<tr>
<th> Vegetables </th>
<td> Brinjal </td>
<td> Carrot </td>
<td> Potato </td>
</tr>
<tr>
<th> Fruits </th>
<td> Apple </td>

9
<td> Banana </td>
<td> Pineapple </td>
</tr>
</table>
</body>
</html

OUTPUT:

10
11
5.Write a program in html on forms creation.
<html>
<head>
<body style="background-color:palevioletred;">
<forms>
<h1> Web Programming Experiment-5 </h1>
</head>
<label> Firstname: </label><input type="text" name="Fisrtname" value="typehere"
maxlength="30" size="20"> <br><br>
<label> Middlename: </label><input type="text" name="Middlename" value="typehere"
maxlength="30" size="20"> <br><br>
<label> Lastname: </label><input type="text" name="Lastname" value="typehere"
maxlength="30" size="20"> <br><br>
<p> Course: <select size="1">
<option name="course"> C Language </option>
<option name="course"> C++ Language </option>
<option name="course"> Python Language </option>
<option name="course"> Java Programming </option>
<option name="course"> .Netframework </option>
</select></p>
<p> Gender: <br>
<input type="radio" name="gender"> Male <br>
<input type="radio" name="gender"> Female <br>
<input type="radio" name="gender"> Other <br></p>
<p> Phone:
<input type="text" name="Phone" value="+91" maxlength="3" size="2">
<input type="text" name="Phone" maxlength="11" size="20"></p>
<p> Address:<br>
<textarea rows="8" cols="60"></textarea></p>
<p> Email:
<input type="text" name="Email" maxlength="15" size="20"></p>
<p> Password:
<input type="text" name="Password" maxlength="20" size="20"></p>
<p> Retype Password:
<input type="text" name="Retype Password" maxlength="20" size="20"></p>
<p> Upload File:<br><br>
<input type="file" name="file"></p><br>
<input type="submit" name="submit" value="submit">
</body>
</html>

12
OUTPUT:

13
6.Write a program in html on frames of all types.

<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,25%,25%,25%">
<frame src="FORMS.html"></frame>
<frame src="FORMS2.html"></frame>
<frame src="https://www.javatpoint.com/html-table">
<frame src="https://www.javatpoint.com/css-table">
</frameset>
</html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset rows="50%,20%,30%">
<frame name="bottom" src="FORMS2.html"></frame>
<frame name="top" src="LISTS.html"></frame>
<frame name="top" src="CLASSselector.html"></frame>
</frameset>
</html>

14
OUTPUT:

15
7.Write a program on different types of selectors in html.
i)Selector Elements:
<html>
<head>
<title> SELECTOR-1 </title>
</head>
<style>
p
{
text-align:center;
color:blue;
}
</style>
<body>
<p> This is a sample for selector elements. </p>
<p id="para1"> HELLO! </p>
<p> WELCOME TO HTML!! </p>
</body>
</html>

OUTPUT:

16
17
ii)Selector Class:
<html>
<head>
<title> SELECTOR-2 </title>
</head>
<style>
.center
{
text-align:center;
color:purple;
}
</style>
<body>
<h1 class="center"> This is a sample for Selector Class. </h1>
<p class="center"> Welcome to Web Programming. </p>
</body>
</html>

OUTPUT:

18
iii)Selector Grouping:
<html>
<head>
<title> SELECTOR-3 </title>
</head>
<style>
h1,h2,p
{
color:violet;
text-align:center;
}
</style>
<body>
<h1> HEADING-1 </h1>
<h2> HEADING-2 </h2>
<p> This is a sample for Selector Grouping. </p>
</body>
</html>

OUTPUT:

19
iv)Universal Selector :
<html>
<head>
<title> SELECTOR-4 </title>
</head>
<style>
*
{
color:red;
font-size:40px;
}
</style>
<body>
<h2> HEADING-1 </h2>
<p> This style applied on every paragraph. </p>
<p> AND ME!! </p>
</body>
</html>

OUTPUT:

20
21
v)Selector id :
<html>
<head>
<title> SELECTOR-5 </title>
</head>
<style>
#para1
{
color:purple;
text-align:center;
}
</style>
<body>
<p id="para1"> This is a sample for SELECTOR-ID. </p>
<p> Paragraph. </p>
</body>
</html>

OUTPUT:

22
vi)Specific Element Selector :
<html>
<head>
<title> SELECTOR-6 </title>
</head>
<style>
p
{
color:orange;
text-align:center;
}
</style>
<body>
<p> This is a sample for Specific Element Selector. </p>
<h1> HEADING-1 </h1>
<p> Paragraph. </p>
</body>
</html>

OUTPUT:

23
8.Write a program on various style sheets in html.
i)Inline Style Sheet:
<html>
<body>
<h1 style="color:blueviolet;margin-left:60px;"> Inline CSS is applied on this heading. </h1>
<p> This a paragraph that is not affected. </p>
</body>
</html>

OUTPUT:

ii)Internal Style Sheet:


<html>
<style>
body
{
background-color:cyan;
}
h1
{
color:red;
margin-left:80px;
}
</style>
<body>
<h1> Internal CSS is applied on this heading. </h1>
<p> This a paragraph that is not affected. </p>
</body></html>

24
OUTPUT:

iii)External Style Sheet:


<html>
<head>
<link rel="stylesheet" type="text/css" href="myclass.css">
<h1> WELCOME TO CSS. </h1>
</head>
</html>

OUTPUT:

25
9.Write a program on various properties involved in the
CSS.
<html>
<head>
<title> Properties </title>
</head>
<style>
body
{
background-color:grey;
background-image: url("C:\\Users\\DELL\\Pictures\\Saved Pictures\\image-1.png");
background-repeat:no-repeat;
background-position:right bottom;
background-attachment:fixed;
font-size:100%;
}
p.none
{
border-style:none;
border-color:red;
}
p.dotted
{
border-style:dotted;
border-color:orange;
}
p.dashed
{
border-style:dashed;
border-color:yellow;
border-width:5px;
}
p.solid
{
border-style:solid;
border-color: pink;
}
p.double
{
border-style:double;
border-color:green;
border-width: medium;
}
p.groove
{
border-style:groove;

26
border-color:violet;
}
p.ridge
{
border-style:ridge;
border-color:blue;
}
p.inset
{
border-style:inset;
border-color:aqua;
border-width:1px;
}
p.outset
{
border-style:outset;
border-color:brown;
}
p.hidden
{
border-style:hidden;
}
h1
{
font-family:sans-serif;
}
h2
{
font-family:serif;
}
p
{
font-family:monospace;
}
h3
{
font-style: itallic;
}
h4
{
font-style:oblique;
}
h5
{
font-style:normal;
}
p
{

27
font-variant:small-caps;
}
P
{
font-variant: normal;
}
p.one
{
font-weight:normal;
}
p.two
{
font-weight:lighter;
}
p.three
{
font-weight: bolder;
}
p.four
{
font-weight:bold;
}
p.five
{
font-weight:1000;
}
p.six
{
font-weight:initial;
}
p.seven
{
font-weight:inherit;
}
p.eight
{
font-weight:unset;
}
#first
{
font-size:2.5em;
}
#second
{
font-size:1.875em;
}
#third
{

28
font-size:0.875em;
}
#txt
{
font-size:40px;
font-weight:bold;
text-align:center;
text-transform:uppercase;
text-decoration-line:underline;
text-decoration-style: solid;
text-decoration-thickness:5px;
text-decoration-color:red;
}
#just
{
color:white;
font-size:20px;
font-weight:bolder;
text-align:justify;
text-indent:20px;
letter-spacing:5px;
word-spacing:5px;
line-height:20px;
}
#shadow
{
font-size:75px;
color: blue;
font-weight:bold;
text-align:center;
text-shadow:14px 14px black,24px 24px red,16px 16px green;
}
h6
{
color: pink;
}
span
{
color:green;
}
.order
{
list-style:upper-alpha;
background:pink;
padding:20px;
}
.order li
{

29
background:lightblue;
padding:10px;
font-size:20px;
margin:10px;
}
.unorder
{
list-style:square inside;
background:cyan;
padding:20px;
}
.unorder li
{
background:green;
color:white:
padding:10px;
font-size:20px;
margin:10px;
}
.box
{
width:25%;
height:25%;
border:10px solid blue;
background:linen;
padding:50px;
margin:20px;
}
</style>
<body>
<p style="color:maroon;font-size:50px;"> CSS PROPERTIES. </p>
<p class="none"> NO BORDER.</p>
<p class="dotted"> DOTTED BORDER.</p>
<p class="dashed"> DASHED BORDER.</p>
<p class="solid"> SOLID BORDER.</p>
<p class="double"> DOUBLED BORDER.</p>
<p class="groove"> GROOVED BORDER.</p>
<p class="ridge"> RIDGED BORDER.</p>
<p class="inset"> INSET BORDER.</p>
<p class="outset"> OUTSET BORDER.</p>
<p class="hidden"> HIDDEN BORDER.</p>
<h1> This is a sample for sans-serif.</h1>
<h2> This is a sample for serif.</h2>
<p> This is a sample for monospace.</p>
<p style="font-size:xx-small;"> This font size is extremely small. </p>
<p style="font-size:x-small;"> This font size is extra small. </p>
<p style="font-size: small;"> This font size is small. </p>
<p style="font-size: medium;"> This font size is medium. </p>

30
<p style="font-size: large;"> This font size is large. </p>
<p style="font-size:x-large;"> This font size is extra large. </p>
<p style="font-size:xx-large;"> This font size is extremely large. </p>
<p style="font-size: smaller;"> This font size is smaller.
</p> <p style="font-size: larger;"> This font size is larger. </p>
<p style="font-size: 200%;"> This font size is 200%. </p>
<p style="font-size: 20px;"> This font size is 20px. </p>
<h3> ITALLIC </h3>
<h4> OBLIQUE </h4>
<h5> NORMAL </h5>
<p> heading. </p>
<p> Different Style. </p>
<p class="one"> NORMAL PROPERTY.</p>
<p class="two"> LIGHTER PROPERTY.</p>
<p class="three"> BOLDER PROPERTY.</p>
<p class="four"> BOLD PROPERTY.</p>
<p class="five"> PROPERTY.</p>
<p class="six"> PROPERTY.</p>
<p class="seven"></p>
<p class="eight"> PROPERTY. </p>
<p id="first"> text-1. </p>
<p id="second"> text-2. </p>
<p id="third"> text-3. </p>
<div id="txt"> WEB TECHNOLOGIES. </div> <br><br>
<div id="just"> There are 2 types of packages in java.They are user-defined packages and pre-
defined packages.
</div> <br><br>
<div id="shadow"> WEB PROGRAMING. </div>
<h6> This is my <span> paragraph.</span></h6>
<h1> Welcome to javatpoint.com </h1>
<h2> Ordered Lists: </h2>
<ol class="order">
<li> ONE </li>
<li> TWO </li>
<li> THREE </li>
</ol>
<h2> Unordered Lists: </h2>
<ul class="unorder">
<li> Mango </li>
<li> Apple </li>
<li> Banana </li>
</ul>
<div class="box"> Welcome to WEB PROGRAMMING!! </div>
<div class="box"> Welcome to WEB PROGRAMMING!! </div>
<div class="box"> Welcome to WEB PROGRAMMING!! </div>
</body>
</html>

31
OUTPUT:

32
33
10.a)Write a program to find the greatest of three numbers
using javascript.
<html>
<head>
<title> Greatest of three numbers: </title>
</head>
<body>
<script>
var n1,n2,n3;
n1=parseInt(window.prompt("enter the value of n1:"));
n2=parseInt(window.prompt("enter the value of n2:"));
n3=parseInt(window.prompt("enter the value of n3:"));
if(n1>n2 && n1>n3)
{
document.write(n1);
}
else if(n2>n1 && n2>n3)
{
document.write(n2);
}
else
{
34
document.write(n3);
}
</script>
</body>
</html>

35
OUTPUT:

36
b)Write a program to find the given number is amstrong or
not using javascript.
<html>
<head>
<title> Amstrong number: </title>
</head>
<body>
<script>
var n,sum=0,d,temp;
n=parseInt(window.prompt("enter the value of n:"));
temp=n
while(n!=0)
{
d=n%10;
sum=sum+(d*d*d);
n=parseInt(n/10);
}
if(sum==temp)
{
document.write("It is an Amstrong number.");
}
else
{
document.write("It is not an Amstrong number.");
}
</script>
</body>
</html>

37
OUTPUT:

38
c)Write a program to find the reverse of a number using
javascript.
<html>
<head>
<title> Reverse of a number: </title>

</head>
<body>
<script>

var n,d,rev;
n=parseInt(window.prompt("enter the value of n:"));
temp=n;

rev=0;
while(n!=0)
{
d=n%10;

rev=rev*10+d;
n=parseInt(n/10);
}

document.write("Reverse of " +temp+ " is: ",+rev);


</script>
</body></html>

39
OUTPUT:

40
d)Write a program to find the factorial of a number using
javascript.
<html>

<head>

<title> Factorial of a number: </title>

</head>

<body>

<script>

var num;

function fac(n)

if(n==1)

return 1;

else

return n * fac(n-1);

num=parseInt(window.prompt("Enter a number:"));

document.write("Factorial value of " + num + " is : " + fac(num));

</script></body></html>

41
OUTPUT:

42
e)Write a program to find the square root of a number
using javascript.
<html>
<head>

<title> Square root of a number: </title>


</head>
<p> Square Root of 23 is: <span id="p1"></span></p>
<body>

<script>
document.getElementById("p1").innerHTML=Math.sqrt(23);
</script>

</body>
</html>

OUTPUT:

43
11.Write a program on arrays javascript using all the three
procedures.
a)Procedure-1:
<html>
<body>
<script>
var emp=["Shiva","Hanuman","Krishna"];
for(i=0;i<emp.length;i++)
{
document.write(emp[i] + "<br/>");

}
</script>
</body>

</html>

OUTPUT:

44
b)Procedure-2:
<html>
<body>

<script>
var i;
var emp=new Array();

emp[0]="Alex;
emp[1]="Will smith";
emp[2]="Tony Stark";

for(i=0;i<emp.length;i++)
{
document.write(emp[i] + "<br>");

}
</script>
</body>

</html>

OUTPUT:

45
c)Procedure-3:
<html>
<body>

<script>
var emp=new Array("PETER","THOR","LOKI");
for(i=0;i<emp.length;i++)

{
document.write(emp[i] + "<br>");
}

</script>
</body>
</html>

OUTPUT:

46
12.Write a program on Regular Expression.
<html>
<head>
<title>Regular Expression</title>
</head>
<body>
<h1>Javascript Regular Expressions:</h1>
<h2>Search:</h2>
<p>Do a case-insensitive Search for "w3schools"in the string.</p>
<p>String: <span style="color: blue;">visit w3schools</span></p>
<p>Result: <span id="demo"></span></p>
<h2>Replace:</h2>
<p>Replace "Microsoft" with "w3schools" in the paragraph below:</p>
<button onclick="myfunction()"> Try it</button>
<p id="demo1"> Please visit Microsoft!</p>
<h2>Global Search:</h2>
<p>Do a global serach for "is" in a string:</p>
<p>String: <span style="color: blue;">Is this all there is ?</span></p>
<p>Result: <span id="demo2"></span></p>
<script>
let text="visit w3schools";
let pattern=/w3schools/i;
let result=text.match(pattern);
document.getElementById("demo").innerHTML=result;
function myfunction()
{
let text=document.getElementById("demo1").innerHTML;

document.getElementById("demo1").innerHTML=text.replace(/Microsoft/i,"w3sc
hools");
}
let text1="Is this all there is ?";
let result1=text1.match(/is/g);
document.getElementById("demo2").innerHTML=result1;
</script>
</body>
</html>

47
OUTPUT:

48
13.Write a program on all the event handlers.
a)Mouse Event Handler:
<html>
<head>
<title>Mouse Events</title>
</head>
<body>
<h1>Mouse Events</h1>
<script>
function click()
{
alert("clicked");
}
function mouseover()
{
alert("hovering");
}
function mousedown()
{
alert("Mouse Down");
}
function mouseup()
{
alert("mouse up");
}
function mouseout()
{
alert("Cursor Left");
}
function mousemove()
{
alert("mouse moving");
}
</script>
<h3 onmouseover="mouseover()" onmouseout="mouseout()">Hover over me!</h3>
Enter text: <input type="text" onmousedown="mousedown()" onmouseup="mouseup()">
<button onclick="click()">Click Me</button>
</body>
</html>

49
OUTPUT:

b)Keyboard Event Handler:


<html>

<head>

<title>Keyboard Events</title>

</head>

<body>

<h1>Keyboard Events</h1>

<script>

function keydown()

document.getElementById("tb1");

alert("Pressed a key");

function keyup()

document.getElementById("tb2");

alert("Released a key");

50
}

</script>

Name: <input type="text" id="tb1" onkeydown="keydown()">

College: <input type="text" id="tb2" onkeyup="keyup()">

</body>

</html>

OUTPUT:

51
c)Form Event Handler:
<html>
<head>
<title>Form Events</title>
</head>
<body>
<h1>Form Events</h1>
<script>
function focusevent()
{
document.getElementById("tb1").style.backgroundColor="blue";
}
function submitevent()
{
alert("Form Submitted!");
}
function blurevent()
{
alert("Focus Shifted!");
}
function changeevent()
{
alert("Content Changed!");
}
</script>
<form onsubmit="submitevent()">
Name: <input type="text" id="tb1" onfocus="focusevent()"
onblur="blurevent()">
Enter Text: <input type="text" id="tb2" value="Type Here"
onchange="changeevent()">
<input type="submit" value="Submit">
</form>
</body>
</html>

52
OUTPUT:

53
d)Window Event Handler:
<html>

<head>

<title>Window/Document Events</title>

</head>

<body onload="loadevent()" onunload="unloadevent()" onresize="resizeevent()">

<script>

function loadevent()

alert("Window Loaded!");

function unloadevent()

alert("Window Unloaded!");

function resizeevent()

alert("Window Resized!");

</script>

<h1>Window/Document Events</h1>

<p>Loading, Unloading</p>

<p>Try resizing the page</p> </body></html>

OUTPUT:
54
55
14.Write a program on validating username and password.
<html>
<body>
<script>
function validateform()
{
var name=document.myform.name.value;
var password=document.myform.password.value;
if(name==null || name=="")
{
alert("Name cannot be blank.");
return false;
}
elseif(password.length<6)
{
alert("Password must be atleast 6 characters long.");
return false;
}
}
</script>
<form name="myform" method="post"
action="https://www.javatpoint.com/javascriptpages/valid.jsp" onsubmit="return
validateform()">
Name:<input type="text" name="name"><br/>
Password:<input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
</body>
</html>

56
OUTPUT:

57
15.Write a program on XML of the following
a)Email:
<emails>

<email>

<to> Vimal </to>

<from> Kamal </from>

<heading> HELLO! </heading>

<body> HELLO BROTHER!, HOW ARE YOU? </body>

</email>

<email>

<to> Raj </to>

<from> Kumar </from>

<heading> BIRTHDAY WISH! </heading>

58
<body> HAPPY BIRTHDAY BUDDY!!! </body>

</email>

<email>

<to> James </to>

<from> John </from>

<heading> MORNING WALK! </heading>

<body> PLEASE START THE MORNING WALK.! </body>

</email>

</emails>

59
OUTPUT:

60
b)Bookstore:
<bookstore>

<book category="COOKING">

<title lang="en"> EVERYDAY ITALIAN.! </title>

<author> Giada De Laurentiis </author>

<year> 2005 </year>

<price> 50.00 </price>

</book>

<book category="CHILDREN">

<title lang="en"> HARRY POTTER..!! </title>

<author> JK.Rowling </author>

<year> 2005 </year>

<price> 30.00 </price>

</book>

<book category="WEB">

<title lang="en"> Learning XML </title>

<author> Erik T.Ray </author>

<year> 2003 </year>

<price> 49.95 </price>

</book>

</bookstore>

61
OUTPUT:

62
c)Student:
<college>
<student>

<firstname> THEDDU </firstname>


<lastname> PARANJAI </lastname>
<contact> 8074607324 </contact>
<email> PARANJA2@gmail.com </email>

<address>
<city> HYDERABAD </city>
<state> TELANGANA </state>

<pin> 500040 </pin>


</address>
</student>

</college>

63
OUTPUT:

64
16.Write a program on DTD.
<? xml version="1.0"?>
<! DOCTYPE employee SYSTEM "employee.dtd">

<employee>
<firstname> Vihar </firstname>
<lastname> Shetty </lastname>

<email> Vihar </email>


</employee>

Save the above file as “employee.xml”.


Create a new file as “employee.dtd”.
<!DOCTYPE employee: it defines that the root element of the
document is employee.
<!Element employee: it defines that the employee elemnet contains 3
elements "firstname,lastname,email".
<!Element firstname: it defines that the firstname element isin
#PCDATA type(parse-able).
<!Element lastname: it defines that the lastname element isin
#PCDATA type(parse-able).
<!Element email: it defines that the email element isin #PCDATA
type(parse-able).

65
17.Write a program on XSLT.
Create a new file:

<?xml version="1.0"?>

<!DOCTYPE employee SYSTEM "employee.dtd">

<employee>

<firstname>vimal</firstname>

<lastname>jaiswal</lastname>

<email>vimal@javatpoint.com</email>

</employee>

Save the above file as “employee.xml”

Create a new file:


<?xml version = "1.0"?>

<?xml-stylesheet type = "text/xsl" href = "employeexslt.xsl"?>

<class>

<employee id = "001">

<firstname>Aryan</firstname>

<lastname>Gupta</lastname>

<nickname>Raju</nickname>

<salary>30000</salary>

</employee>

<employee id = "024">

<firstname>Sara</firstname>

<lastname>Khan</lastname>

<nickname>Zoya</nickname>

<salary>25000</salary>

66
</employee>

<employee id = "056">

<firstname>Peter</firstname>

<lastname>Symon</lastname>

<nickname>John</nickname>

<salary>10000</salary>

</employee>

</class>

Save the above file as “employeexslt.xml”


Create a new file:
<html>

<body>

<h2>Employee</h2>

<table border = "1">

<tr bgcolor = "#9acd32">

<th>ID</th>

<th>First Name</th>

<th>Last Name</th>

<th>Nick Name</th>

<th>Salary</th>

</tr>

<!-- for-each processing instruction

Looks for each element matching the XPath expression

-->

<xsl:for-each select="class/employee">

67
<tr>

<td>

<!-- value-of processing instruction

process the value of the element matching the XPath expression

-->

<xsl:value-of select = "@id"/>

</td>

<td><xsl:value-of select = "firstname"/></td>

<td><xsl:value-of select = "lastname"/></td>

<td><xsl:value-of select = "nickname"/></td>

<td><xsl:value-of select = "salary"/></td>

</tr>

</xsl:for-each>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

Save the above file as “employeexslt.xsl”.

68
Order of excuting the programs:

i) “employee.xml”
ii) “employeexslt.xml”
iii) “employeexslt.xml”

OUTPUT:

69
18.Write a program on control statements in php.
<?php
echo "conditional statements <br>";
//if statement
$x=3;
if($x>0){
echo "x is greater than 0<br>";
}
//if-else statement
if($x%2==0){
echo "x is even<br>";
}
else{
echo "x is odd<br>";
}
//if elseif else statement
if($x<0){
echo "x is less than zero<br>";
}
elseif($x>0){
echo "x is greater than zero<br>";
}
else{
echo "x is zero<br>";
}
//switch
switch($x){
case 0: echo "x = 0<br>";
break;
case 1: echo "x = 1<br>";
break;
case 2: echo "x = 2<br>";
break;
case 3: echo "x = 3<br>";
break;
default: echo "x > 3<br>";
}

echo "<br>Loops <br>";


//while
$i=0;
while($i<5){
echo "$i ";
$i++;
}
echo "<br>";
//do while
70
do{
echo "do-while ";
echo "$i ";
$i--;
}while($i!=0);
echo "<br>";
//for
for($i=0;$i<5;$i++){
echo "$i ";
}
echo "<br>";

echo "<br>Jump Statements <br>";


//break
for($i=0;$i<5;$i++){
if($i==3){
break;
}
echo "$i ";
}
echo "<br>";
//continue
for($i=0;$i<5;$i++){
if($i==3){
continue;
}
echo "$i ";
}
?>

71
OUTPUT:

72
19.Write a program on array declaration in php by using all
the three procedures.
<?php
//indexed array
echo "indexed array<br>";
$arr=array(1,2,3,4,5);
for($i=0;$i<5;$i++){
echo "$arr[$i]<br>";
}

//associate array
echo "<br>associate array<br>";
$salary = array("Sonu"=>"550000", "Vimal"=>"250000",
"Kamal"=>"400000");
echo "Sonu salary: " . $salary["Sonu"] . "<br>";
echo "Vimal salary: " . $salary["Vimal"] . "<br>";
echo "Kamal salary: " . $salary["Kamal"] . "<br>";

//multidimensional array
echo "<br>multidimensional array<br>";
$emp = array(
array(1, "sonu", 550000),
array(2, "vimal", 250000),
array(3, "kamal", 400000),
);
for($row=0;$row<3;$row++){
for($col=0;$col<3;$col++){
echo $emp[$row][$col]." ";
}
echo "<br>";
}
?>

73
OUTPUT:

74
20.Write a program on Math functions in php.
<?php
$x=-12; $y=36; $z=3;
$a=12.24; $b=9.67;
$s="hello";
//abs()
echo "abs()<br>";
echo abs($x) . "<br>";
echo abs($y) . "<br>";

//ceil()
echo "<br>ceil()<br>";
echo ceil($a) . "<br>";
echo ceil($b) . "<br>";

//floor()
echo "<br>floor()<br>";
echo floor($a) . "<br>";
echo floor($b) . "<br>";

//round()
echo "<br>round()<br>";
echo round($a) . "<br>";
echo round($b) . "<br>";

//is_finite()
echo "<br>is_finite()<br>";
echo var_dump(is_finite($x)) . "<br>";
echo var_dump(is_finite(log(0))) . "<br>";

//in_nan()
echo "<br>is_nan()<br>";
echo var_dump(is_nan($x)) . "<br>";
echo var_dump(is_nan(acos(1.01))) . "<br>";

$arr=array(5,8,10,15,13,60);
echo "<br>Max: " . max($arr) . "<br>";
echo "Min: " . min($arr) . "<br>";

//sqrt()
echo "<br>sqrt()<br>";
echo sqrt($y) . "<br>";
echo sqrt($z);
?>

75
OUTPUT:

76

You might also like