Bcom-Iv-Sem-Web-Technologies Lab Record

B.
Com-IV-Sem WEB-Technologies
B.Com Computer Application (Osmania University)
Prepared by Coding corner ([email protected])

1) Write a html Program to implement Formatting Tags.
<html>
<head>
<title>Program1/Formatting Tags</title>
</head>
<body>
<h1 align="center">Formatting tags</h1>
<b>Bold data</b> </br>
<i>Italic data</i> </br>
<u>data with underline</u></br>
<em>emphasised data</em></br>
<small>data in small </small></br>

<big>data in big</big> </br>
<strong> Educational Society with strong </strong>
H<sub>2</sub>O</br>
2<sup>2</sup></br>
<strike>strike on data</strike></br>
<center>Data in center of the page</center></br>
</body>
</html>

Output:-

2. Write a HTML program to demonstrate all Logical Tags
<html>
<head>
<title>Program/Logical Tags</title>
</head>
<body>
<h1 align="center">Logical tags</h1>
<em>emphasised data</em></br>
<cite>to emphasized text in italic </cite></br>

<code>to displays some characters as code </code> </br>
<strong> Educational Society with strong </strong> </br>
<del>displays text with a line through it </del></br>
</body>
</html>
Output:-

3. Write a HTML program to implement all Header Tags
<html>
<head>
<title>Program3/heading Tags</title>
</head>
<body>
<h1 align="center">Headnig tags</h1>
<h1> EDUCATIONAL SOCIETY </h1>
<h2> EDUCATIONAL SOCIETY</h2>
</body>
</html>
Output:-

4. Write a HTML program to illustrate Anchor tag along with all attributes.
<html>
<head>
<title>Program4/heading Tags</title>
</head>
<body>
<h1 align="center">Anchor tag</h1>
<a href="www.lalbahadur.com" name="lb" target="">Link to Lalbahadur Educational Society
</a>

</body>
</html>
Output:-
5. Write a HTML program to insert Image tag with all attributes.
<html>
<head>
<title>Program5/Image Tag</title>
</head>
<body>
<h1 align="center">Image tag</h1>

<img src="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:-
6. Create a Webpage to display the text ALL THE BEST . aligned with images.
<html>
<head>
<title>Program6/Image with align text</title>
</head>
<body>

<h1 align="center">Image with align text</h1>
<img src="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg"" width=100 height=100
align=right">
ALL <b><u>THE BEST</u></b>
<img src="C:\Users\Public\Pictures\Sample Pictures\Lighthouse.jpg"width=100 height=100

align="center" >
</body>
</html>
Output:-
7. Write HTML program to implement font Tags along with its attributes.
<html>
<head>
<title>Program7/Font</title>
</head>
<body>
<font size="10">This Font with Size</font></br>
<font color="red">This Font with Color</font></br>
<font face="verdana">This Font with Face</font></br>
<body>
</html>
Output:-

8. Write HTML program to illustrate List Formatting tags for the streams available
in college.
a. OrderList b. UnOrderList c. Menu List d. Definition List
<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>
<ul type="square">
<li>Web</li>
<li>Excel</li>
<li>B Law</li>
</ul>
<h1>Menu List</h1>
<ol type="1">
<li>Courses in College
<ol type="i">

<li>Bcom
<ul type="square">
<li>Computers</li>
<li>Gen(E)</li>
<li>Gen(T/M)</li>
</ul>
</li>
<li>BSc
<ul type="circle">
<li>Computers</li><li>Chemistry</li>
</ul>
</li>
</ol>

<h1>Definition List</h1>
<dl>
<dt>Hari</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>
<ol type="1">
<li>Practice of General Insurance</li>
<li>Excel Foundation</li>
<li>Business Law</li>
<li>Computer Accountancy </li>
<li>BAnking Theory And Practice</li>
<li>Accounting Standards</li>
<li>Web Technology</li>
</ol>
<h1>UnOrder List</h1>
<ul type="disc">
<li>Practice of General Insurance</li>
<li>Excel Foundation</li>
<li>Business Law</li>
<li>Computer Accountancy </li>
<li>BAnking Theory And Practice</li>
<li>Accounting Standards</li>
<li>Web Technology</li>
</ol>
</body>
</html>
Output:-

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> <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:-

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">
<h1 align="center" style="color:blue"><u>TABLE</u></h1>
<table cellspacing="5" cellpadding="5" align="center" border="6" width="500px"
bgcolor="pink">
<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>
<th>1:00-1:45</th>
<th>1:45-2:30</th>
</tr>
<tr>
<td>Monday</td> <td>Business Law</td> <td>Banking and theory</td>
<td>Practise of Insurance</td> <td>Excel Foundation</td> <td>Banking and
theory</td>
<td rowspan="7" style="font-size:40px;">L<br>U<br>N<br>C<br>H</td>

<td>Web Technologies</td> <td>Computer Accountancy</td>

</tr>
<tr>
<td>Tuesday</td> <td>Business Law</td> <td>Banking and theory</td>
theory</td>

</tr>
<tr>
<td>Wednsday</td> <td>Business Law</td> <td>Banking and theory</td>
theory</td>

</tr>
<tr>
<td>Monday</td> <td>Business Law</td> <td>Banking and theory</td>
theory</td>

</tr>
<tr>
<td>Thursday</td> <td>Business Law</td> <td>Banking and theory</td>
theory</td>

</tr>
<tr>
<td>Friday</td> <td>Business Law</td> <td>Banking and theory</td>
theory</td>

</tr>
<tr>
<td>Saturday</td> <td>Business Law</td> <td>Banking and theory</td>
theory</td>

</tr>
</table>
</body>
</html>
Output:-

12. Write a HTML program to marquee the image and text.
<html>
<head>
<title>Program12/Marquee</title>
</head>
<body>
<marquee>Sri Aubrabindo Degree College, kotha pet</marquee>
<marquee><img src="E:\ravi\college photo.jpg"></marquee>
</body>
</html>
Output:-

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>
<marquee direction="right" loop="4"><b><u>WEB
TECHNOLOGY<u></b></marquee>
<marquee direction="down"><b><u>WEB TECHNOLOGY<u></b></marquee>

<marquee direction="up"><b><u>WEB TECHNOLOGY<u></b></marquee>
</body>
</html>
Output:-

14. Create a table using all its attributes and sub tags to execute the following Information
.
S.No Name Specialization

1. Ada Lovelace She is World's first Computer
Programmer.
2. Adam Osborne Creator of the first
commercially available
Portable Computer .
3. Abhay Bhushan Author of the File Transfer
Protocol .
4. Alan Cooper Father of Visual Basic .
5. Alan Emtage Developer of " Archie "
which is considered to be the
first search engine.
6. Alan Schaaf Founder of " Imgur " which
is the world's largest image
hosting site .
7. Alexander Douglas Created the first graphical
Computer game, OXO .
8. Andreas Bechtolsheim Co-founder of Sun
Microsystems.
Programe:
<html>
<head>
<title>Program14/Tables</title>
</head>
<h1 align="center" style="color:blue"><u>TABLE</u></h1>
<table align="center" border="6" width="500px" bgcolor="pink" cellspacing="4"
cellpadding="4">

<tr>
<th>S.No</th> <th>Name</th> <th>Specialization</th>
</tr>
<tr>
<td>1</td> <td>Ada Lovelace</td>
<td>She is World's first Computer Programmer.</td>
</tr>
<tr>
<td>2</td> <td>Adam Osborne</td>
<td>Creator of the first commercially available Portable Computer .</td>
</tr>
<tr>
<td>3</td> <td>Abhay Bhushan</td>
<td>Author of the File Transfer Protocol .</td>
</tr>
<tr>
<td>4</td> <td>Alan Cooper</td> <td>Father of Visual Basic .</td>
</tr>
<tr>
<td>5</td> <td>Alan Emtage</td>
<td>Developer of " Archie " which is considered to be the first search
engine.</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>
<td>Created the first graphical Computer game, OXO .</td>
</tr>
<tr>
<td>8</td> <td>Andreas Bechtolsheim</td> <td>Co-founder of
Microsystems</td>
</tr>
</table>
</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">
<table border=3 align="center">
<tr>
<td>Name</td> <td>:</td> <td><input type="text" name="name"></td>
</tr>
<tr>
<td>Father Name</td> <td>:</td> <td><input type="text" name="fname"></td>
</tr>
<tr>
<td>Gender</td> <td>:</td>
<td>Male<input type="radio" name="gender"> Female <input type="radio"
name="gender"></td>
</tr>
<tr> <td>Languages</td> <td>:</td>
<td>English<input type="checkbox" name="gender"> Telugu<input type="checkbox"
name="gender"></td>
</tr>
</table>
</form>
</body>
</html>

Output:-

16. Create a Program on Employee Information Form.
<html>
<head>
<title>Program16/Emplyeee form</title>
</head>
<h3 align="center"><u>Employee Deatils</u></h3>
<form action="abc.php">
<table align="center" border="4" bgcolor="lightgreen">
<tr>
<td>Name</td> <td>:</td> <td><input type="text" name="sname"
id="sname"></td>
</tr>
<tr>
<td>Fname</td> <td>:</td> <td><input type="text" name="fname"
id="fname"></td>
</tr>
<tr>
<td>Designation</td> <td>:</td> <td><input type="text" name="fname"
id="fname"></td>
</tr>
<tr>
<td>Qualification</td> <td>:</td> <td><input type="text" name="fname"
id="fname"></td>
</tr>
<tr>
<td>Phno</td> <td>:</td> <td><input type="text" name="phno" id="phno"></td>
</tr>
<tr>
<td>Gender</td> <td>:</td> <td><input type="radio" name="male">Male <input
type="radio" name="male">Female</td>
</tr>
<tr>
<td>Languages</td> <td>:</td>
<td><input type="checkbox" name="lanT">Telugu<input type="checkbox"
name="lanE">English<input type="checkbox" name="lanH">Hindi</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>
<select name="year" >
<option>Year</option>
<option>1987</option>
</select></td>
</tr>
<tr> <td>Address</td> <td>:</td>
<td><textarea rows="10" cols="20">Write your address here...</textarea></td>
</tr>
<tr>
<td>Password</td> <td>:</td> <td><input type="password"></td>
</tr>
<tr>
<td> </td>
<td style="padding-left:50px"><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
</body>
</html>
Output:-
17. Write a program to create Pull down menu on the universities available in Telangana
State.
<html>
<head>
</head>
<body bgcolor="orange">
<form>
Universities in Telengane:
<select>
<option>Select University</option> <option>Osmania University</option>
<option>Jawaharlal Nehru University</option>
<option>Dr.B.R Ambedkar 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:-
18. Write a program to create Pull down menu on various Web Designing Softwares.
<html>
<head>
</head>
<body bgcolor="orange">

<form>
Web Designing Softwares:
<select>
<option>Joomla</option>
<option>Wordpress</option>
<option>Drupal</option>
<option>Adobe Dreamweaver</option>
<option>Template Toaster</option>
<option>Google Web Designer</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>
function confirmInput() {
fname = document.forms[0].fname.value;
alert(" You Submitted Student Information");
</script>
</head>
<h3 align="center"><u>Employee Deatils</u></h3>
<form action="abc.php" onsubmit="confirmInput()">
<table align="center" border="4" bgcolor="lightgreen">
<tr>
<td>Name</td>
<td>:</td>
<td><input type="text" name="sname" id="sname"></td>
</tr>
<tr>
<td>Fname</td>
<td>:</td>
<td><input type="text" name="fname" id="fname"></td>
</tr>
<tr><td>Phno</td>
<td>:</td>
<td><input type="text" name="phno" id="phno"></td></tr>
<tr>
<td>Gender</td>
<td>:</td>
<td><input type="radio" name="male">Male <input type="radio"
name="male">Female</td>
</tr>
<tr>
<td>Languages</td>
<td>:</td>
<td><input type="checkbox" name="lanT">Telugu<input
type="checkbox"name="lanE">English<input type="checkbox" name="lanH">Hindi</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>
<select name="year" >
<option>Year</option>
</select></td>
</tr>
<tr>

<td>Address</td>
<td>:</td>
<td><textarea rows="10" cols="20">Write your address
here...</textarea></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password"></td>
</tr>
<tr>
<td></td>
<td style="padding-left:50px"><input type="submit" value="Submit"
name="fname"></td>
</tr>
</table>
</form>
</body>
</html>
Output:-

20. Write a HTML program to create Four Vertical Frames .
<html>
<head>
<title>Program20/Using frames</title>
</head>
<frameset cols="25%,25%,25%,25%">
<frame src="frame1.html">
</frameset>
</html>
Output:-
21. Write a HTML program to create Four Horizontal Frames.
<html>
<head>
<title>Program21/Using frames</title>
</head>
<frameset rows="25%,25%,25%,25%">
</frameset>
</html>
Output:-

22. Write a DHTML program for Cascading style Sheets.
<html>
<head>
<title>Program22/DHTML</title>
<link rel="stylesheet" href="external.css" type="text/css">
<style>
h1
color:red;
font-size:50px;
font-family:algerian;
.a
margin:50px;
color:blue;

.b
margin:150px;
color:red;
</style>
</head>
<h1 align="center" style="color:red">Casecading Style Sheet</h1>
<h3 style="color:blue">Inline Style Sheet</h3>
<p class="a">Paragraph1 text goes here....</p>
<p class="b">Paragraph2 text goes here....</p>
<p class="c">Paragraph5 text with brown goes here....</p>
<p class="d">Paragraph6 with brown text goes here....</p>
</body>
</html>
Output:-

23. Write a DHTML program to demonstrate Inline Style Sheets.
<html>
<head>
<title>Program23/Inline style sheet</title>
</head>
<h1 align="center" style="color:red">Casecading Style Sheet</h1>
<h3 style="color:blue">Inline Style Sheet</h3>
<h3 style="color:blue">Internal/Embeded Style Sheet</h3>
<h3 style="color:blue">External Style Sheet</h3>
<p style="color:green;font-family:algerian;font-size:20px;">This program
describes the inline style sheet </p>
<table>
<tr>
<td style="color:cyan;font-family:aharoni;font-size:30px;">Works with
Td</td>
</tr>
</table>
</body>
</html>
Output:-
24. Write a DHTML program to demonstrate External Style Sheets.
HTML PROGRAM:
<html>
<head>
<title>Program24/External</title>
<link rel="stylesheet" href="external.css" type="text/css">
</head>
<body>
<h1 class="e">External style sheet</h1>

<p class="c">Paragraph5 text with brown goes here....</p>
<p class="c">Paragraph6 with brown text goes here....</p>
</body>
</html>
CSS PROGRAM:
body
{
background-color:pink;
.e
color:cyan;
font-size:50px;
.f
color:yellow;
font-size:50px;
.m

color:purple;
font-size:50px;
.a
margin:50px;
color:blue;
.b
margin:150px;
color:red;
.c
margin:250px;
color:brown;
.d
margin:250px;
color:#orange;
Output:-

25. Write a DHTML program to demonstrate Embedded Style Sheets.
<html>
<head>
<title>Program25/Internal</title>
<style>
body
{
h1
color:red;
font-size:50px;
.a
{
margin:50px;
color:blue;
.b
margin:150px;
color:red;
.c
margin:250px;
color:green;
</style>
</head>
<body>
<h1>Inline style sheet</h1>
<p class="c">Paragraph5 text goes here....</p>
<p class="c">Paragraph6 text goes here....</p>
</body>

</html>
Output:-
26. Write a DHTML program to illustrate Id and Class Selectors using CSS.
<html>
<head>
<title>Program26/id and class</title>
<style>
body
{
h1
color:blue;
font-size:50px;

}
.a
margin:50px;
color:blue;
.b
margin:150px;
color:green;
#c
margin:250px;
color:red;
#d
margin:250px;
color:yellow;
</style>
</head>
<body>
<h1>Inline style sheet</h1>

<p id="c">Paragraph4 text goes here....with ID</p>
<p id="d">Paragraph6 text goes here....with ID </p>
</body>
</html>
Output:-
27. Write a DHTML program to demonstrate Filters .
<html>
<head>
<title>Program27/Filters</title>
</head>
<body>
<img src="C:\Users\Public\Pictures\Sample Pictures\desert.jpg" height="200" alt="logo"
style="Filter:Blur(Add=50,Direction=255, Strength=500"><br><br><br>

style="Filter:Flipv"><br><br><br>

style="Filter:Chroma(color=#sgdfgd)">
<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);">
<h1>Filter Chroma Format</h1>
</div>
Black;color:#3300Ff;Filter:Blur(Add=5,Direction=255, Strength=30">
<h1>Filter Blur Format</h1>

</div>
Black;color:#3300Ff;Filter:Flipv;">
<h1>Filter Flipv Format</h1>

</div>
Black;color:#3300Ff;Filter:Fliph;">
<h1>Filter Chroma Format</h1>

</div>
Black;color:#3300Ff;filter:shadow(color:red,direction=90);">
<h1>Filter Shadow Format</h1>
</div>
Black;color:#3300Ff;filter:dropshadow(color:red,direction=90);">
<h1>Filter DropShadow Format</h1>

</div>
Black;color:#3300Ff;filter:wave(strength=10);">
<h1>Filter Wave Format</h1>

</div>
Black;color:#3300Ff;filter:xray;">
<h1>Filter Xray Format</h1>

</div>
Black;color:#3300Ff;filter:gray;">

<h1>Filter Gray Format</h1>
</div>
Black;color:#3300Ff;filter:invert;">
<h1>Filter Invert Format</h1>

</div>
Black;color:#3300Ff;filter:mask(color=red);">
<h1>Filter Mask Format</h1>

</div>
</body>
</html>
Output:-

28. Write a DHTML program to demonstrate Transitions.
<!DOCTYPE html>
<html>
<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>
<p><b>note:</b>this program will not excute inl internet explorer 9 </p>
<div></div>
<p>this my first program in transistions</p>
</body>
</html>
Output:-
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
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;
</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>

<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>
<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 .
<html>
<head>
<title>Program30/js area</title>
<script language="javascript">
function Calculateare()
var radius=document.form1.txtRadius.value;
document.write("<p>The area of the circle is "+(radius*radius*Math.PI)

+"</p>");

document.write("<p>The Circumference of the circle is
"+(2*radius*Math.PI)+"</p>");
</script>
</head>
<body>
<form name="form1">
Enter the radius of circle:
<input type="text" name="txtRadius" size="10">

<br>
<input type="button" value="Calculate" onclick="Calculateare()">
</form>
</body>
</html>
Output:-

31. Write a Java Script program to display Greatest Number among Three Numbers .
<html>
<head>
<title>Program31/js find biggest</title>
var a=10,b=20,c=8;
if(a>b && a>c)
document.write("<b>A is Greater</b>");
if(b>a && b>c)
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.
<html>
<head>
<title>Program32/js find arth</title>
var operator='*';
var a=10,b=12;

switch(operator)
case '+':
document.write("Addition of two numbers:"+(a+b));
break;
case '-':
document.write("Subtraction of two numbers:"+(a-b));
break;
case '*':
document.write("Multiplication of two numbers:"+(a*b));
break;
case '/':
document.write("Division of two numbers:"+(a/b));
break;
case '%':
document.write("Module of two numbers:"+(a%b));
break;
default:
document.write("None");
break;
</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>
var i=1,n=100;
document.writeln("The odd numbers from 1 to 100 are:");
while(i<=n)
if((i%2)!=0)
document.writeln(i);
document.writeln("</br>")
i++;
</script>
</head>

<body>
</body>
</html>
Output:-
34. Write a Java Script program to demonstrate multiplication table .
<html>
<head>
<title>Program34/js Multiplication table</title>
function generateTable()
{
var myVar=2;
var myString="";
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:-
35. Write a Java Script program using any five events .
<!DOCTYPE html>
<html>
<head>
<title>Program35/js events</title>
<script>
function myFunctionkey() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
function myFunctionclick()
{ document.getElementById("demo").innerHTML = "Hello
World";
}
function myFunctiondbl() {
document.getElementById("demo").innerHTML = "Hello World";
}
function myFunctionchange()
{
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
function myFunctionfocus(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:-

36. Write a Java Script program to print N-natural numbers using For loop.
<html>
<head>
<title>Program36/js natural numbers</title>
var i;
function myFunction()
{
var n=document.getElementById("myText").value;
document.write("The natural numbers are");

for(i=1;i<=n;i++)
{
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>
Output:-
37. Write a Java Script program to print Factorial of a given number .
<html>
<head>
<title>Program37/js factorial</title>
var input=prompt("Enterthe number to get factorial");
var result=input;
for(var i=1;i<input;i++)
{
result=i*result
}
document.write(result);
</script>
</head>
<body>
</body>
</html>
Output:-

38. Write a Java Script program to demonstrate Arrays.
<html>
<head>
<title>Program38/js arrays</title>
</head>
<body>
<h2>Java script Arrays</h2>
<p id="demo"></p>
var cars=["Maruti","Hyndai","BMW","VOLVO"];
document.getElementById("demo").innerHTML=cars;
</script>
</body>
</html>
Output:-

39. Write a Java Script program to demonstrate String manipulating functions.
<html>
<head>
<title>Program39/js string functions</title>
</head>
<body>
<h2>Java script String Functions</h2>
<p>String indexOf()</p>
<p id="demo1"></p>
var str="Please locate where 'locate' occures";
var pos=str.indexOf("locate");
document.getElementById("demo1").innerHTML=pos;
</script>
<p>String length</p>
<p id="demo"></p>
var txt="HARIKRISHNANAGABANDI";
document.getElementById("demo").innerHTML=txt.length;
</script>
</body>
</html>
Output:-

40. Write a Java Script program to demonstrate Math objects.
<html>
<head>
<title>Program40/js math object</title>
</head>
<body>
<h2>Java script Math Objects</h2>
<p>Math.round</p>
<p id="demo"></p>
document.getElementById("demo").innerHTML=Math.round(4.4);
</script>
<h2>Java script Math Power</h2>
<p>Math.power</p>
<p id="demo1"></p>
document.getElementById("demo1").innerHTML=Math.pow(8,2);
</script>
<h2>Java script Math Sqrt</h2>
<p>Math.sqrt</p>
<p id="d emo2"></p>
document.getElementById("demo2").innerHTML=Math.sqrt(64);
</script>
<h2>Java script Math absolute</h2>
<p>Math.absolute</p>
<p id="demo3"></p>
document.getElementById("demo3").innerHTML=Math.abs(-5.5);
</script>
<h2>Java script Math ceil</h2>

<p>Math.ceil</p>
<p id="demo4"></p>
document.getElementById("demo4").innerHTML=Math.ceil(6.2);
</script>
<h2>Java script Math floor</h2>

<p>Math.floor</p>
<p id="demo5"></p>
document.getElementById("demo5").innerHTML=Math.floor(8.8);
</script>
</body>
</html>
Output:-

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.
<!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>
<button onclick="myFunction()">Click me</button>
<p id="demo"> Degree College</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello
World";
</script>
</body>
</html>
Output:-

44. Create a program on the event onkeypress.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
alert("You pressed a key inside the input field");
</script>
</head>
<body>
<p>A function is triggered when the user is pressing a key in the input field.</p>
<input type="text" onkeypress="myFunction()">
</body>

</html>
Output:-
45. Create a program on the event onreset .
<!DOCTYPE html>
<html>
<head>
<script>
function message() {
alert("This alert box was triggered by the onreset event handler");
</script>
</head>
<body>
<form onreset="message()">
Enter your name: <input type="text" size="20">
<input type="reset">
</form>
</body>
</html>
Output:-
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>
<depart>marketing</depart>
</emp>
<emp>
<empid>102</empid>
<empname>swapna</empname>
<desig>clerk</desig>
<depart>pruchasing</depart>
</emp>
</employee>
Output:-

47. Create a XML document for student database and apply the style sheet effects.


<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3school.com">
<xsl:template>
<html>
<body>
<h2>my dear students</h2>
<table border="1">
<tr bgcolor="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:-
48. Create a XML document with simple links
<bookstore xmlns:link="http://www.w3/1999/x/link">
<book title="harry poter">
<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>
<bookstore xmlns:link="http://www.w3/1999/x/link">
<book title="harry poter">
<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.
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3school.com">
<html>
<body>
<xsl:template>
<xsl:stylesheet type ="text/css">
<h1>sales dept</h1>
{black text and font family :arial;color:#0000;}
<xsl:foreach sheet ="salesdept/category">

<table border="1">

<tr>
<th colspan="3"> <xsl:valueof select="name"/>
</th>
</tr>
<tr>
<th colspan="3"> <xsl:valueof select="timing "/>
</th>
</tr>
<tr>

<td><xsl:valueof select="telephone"/></td>
</tr>
<tr>
<td><xsl:valueof select="email @gmail.com"/>
</td>
</tr>
<tr>
<td><xsl:valueof select ="salary"/></td>
</tr>
<tr>
<th colspan="3"> salary </th>
</tr>
<tr>
<td colspan="3"><xsl:valueof select="salary "/>
</td>

</tr>
</table>
</xsl:foreach>
</xsl:stylesheet>
</xsl:template>
</body>
</html>
</xsl:stylesheet>
Output:-
50. Create a program on XML Document Object Model.


<bookstore>
<book category="ecom">
<title lang="en">Bcom e-com</title>

<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:-

Bcom-Iv-Sem-Web-Technologies Lab Record

Uploaded by

Copyright:

Available Formats

Bcom-Iv-Sem-Web-Technologies Lab Record

Uploaded by

Document Information

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

Bcom-Iv-Sem-Web-Technologies Lab Record

Uploaded by

Copyright:

Available Formats

B.

B.Com Computer Application (Osmania University)

Prepared by Coding corner ([email protected])

<small>data in small </small></br>

Prepared by Coding corner ([email protected])

Prepared by Coding corner ([email protected])

<cite>to emphasized text in italic </cite></br>

Prepared by Coding corner ([email protected])

Prepared by Coding corner ([email protected])

Prepared by Coding corner ([email protected])

5. Write a HTML program to insert Image tag with all attributes.

Prepared by Coding corner ([email protected])

Prepared by Coding corner ([email protected])

ALL <b><u>THE BEST</u></b>

<img src="C:\Users\Public\Pictures\Sample Pictures\Lighthouse.jpg"width=100 height=100

Prepared by Coding corner ([email protected])

a. OrderList b. UnOrderList c. Menu List d. Definition List

Prepared by Coding corner ([email protected])

Prepared by Coding corner ([email protected])

Prepared by Coding corner ([email protected])

Prepared by Coding corner ([email protected])

Prepared by Coding corner ([email protected])

Prepared by Coding corner ([email protected])

<td rowspan="7" style="font-size:40px;">L<br>U<br>N<br>C<br>H</td>

Prepared by Coding corner ([email protected])

<td>Web Technologies</td> <td>Computer Accountancy</td>

<td>Web Technologies</td> <td>Computer Accountancy</td>

<td>Web Technologies</td> <td>Computer Accountancy</td>

Prepared by Coding corner ([email protected])

<td>Web Technologies</td> <td>Computer Accountancy</td>

<td>Web Technologies</td> <td>Computer Accountancy</td>

Prepared by Coding corner ([email protected])

Prepared by Coding corner ([email protected])

<marquee direction="down"><b><u>WEB TECHNOLOGY<u></b></marquee>

Prepared by Coding corner ([email protected])

S.No Name Specialization

Prepared by Coding corner ([email protected])

Prepared by Coding corner ([email protected])

Prepared by Coding corner ([email protected])

Prepared by Coding corner ([email protected])

Prepared by Coding corner ([email protected])

Prepared by Coding corner ([email protected])

Prepared by Coding corner ([email protected])

Prepared by Coding corner ([email protected])

alert(" You Submitted Student Information");

Prepared by Coding corner ([email protected])

Prepared by Coding corner ([email protected])

Prepared by Coding corner ([email protected])

21. Write a HTML program to create Four Horizontal Frames.

Prepared by Coding corner ([email protected])

Prepared by Coding corner ([email protected])

Prepared by Coding corner ([email protected])

24. Write a DHTML program to demonstrate External Style Sheets.

Prepared by Coding corner ([email protected])

Prepared by Coding corner ([email protected])

Prepared by Coding corner ([email protected])

Prepared by Coding corner ([email protected])

Prepared by Coding corner ([email protected])

Prepared by Coding corner ([email protected])

document.write("<p>The area of the circle is "+(radiusradiusMath.PI)