Web Technologies Practical Record HTML Programs

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>Lal Bahadur Educational Society with strong </strong>
H<sub>2</sub>O</br>
2<sup>2</sup></br>
<strike>strike on data</strike></br>
<center>Data in center of the page</center></br>
</body>
</html>
Output:-
Page 1
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>Lal Bahadur Educational Society with strong </strong> </br>
<del>displays text with a line through it </del></br>
Page 2
</body>
</html>
Output:-
3. Write a HTML program to implement all Header Tags
<html>
<head>
<title>Program3/Heading Tags</title>
</head>
<body>
<h1 align="center">Headnig tags</h1>
<h1>LAL BAHADUR EDUCATIONAL SOCIETY </h1>
<h2>LAL BAHADUR EDUCATIONAL SOCIETY</h2>
</body>
</html>
Page 3
Output:-
4. Write a HTML program to illustrate Anchor tag along with all attributes.
<html>
<head>
<title>Program4/Heading Tags</title>
</head>
<body>
<h1 align="center">Anchor tag</h1>
<a href="www.lalbahadur.com" name="lb" target="">Link to Lalbahadur

Educational Society</a>
</body>
</html>
Output:-
Page 4
5. Write a HTML program to insert Image tag with all attributes.
<html>
<head>
<title>Program5/Image Tag</title>
</head>
<body>
<h1 align="center">Image tag</h1>
<img src="C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg"

width="200px" height="200px" title="image" align="middle" border="4px" hspace="4"
vspace="4">
</body>
</html>
Output:-
Page 5
6. Create a Webpage to display the text ALL THE BEST . aligned with images.
<html>
<head>
<title>Program6/Image with align text</title>
</head>
<body>
<h1 align="center">Image with align text</h1>
<img src="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg"" width=100

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

align="center" >
</body>
</html>
Output:-
Page 6
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
8. Write HTML program to illustrate List Formatting tags for the streams available in
college.
a. OrderList b. UnOrderList c. Menu List d. Definition List
<html>
<head>
<title>Program8/Order List</title>
</head>
<body>

<h1>Order List</h1>
<ol type="A">
<li>Web</li>
<li>Excel</li>
<li>B Law</li>
</ol>

<h1>UnOrder List</h1>
Page 8
<ul type="square">
<li>Web</li>
<li>Excel</li>
<li>B Law</li>
</ul>
<h1>Menu List</h1>
<ol type="1">
<li>Courses in LB 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>BSc
<ul type="circle">
<li>Computers</li>
<li>Chemistry</li>
</ul>
</li>
</ol>

<h1>Definition List</h1>
Page 9
<dl>
<dt>Hari</dt>
<dd>Lecturer in Computers</dd>
</dl>
</body>
</html>
Output:-
9. Create a Webpage to display order list, unordered list on the subjects available in Fifth
semester
<html>
<head>
<title>Program9/Order List</title>
</head>
<body>

<h1>Order List</h1>
<ol type="1">
<li>Practice of General Insurance</li>
Page 10
<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
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
<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
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
<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 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>
</tr>
<tr>
Page 15
<td>Wednsday</td>
</tr>
<tr>
<td>Monday</td>
</tr>
<tr>
<td>Thursday</td>
Page 16
</tr>
<tr>
<td>Friday</td>
</tr>
<tr>
<td>Saturday</td>
</tr>
</table>
</body>
</html>
Output:-
Page 17
12. Write a HTML program to marquee the image and text.
<html>
<head>
<title>Program12/Marquee</title>
</head>
<body>
<marquee>Lal Bahadur Degree College, Mehdipatnam</marquee>
<marquee><img src="E:\Hari\college photo.jpg"></marquee>
</body>
</html>
Output:-
Page 18
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>
Page 19
</body>
</html>
Output:-
14. Create a table using all its attributes and sub tags to execute the following Information
.
. S.No Name Specialization

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

cellpadding="4">
<tr>
<th>S.No</th>
<th>Name</th>
<th>Specialization</th>
</tr>
<tr>
<td>1</td>
<td>Ada Lovelace</td>
<td>She is World's first Computer Programmer.</td>
</tr>
<tr>
<td>2</td>
<td>Adam Osborne</td>
<td>Creator of the first commercially available Portable Computer .</td>
</tr>
<tr>
<td>3</td>
Page 21
<td>Abhay Bhushan</td>
<td>Author of the File Transfer Protocol .</td>
</tr>
<tr>
<td>4</td>
<td>Alan Cooper</td>
<td>Father of Visual Basic .</td>
</tr>
<tr>
<td>5</td>
<td>Alan Emtage</td>
<td>Developer of " Archie " which is considered to be the first search

engine.</td>
</tr>
<tr>
<td>6</td>
<td>Alan Schaaf</td>
<td>Founder of " Imgur " which is the world's largest image hosting site
.</td>
</tr>
<tr>
<td>7</td>
<td>Alexander Douglas</td>
<td>Created the first graphical Computer game, OXO .</td>
</tr>
<tr>
<td>8</td>
<td>Andreas Bechtolsheim</td>
Page 22
<td>Co-founder of Sun Microsystems</td>
</tr>
</table>
</body>
</html>
Output:-
15. Create a Program on the concept of Form containing Textboxes, Radio Buttons and
Check boxes.
<html>
<head>
<title>Program15/Forms</title>
</head>
<body bgcolor="pink">
<h3 align="center"><u>Application</u></h3>
<form action="abc.php">
<table border=3 align="center">
<tr>
Page 23
<td>Name</td>
<td>:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>Father Name</td>
<td>:</td>
<td><input type="text" name="fname"></td>
</tr>
<tr>
<td>Gender</td>
<td>:</td>
<td>Male<input type="radio" name="gender"> Female <input

type="radio" name="gender"></td>
</tr>
<tr>
<td>Languages</td>
<td>:</td>
<td>English<input type="checkbox" name="gender">

Telugu<input type="checkbox" name="gender"></td>
</tr>
</table>
</form>
</body>
</html>
Output:-
Page 24
16. Create a Program on Employee Information Form.
<html>
<head>
<title>Program16/Emplyeee form</title>
</head>
<h3 align="center"><u>Employee Deatils</u></h3>
<form action="abc.php">
<table align="center" border="4" bgcolor="lightgreen">
<tr>
<td>Name</td>
<td>:</td>
<td><input type="text" name="sname" id="sname"></td>
</tr>
<tr>
<td>Fname</td>
<td>:</td>
<td><input type="text" name="fname" id="fname"></td>
Page 25
</tr>
<tr>
<td>Designation</td>
<td>:</td>
</tr>
<tr>
<td>Qualification</td>
<td>:</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
<td>:</td>
<td><select name="date">
<option>Date</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select name="month">
<option>Month</option>
<option>Jan</option>
<option>Feb</option>
</select>
<select name="year" >
<option>Year</option>
<option>1987</option>
</select></td>
</tr>
<tr>
<td>Address</td>
<td>:</td>
<td><textarea rows="10" cols="20">Write your address

here...</textarea></td>
</tr>
<tr>
<td>Password</td>
Page 27
<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
17. Write a program to create Pull down menu on the universities available in Telangana
State.
<html>
<head>
</head>
<body bgcolor="orange">
<form>
Universities in Telengane:
<select>
<option>Select University</option>
<option>Osmania University</option>
<option>Jawaharlal Nehru University</option>
<option>Dr.B.R Ambedkar University</option>
<option>Telengane University</option>
<option>Kakatiya University</option>
<option>University Of Hyderabad</option>
<option>Palamuru University</option>
<option>Satavahana University</option>
</select>
</form>
</body>
</html>
Output:-
Page 29
18. Write a program to create Pull down menu on various Web Designing Softwares.
<html>
<head>
</head>
<body bgcolor="orange">
<form>
Web Designing Softwares:
<select>
<option>Joomla</option>
<option>Wordpress</option>
<option>Drupal</option>
<option>Adobe Dreamweaver</option>
<option>Template Toaster</option>
<option>Google Web Designer</option>

Page 30
<option>CoffeCup</option>
<option>Xara</option>
<option>openElement</option>
</select>
</form>
</body>
</html>
Output:-
19. Create a Web Page of student information form, when the information is submitted
message
should be displayed .
<html>
<head>
<title>Program19/Student form</title>
<script>
function confirmInput() {
fname = document.forms[0].fname.value;
alert(" You Submitted Student Information");
Page 31
</script>
</head>
<h3 align="center"><u>Employee Deatils</u></h3>
<form action="abc.php" onsubmit="confirmInput()">
<table align="center" border="4" bgcolor="lightgreen">
<tr>
<td>Name</td>
<td>:</td>
<td><input type="text" name="sname" id="sname"></td>
</tr>
<tr>
<td>Fname</td>
<td>:</td>
</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
<td>:</td>
<td><input type="checkbox" name="lanT">Telugu<input

type="checkbox"name="lanE">English<input type="checkbox" name="lanH">Hindi</td>
</tr>
<tr>
<td>D.O.B</td>
<td>:</td>
<td><select name="date">
<option>Date</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select name="month">
<option>Month</option>
<option>Jan</option>
<option>Feb</option>
</select>
<select name="year" >
<option>Year</option>
</select></td>
</tr>
<tr>
<td>Address</td>
Page 33
<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
20. Write a HTML program to create Four Vertical Frames .
<html>
<head>
<title>Program20/Using frames</title>
</head>
<frameset cols="25%,25%,25%,25%">
<frame src="frame1.html">
</frameset>
</html>
Output:-
Page 35
21. Write a HTML program to create Four Horizontal Frames.
<html>
<head>
<title>Program21/Using frames</title>
</head>
<frameset rows="25%,25%,25%,25%">
</frameset>
</html>
Output:-
Page 36
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
margin:150px;
color:red;
</style>
</head>
<h1 align="center" style="color:red">Casecading Style Sheet</h1>
<h3 style="color:blue">Inline Style Sheet</h3>
<p class="a">Paragraph1 text goes here....</p>
<p class="b">Paragraph2 text goes here....</p>
<p class="c">Paragraph5 text with brown goes here....</p>
<p class="d">Paragraph6 with brown text goes here....</p>
</body>
</html>
Output:-
Page 38
23. Write a DHTML program to demonstrate Inline Style Sheets.
<html>
<head>
<title>Program23/Inline style sheet</title>
</head>
<h1 align="center" style="color:red">Casecading Style Sheet</h1>
<h3 style="color:blue">Inline Style Sheet</h3>
<h3 style="color:blue">Internal/Embeded Style Sheet</h3>
<h3 style="color:blue">External Style Sheet</h3>
<p style="color:green;font-family:algerian;font-size:20px;">This program

describes the inline style sheet </p>
<table>
<tr>
<td style="color:cyan;font-family:aharoni;font-size:30px;">Works with

Td</td>
</tr>
</table>
</body>
</html>
Output:-
Page 39
24. Write a DHTML program to demonstrate External Style Sheets.
HTML PROGRAM:
<html>
<head>
<title>Program24/External</title>
<link rel="stylesheet" href="external.css" type="text/css">
</head>
<body>
<h1 class="e">External style sheet</h1>
<p class="c">Paragraph5 text with brown goes here....</p>
<p class="c">Paragraph6 with brown text goes here....</p>
</body>
</html>
CSS PROGRAM:
body
background-color:pink;
.e
color:cyan;
Page 40
font-size:50px;
.f
color:yellow;
font-size:50px;
.m
color:purple;
font-size:50px;
.a
margin:50px;
color:blue;
.b
margin:150px;
color:red;
Page 41
.c
margin:250px;
color:brown;
.d
margin:250px;
color:#orange;
Output:-
25. Write a DHTML program to demonstrate Embedded Style Sheets.
<html>
<head>
<title>Program25/Internal</title>
<style>
body
Page 42
h1
color:red;
font-size:50px;
.a
margin:50px;
color:blue;
.b
margin:150px;
color:red;
.c
margin:250px;
color:green;
</style>
</head>
Page 43
<body>
<h1>Inline style sheet</h1>
<p class="c">Paragraph5 text goes here....</p>
<p class="c">Paragraph6 text goes here....</p>
</body>
</html>
Output:-
26. Write a DHTML program to illustrate Id and Class Selectors using CSS.
<html>
<head>
<title>Program26/id and class</title>
<style>
body
Page 44
h1
color:blue;
font-size:50px;
.a
margin:50px;
color:blue;
.b
margin:150px;
color:green;
#c
margin:250px;
color:red;
#d
Page 45
margin:250px;
color:yellow;
</style>
</head>
<body>
<h1>Inline style sheet</h1>
<p id="c">Paragraph4 text goes here....with ID</p>
<p id="d">Paragraph6 text goes here....with ID </p>
</body>
</html>
Output:-
27. Write a DHTML program to demonstrate Filters .
Page 46
<html>
<head>
<title>Program27/Filters</title>
</head>
<body>
<img src="C:\Users\Public\Pictures\Sample Pictures\desert.jpg" height="200" alt="logo"

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

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

style="Filter:Chroma(color=#sgdfgd)">
<br><br><br><br><br><br>
<div style="width:580;height:50;font-size:30pt;font-family:Arial
Black;color:#3300Ff;Filter:Chroma(Color = #3300FF);">
<h1>Filter Chroma Format</h1>
</div>
Black;color:#3300Ff;Filter:Blur(Add=5,Direction=255, Strength=30">
<h1>Filter Blur Format</h1>
</div>
Black;color:#3300Ff;Filter:Flipv;">
<h1>Filter Flipv Format</h1>
</div>
Page 47
Black;color:#3300Ff;Filter:Fliph;">
<h1>Filter Chroma Format</h1>
</div>
Black;color:#3300Ff;filter:shadow(color:red,direction=90);">
<h1>Filter Shadow Format</h1>
</div>
Black;color:#3300Ff;filter:dropshadow(color:red,direction=90);">
<h1>Filter DropShadow Format</h1>
</div>
Black;color:#3300Ff;filter:wave(strength=10);">
<h1>Filter Wave Format</h1>
</div>
Black;color:#3300Ff;filter:xray;">
<h1>Filter Xray Format</h1>
</div>
Black;color:#3300Ff;filter:gray;">
<h1>Filter Gray Format</h1>
Page 48
</div>
Black;color:#3300Ff;filter:invert;">
<h1>Filter Invert Format</h1>
</div>
Black;color:#3300Ff;filter:mask(color=red);">
<h1>Filter Mask Format</h1>
</div>
</body>
</html>
Output:-
28. Write a DHTML program to demonstrate Transitions.
Page 49
<!DOCTYPE html>
<html>
<head>
<title>Program28/transition</title>
<style>
div {
width:200px;
height:200px;
background:blue;
transistion:width 2s;
div:hover {
width:500px;
background:red;
</style>
</head>
<body>
<p><b>note:</b>this program will not excute inl internet explorer 9 </p>
<div></div>
<p>this my first program in transistions</p>
</body>
</html>
Output:-
Page 50
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
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
</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
<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:-
Page 54
30. Write a Java Script program to calculate Area and circumference of a Circle .
<html>
<head>
<title>Program30/js area</title>
<script language="javascript">
function Calculateare()
var radius=document.form1.txtRadius.value;
document.write("<p>The area of the circle is

"+(radius*radius*Math.PI)+"</p>");
document.write("<p>The Circumference of the circle is

"+(2*radius*Math.PI)+"</p>");
</script>
</head>
<body>
<form name="form1">
Enter the radius of circle:
<input type="text" name="txtRadius" size="10">
<br>
<input type="button" value="Calculate" onclick="Calculateare()">
</form>
</body>
</html>
Output:-
Page 55
31. Write a Java Script program to display Greatest Number among Three Numbers .
<html>
<head>
<title>Program31/js find biggest</title>
var a=10,b=20,c=8;
if(a>b && a>c)
Page 56
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
<html>
<head>
<title>Program32/js find arth</title>
var operator='*';
var a=10,b=12;
switch(operator)
case '+':
document.write("Addition of two numbers:"+(a+b));
break;
case '-':
document.write("Subtraction of two numbers:"+(a-b));
break;
case '*':
document.write("Multiplication of two numbers:"+(a*b));
break;
case '/':
document.write("Division of two numbers:"+(a/b));
break;
case '%':
document.write("Module of two numbers:"+(a%b));
break;
default:
document.write("None");
break;
Page 58
</script>
</head>
<body>
</body>
</html>
Output:-
33. Write a Java Script program to print Odd numbers using while loop.
<html>
<head>
<title>Program31/js odd</title>
var i=1,n=100;
document.writeln("The odd numbers from 1 to 100 are:");
while(i<=n)
if((i%2)!=0)
document.writeln(i);
document.writeln("</br>")
Page 59
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>
Page 60
function generateTable()
{
var myVar=2;
var myString="";
for(i=1;i<=10;i++)
{
myString+=i+"X"+myVar+"="+(i*myVar)+"</br>";
}
document.write(myString);
}
</script>
</head>
<body>
<a href="javascript:generateTable()">Create new Table</a>
</body>
</html>
Output:-
35. Write a Java Script program using any five events .
<!DOCTYPE html>
<html>
<head>
<title>Program35/js events</title>
<script>
function myFunctionkey() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
function myFunctionclick() {
document.getElementById("demo").innerHTML = "Hello World";
}
function myFunctiondbl() {
Page 61
}
function myFunctionchange()
{
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
function myFunctionfocus(x)
{
x.style.background = "green";
}
</script>
</head>
<body>
<p id="demo">Onclick</p>
<button onclick="myFunctionclick()">Click me</button>
<p>Onchange</p>
Enter your name: <input type="text" id="fname" onchange="myFunctionchange()">
<p>Double click</p>
<p ondblclick="myFunctiondbl()">Doubleclick this paragraph to trigger a function.</p>
<p>Onfocus</p>
Enter your name: <input type="text" onfocus="myFunctionfocus(this)">
<p>Keypress</p>
Enter your name: <input type="text" id="fname" onkeyup="myFunctionkey()">
</body>
</html>
Output:-
Page 62
36. Write a Java Script program to print N-natural numbers using For loop.
<html>
<head>
<title>Program36/js natural numbers</title>
var i;
function myFunction()
{
var n=document.getElementById("myText").value;
document.write("The natural numbers are");

for(i=1;i<=n;i++)
{
document.write(i+"</br>");
}
} </script>
</head>
<body>
enter value to get natural numbers
<input type="text" id="myText">
<button onclick="myFunction()">Get Natural numbers</button>
</body>
</html>
Page 63
Output:-
37. Write a Java Script program to print Factorial of a given number .
<html>
<head>
Page 64
<title>Program37/js factorial</title>
var input=prompt("Enterthe number to get factorial");
var result=input;
for(var i=1;i<input;i++)
{
result=i*result
}
document.write(result);
</script>
</head>
<body>
</body>
</html>
Output:-
Page 65
38. Write a Java Script program to demonstrate Arrays.
<html>
<head>
<title>Program38/js arrays</title>
</head>
<body>
<h2>Java script Arrays</h2>
<p id="demo"></p>
var cars=["Maruti","Hyndai","BMW","VOLVO"];
document.getElementById("demo").innerHTML=cars;
</script>
</body>
</html>
Output:-
Page 66
39. Write a Java Script program to demonstrate String manipulating functions.
<html>
<head>
<title>Program39/js string functions</title>
</head>
<body>
<h2>Java script String Functions</h2>
<p>String indexOf()</p>
<p id="demo1"></p>
var str="Please locate where 'locate' occures";
var pos=str.indexOf("locate");
document.getElementById("demo1").innerHTML=pos;
</script>
<p>String length</p>
<p id="demo"></p>
var txt="HARIKRISHNANAGABANDI";
document.getElementById("demo").innerHTML=txt.length;
</script>
</body>
</html>
Output:-
Page 67
40 . Write a Java Script program to demonstrate Math objects.
<html>
<head>
<title>Program40/js math object</title>
</head>
<body>
<h2>Java script Math Objects</h2>
<p>Math.round</p>
<p id="demo"></p>
document.getElementById("demo").innerHTML=Math.round(4.4);
</script>
<h2>Java script Math Power</h2>

<p>Math.power</p>
<p id="demo1"></p>
document.getElementById("demo1").innerHTML=Math.pow(8,2);
</script>
<h2>Java script Math Sqrt</h2>

<p>Math.sqrt</p>
<p id="demo2"></p>
document.getElementById("demo2").innerHTML=Math.sqrt(64);
</script>
<h2>Java script Math absolute</h2>

Page 68
<p>Math.absolute</p>
<p id="demo3"></p>
document.getElementById("demo3").innerHTML=Math.abs(-5.5);
</script>
<h2>Java script Math ceil</h2>

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

<p>Math.floor</p>
<p id="demo5"></p>
document.getElementById("demo5").innerHTML=Math.floor(8.8);
</script>
</body>
</html>
Output:-
Page 69
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
<!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">LAl Bahadur Degree College</p>
<script>
function myFunction() {
</script>
</body>
</html>
Output:-
Page 71
44. Create a program on the event onkeypress.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
alert("You pressed a key inside the input field");
</script>
</head>
<body>
<p>A function is triggered when the user is pressing a key in the input field.</p>
<input type="text" onkeypress="myFunction()">
</body>
</html>
Page 72
Output:-
45. Create a program on the event onreset .
<!DOCTYPE html>
<html>
<head>
<script>
function message() {
alert("This alert box was triggered by the onreset event handler");
</script>
</head>
<body>
<form onreset="message()">
Enter your name: <input type="text" size="20">
<input type="reset">
</form>
</body>
Page 73
</html>
Output:-
46 . Create a XML document for employee database with 10 records and 5 columns in each
record.
<?xml version="1.0"?>
<employee>
<emp>
<empid>100</empid>
<empname>ramu</empname>
<desig>Manager</desig>
<salary>30000</salary>
<depart>sales</depart>
</emp>
<emp>
<empid>101</empid>
<empname>priya</empname>
Page 74
<desig>officer</desig>
<depart>marketing</depart>
</emp>
<emp>
<empid>102</empid>
<empname>swapna</empname>
<desig>clerk</desig>
<depart>pruchasing</depart>
</emp>
</employee>
Output:-
Page 75
47. Create a XML document for student database and apply the style sheet effects.

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3school.com">
<xsl:template>
<html>
<body>
<h2>my dear students</h2>
<table border="1">
<tr bgcolor="red">
<th>hari</th>
<th>krishna</th>
</tr>
<tr>
<td>e-com</td>
<td>web</td>
</tr>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Output:-
Page 76
48. Create a XML document with simple links
<bookstore xmlns:link="http://www.w3/1999/x/link">
<book title="harry poter">
<description>
X link:type="simple"
X link:herf:http://book.com/images/H.potter.gif
X link:show="new"
As his fifty year at Hogwarts school of white craft and wizards approaches,15 years old harry is--
------
</description>
</book>
</bookstore>
<bookstore xmlns:link="http://www.w3/1999/x/link">
<book title="harry poter">
Page 77
<description>
X link:type="simple"
X link:herf:http://book.com/images/H.potter.gif
X link:show="new"
As his fifty year at Hogwarts school of white craft and wizards approaches,15 years old harry is--
------
</description>
</book>
</bookstore>
Output:-
49. Create a XML document for the Marketing department of an organization and apply
style effects.
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3school.com">
<html>
<body>
Page 78
<xsl:template>
<xsl:stylesheet type ="text/css">
<h1>sales dept</h1>
{black text and font family :arial;color:#0000;}
<xsl:foreach sheet ="salesdept/category">
<table border="1">

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

<td><xsl:valueof select="telephone"/></td>
</tr>
<tr>
<td><xsl:valueof select="email @gmail.com"/>
</td>
</tr>
<tr>
<td><xsl:valueof select ="salary"/></td>
</tr>
<tr>
Page 79
<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.

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

Web Technologies Practical Record HTML Programs

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Technologies Practical Record HTML Programs

Uploaded by

Copyright:

Available Formats

Web Technologies Practical Record

1) Write a Html Program to implement Formatting Tags.

<h1 align="center">Formatting tags</h1>

<b>Bold data</b> </br>

<i>Italic data</i> </br>

<u>data with underline</u></br>

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

<big>data in big</big> </br>

<strong>Lal Bahadur Educational Society with strong </strong>

<center>Data in center of the page</center></br>

2. Write a HTML program to demonstrate all Logical Tags

<h1 align="center">Logical tags</h1>

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

<code>to displays some characters as code </code> </br>

<strong>Lal Bahadur Educational Society with strong </strong> </br>

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

3. Write a HTML program to implement all Header Tags

<h1 align="center">Headnig tags</h1>

<h1>LAL BAHADUR EDUCATIONAL SOCIETY </h1>

<h2>LAL BAHADUR EDUCATIONAL SOCIETY</h2>

<h3>LAL BAHADUR EDUCATIONAL SOCIETY</h3>

<h4>LAL BAHADUR EDUCATIONAL SOCIETY</h4>

<h5>LAL BAHADUR EDUCATIONAL SOCIETY</h5>

<h6>LAL BAHADUR EDUCATIONAL SOCIETY</h6>

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

<a href="www.lalbahadur.com" name="lb" target="">Link to Lalbahadur

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

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

<img src="C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg"

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

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

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

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

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

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

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

<li>Practice of General Insurance</li>

<li>Computer Accountancy </li>

<li>BAnking Theory And Practice</li>

<li>Practice of General Insurance</li>

<li>Computer Accountancy </li>

<li>BAnking Theory And Practice</li>

<h1 align="center" style="color:blue"><u>TABLE</u></h1>

<table cellspacing="5" cellpadding="5" align="center" border="6"

<td>Banking and theory</td>

<td>Banking and theory</td>

<td rowspan="7" style="font-

<td>Banking and theory</td>

<td>Banking and theory</td>

<td>Banking and theory</td>

<td>Banking and theory</td>

<td>Banking and theory</td>

<td>Banking and theory</td>

<td>Banking and theory</td>

<td>Banking and theory</td>

<td>Banking and theory</td>