1) Write A HTML Program To Implement Formatting Tags

Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 81

Web Technologies Practical Record

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>Sree Venkateswara commerec degree colleger </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:-

Page 1
Web Technologies Practical Record

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>Sree Venkateswara commerec degree college </strong></br>

<del>displays text with a line through it </del></br>

</body>

</html>

Output:-

Page 2
Web Technologies Practical Record

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>SREE VENKATESWARA COMMEREC DEGREE COLLEGE </h1>

<h2>SREE VENKATESWARA COMMEREC DEGREE COLLEGE </h2>

<h3>SREE VENKATESWARA COMMEREC DEGREE COLLEGE </h3>

<h4>SREE VENKATESWARA COMMEREC DEGREE COLLEGE </h4>

<h5>SREE VENKATESWARA COMMEREC DEGREE COLLEGE </h5>

<h6>SREE VENKATESWARA COMMEREC DEGREE COLLEGE </h6>

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

<h1 align="center">Anchor tag</h1>

<a href="www.svanshyd.com" name="lb" target="">Link to Sree Venkateswara


commerec degree college</a>

</body>

</html>

Output:-

Page 4
Web Technologies Practical Record

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>

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

<title>Program6/Image with align text</title>

</head>

<body>

<h1 align="center">Image with align text</h1>

<imgsrc="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg"" width=100


height=100 align=right">

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

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


align="center" >

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

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

Page 7
Web Technologies Practical Record

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>

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>

<!-- definition list -->

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

<!-- order list -->

<h1>Order List</h1>

Page 10
Web Technologies Practical Record

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

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

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

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

<td>Practise of Insurance</td>

<td>Excel Foundation</td>

<td>Banking and theory</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>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>

<td>Web Technologies</td>

Page 16
Web Technologies Practical Record

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

Page 17
Web Technologies Practical Record

12. Write a HTML program to marquee the image and text.

<html>

<head>

<title>Program12/Marquee</title>

</head>

<body>

<marquee>Sree Venkateswara commerec degree college, </marquee>

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

<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>
Page 19
Web Technologies Practical Record

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

Page 20
Web Technologies Practical Record

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

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

<td>Author of the File Transfer Protocol .</td>

</tr>

Page 21
Web Technologies Practical Record

<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 Sun Microsystems</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">

<table border=3 align="center">

<tr>

<td>Name</td>

<td>:</td>

<td><input type="text" name="name"></td>

Page 23
Web Technologies Practical Record

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

Page 24
Web Technologies Practical Record

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>

Page 25
Web Technologies Practical Record

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

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>

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

Page 27
Web Technologies Practical Record

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

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>JawaharSree Venkateswara commerec degree college Nehru


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>

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>


Page 30
Web Technologies Practical Record

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

alert(" You Submitted Student Information");

Page 31
Web Technologies Practical Record

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

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

Page 32
Web Technologies Practical Record

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

<option>2019</option>

</select></td>

</tr>

<tr>

<td>Address</td>

Page 33
Web Technologies Practical Record

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

Page 34
Web Technologies Practical Record

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>

Output:-

Page 35
Web Technologies Practical Record

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

Page 36
Web Technologies Practical Record

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
Page 37
Web Technologies Practical Record

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

Page 38
Web Technologies Practical Record

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>

</table>

</body>

</html>

Output:-

Page 39
Web Technologies Practical Record

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>

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

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

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

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

<h1>Inline style sheet</h1>

Page 43
Web Technologies Practical Record

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

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

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

Page 46
Web Technologies Practical Record

<title>Program27/Filters</title>

</head>

<body>

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


style="Filter:Blur(Add=50,Direction=255, Strength=500"><br><br><br>

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


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

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

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

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

<h1>Filter Gray Format</h1>

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

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

28. Write a DHTML program to demonstrate Transitions.

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

<p><b>note:</b>this program will not excuteinl internet explorer 9 </p>

<div></div>

<p>this my first program in transistions</p>

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

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

Page 55
Web Technologies Practical Record

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)

Page 56
Web Technologies Practical Record

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.

Page 57
Web Technologies Practical Record

<html>

<head>

<title>Program32/js find arth</title>

<script language="javascript">

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;

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;

document.writeln("The odd numbers from 1 to 100 are:");

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

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

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

35. Write a Java Script program using any five events .

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

Page 63
Web Technologies Practical Record

Output:-

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

<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

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

Page 66
Web Technologies Practical Record

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

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="demo2"></p>
<script language="javascript">
document.getElementById("demo2").innerHTML=Math.sqrt(64);
</script>

<h2>Java script Math absolute</h2>


Page 68
Web Technologies Practical Record

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

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>

<button onclick="myFunction()">Click me</button>

<p id="demo">Sree Venkateswara commerec degree college</p>

<script>

functionmyFunction() {

document.getElementById("demo").innerHTML = "Hello World";

</script>

</body>

</html>

Output:-

Page 71
Web Technologies Practical Record

44. Create a program on the event onkeypress.

<!DOCTYPE html>

<html>

<head>

<script>

functionmyFunction() {

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

Page 72
Web Technologies Practical Record

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

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 PROGRAM FOR XML STYLE SHEET(XSL) -->

<?xml version="1.0"?>

Page 75
Web Technologies Practical Record

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3school.com">

<xsl:template>

<html>

<body>

<h2>my dear students</h2>

<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

48. Create a XML document with simple links

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

<?xml version="1.0"?>

<bookstore xmlns:link="http://www.w3/1999/x/link">

<book title="harry poter">

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

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3school.com">

<html>

<body>

Page 78
Web Technologies Practical Record

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

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

Page 79
Web Technologies Practical Record

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

<!-- XML PROGRAM FOR DOM -->

<?xml version="1.0"?>
Page 80
Web Technologies Practical Record

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

Page 81

You might also like