1) Write A HTML Program To Implement Formatting Tags
Uploaded by
Parkchimochi 11) Write A HTML Program To Implement Formatting Tags
Uploaded by
Parkchimochi 1Web 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
- Rollercone Service Manual: RC and RCII Crushers100% (2)Rollercone Service Manual: RC and RCII Crushers237 pages
- Bcom-Iv-Sem-Web-Technologies Lab RecordNo ratings yetBcom-Iv-Sem-Web-Technologies Lab Record89 pages
- DevsecOps Part 3 Post Quiz - Attempt Review100% (2)DevsecOps Part 3 Post Quiz - Attempt Review2 pages
- Krishnagar High School: Project Work On Webpage Design & Ms-ExcelNo ratings yetKrishnagar High School: Project Work On Webpage Design & Ms-Excel19 pages
- Practical No.-6: Q. Create A Webpage Using External CSSNo ratings yetPractical No.-6: Q. Create A Webpage Using External CSS2 pages
- Tally - Erp9: Free Online Computer Classes OnNo ratings yetTally - Erp9: Free Online Computer Classes On14 pages
- PGDCA II Sem (Financial Accounting With Tally) PDF100% (2)PGDCA II Sem (Financial Accounting With Tally) PDF64 pages
- Write An HTML Program To Create The TableNo ratings yetWrite An HTML Program To Create The Table48 pages
- Redmi 9 Power Blazing Blue, 64 GB: Adilaxmi E-Commerce Private LimitedNo ratings yetRedmi 9 Power Blazing Blue, 64 GB: Adilaxmi E-Commerce Private Limited1 page
- Design The Following Static Web Pages Required For An Online Book Store Web SiteNo ratings yetDesign The Following Static Web Pages Required For An Online Book Store Web Site24 pages
- PHP Code Example For View Edit Delete Search Update Database Table93% (14)PHP Code Example For View Edit Delete Search Update Database Table12 pages
- Chapter 15 - Relational Database Design Algorithms and Further DependenciesNo ratings yetChapter 15 - Relational Database Design Algorithms and Further Dependencies6 pages
- DTP With Pagemaker and Photoshop Elective Paper Notes PDFNo ratings yetDTP With Pagemaker and Photoshop Elective Paper Notes PDF94 pages
- Practical File OF Fundamentals of ComputerNo ratings yetPractical File OF Fundamentals of Computer31 pages
- Tally Erp 9.0 Material Central Sales Tax (CST) in Tally Erp 9.0No ratings yetTally Erp 9.0 Material Central Sales Tax (CST) in Tally Erp 9.023 pages
- Tally Prime Training Notes Full With GST and Payroll in Hindi-1-59No ratings yetTally Prime Training Notes Full With GST and Payroll in Hindi-1-5959 pages
- 1 Bcom - 2 Semester - E-Commerce and Web Designing - LAB-Experiments100% (3)1 Bcom - 2 Semester - E-Commerce and Web Designing - LAB-Experiments23 pages
- CSS Tutorial in Hindi (With Notes) : HTML CSS JS C C++ Java Python PHPNo ratings yetCSS Tutorial in Hindi (With Notes) : HTML CSS JS C C++ Java Python PHP16 pages
- FrontEnd Web Tech Upto Bootstrap Jan 2025 - DONENo ratings yetFrontEnd Web Tech Upto Bootstrap Jan 2025 - DONE223 pages
- Program 1:: Write A HTML Program To Display Welcome MessageNo ratings yetProgram 1:: Write A HTML Program To Display Welcome Message151 pages
- Solutions For Internal Arc Protection According To IEC 62271-200 in MV Switchgear100% (1)Solutions For Internal Arc Protection According To IEC 62271-200 in MV Switchgear5 pages
- CUSTOMER - SWITCHING - IN - TELECOM - INDUSTRY (1) Group 4No ratings yetCUSTOMER - SWITCHING - IN - TELECOM - INDUSTRY (1) Group 413 pages
- SSC JE Civil Question Paper 23 March 2021 1st Shift With AnswerNo ratings yetSSC JE Civil Question Paper 23 March 2021 1st Shift With Answer59 pages
- Corometrics 170 Monitor - Service Manual (001-119)No ratings yetCorometrics 170 Monitor - Service Manual (001-119)119 pages
- International Business:Education Sector: PESTLE Analysis of CHINANo ratings yetInternational Business:Education Sector: PESTLE Analysis of CHINA13 pages
- Summer Training Project Report (On Air Purifiers)0% (1)Summer Training Project Report (On Air Purifiers)59 pages
- Burj Dubai - The Residences Emaar PropertiesNo ratings yetBurj Dubai - The Residences Emaar Properties4 pages
- Course Schedule LMCE3071 - Student's PDFNo ratings yetCourse Schedule LMCE3071 - Student's PDF2 pages
- Professional Teachers 03-2019 Room Assignment - Rosales - Secondary100% (5)Professional Teachers 03-2019 Room Assignment - Rosales - Secondary130 pages
- A Christmas Carol (Stave I) (Student Copy)No ratings yetA Christmas Carol (Stave I) (Student Copy)27 pages
- 2016 National Clinical Guideline For Stroke 5th Edition - 24 11 16 PDFNo ratings yet2016 National Clinical Guideline For Stroke 5th Edition - 24 11 16 PDF178 pages
