HTML Practiacal Programs
Uploaded by
nanda.rakesh.25102003HTML Practiacal Programs
Uploaded by
nanda.rakesh.251020031. Write a HTML program using basic text formatting tags<h1>,<p>,<br>,<pre>.
<html>
<head>
<title>Text Formatting tags</title>
</head>
<body>
<h1>This is <H1></h1>
<h2>This is <H2></h2>
<h3>This is <H3></h3>
<h4>This is <H4></h4>
<h5>This is <H5></h5>
<h6>This is <H6></h6>
<p> The different programming languages
are,<br>C,C++,Java,Operating System
</p>
<pre>
<pre> tag is used to dispaly the text
in a fixed-width font,and it protects
the line break and spaces
</pre>
</body>
</html>
2. Write a HTML page for Example Café using above text formatting tags
<html>
<head>
<title>Cafe Site</title>
</head>
<body>
<h1>Irani Cafe</h1>
<h2>Near Makka Masjid</h2>
<h3>Charminar</h3>
<h4>Hyderabad</h4>
<h5>040-123456</h5>
<p>Brances:<br>Hyderabad<br>Bangalore</p>
<pre>
There are many branches of Irani cafes in
Hyderabad
</pre>
<h6>iranicafe@gmail.com</h6>
</body>
</html>
3. Write a HTML program using presentational element tags <b>,<i>,
<strike>,<sup>,<sub>,<big>,<small>,<hr>
HTML Practical Page 1
<html>
<head>
<title>Presentational Element Tags</title>
</head>
<body>
<b>This text is in Bold</b><br>
<i>This text is in Italic</i><br>
<strike>This text is Striked</strike><br>
(a+b)<sup>2</sup><br>
H<sub>2</sub>O<br>
<hr>
<big>This text is in Big</big><br>
<small>This text is in Small</small>
</body>
</html>
4. Write a HTML, program using phrase element tags
<blockquote>,<cite<,<abbr>,<acronym>,<nbd>,<address>
<html>
<head>
<title>Phrase Element Tags</title>
</head>
<body>
<blockqoute cite="http://www.w3schools.com/">
About W3Schools
</blockquote>
<img src="download.jpg" alt="Error">
<p><cite>W3Schools</cite>is one of the best site for basic
learners
</p>
<p><abbr title="World Wide Web Schools">W3Schools</abbr>
was originally created in 1998 by Refsnes Data, a Norwegian
software development and consulting company.</p>
<p><acronym title="World Wide Web
Schools">W3Schools</acronym> was originally created in 1998
by Refsnes Data, a Norwegian software development and
consulting company.</p>
<address>
<a href="http://www.w3schools.com">W3Schools</a></br>
Visit us at:<br>
AV College<br>
CS Deptment<br>
Hyderabad</br>
Telangana<br>
</address>
<kbd>Enlightening Lives through Education</kbd>
</body>
HTML Practical Page 2
</html>
5. Write a HTML program using different list types
<html>
<head>
<title>List Example</title>
</head>
<body>
<center>
<h1>Ordered List</h1>
<ol type="A">
<li> Red</li>
<li> White</li>
<li> Blue</li>
</ol>
<h1>Unordered List</h1>
<ul type="circle">
<li>Wipro</li>
<li>IBM</li>
<li>Infosys</li>
</ul>
<h1>Definition List</h1>
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheet</dd>
</dl>
<\center>
</body>
</html>
6. Write a HTML page that displays ingredients and instruction to prepare recipes
<html>
<head>
<title>Recipe-Basic Vanilla Cake</title>
</head>
<body>
<h1>Recipe-Basic Vanilla Cake</h1>
<h2>Ingredients:</h2>
<ul>
<li>1 1/2 cup sifted cake flour</li>
<li>1 1/2 table spoon baking powder</li>
<li>1/4 table spoon salt</li>
<li>1/2 cup unsalted butter</li>
<li>1 cup sugar</li>
HTML Practical Page 3
<li>2 Large Eggs</li>
<li>1/2 Table spoon vanilla extract</li>
<li>1/2 cup whole milk</li>
</ul>
<h2>Instructions:</h2>
<ol>
<li>
Heat the oven to 400 degrees F.Lightly coat an
8-inch pan with butter and dust with all purpose
flour.Sift the cake flour, baking powder, and salt
into a large mixing bowl.
</li>
<li>
Beat in the butter one heaping 1/4 teaspoonful at a
time, using an electric mixer set on low speed, until
the mixture resembles coarse sand. Beat in the sugar
a tablespoon at a time, until the mixture resembles
fine damp sand. Beat in the eggs one at a time. Add
the vanilla and milk, and beat on medium-high, just
until blended. Do not overbeat.
</li>
<li>
Pour into the prepared pan and bake until a wooden
skewer inserted in the center comes out clean-30 to
35 minutes Cool cake in the pan on a wire rack for
5 minutes.
</li>
<li>
Un-mold and cool completely. Ice with Browned-
Butter Glaze.
</li>
</ol>
<p>
Before you begin, check baking powder expiration data. If
if has passed, buy a fresh canister.
</p>
</body>
</html>
7. Write a HTML program using grouping elements <div> and <span>
<html>
<head>
<title>Grouping Elements</title>
</head>
<body>
<div class="Footnotes">
<p>Welcome to <i><span style="color:green";>
HTML Practical Page 4
W3Schools</span></i>Site
</p>
<p>
Visit site:<b><span style="color:blue";>
w3schools.com</span></br>
</p>
</div>
</body>
</html>
8. Write a HTML Menu page for Example café site.
<html>
<head>
<title>Menu page for a cafe</title>
</head>
<body>
<h1>Irani Cafe,Hyderabad</h1>
<h2>Hot Beverages</h2>
<ul>
<li>Tea</li>
<li>Coffee</li>
<li>Irani Black Tea</li>
</ul>
<h2>Bakery</h2>
<ul>
<li>Cream Roll</li>
<li>Fruity Cake</li>
<li>Nankatai</li>
</ul>
<h2>Cold Drinks</h2>
<ul>
<li>Cola Cola</li>
<li>Pespi</li>
<li>Maaza</li>
</ul>
</body>
</html>
9. Write a HTML program using images, audios, videos.
<html>
<head>
<title>HTML Media</title>
</head>
<body>
<h1>Image</h1>
<img src="C:\Users\Public\Pictures\Sample
Pictures\Penguins.jpg" height="100" width="100"
alt="error"><br>
HTML Practical Page 5
<h1>Audio</h1>
<audio controls>
<source src="kalimba.mp3" type="audio/mpeg">
</audio><br>
<h1>Video</h1>
<video width="320" height="240" controls>
<source src="videoplayback.mp4"
type="video/mp4">
</video>
</body>
</html>
10. Write a HTML program to create your time table.
<html>
<head>
<title>Time Table</title>
</head>
<body>
<h1>TIME TABLE</h1>
<table border="2" cellspacing="3" align="center">
<tr>
<td align="center">Days/Timings</td>
<td>9:00-9:50</td>
<td>9:50-10:40</td>
<td>10:40-10:50</td>
<td>10:50-11:40</td>
<td>11:40-12:20</td>
<td>12:20-1:00</td>
<td>1:00-2:00</td>
<td>2:00-3:00</td>
</tr>
<tr>
<td align="center">Monday</td>
<td align="center" colspan=2>---CPP Lab---</td>
<td align="center">Web Technologies</td>
<td align="center" rowspan=6>B<br>r<br>e<br>a<br>k</td>
<td align="center">-------</td>
<td align="center" rowspan=6>L<br>u<br>n<br>c<br>h<br>
B<br>r<br>e<br>a<br>k</td>
<td align="center" colspan="2">Web Technologies lab</td>
</tr>
<tr>
<td align="center">Tuesday</td>
<td align="center" colspan=2>-----CPP Lab----</td>
<td align="center">Web Technologies</td>
<td align="center">-------</td>
<td align="center" colspan="2">Web Technologies lab</td>
HTML Practical Page 6
</tr>
<tr>
<td align="center">Wednesday</td>
<td align="center">CPP</td>
<td align="center">--------</td>
<td align="center">Web Technologies</td>
<td align="center">-------</td>
<td align="center">----------</td>
<td align="center">---------</td>
</tr>
<tr>
<td align="center">Thursday</td>
<td align="center">CPP</td>
<td align="center">Web Technologies</td>
<td align="center">--------</td>
<td align="center">-------</td>
<td align="center">----------</td>
<td align="center">---------</td>
</tr>
<tr>
<td align="center">Friday</td>
<td align="center">CPP</td>
<td align="center">Web Technologies</td>
<td align="center">--------</td>
<td align="center">-------</td>
<td align="center" colspan=2>Web Technologies Lab</td>
</tr>
<tr>
<td align="center">Saturday</td>
<td align="center">CPP</td>
<td align="center">Web Technologies</td>
<td align="center">--------</td>
<td align="center">-------</td>
<td align="center" colspan=2>Web Technologies Lab</td>
<tr>
table>
</body>
</html>
11. Write a HTML program to create a form using text inputs, password inputs, multiple
line text input, buttons, checkboxes, radio buttons, selectboxes, and file select boxes.
<html>
<head>
<title>Forms</title>
</head>
<body>
<fieldset>
HTML Practical Page 7
<legend><h1>Application Form</h1></legend>
<form name="form1">
Name:
 
<input type="text" name="username"><br>
Email:
<input type="text" name="usermail"><br>
Password:
<input type="password" name="pass"><br>
Photo:
<input type="file" name="img"><br>
Languages known:<input type="checkbox">English
<input type="checkbox">Hindi
<input type="checkbox">Telugu<br>
Gender:
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender"
value="female">Female<br>
City:
<select id="city" name="city">
<option>---Select City---</option>
<option>Hyderabad</option>
<option>Warangal</option>
<option>Bangalore</option>
<option>Chennai</option>
</select><br>
Address:
<textarea rows="4" cols="40"></textarea><br><br><br>
<center>
<input type="Submit" value="Submit">
<input type="Reset" value="Reset">
</center>
</fieldset>
</form>
</body>
</html>
HTML Practical Page 8
12. Write a HTML program to create a frames and links between frames.
Save this file as MainPage.html
<html>
<head>
<title>Master page</title>
</head>
<frameset cols="50%,50%">
<frame src="Frame1.html">
<frame src="Frame2.html">
<frameset>
</html>
Save this file as Frame1.html
<html>
<head>
<title>Page One</title>
</head>
<body>
Welcome to Page One<br>
Click Here <a href="Frame3.html">to link to Page Three</a>
</body>
</html>
Save this file as Frame2.html
<html>
<head>
<title>Pae Two</title>
</head>
<body>
Welcome To Page Two
</body>
</html>
Save this file as Frame3.html
<html>
<head>
<title>Page Three</title>
</head>
<body>
Welcome To Page Three
</body>
HTML Practical Page 9
</html>
13. Write a program to create different types of style sheets.
Save with this name style.css
h1
{
color:red;
}
Style-sheets.html
<html>
<head>
<title>Different Style Sheets</title>
<style type="text/css">
@import url("style.css");
body
{
background-color:aqua;
font-size:16px;
} <!--Internal Style Sheet-->
</style>
</head>
<body>
<h1>Using External Style Sheet</h1>
<p style="color:blue;font-size:18px;">Inline Style Sheet</p>
</body>
</html>
14. Write a HTML program to create CSS on links,lists,tables and generated content.
<html>
<head>
<title>CSS onlinks,lists,tables and generated content</title>
<style type="text/css">
links.c
{
color:blue;
}
li.a,b
{
list-style-type:decimal;
}
table
{
width:350px;
border-collapse+separate;
}
HTML Practical Page 10
td
{
font-size:17px;
text-align:center;
border-width:4px;
border-color:green;
border-style:solid;
border-spacing:3pxpx;
}
blockquote:before
{
content:open-quote;
}
blockquote:after
{
content:close-quote;
}
</style>
</head>
<body>
<h1>CSS on links</h1>
<links class="c"><p><b><a href="default.asp"
target="_blank">click here </a></b></p></links>
<h1>CSS on Lists</h1>
<ol>
<li class="a">Ordered list style one</li>
<li class="b">ordered list style two</li>
</ol>
<h1>CSS on Tables</h1>
<table>
<tr>
<th>Fruits</th>
<th>color</th>
</tr>
<tr>
<td>Apple</td>
<td>green</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
</table>
<h3>CSS on Generated Content</h3>
<blockquote>Example of CSS on generated content </blockquote>
</body>
</html>
HTML Practical Page 11
15. Write a HTML program to create your college web site using multi column layouts.
<html>
<head>
<title>AV college Home</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1">
<style>
*{
box-sizing:border-box;
}
body
{
margin:0;
}
.header
{
background-color:aqua;
padding:9px;
font-size:40px;
}
.topnav
{
overflow:hidden;
background-color:gray;
}
.topnav a
{
float:left;
display:block;
color:#f2f2f2;
text-align:center;
padding:14px 16px;
text-decoration:none;
}
.topnav a:hover
{
background-color:#dddddd;
color:black;
}
.column
{
float:left;
padding:8px;
}
HTML Practical Page 12
.column.side
{
width:25%;
background-color:sliver;
}
.column.middle
{
width:50%;
}
.row:after
{
content:" ";
display:table;
clear:both;
}
@media screen and(max-width:600px)
{
.column:side,.column.middle
{
width:100%;
}
}
.footer
{
background-color:olive;
padding:7px;
text-align:center;
}
</style>
</head>
<body>
<div class="header">
<img src="avcollege.jpg" alt="inaugral.jpg" height="50"
width="70"<h1><b>Av College of Arts,Science and Commerce
</b></h1></img>
</div>
<div class="topnav">
<a href="#">Administration</a>
<a href="#">Course</a>
<a href="#">Examinations</a>
<a href="#">Affiliation</a>
<a href="#">Accredation</a>
<a href="#">About</a>
</div>
<div class="row">
<div class="column side">
<h2>Quick Links</h2>
HTML Practical Page 13
<a href="#">Annual Reports</a><br><br>
<a href="#">Classwork Timetables</a><br><br>
<a href="#">Holiday Notification</a><br><br>
<a href="#">Student Activity center</a><br><br>
<a href="#">Traning and Placement</a><br><br>
<a href="#">Research</a><br><br>
<a href="#">NBA Accredation</a><br><br>
<a href="#">Academics</a><br><br>
<a href="#">Almanac</a><br><br>
<a href="#">Departments</a><br><br>
<a href="#">Contanct Us</a><br><br>
</div>
<div class="column middle">
<img src="download.jpg" alt="inaugral" height="400"
width="530">
<p>The institution was started in 1944 at kattelamandi(now
Gagan Mahal) as a small school by its founder was Konda
Venkata Ranga Reddy,former Deputy Chief Minister of
Andhra Pradesh</p>
</div>
<div class="column side">
<h2>Vision</h2>
<p>To make our students technologically superior and
ethically strong by providing quality education with the
help of out dedicated faculty and staff and thus improve the
quality of human life.</p>
<h3>Mission</h3>
<p>To provide latest technical knowledge,analytical and
practicl skills,managerial competence and interactive
abilities to students,so that their employability is enhanced.
To provide a strong human resource base for catering to the
changing needs of the Industry and Commerce
To inculcate a sense of brotherhood and national
integrity.</p>
</div>
</div>
<div class="footer">
<p><b>Copy Right ©2018.All Rights Reserverd by AVCollege</p>
</div>
</body>
</html>
16.Write a HTML program to create your college website using for mobile device.
<html>
<head>
<title>AV college Home</title>
<meta charset="utf-8">
HTML Practical Page 14
<meta name="viewport"
content="width=device-width,initial-scale=1">
<style>
@media screen and(max-width:481px){
*{
box-sizing:border-box;
}
body
{
margin:0;
}
.header
{
background-color:aqua;
padding:9px;
font-size:40px;
}
.topnav
{
overflow:hidden;
background-color:gray;
}
.topnav a
{
float:left;
display:block;
color:#f2f2f2;
text-align:center;
padding:14px 16px;
text-decoration:none;
}
.topnav a:hover
{
background-color:#dddddd;
color:black;
}
.column
{
float:left;
padding:8px;
}
.column.side
{
width:25%;
background-color:sliver;
}
.column.middle
{
HTML Practical Page 15
width:50%;
}
.row:after
{
content:" ";
display:table;
clear:both;
}
.column:side,.column.middle
{
width:100%;
}
}
.footer
{
background-color:olive;
padding:7px;
text-align:center;
}
}
</style>
</head>
<body>
<div class="header">
<img src="avcollege.jpg" alt="inaugral.jpg" height="50"
width="70"<h1><b>Av College of Arts,Science and Commerce
</b></h1></img>
</div>
<div class="topnav">
<a href="#">Administration</a>
<a href="#">Course</a>
<a href="#">Examinations</a>
<a href="#">Affiliation</a>
<a href="#">Accredation</a>
<a href="#">About</a>
</div>
<div class="row">
<div class="column side">
<h2>Quick Links</h2>
<a href="#">Annual Reports</a><br><br>
<a href="#">Classwork Timetables</a><br><br>
<a href="#">Holiday Notification</a><br><br>
<a href="#">Student Activity center</a><br><br>
<a href="#">Traning and Placement</a><br><br>
<a href="#">Research</a><br><br>
<a href="#">NBA Accredation</a><br><br>
<a href="#">Academics</a><br><br>
<a href="#">Almanac</a><br><br>
HTML Practical Page 16
<a href="#">Departments</a><br><br>
<a href="#">Contanct Us</a><br><br>
</div>
<div class="column middle">
<img src="download.jpg" alt="inaugral" height="400"
width="530">
<p>The institution was started in 1944 at kattelamandi(now
Gagan Mahal) as a small school by its founder was Konda
Venkata Ranga Reddy,former Deputy Chief Minister of
Andhra Pradesh</p>
</div>
<div class="column side">
<h2>Vision</h2>
<p>To make our students technologically superior and
ethically strong by providing quality education with the
help of out dedicated faculty and staff and thus improve the
quality of human life.</p>
<h3>Mission</h3>
<p>To provide latest technical knowledge,analytical and
practicl skills,managerial competence and interactive
abilities to students,so that their employability is enhanced.
To provide a strong human resource base for catering to the
changing needs of the Industry and Commerce
To inculcate a sense of brotherhood and national
integrity.</p>
</div>
</div>
<div class="footer">
<p><b>Copy Right ©2018.All Rights Reserverd by AVCollege</p>
</div>
</body>
</html>
17. Write a HTML program to create login form and verify username and password using
DOM
18. Write a Java script program to calculate area of rectangle using function.
<html>
<head>
<title>Login Form</title>
</head>
<body>
<h1 style= "text-align:
center;font-size:40pt;color:#00FF00;">Login Form</h1>
<form name="login">
HTML Practical Page 17
Username:<input type="text" name="username"><br><br>
password:<input type="password"
name="pswrd"><br><br>
<input type="button" onclick="validate(this.form)"
value="Login"><br>
</form>
<script language="javascript">
function validate(form)
{
if(form.username.value=="saigroup"
&&form.pswrd.value=="siagrouppassword)
{
window.open("http://www.siapublish
ers.com")
}
else
{
alert("Please Enter the valid
username and password")
}
}
</script>
</body>
</html>
<html>
<head>
<script >
var length = prompt("Enter a whole number for the length of your
rectangle.");
var width = prompt("Enter a whole number for the width of your
rectangle.");
function area(length, width)
{
return length * width;
}
document.writeln('The area of your rectangle is ' + area(length,
width));
</script>
</head>
<body>
</body>
</html>
HTML Practical Page 18
19. Write a Java script program to wish good morning, good afternoon, good evening
depending on the current time.
<html>
<head>
<title>Show good morning good night wish as per time Javascript</title>
</head>
<body>
<script type="text/javascript">
document.write("<center><font size=+3 style='color:
green;'>");
var day = new Date();
var hr = day.getHours();
if (hr >= 0 && hr < 12)
{
document.write("Good Morning!");
}
else if (hr == 12)
{
document.write("Good Noon!");
}
else if (hr >= 12 && hr <= 17)
{
document.write("Good Afternoon!");
}
else
{
document.write("Good Evening!");
}
document.write("</font></center>");
</script>
</body>
</html>
20.Write a JavaScript program using switch case.
<html>
<body>
<p id="demo"></p>
<script>
var day;
switch (new Date().getDay())
{
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
HTML Practical Page 19
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
document.getElementById("demo").innerHTML = "Today
is " + day;
</script>
</body>
</html>
21. Write a JavaScript program to print a multiplication table of a given number using a
loop.
<html>
<head>
<title>Multiplication Table</title>
</head>
<body>
<p>
<script type="text/javascript">
var num=prompt("Enter any number");
i=1
while(i<=10)
{
document.write(num + " x " + i + " = " +
(num*i) + "<br>")
i++;
}
</script>
</p>
</body>
</html>
22.Write a JavaScript program using any 5 events.
i. .<!-- onLoad Event-->
<html>
<head>
HTML Practical Page 20
<title>onLoad Event Program</title>
<script>
function disc()
{
alert("This current document cannot be loaded!");
}
</script>
</head>
<body>
<img src="avcollege.jpg" onload="disc()" width="100"
height="132">
<b>Close this window or press F5 to reload the page</b>
</body>
</html>
ii. onUnload Event
<html>
<head>
<script>
function myFunction()
{
alert("Thank you for visiting W3Schools!");
}
</script>
</head>
<body onunload="myFunction()">
<h2>Welcome to my Home Page</h2>
<p>Close this window or press F5 to reload the page.</p>
</body>
</html>
iii. onError Event
<html>
<head>
<script>
function imgError()
{
alert('The image could not be loaded.');
}
</script>
</head>
<body>
<img src="image.gif" onerror="imgError()">
HTML Practical Page 21
<p>A function is triggered if an error occurs when loading the image. The
function shows an alert box with a text.
In this example we refer to an image that does not exist, therefore the
onerror event occurs.</p>
</body>
</html>
iv. onMouseOver/onMouseOut Event
<html>
<head>
<script>
function bigImg(x)
{
x.style.height = "64px";
x.style.width = "64px";
}
function normalImg(x)
{
x.style.height = "32px";
x.style.width = "32px";
}
</script>
</head>
<body>
<img onmouseover="bigImg(this)"
onmouseout="normalImg(this)" border="0" src="download.png"
alt="Smiley" width="32" height="32">
<p>The function bigImg() is triggered when the user moves the
mouse pointer over the image.</p>
<p>The function normalImg() is triggered when the mouse pointer
is moved out of the image.</p>
</body>
</html>
v. onClick Event:
<html>
<head>
<script type = "text/javascript">
function sayHello()
{
alert("Hello World")
HTML Practical Page 22
}
</script>
</head>
<body>
<p>Click the following button and see result</p>
<form>
<input type = "button" onclick =
"sayHello()" value = "Say Hello" />
</form>
</body>
</html>
23. Write a JavaScript program using JavaScript built in objects.(in this program I used
date built in functions).
<html>
<body>
<center>
<h2>Date Methods</h2>
<script type="text/javascript">
var d = new Date();
document.write("<b>Locale String:</b> " + d.toLocaleString()+"<br>");
document.write("<b>Hours:</b> " + d.getHours()+"<br>");
document.write("<b>Day:</b> " + d.getDay()+"<br>");
document.write("<b>Month:</b> " + d.getMonth()+"<br>");
document.write("<b>FullYear:</b> " + d.getFullYear()+"<br>");
document.write("<b>Minutes:</b> " + d.getMinutes()+"<br>");
</script>
</center>
</body>
</html>
24. Write a JavaScript program to create registration form validate all fileds using form
validation.
<html>
<head>
<title>form validation</title>
<style type="text/css">
formTitle{vertical-align:top;text-align:right;}
</style>
<script type="text/javascript">
funtion validate(form)
{
var returnValue=true
var name=form.txtName.value
if(name=="")
{
HTML Practical Page 23
returnValue=false;
alert("you must enter a name")
document.frmRegistration.txtname.focus();
}
var email=form.txtEmail.value
var
rxEmail=/^\w(\.?[\w-])*@\w(\.?[\w-])*\.[a-z]{2,6}(\.[a-z]{2})?$/i;
if(!rxEmail.test(email))
{
returnValue=false;
alert("you must enter a valid email address")
document.frmRegistration.txtEmail.focus()
}
var phone=form.txtPhone.value
if(phone==" ")
{
returnValue=false;
alert("you must enter your phone number")
document.frmRegistration.txtPhone.focus();
}
var radioChosen=false;
var radioButtons=form.radGender;
for(var i=0;i<radioButtons.length;i++)
{
if(radioButtons[i].checked)
{
radioChosen=true;
}
}
if(radioChosen==false)
{
returnValue=false;
alert("you must choose your gender");
}
var Address=form.txtAddress.value
var AddressWords=Address.split(" ");
if(Address==" ")
{
returnValue=false;
alert("you must enter your address")
document.frmRegistration.txtAddress.focus();
}
return returnValue
}
</script>
</head>
<body>
HTML Practical Page 24
<form name="frmRegistration" action="welcome.html"
method="post" onsubmit="return validate(this);">
<h2>Registration Form</h2>
<table>
<tr>
<td class="formTitle">Name:</td>
<td><input type="text" name="txtName"
size="18"/></td>
</tr>
<tr>
<td class="formTitle">Email:</td>
<td><input type="text" name="txtEmail"
size="18"/></td>
</tr>
<tr>
<td class="formTitle">Phone:</td>
<td><input type="text" name="txtPhone"
size="18"/></td>
</tr>
<tr>
<td class="formTitle">Gender:</td>
<td><input type="radio" name="radGender"
value="male"/>Male<br/>
<input type="radio" name="radGender"
value="female"/>Female
</td>
</tr>
<tr>
<td class="formTitle">Address:</td>
<td><textarea cols="50" rows="4"
name="txtAddress"/></textarea></td>
</tr>
<tr>
<td class="formTitle"></td>
<td><input type="submit"
value="Register"/></td>
</tr>
</table>
</form>
</body>
</html>
Save with welcome.html
<html>
<head>
<title>Welcome</title>
</head>
<body>
HTML Practical Page 25
<h1>Registration done sucessfully</h1>
</body>
</html
25. Write a XML Program to represent Student Data using DTD.
student.xsl
<?xml version = “1.0”?>
<!--student.xsl-->
<xsl:stylesheet version=”1.0”
xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”
xmlns=”http://www.w3.org/TR/xhtm11/strict”>
<xsl:template match=”/”>
<h2> Student record</h2>
<xsl:for-each select=”students/student”>
<br/>
<span style= “font-weight:bold;color:red”> FirstName:</span>
<xsl:value-of select= “name/firstname”/>
<span style= “font-weight:bold;color:red”> LastName:</span>
<xsl:value-of select= “name/lastname”/> <br/>
<span style= “font-weight:bold;color:green”> Street:</span>
<xsl:value-of select= “address/street”/> <br/>
<span style= “font-weight:bold;color:green”> City:</span>
<xsl:value-of select= “address/city”/> <br/>
<span style= “font-weight:bold;color:blue”> Email:</span>
<xsl:value-of select= “address/email”/> <br/>
<span style= “font-weight:bold;color:green”> Phone:</span>
<xsl:value-of select= “address/phone”/> <br/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
student.css
<!--student.css-a style sheet for the student.xml document-->
student{display: block; margin-top:15px; color:blue;}
name{display: block; margin-left:40px;margin-top: 30pt;color:red}
firstname{font-size; 28pt;}
lastname{font-size; 28pt;}
address{display: block; margin-left:40px:color:green}
street{display: block;font-size: 18pt;}
city{display: block;font-size: 18pt;}
email{display: block;font-size: 18pt;color:blue}
phone{display: block;font-size: 18pt;}
student4.xml
<?xml version= “1.0”?>
<!--student4.xml for XSLT-- >
HTML Practical Page 26
<?xml-stylesheet type= “text/xsl” href= “student.xsl”?>
<students>
<student>
<name>
<firstname>K</firstname>
<lastname>Raj</lastname>
</name>
<address>
<street> Pragathi Nagar</street>
<city> Hyderabad</city>
<email> raj001@gmail.com</email>
<phone> 9000007777</phone>
</address>
</student>
<student>
<name>
<firstname>M</firstname>
<lastname>Rajini</lastname>
</name>
<address>
<street> SR Nagar</street>
<city> Hyderabad</city>
<email> rajini002@gmail.com</email>
<phone> 9000007999</phone>
</address>
</student>
</students>
26.Write a xml Program to represent Data using XML Schema Definition.
<xs:schema xmlns: xs=”www.universal.com/examples”>
<xs:element name= “Author name” type=”xs:string”/>
<xs:element name= “date_of_birth” type=”xs:date”/>
<xs:element name= “Education” type=”xs:string”/>
<xs:attribute name= “availability” type=”xs:boolean”/>
<xs:attribute name= “Identifier” type=”xs:ID”/>
<xs: element name = “book_title”>
<xs: complex Type>
<xs: simpleContent>
<xs:extention base = “xs:String”>
</xs: extension>
</xs: simpleContent>
</xs: complex Type>
</xs: element>
<xs: element name= “Library_System”>
<xs: complexType>
<xs: Sequence>
<xs: elementref= “books” maxOccurs= “unbounded”/>
HTML Practical Page 27
</xs: Sequence>
</xs: complex Type>
</xs: element>
</xs: element name= “Author”/>
<xs: complexType>
<xs: sequence>
<xs: element ref = “Author_name”>
<xs: element ref = “date_of_birth”>
</xs: sequence>
</xs:sequence>
<xs: attribute ref= “Identifier”>
<xs: complexType>
</xs: element>
<xs: element name=”books”>
<xs: complexType>
<xs: sequence>
<xs: element ref = “Book_title”>
<xs:element ref = “Author” minOccurs = “0” maxOccurs= “unbounded”>
<xs:element ref = “Character” minOccurs = “0” maxOccurs= “unbounded”>
</xs:sequence>
<xs:attribute ref=“Identifier”/>
</xs:attribute ref=“availability”/>
</xs: complexType>
</xs: element>
<xs: element name= “Character”/>
<xs: complexType>
</xs: sequence>
<xs: element ref = “Author_name”/>
<xs: element ref = “date_of _birth”/>
<xs: element ref = “qualification”/>
</xs: sequence>
<xs:attribute ref=“Identifier”/>
</xs: complexType>
</xs: element>
</xs: schema>
It’s equivalent XML document is given below,
<library>
<books Identifier = “B213” availability= “true”>
<book_title> Web Technologies</book_title>
<Author identifier=”Soono”>
< Author_name> Duke</Author_name>
<date_of _birth> 1980-01-01</date_of _birth>
</Author>
<Character identifier=”Bravoe”>
< Author_name>Praveen</Author_name>
<date_of _birth> 1978-06-01</date_of _birth>
<Qualification >PHD</Qualification >
</Character>
HTML Practical Page 28
< Author_name>Bharat</Author_name>
<date_of _birth> 1980-07-06</date_of _birth>
<Qualification >MCA</Qualification >
</Character>
</books>
</library>
HTML Practical Page 29
You might also like
- WEB PROG LAB MANUAL (1) .PDF - 20241021 - 221139 - 0000 PDFNo ratings yetWEB PROG LAB MANUAL (1) .PDF - 20241021 - 221139 - 0000 PDF22 pages
- Web Development Design Foundations html5 8th Edition Felke Morris Solutions Manual PDFNo ratings yetWeb Development Design Foundations html5 8th Edition Felke Morris Solutions Manual PDF6 pages
- DEEPANSHU e Commerce Practical File PDFNo ratings yetDEEPANSHU e Commerce Practical File PDF48 pages
- Guru Nanak Dev Engg College: Web Technologies Laboratory (LPCIT - 107)No ratings yetGuru Nanak Dev Engg College: Web Technologies Laboratory (LPCIT - 107)51 pages
- Jjp-Sm-Web Designing Using HTML - 9 Practicals With Solution - Pr-1 To Pr-9 For StudentNo ratings yetJjp-Sm-Web Designing Using HTML - 9 Practicals With Solution - Pr-1 To Pr-9 For Student13 pages
- Gitlab CI Course Notes: Release March 2020No ratings yetGitlab CI Course Notes: Release March 202039 pages
- Cat Self & Kate Esprit - Becoming A Dark Knight Adversary Emulation Demonstration For ATT&CK EvaluationsNo ratings yetCat Self & Kate Esprit - Becoming A Dark Knight Adversary Emulation Demonstration For ATT&CK Evaluations36 pages
- FactoryTalk - View - Connectivity - Guide KeepServer OPCNo ratings yetFactoryTalk - View - Connectivity - Guide KeepServer OPC18 pages
- Water Simulation On WebGL and Three - JsNo ratings yetWater Simulation On WebGL and Three - Js42 pages
- DevOps Shack - Mastering Git A Comprehensive GuideNo ratings yetDevOps Shack - Mastering Git A Comprehensive Guide41 pages
- Drupal Developer with Government ExperienceNo ratings yetDrupal Developer with Government Experience4 pages
- Hacking Experiment Using USB Rubber Ducky ScriptingNo ratings yetHacking Experiment Using USB Rubber Ducky Scripting6 pages
- Asis, Jonah Francis, R. - Configuring Initial Switch SettingsNo ratings yetAsis, Jonah Francis, R. - Configuring Initial Switch Settings9 pages
- MS-Power Point INTRODUCTION AND IMPORTANT TOPICSNo ratings yetMS-Power Point INTRODUCTION AND IMPORTANT TOPICS7 pages
