Scribd
Upload
4K views

Bcom-Iv-Sem-Web-Technologies Lab Record

Uploaded by

Coding corner
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4K views

Bcom-Iv-Sem-Web-Technologies Lab Record

Uploaded by

Coding corner
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 89

B.

Com-IV-Sem WEB-Technologies

B.Com Computer Application (Osmania University)

Prepared by Coding corner (hsrgroup49@gmail.com)


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>

Prepared by Coding corner (hsrgroup49@gmail.com)


Output:-

Prepared by Coding corner (hsrgroup49@gmail.com)


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

Prepared by Coding corner (hsrgroup49@gmail.com)


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>
<h3> EDUCATIONAL SOCIETY</h3>
<h4> EDUCATIONAL SOCIETY</h4>
<h5> EDUCATIONAL SOCIETY</h5>
<h6> EDUCATIONAL SOCIETY</h6>
</body>
</html>
Output:-

Prepared by Coding corner (hsrgroup49@gmail.com)


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>

Prepared by Coding corner (hsrgroup49@gmail.com)


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

Prepared by Coding corner (hsrgroup49@gmail.com)


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

Prepared by Coding corner (hsrgroup49@gmail.com)


<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>
Prepared by Coding corner (hsrgroup49@gmail.com)
<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:-

Prepared by Coding corner (hsrgroup49@gmail.com)


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>
<!-- order list -->
<h1>Order List</h1>
<ol type="A">
<li>Web</li>
<li>Excel</li>
<li>B Law</li>
</ol>
<!-- unorder list -->
<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">

Prepared by Coding corner (hsrgroup49@gmail.com)


<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>
<!-- definition list -->
<h1>Definition List</h1>
<dl>
<dt>Hari</dt>
<dd>Lecturer in Computers</dd>
</dl>
</body>
</html>
Output:

Prepared by Coding corner (hsrgroup49@gmail.com)


-

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>
<!-- order list -->
<h1>Order List</h1>
<ol type="1">
<li>Practice of General Insurance</li>
<li>Excel Foundation</li>
<li>Business Law</li>
Prepared by Coding corner (hsrgroup49@gmail.com)
<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:-

Prepared by Coding corner (hsrgroup49@gmail.com)


10. Create a Table with Four rows and four columns in HTML.

Prepared by Coding corner (hsrgroup49@gmail.com)


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

Prepared by Coding corner (hsrgroup49@gmail.com)


Output:-

Prepared by Coding corner (hsrgroup49@gmail.com)


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>

Prepared by Coding corner (hsrgroup49@gmail.com)


</tr>
<tr>
<td>Tuesday</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>Web Technologies</td> <td>Computer Accountancy</td>


</tr>

<tr>
<td>Wednsday</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>Web Technologies</td> <td>Computer Accountancy</td>


</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>Web Technologies</td> <td>Computer Accountancy</td>


</tr>
<tr>
<td>Thursday</td> <td>Business Law</td> <td>Banking and theory</td>
<td>Practise of Insurance</td> <td>Excel Foundation</td> <td>Banking and
theory</td>

Prepared by Coding corner (hsrgroup49@gmail.com)


<td>Web Technologies</td> <td>Computer Accountancy</td>
</tr>
<tr>
<td>Friday</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>Web Technologies</td> <td>Computer Accountancy</td>


</tr>
<tr>
<td>Saturday</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>Web Technologies</td> <td>Computer Accountancy</td>


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

Prepared by Coding corner (hsrgroup49@gmail.com)


12. Write a HTML program to marquee the image and text.
Prepared by Coding corner (hsrgroup49@gmail.com)
<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:-

Prepared by Coding corner (hsrgroup49@gmail.com)


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

Prepared by Coding corner (hsrgroup49@gmail.com)


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>
<body bgcolor="yellow">
<h1 align="center" style="color:blue"><u>TABLE</u></h1>
<table align="center" border="6" width="500px" bgcolor="pink" cellspacing="4"
cellpadding="4">

Prepared by Coding corner (hsrgroup49@gmail.com)


<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>
Prepared by Coding corner (hsrgroup49@gmail.com)
<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:-

Prepared by Coding corner (hsrgroup49@gmail.com)


15. Create a Program on the concept of Form containing Textboxes, Radio Buttons
and Check boxes.

<html>
<head>
<title>Program15/Forms</title>

Prepared by Coding corner (hsrgroup49@gmail.com)


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

Prepared by Coding corner (hsrgroup49@gmail.com)


Output:-

Prepared by Coding corner (hsrgroup49@gmail.com)


16. Create a Program on Employee Information Form.

<html>
<head>
<title>Program16/Emplyeee form</title>
</head>
<body bgcolor="pink">
<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>
Prepared by Coding corner (hsrgroup49@gmail.com)
<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>
<option>2019</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>
Prepared by Coding corner (hsrgroup49@gmail.com)
</table>
</form>
</body>
</html>
Output:-

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>Jawaharlal Nehru University</option>
<option>Dr.B.R Ambedkar University</option>

Prepared by Coding corner (hsrgroup49@gmail.com)


<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>
<title>Program18/Emplyeee form</title>
</head>
<body bgcolor="orange">

Prepared by Coding corner (hsrgroup49@gmail.com)


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

Prepared by Coding corner (hsrgroup49@gmail.com)


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>
<body bgcolor="pink">
<h3 align="center"><u>Employee Deatils</u></h3>
<form action="abc.php" onsubmit="confirmInput()">
<table align="center" border="4" bgcolor="lightgreen">
<tr>
Prepared by Coding corner (hsrgroup49@gmail.com)
<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>

Prepared by Coding corner (hsrgroup49@gmail.com)


<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>
<option>2019</option>
</select></td>
</tr>
<tr>

Prepared by Coding corner (hsrgroup49@gmail.com)


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

Prepared by Coding corner (hsrgroup49@gmail.com)


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">
<frame src="frame2.html">
<frame src="frame3.html">
<frame src="frame4.html">
</frameset>
</html>
Prepared by Coding corner (hsrgroup49@gmail.com)
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%">
<frame src="frame1.html">
<frame src="frame2.html">
<frame src="frame3.html">
<frame src="frame4.html">
</frameset>
</html>
Output:-

Prepared by Coding corner (hsrgroup49@gmail.com)


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;

Prepared by Coding corner (hsrgroup49@gmail.com)


.b

margin:150px;

color:red;

</style>
</head>
<body bgcolor="yellow">
<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:-

Prepared by Coding corner (hsrgroup49@gmail.com)


23. Write a DHTML program to demonstrate Inline Style Sheets.

<html>
<head>
<title>Program23/Inline style sheet</title>
</head>
<body bgcolor="yellow">
<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>
Prepared by Coding corner (hsrgroup49@gmail.com)
</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="a">Paragraph1 text goes here....</p>
<p class="a">Paragraph2 text goes here....</p>

Prepared by Coding corner (hsrgroup49@gmail.com)


<p class="b">Paragraph3 text goes here....</p>
<p class="b">Paragraph4 text goes here....</p>
<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;

font-family:algerian;

.f

color:yellow;

font-size:50px;

font-family:algerian;

.m

Prepared by Coding corner (hsrgroup49@gmail.com)


color:purple;

font-size:50px;

font-family:algerian;

.a

margin:50px;

color:blue;

.b

margin:150px;

color:red;

.c

margin:250px;

color:brown;

.d

margin:250px;

color:#orange;

Output:-

Prepared by Coding corner (hsrgroup49@gmail.com)


25. Write a DHTML program to demonstrate Embedded Style Sheets.

<html>
<head>
<title>Program25/Internal</title>
<style>
body
{

background-color:pink;

h1

color:red;

font-size:50px;

font-family:algerian;

.a
Prepared by Coding corner (hsrgroup49@gmail.com)
{

margin:50px;

color:blue;

.b

margin:150px;

color:red;

.c

margin:250px;

color:green;

</style>
</head>
<body>
<h1>Inline style sheet</h1>
<p class="a">Paragraph1 text goes here....</p>
<p class="a">Paragraph2 text goes here....</p>
<p class="b">Paragraph3 text goes here....</p>
<p class="b">Paragraph4 text goes here....</p>
<p class="c">Paragraph5 text goes here....</p>
<p class="c">Paragraph6 text goes here....</p>

</body>

Prepared by Coding corner (hsrgroup49@gmail.com)


</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
{

background-color:pink;

h1

color:blue;

font-size:50px;

font-family:algerian;

Prepared by Coding corner (hsrgroup49@gmail.com)


}

.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 class="a">Paragraph1 text goes here....</p>

Prepared by Coding corner (hsrgroup49@gmail.com)


<p class="b">Paragraph3 text goes here....</p>
<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>

Prepared by Coding corner (hsrgroup49@gmail.com)


<img src="C:\Users\Public\Pictures\Sample Pictures\desert.jpg" height="200" alt="logo"
style="Filter:Flipv"><br><br><br>

<img src="C:\Users\Public\Pictures\Sample Pictures\desert.jpg" height="200" alt="logo"


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

<h1>Filter Blur Format</h1>


</div>
<br><br><br><br><br><br>
<div style="width:580;height:50;font-size:30pt;font-family:Arial
Black;color:#3300Ff;Filter:Flipv;">

<h1>Filter Flipv Format</h1>


</div>
<br><br><br><br><br><br>
<div style="width:580;height:50;font-size:30pt;font-family:Arial
Black;color:#3300Ff;Filter:Fliph;">

<h1>Filter Chroma Format</h1>


</div>
Prepared by Coding corner (hsrgroup49@gmail.com)
<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);">

<h1>Filter Shadow Format</h1>

</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);">

<h1>Filter DropShadow Format</h1>


</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);">

<h1>Filter Wave Format</h1>


</div>
<br><br><br><br><br><br>
<div style="width:580;height:50;font-size:30pt;font-family:Arial
Black;color:#3300Ff;filter:xray;">

<h1>Filter Xray Format</h1>


</div>
<br><br><br><br><br><br>
<div style="width:580;height:50;font-size:30pt;font-family:Arial
Black;color:#3300Ff;filter:gray;">

Prepared by Coding corner (hsrgroup49@gmail.com)


<h1>Filter Gray Format</h1>

</div>
<br><br><br><br><br><br>
<div style="width:580;height:50;font-size:30pt;font-family:Arial
Black;color:#3300Ff;filter:invert;">

<h1>Filter Invert Format</h1>


</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);">

<h1>Filter Mask Format</h1>


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

Prepared by Coding corner (hsrgroup49@gmail.com)


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;

Prepared by Coding corner (hsrgroup49@gmail.com)


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>

Prepared by Coding corner (hsrgroup49@gmail.com)


<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;
Prepared by Coding corner (hsrgroup49@gmail.com)
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>

Prepared by Coding corner (hsrgroup49@gmail.com)


<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>
Prepared by Coding corner (hsrgroup49@gmail.com)
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>");

Prepared by Coding corner (hsrgroup49@gmail.com)


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

Prepared by Coding corner (hsrgroup49@gmail.com)


31. Write a Java Script program to display Greatest Number among Three Numbers .

<html>
<head>
<title>Program31/js find biggest</title>
<script language="javascript">
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>");

Prepared by Coding corner (hsrgroup49@gmail.com)


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>
<script language="javascript">
var operator='*';

var a=10,b=12;

Prepared by Coding corner (hsrgroup49@gmail.com)


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

Prepared by Coding corner (hsrgroup49@gmail.com)


33. Write a Java Script program to print Odd numbers using while loop.

<html>
<head>
<title>Program31/js odd</title>
<script language="javascript">
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>

Prepared by Coding corner (hsrgroup49@gmail.com)


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

34. Write a Java Script program to demonstrate multiplication table .

<html>
<head>
<title>Program34/js Multiplication table</title>
<script language="javascript">
function generateTable()
{
var myVar=2;
var myString="";
for(i=1;i<=10;i++)
{
myString+=i+"X"+myVar+"="+(i*myVar)+"</br>";
}
Prepared by Coding corner (hsrgroup49@gmail.com)
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()
{
Prepared by Coding corner (hsrgroup49@gmail.com)
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:-

Prepared by Coding corner (hsrgroup49@gmail.com)


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">
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>
Prepared by Coding corner (hsrgroup49@gmail.com)
</html>
Output:-

37. Write a Java Script program to print Factorial of a given number .

<html>
Prepared by Coding corner (hsrgroup49@gmail.com)
<head>
<title>Program37/js factorial</title>
<script language="javascript">
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:-

Prepared by Coding corner (hsrgroup49@gmail.com)


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>
<script language="javascript">
var cars=["Maruti","Hyndai","BMW","VOLVO"];
document.getElementById("demo").innerHTML=cars;
</script>
</body>
</html>
Output:-

Prepared by Coding corner (hsrgroup49@gmail.com)


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>
<script language="javascript">
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>
<script language="javascript">
var txt="HARIKRISHNANAGABANDI";
document.getElementById("demo").innerHTML=txt.length;
</script>
</body>
</html>
Output:-

Prepared by Coding corner (hsrgroup49@gmail.com)


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>
<script language="javascript">
document.getElementById("demo").innerHTML=Math.round(4.4);
</script>
<h2>Java script Math Power</h2>
<p>Math.power</p>
<p id="demo1"></p>
<script language="javascript">
document.getElementById("demo1").innerHTML=Math.pow(8,2);
</script>
<h2>Java script Math Sqrt</h2>
<p>Math.sqrt</p>
<p id="d emo2"></p>
Prepared by Coding corner (hsrgroup49@gmail.com)
<script language="javascript">
document.getElementById("demo2").innerHTML=Math.sqrt(64);
</script>
<h2>Java script Math absolute</h2>
<p>Math.absolute</p>
<p id="demo3"></p>
<script language="javascript">
document.getElementById("demo3").innerHTML=Math.abs(-5.5);
</script>

<h2>Java script Math ceil</h2>


<p>Math.ceil</p>
<p id="demo4"></p>
<script language="javascript">
document.getElementById("demo4").innerHTML=Math.ceil(6.2);
</script>

<h2>Java script Math floor</h2>


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

Prepared by Coding corner (hsrgroup49@gmail.com)


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>
Prepared by Coding corner (hsrgroup49@gmail.com)
<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() {
Prepared by Coding corner (hsrgroup49@gmail.com)
document.getElementById("demo").innerHTML = "Hello
World";

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

Prepared by Coding corner (hsrgroup49@gmail.com)


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>

Prepared by Coding corner (hsrgroup49@gmail.com)


</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">
Prepared by Coding corner (hsrgroup49@gmail.com)
</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>
Prepared by Coding corner (hsrgroup49@gmail.com)
<emp>
<empid>101</empid>
<empname>priya</empname>
<desig>officer</desig>
<salary>20000</salary>
<depart>marketing</depart>
</emp>
<emp>
<empid>102</empid>
<empname>swapna</empname>
<desig>clerk</desig>
<salary>8000</salary>
<depart>pruchasing</depart>
</emp>
</employee>
Output:-

Prepared by Coding corner (hsrgroup49@gmail.com)


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

<!-- XML PROGRAM FOR XML STYLE SHEET(XSL) -->


<?xml version="1.0"?>
<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>
Prepared by Coding corner (hsrgroup49@gmail.com)
</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

<?xml version="1.0"?>
<bookstore xmlns:link="http://www.w3/1999/x/link">
Prepared by Coding corner (hsrgroup49@gmail.com)
<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>
<?xml version="1.0"?>
<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:-

Prepared by Coding corner (hsrgroup49@gmail.com)


49. Create a XML document for the Marketing department of an organization and
apply style effects.

<?xml version="1.0"?>
<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">
<!-- <xsl:foreach sheet="sales"> -->
<tr>
<th colspan="3"> <xsl:valueof select="name"/>
Prepared by Coding corner (hsrgroup49@gmail.com)
</th>
</tr>
<tr>
<th colspan="3"> <xsl:valueof select="timing "/>
</th>
</tr>
<tr>
<!-- <style text="center"> -->
<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>

Prepared by Coding corner (hsrgroup49@gmail.com)


</tr>
</table>
</xsl:foreach>
</xsl:stylesheet>
</xsl:template>
</body>
</html>
</xsl:stylesheet>
Output:-

50. Create a program on XML Document Object Model.

<!-- XML PROGRAM FOR DOM -->


<?xml version="1.0"?>
<bookstore>
<book category="ecom">

<title lang="en">Bcom e-com</title>


Prepared by Coding corner (hsrgroup49@gmail.com)
<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:-

Prepared by Coding corner (hsrgroup49@gmail.com)

You might also like