1) Write A HTML Program To Implement Formatting Tags
1) Write A HTML Program To Implement Formatting Tags
1) Write A HTML Program To Implement Formatting Tags
<html>
<head>
<title>Program1/Formatting Tags</title>
</head>
<body>
<b>Bold data</b></br>
<i>Italic data</i></br>
<em>emphasised data</em></br>
<big>data in big</big></br>
H<sub>2</sub>O</br>
2<sup>2</sup></br>
<strike>strike on data</strike></br>
</body>
</html>
Output:-
Page 1
Web Technologies Practical Record
<html>
<head>
<title>Program/Logical Tags</title>
</head>
<body>
<em>emphasised data</em></br>
</body>
</html>
Output:-
Page 2
Web Technologies Practical Record
<html>
<head>
<title>Program3/Heading Tags</title>
</head>
<body>
</body>
</html>
Page 3
Web Technologies Practical Record
Output:-
4. Write a HTML program to illustrate Anchor tag along with all attributes.
<html>
<head>
<title>Program4/Heading Tags</title>
</head>
<body>
</body>
</html>
Output:-
Page 4
Web Technologies Practical Record
<html>
<head>
<title>Program5/Image Tag</title>
</head>
<body>
<imgsrc="C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg"
width="200px" height="200px" title="image" align="middle" border="4px" hspace="4"
vspace="4">
</body>
</html>
Output:-
Page 5
Web Technologies Practical Record
6. Create a Webpage to display the text ALLTHE BEST .aligned with images.
<html>
<head>
</head>
<body>
</body>
</html>
Output:-
Page 6
Web Technologies Practical Record
7. Write HTML program to implement font Tags along with its attributes.
<html>
<head>
<title>Program7/Font</title>
</head>
<body>
<body>
</html>
Output:-
Page 7
Web Technologies Practical Record
8. Write HTML program to illustrate List Formatting tags for the streams available in
college.
<html>
<head>
<title>Program8/Order List</title>
</head>
<body>
<h1>Order List</h1>
<ol type="A">
<li>Web</li>
<li>Excel</li>
<li>B Law</li>
</ol>
<h1>UnOrder List</h1>
Page 8
Web Technologies Practical Record
<ul type="square">
<li>Web</li>
<li>Excel</li>
<li>B Law</li>
</ul>
<h1>Menu List</h1>
<ol type="1">
<li>Courses in S V College
<ol type="i">
<li>Bcom
<ul type="square">
<li>Computers</li>
<li>Gen(E/M)</li>
<li>Gen(T/M)</li>
</ul>
</li>
<li>BBA
<ul type="circle">
<li>Computers</li>
<li>Commerce</li>
</ul>
</li>
</ol>
<h1>Definition List</h1>
<dl>
Page 9
Web Technologies Practical Record
<dt>Srujana</dt>
<dd>Lecturer in Computers</dd>
</dl>
</body>
</html>
Output:-
9. Create a Webpage to display order list, unordered list on the subjects available in Fifth
semester
<html>
<head>
<title>Program9/Order List</title>
</head>
<body>
<h1>Order List</h1>
Page 10
Web Technologies Practical Record
<ol type="1">
<li>Excel Foundation</li>
<li>Business Law</li>
<li>Accounting Standards</li>
<li>Web Technology</li>
</ol>
<h1>UnOrder List</h1>
<ul type="disc">
<li>Excel Foundation</li>
<li>Business Law</li>
<li>Accounting Standards</li>
<li>Web Technology</li>
</ol>
</body>
</html>
Output:-
Page 11
Web Technologies Practical Record
10. Create a Table with Four rows and four columns in HTML.
<html>
<head>
<title>Program10/Table</title>
</head>
<body>
<h1>Table</h1>
<table border=4>
<tr>
<th>S.no</th>
<th>Name</th>
<th>Address</th>
<th>Phone No</th>
</tr>
<tr>
<td>1</td>
Page 12
Web Technologies Practical Record
<td>A</td>
<td>MP</td>
<td>1234</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>MP</td>
<td>1234</td>
</tr>
<tr>
<td>3</td>
<td>B</td>
<td>GM</td>
<td>5678</td>
</tr>
<tr>
<td>4</td>
<td>ABCD</td>
<td>MP</td>
<td>2589</td>
</tr>
</table>
</body>
</html>
Output:-
Page 13
Web Technologies Practical Record
11. Write a HTML program to create a Time-table of your College using necessary options
such as
Cellpadding, Cellspacing ,colspan , rowspan .
<html>
<head>
<title>Program11/Tables</title>
</head>
<body bgcolor="yellow">
<tr>
<th>Time/Day</th>
<th>9:00-9:45</th>
<th>9:45-10:30</th>
<th>10:30-11:15</th>
<th>11:15-12:00</th>
<th>12:00-12:45</th>
<th>12:45-1:00</th>
Page 14
Web Technologies Practical Record
<th>1:00-1:45</th>
<th>1:45-2:30</th>
</tr>
<tr>
<td>Monday</td>
<td>Business Law</td>
<td>Practise of Insurance</td>
<td>Excel Foundation</td>
<td>Web Technologies</td>
<td>Computer Accountancy</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Business Law</td>
<td>Practise of Insurance</td>
<td>Excel Foundation</td>
<td>Web Technologies</td>
<td>Computer Accountancy</td>
</tr>
<tr>
Page 15
Web Technologies Practical Record
<td>Wednsday</td>
<td>Business Law</td>
<td>Practise of Insurance</td>
<td>Excel Foundation</td>
<td>Web Technologies</td>
<td>Computer Accountancy</td>
</tr>
<tr>
<td>Monday</td>
<td>Business Law</td>
<td>Practise of Insurance</td>
<td>Excel Foundation</td>
<td>Web Technologies</td>
<td>Computer Accountancy</td>
</tr>
<tr>
<td>Thursday</td>
<td>Business Law</td>
<td>Practise of Insurance</td>
<td>Excel Foundation</td>
<td>Web Technologies</td>
Page 16
Web Technologies Practical Record
<td>Computer Accountancy</td>
</tr>
<tr>
<td>Friday</td>
<td>Business Law</td>
<td>Practise of Insurance</td>
<td>Excel Foundation</td>
<td>Web Technologies</td>
<td>Computer Accountancy</td>
</tr>
<tr>
<td>Saturday</td>
<td>Business Law</td>
<td>Practise of Insurance</td>
<td>Excel Foundation</td>
<td>Web Technologies</td>
<td>Computer Accountancy</td>
</tr>
</table>
</body>
</html>
Output:-
Page 17
Web Technologies Practical Record
<html>
<head>
<title>Program12/Marquee</title>
</head>
<body>
<marquee><imgsrc="E:\Hari\college photo.jpg"></marquee>
</body>
</html>
Output:-
Page 18
Web Technologies Practical Record
13. Create a Web Page in which the text " WEB TECHNOLOGY " should scroll in
different directions
for four times .
<html>
<head>
<title>Program13/Marquee</title>
</head>
<body>
<marquee><b><u>WEB TECHNOLOGY<u></b></marquee>
</body>
</html>
Page 19
Web Technologies Practical Record
Output:-
14. Create a table using all its attributes and sub tags to execute the following
Information .
Page 20
Web Technologies Practical Record
<html>
<head>
<title>Program14/Tables</title>
</head>
<body bgcolor="yellow">
<tr>
<th>S.No</th>
<th>Name</th>
<th>Specialization</th>
</tr>
<tr>
<td>1</td>
<td>Ada Lovelace</td>
</tr>
<tr>
<td>2</td>
<td>Adam Osborne</td>
</tr>
<tr>
<td>3</td>
<td>AbhayBhushan</td>
</tr>
Page 21
Web Technologies Practical Record
<tr>
<td>4</td>
<td>Alan Cooper</td>
</tr>
<tr>
<td>5</td>
<td>Alan Emtage</td>
</tr>
<tr>
<td>6</td>
<td>Alan Schaaf</td>
<td>Founder of " Imgur " which is the world's largest image hosting
site .</td>
</tr>
<tr>
<td>7</td>
<td>Alexander Douglas</td>
</tr>
<tr>
<td>8</td>
<td>Andreas Bechtolsheim</td>
</tr>
</table>
Page 22
Web Technologies Practical Record
</body>
</html>
Output:-
15. Create a Program on the concept of Form containing Textboxes, Radio Buttons and
Check boxes.
<html>
<head>
<title>Program15/Forms</title>
</head>
<body bgcolor="pink">
<h3 align="center"><u>Application</u></h3>
<form action="abc.php">
<tr>
<td>Name</td>
<td>:</td>
Page 23
Web Technologies Practical Record
</tr>
<tr>
<td>Father Name</td>
<td>:</td>
</tr>
<tr>
<td>Gender</td>
<td>:</td>
</tr>
<tr>
<td>Languages</td>
<td>:</td>
</tr>
</table>
</form>
</body>
</html>
Output:-
Page 24
Web Technologies Practical Record
<html>
<head>
<title>Program16/Emplyeee form</title>
</head>
<body bgcolor="pink">
<form action="abc.php">
<tr>
<td>Name</td>
<td>:</td>
</tr>
<tr>
<td>Fname</td>
<td>:</td>
Page 25
Web Technologies Practical Record
</tr>
<tr>
<td>Designation</td>
<td>:</td>
</tr>
<tr>
<td>Qualification</td>
<td>:</td>
</tr>
<tr><td>Phno</td>
<td>:</td>
<tr>
<td>Gender</td>
<td>:</td>
</tr>
<tr>
<td>Languages</td>
<td>:</td>
</tr>
<tr>
<td>D.O.B</td>
Page 26
Web Technologies Practical Record
<td>:</td>
<td><select name="date">
<option>Date</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select name="month">
<option>Month</option>
<option>Jan</option>
<option>Feb</option>
</select>
<option>Year</option>
<option>1987</option>
<option>2019</option>
</select></td>
</tr>
<tr>
<td>Address</td>
<td>:</td>
</tr>
<tr>
<td>Password</td>
Page 27
Web Technologies Practical Record
<td>:</td>
<td><input type="password"></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</form>
</body>
</html>
Output:-
Page 28
Web Technologies Practical Record
17. Write a program to create Pull down menu on the universities available in Telangana
State.
<html>
<head>
<title>Program16/Emplyeee form</title>
</head>
<body bgcolor="orange">
<form>
Universities in Telengane:
<select>
<option>Select University</option>
<option>Osmania University</option>
<option>Dr.B.RAmbedkar University</option>
<option>Telengane University</option>
<option>Kakatiya University</option>
<option>University Of Hyderabad</option>
<option>Palamuru University</option>
<option>Satavahana University</option>
</select>
</form>
</body>
</html>
Output:-
Page 29
Web Technologies Practical Record
18. Write a program to create Pull down menu on various Web Designing Softwares.
<html>
<head>
<title>Program18/Emplyeee form</title>
</head>
<body bgcolor="orange">
<form>
<select>
<option>Joomla</option>
<option>Wordpress</option>
<option>Drupal</option>
<option>Adobe Dreamweaver</option>
<option>Template Toaster</option>
<option>CoffeCup</option>
<option>Xara</option>
<option>openElement</option>
</select>
</form>
</body>
</html>
Output:-
19. Create a Web Page of student information form, when the information is submitted
message
should be displayed .
<html>
<head>
<title>Program19/Student form</title>
<script>
functionconfirmInput() {
fname = document.forms[0].fname.value;
Page 31
Web Technologies Practical Record
</script>
</head>
<body bgcolor="pink">
<tr>
<td>Name</td>
<td>:</td>
</tr>
<tr>
<td>Fname</td>
<td>:</td>
</tr>
<tr><td>Phno</td>
<td>:</td>
<tr>
<td>Gender</td>
<td>:</td>
</tr>
<tr>
<td>Languages</td>
Page 32
Web Technologies Practical Record
<td>:</td>
</tr>
<tr>
<td>D.O.B</td>
<td>:</td>
<td><select name="date">
<option>Date</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select name="month">
<option>Month</option>
<option>Jan</option>
<option>Feb</option>
</select>
<option>Year</option>
<option>1987</option>
<option>2019</option>
</select></td>
</tr>
<tr>
<td>Address</td>
Page 33
Web Technologies Practical Record
<td>:</td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password"></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</form>
</body>
</html>
Output:-
Page 34
Web Technologies Practical Record
<html>
<head>
<title>Program20/Using frames</title>
</head>
<frameset cols="25%,25%,25%,25%">
<frame src="frame1.html">
<frame src="frame2.html">
<frame src="frame3.html">
<frame src="frame4.html">
</frameset>
</html>
Output:-
Page 35
Web Technologies Practical Record
<html>
<head>
<title>Program21/Using frames</title>
</head>
<frameset rows="25%,25%,25%,25%">
<frame src="frame1.html">
<frame src="frame2.html">
<frame src="frame3.html">
<frame src="frame4.html">
</frameset>
</html>
Output:-
Page 36
Web Technologies Practical Record
<html>
<head>
<title>Program22/DHTML</title>
<style>
h1
color:red;
font-size:50px;
font-family:algerian;
.a
margin:50px;
color:blue;
.b
Page 37
Web Technologies Practical Record
margin:150px;
color:red;
</style>
</head>
<body bgcolor="yellow">
</body>
</html>
Output:-
Page 38
Web Technologies Practical Record
<html>
<head>
</head>
<body bgcolor="yellow">
<table>
<tr>
</tr>
</table>
</body>
</html>
Output:-
Page 39
Web Technologies Practical Record
HTML PROGRAM:
<html>
<head>
<title>Program24/External</title>
</head>
<body>
</body>
</html>
CSS PROGRAM:
body
background-color:pink;
.e
color:cyan;
font-size:50px;
Page 40
Web Technologies Practical Record
font-family:algerian;
.f
color:yellow;
font-size:50px;
font-family:algerian;
.m
color:purple;
font-size:50px;
font-family:algerian;
.a
margin:50px;
color:blue;
.b
margin:150px;
color:red;
.c
{
Page 41
Web Technologies Practical Record
margin:250px;
color:brown;
.d
margin:250px;
color:#orange;
Output:-
<html>
<head>
<title>Program25/Internal</title>
<style>
body
background-color:pink;
Page 42
Web Technologies Practical Record
h1
color:red;
font-size:50px;
font-family:algerian;
.a
margin:50px;
color:blue;
.b
margin:150px;
color:red;
.c
margin:250px;
color:green;
</style>
</head>
<body>
Page 43
Web Technologies Practical Record
</body>
</html>
Output:-
26. Write a DHTML program to illustrate Id and Class Selectors using CSS.
<html>
<head>
<style>
body
background-color:pink;
Page 44
Web Technologies Practical Record
h1
color:blue;
font-size:50px;
font-family:algerian;
.a
margin:50px;
color:blue;
.b
margin:150px;
color:green;
#c
margin:250px;
color:red;
#d
margin:250px;
color:yellow;
Page 45
Web Technologies Practical Record
</style>
</head>
<body>
</body>
</html>
Output:-
<html>
<head>
Page 46
Web Technologies Practical Record
<title>Program27/Filters</title>
</head>
<body>
<br><br><br><br><br><br>
<div style="width:580;height:50;font-size:30pt;font-family:Arial
Black;color:#3300Ff;Filter:Chroma(Color = #3300FF);">
</div>
<br><br><br><br><br><br>
<div style="width:580;height:50;font-size:30pt;font-family:Arial
Black;color:#3300Ff;Filter:Blur(Add=5,Direction=255, Strength=30">
</div>
<br><br><br><br><br><br>
<div style="width:580;height:50;font-size:30pt;font-family:Arial
Black;color:#3300Ff;Filter:Flipv;">
</div>
<br><br><br><br><br><br>
<div style="width:580;height:50;font-size:30pt;font-family:Arial
Black;color:#3300Ff;Filter:Fliph;">
Page 47
Web Technologies Practical Record
</div>
<br><br><br><br><br><br>
<div style="width:580;height:50;font-size:30pt;font-family:Arial
Black;color:#3300Ff;filter:shadow(color:red,direction=90);">
</div>
<br><br><br><br><br><br>
<div style="width:580;height:50;font-size:30pt;font-family:Arial
Black;color:#3300Ff;filter:dropshadow(color:red,direction=90);">
</div>
<br><br><br><br><br><br>
<div style="width:580;height:50;font-size:30pt;font-family:Arial
Black;color:#3300Ff;filter:wave(strength=10);">
</div>
<br><br><br><br><br><br>
<div style="width:580;height:50;font-size:30pt;font-family:Arial
Black;color:#3300Ff;filter:xray;">
</div>
<br><br><br><br><br><br>
<div style="width:580;height:50;font-size:30pt;font-family:Arial
Black;color:#3300Ff;filter:gray;">
</div>
Page 48
Web Technologies Practical Record
<br><br><br><br><br><br>
<div style="width:580;height:50;font-size:30pt;font-family:Arial
Black;color:#3300Ff;filter:invert;">
</div>
<br><br><br><br><br><br>
<div style="width:580;height:50;font-size:30pt;font-family:Arial
Black;color:#3300Ff;filter:mask(color=red);">
</div>
</body>
</html>
Output:-
<!DOCTYPE html>
<html>
Page 49
Web Technologies Practical Record
<head>
<title>Program28/transition</title>
<style>
div {
width:200px;
height:200px;
background:blue;
transistion:width 2s;
div:hover {
width:500px;
background:red;
</style>
</head>
<body>
<div></div>
</body>
</html>
Output:-
Page 50
Web Technologies Practical Record
29. Write a DHTML program to demonstrate changing text and attributes using CSS.
<html>
<head>
<title>Program29/text styles</title>
<style>
body
color:yellow;
color:gray;
h1
Page 51
Web Technologies Practical Record
color:red;
text-align:center;
text-decoration:overline;
text-transform:uppercase;
letter-spacing:3px;
line-height:1;
h2
color:blue;
text-align:left;
text-decoration:line-through;
text-transform:lowercase;
letter-spacing:-5px;
line-height:2;
h3
color:cyan;
text-align:right;
text-decoration:underline
color:green;
text-indent:50px;
Page 52
Web Technologies Practical Record
</style>
</head>
<body>
<b>Text-align</b>
<h1>align-center</h1>
<h2>align-left</h2>
<h3>align-right</h3>
<b>Text-decoration</b>
<h1>text-decoration-overline</h1>
<h2>text-decoration-line-through</h2>
<h3>text-decoration-underline</h3>
<h4>text-decoration-None</h4>
<b>Text-Transformation</b>
<h1>text-transform-uppercase</h1>
<h2>text-transform-lowercase</h2>
<h3>text-transform-capital</h3>
<b>Text-Indenation</b>
<p>Indentation</p>
<b>Letter Spacing</b>
<h1>Letter Spacing:3px</h1>
<h2>Letter Spacing:-3px</h2>
Page 53
Web Technologies Practical Record
<b>Line height</b>
<h1>Line height:0.8</h1>
<h2>Line height:1.6</h2>
<b>word space</b>
<h1>word space:10px</h1>
<h2>word space:-10px</h2>
</body>
</html>
Output:-
30. Write a Java Script program to calculate Area and circumference of a Circle .
Page 54
Web Technologies Practical Record
<html>
<head>
<title>Program30/js area</title>
<script language="javascript">
functionCalculateare()
var radius=document.form1.txtRadius.value;
</script>
</head>
<body>
<form name="form1">
<br>
</form>
</body>
</html>
Output:-
Page 55
Web Technologies Practical Record
31. Write a Java Script program to display Greatest Number among Three Numbers .
<html>
<head>
<script language="javascript">
var a=10,b=20,c=8;
Page 56
Web Technologies Practical Record
document.write("<b>A is Greater</b>");
document.write("<b>B is Greater</b>");
else
document.write("<b>C is Greater</b>");
</script>
</head>
<body>
</body>
</html>
Output:-
32 . Write a Java Script program to demonstrate Arithmetic Operations using Switch case.
Page 57
Web Technologies Practical Record
<html>
<head>
<script language="javascript">
var operator='*';
var a=10,b=12;
switch(operator)
case '+':
break;
case '-':
break;
case '*':
break;
case '/':
break;
case '%':
break;
default:
document.write("None");
break;
Page 58
Web Technologies Practical Record
</script>
</head>
<body>
</body>
</html>
Output:-
33. Write a Java Script program to print Odd numbers using while loop.
<html>
<head>
<title>Program31/js odd</title>
<script language="javascript">
vari=1,n=100;
while(i<=n)
if((i%2)!=0)
document.writeln(i);
document.writeln("</br>")
Page 59
Web Technologies Practical Record
i++;
</script>
</head>
<body>
</body>
</html>
Output:-
<html>
<head>
<title>Program34/js Multiplication table</title>
<script language="javascript">
Page 60
Web Technologies Practical Record
functiongenerateTable()
{
varmyVar=2;
varmyString="";
for(i=1;i<=10;i++)
{
myString+=i+"X"+myVar+"="+(i*myVar)+"</br>";
}
document.write(myString);
}
</script>
</head>
<body>
<a href="javascript:generateTable()">Create new Table</a>
</body>
</html>
Output:-
<!DOCTYPE html>
<html>
<head>
<title>Program35/js events</title>
<script>
functionmyFunctionkey() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
functionmyFunctionclick() {
document.getElementById("demo").innerHTML = "Hello World";
}
functionmyFunctiondbl() {
document.getElementById("demo").innerHTML = "Hello World";
Page 61
Web Technologies Practical Record
}
functionmyFunctionchange()
{
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
functionmyFunctionfocus(x)
{
x.style.background = "green";
}
</script>
</head>
<body>
<p id="demo">Onclick</p>
<button onclick="myFunctionclick()">Click me</button>
<p>Onchange</p>
Enter your name: <input type="text" id="fname" onchange="myFunctionchange()">
<p>Double click</p>
<p ondblclick="myFunctiondbl()">Doubleclick this paragraph to trigger a function.</p>
<p>Onfocus</p>
Enter your name: <input type="text" onfocus="myFunctionfocus(this)">
<p>Keypress</p>
Enter your name: <input type="text" id="fname" onkeyup="myFunctionkey()">
</body>
</html>
Output:-
Page 62
Web Technologies Practical Record
36. Write a Java Script program to print N-natural numbers using For loop.
<html>
<head>
<title>Program36/js natural numbers</title>
<script language="javascript">
vari;
functionmyFunction()
{
var n=document.getElementById("myText").value;
document.write(i+"</br>");
}
} </script>
</head>
<body>
enter value to get natural numbers
<input type="text" id="myText">
<button onclick="myFunction()">Get Natural numbers</button>
</body>
</html>
Page 63
Web Technologies Practical Record
Output:-
<html>
<head>
Page 64
Web Technologies Practical Record
<title>Program37/js factorial</title>
<script language="javascript">
var input=prompt("Enterthe number to get factorial");
var result=input;
for(vari=1;i<input;i++)
{
result=i*result
}
document.write(result);
</script>
</head>
<body>
</body>
</html>
Output:-
Page 65
Web Technologies Practical Record
<html>
<head>
<title>Program38/js arrays</title>
</head>
<body>
<h2>Java script Arrays</h2>
<p id="demo"></p>
<script language="javascript">
var cars=["Maruti","Hyndai","BMW","VOLVO"];
document.getElementById("demo").innerHTML=cars;
</script>
</body>
</html>
Output:-
Page 66
Web Technologies Practical Record
<html>
<head>
<title>Program39/js string functions</title>
</head>
<body>
<h2>Java script String Functions</h2>
<p>String indexOf()</p>
<p id="demo1"></p>
<script language="javascript">
varstr="Please locate where 'locate' occures";
varpos=str.indexOf("locate");
document.getElementById("demo1").innerHTML=pos;
</script>
<p>String length</p>
<p id="demo"></p>
<script language="javascript">
var txt="HARIKRISHNANAGABANDI";
document.getElementById("demo").innerHTML=txt.length;
</script>
</body>
</html>
Output:-
Page 67
Web Technologies Practical Record
<html>
<head>
<title>Program40/js math object</title>
</head>
<body>
<h2>Java script Math Objects</h2>
<p>Math.round</p>
<p id="demo"></p>
<script language="javascript">
document.getElementById("demo").innerHTML=Math.round(4.4);
</script>
<p>Math.absolute</p>
<p id="demo3"></p>
<script language="javascript">
document.getElementById("demo3").innerHTML=Math.abs(-5.5);
</script>
Output:-
Page 69
Web Technologies Practical Record
41. Create a Web page with an image, when the mouse is doubled clicked new image should
replace the existing.
42. Create a Web page and apply mouse effects to change text color, size, family etc on the
text.
<!DOCTYPE html>
<html>
<head>
<title>Program42/text styles</title>
<style>
a.ex1:hover, a.ex1:active{color:red;}
a.ex2:hover, a.ex2:active{font-size:150%;}
a.ex3:hover, a.ex3:active{background:red;}
</style>
</head>
<body>
<p>Mouse iver the links to see them change color size and family</p>
<p><a class="ex1">Font Color</p>
<p><a class="ex2">Font size</p>
<p><a class="ex3">Font family</p>
</body>
</html>
Output:-
43. Create a Web page which displays a line of text, when you click on the text a new line of
text
should overwrite the existing text.
Page 70
Web Technologies Practical Record
<!DOCTYPE html>
<html>
<body>
<p>Click the button to trigger a function that will output "Hello World" in a p
element with id="demo".</p>
<script>
functionmyFunction() {
</script>
</body>
</html>
Output:-
Page 71
Web Technologies Practical Record
<!DOCTYPE html>
<html>
<head>
<script>
functionmyFunction() {
</script>
</head>
<body>
<p>A function is triggered when the user is pressing a key in the input field.</p>
</body>
</html>
Output:-
Page 72
Web Technologies Practical Record
<!DOCTYPE html>
<html>
<head>
<script>
function message() {
</script>
</head>
<body>
<form onreset="message()">
<input type="reset">
</form>
</body>
</html>
Output:-
Page 73
Web Technologies Practical Record
46 . Create a XML document for employee database with 10 records and 5 columns in each
record.
<?xml version="1.0"?>
<employee>
<emp>
<empid>100</empid>
<empname>ramu</empname>
<desig>Manager</desig>
<salary>30000</salary>
<depart>sales</depart>
</emp>
<emp>
<empid>101</empid>
<empname>priya</empname>
<desig>officer</desig>
<salary>20000</salary>
<depart>marketing</depart>
Page 74
Web Technologies Practical Record
</emp>
<emp>
<empid>102</empid>
<empname>swapna</empname>
<desig>clerk</desig>
<salary>8000</salary>
<depart>pruchasing</depart>
</emp>
</employee>
Output:-
47. Create a XML document for student database and apply the style sheet effects.
<?xml version="1.0"?>
Page 75
Web Technologies Practical Record
<xsl:template>
<html>
<body>
<table border="1">
<trbgcolor="red">
<th>hari</th>
<th>krishna</th>
</tr>
<tr>
<td>e-com</td>
<td>web</td>
</tr>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Output:-
Page 76
Web Technologies Practical Record
<?xml version="1.0"?>
<bookstore xmlns:link="http://www.w3/1999/x/link">
<description>
X link:type="simple"
X link:herf:http://book.com/images/H.potter.gif
X link:show="new"
As his fifty year at Hogwarts school of white craft and wizards approaches,15 years old harry
is--------
</description>
</book>
</bookstore>
<?xml version="1.0"?>
<bookstore xmlns:link="http://www.w3/1999/x/link">
Page 77
Web Technologies Practical Record
<description>
X link:type="simple"
X link:herf:http://book.com/images/H.potter.gif
X link:show="new"
As his fifty year at Hogwarts school of white craft and wizards approaches,15 years old harry
is--------
</description>
</book>
</bookstore>
Output:-
49. Create a XML document for the Marketing department of an organization and apply
style effects.
<?xml version="1.0"?>
<html>
<body>
Page 78
Web Technologies Practical Record
<xsl:template>
<h1>sales dept</h1>
<table border="1">
<tr>
</th>
</tr>
<tr>
</th>
</tr>
<tr>
<td><xsl:valueof select="telephone"/></td>
</tr>
<tr>
</td>
</tr>
<tr>
</tr>
<tr>
Page 79
Web Technologies Practical Record
</tr>
<tr>
</td>
</tr>
</table>
</xsl:foreach>
</xsl:stylesheet>
</xsl:template>
</body>
</html>
</xsl:stylesheet>
Output:-
<?xml version="1.0"?>
Page 80
Web Technologies Practical Record
<bookstore>
<book category="ecom">
<author>hari</author>
<year>2017</year>
<price>150</price>
</book>
<book category="web">
<title lang="en">web-programming</title>
<author>krishna</author>
<year>2017</year>
<price>150</price>
</book>
</bookstore>
Output:-
Page 81