Scribd
Upload
49 views13 pages

Web Manual

The document provides instructions on how to create and run XHTML programs in different environments, including Windows and Fedora. It includes multiple example programs demonstrating various functionalities such as displaying tables, images, hyperlinks, and lists, as well as JavaScript applications for validation, calculations, and dynamic text effects. Additionally, it covers external CSS styles and a Perl program for user interaction.

Uploaded by

varshaverma07082004
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
49 views13 pages

Web Manual

The document provides instructions on how to create and run XHTML programs in different environments, including Windows and Fedora. It includes multiple example programs demonstrating various functionalities such as displaying tables, images, hyperlinks, and lists, as well as JavaScript applications for validation, calculations, and dynamic text effects. Additionally, it covers external CSS styles and a Perl program for user interaction.

Uploaded by

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

XHTML Program can be executed in any browser (Internet Explorer, Netscape Navigator)

To edit the XHTML program: In Windows, Type the program in notepad , name it as… filename.HTML

In FEDORA, to go to HTML folder …. type ....Localhost# CD /VAR/WWW/HTML….In


HTML Folder…Type VI (Editor) then followed by, filename.HTML(Extension) as, (VI
program1.HTML)…Type the program , and then save it….: WQ (Save n Quit).

TO RUN THE PROGRAM: In Windows, open Internet Explorer …Select the HTML file ..in URL field to
Run the document.

IN FEDORA …Open Browser…In FILES Option  Select ..Open File  Select …File System
Select…VAR Select…WWW Select…HTML Then select HTML file to be Run.

OR

URL to run the file: http://localhost/prg1.html

Program 1: Create a XHTML document to display a table, an image, hyperlink and different
lists available in XHTML.

<?xml version = "1.0" encoding = "utf-8" ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Lab program 1 </title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
<h1> To Display a Table </h1>
<table border=”border”>
<caption> Fruit Juice Drink </caption>
<tr>
<td rowspan=”2”></td>
<thcolspan=”3”>Fruit Drinks </th>
</tr>
<tr>
<th> Apple </th>
<th> Orange</th>
<th> Screwdriver</th>
</tr>
<tr>
<th> Breakfast </th>
<td> 0 </td>
<td> 1 </td>
<td> 1 </td>
</tr>
<tr>
<th> Lunch </th>
<td>1 </td>
<td> 0 </td>
<td> 0 </td>
</tr>
<tr>
<th> Dinner</th>
<td> 0 </td>
<td>1 </td>
<td> 0 </td>
</tr>
</table>
<h1> To Display an Image </h1>
<img src=”apple.jpg” alt=”Picture of Apple”/>
<br/>
<h1> To Exhibit Hyperlink </h1>
<a href=”program.html”> Click here </a>
<br />
<br />
<h1> Unordered List </h1>
<ul>
<li> Apple </li>
<li> Orange </li>
<li> Banana </li>
</ul>
<h1> Ordered List </h1>
<ol>
<li> Benz </li>
<li> Toyota </li>
<li>Tata </li>
</ol>
<h1> Definition List </h1>
<dl>
<dt> 101 </dt>
<dd>Deepika</dd>
<dt> 201 </dt>
<dd>Kareena</dd>
<dt> 301 </dt>
<dd> Katrina</dd>
</dd>
</body>
</html>
External Style Sheet ….// mystyle.css :Type and save mystyle.css in
HTML folder.

p,table,li,
{
font-family: "lucida calligraphy", arial, 'sans serif';
margin-left: 10pt;
}

p { word-spacing:5px; }

body { background-color:rgb(200,255,205); }

p,li,td { font-size:75%;}

td { padding:0.5cm; }

th {
text-align:center;
font-size:85%;
}

h1,h2,hr {color: #483d8b;}

table
{
border-style:outset;
background-color: rgb(100,255,105);
}

li {list-style-type:lower-roman;}

span
{
color:blue;
background-color:pink;
font-size:29pt;
font-style:italic;
font-weight:bold;
}
Program 2: Develop and demonstrate, using JavaScript script, a XHTML document that collects
the USN ( the valid format is: A digit from 1 to 4 followed by two upper-case characters followed by
two digits followed by two upper-case characters followed by three digits; no embedded spaces
allowed) of the user. Event handler must be included for the form element that collects this
information to validate the input. Messages in the alert windows must be produced when errors are
detected.

<?xml version = "1.0" encoding = "utf-8" ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head><title> Program-2 </title>
<script type='text/javascript'>
function validator()
{
var usn = document.getElementById('req1');
alert(usn.value);
if(iscorrect(usn))
{
return true;
}
return false;
}

function iscorrect(elem1)
{
usnexp=/[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]$/
if(elem1.value.length==0)
{
alert("US Number is empty");
elem1.focus();
return false;
}
else if(!elem1.value.match(usnexp))
{
alert("USN Number should be in DAADDAADDD format");
elem1.focus();
return false;
}
alert("USN Number IS CORRECT");
return true;
}
</script></head>
<body>
<form onsubmit='return validator()'>
Enter your USN. in DAADDAADDD format : <input type='text' id='req1'/>
<input type='submit' value='Check Field' />
</form>
</body>
</html>
Program 3: Write a JavaScript to design a simple calculator to perform the following
operations: sum, product, difference and quotient.
<?xml version = "1.0" encoding = "utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head> <title>Calculator</title>
<style>
.button { background-color: #4CAF50; /* Green */
border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none;
display: inline-block; font-size: 16px; }
</style>
<script src="calculator.js" type="text/javascript"></script>
</head>
<body>
<h1>My calculator</h1>
<table border="1" cellpadding="5" cellspacing="5" width="600">
<tr align="center">
<td>First number</td> <td>Second Number</td> <td>Result</td>
</tr>
<tr align="center">
<td><input name="number1" type="text" size=10 id='num1'/> </td> <td>
<input name="number2" type="text" size=10 id='num2'/> </td> <td>
<input type="text" id='result' onclick="this.blur()" > </td>
</tr>
<tr> <td colspan="3">
<button class="button" onclick="showresult('1')">+ </button>
<button class="button" onclick="showresult('2')">- </button>
<button class="button" onclick="showresult('3')">* </button>
<button class="button" onclick="showresult('4')">/ </button>
<button class="button" value="CLEAR ALL" onclick="cls()"/>CLEAR</td> </td>
</tr>
</table>
</body>
</html>

calculatotr.js

function cls()
{ num1.value="";
num2.value="";
result.value=""; }
function showresult(choise)
{ var n1=parseFloat(document.getElementById('num1').value);
var n2=parseFloat(document.getElementById('num2').value);
var r;
var c=choise;
switch(c) { case '1': r=n1+n2; break;
case '2': r=n1-n2; break;
case '3': r=n1*n2; break;
case '4': r=n1/n2; break;
default: break; }
document.getElementById('result').value=r; }

Program 4: Write a JavaScript that calculates the squares and cubes of the numbers from 0 to
10 and outputs HTML text that displays the resulting values in an HTML table format.
<?xml version = "1.0" encoding = "utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head> <title>Program 4 0-10 Square and Cubes </title>
<script>
document.write ( "<center><table> <tr> <th>Number</th> <th>Square</th> <th>Cube</th>
</tr>" )
for(var n=0; n<=10; n++)
{ document.write( "<tr><td>" + n + "</td><td>" + n*n + "</td><td>" + n*n*n + "</td></tr>" )
}
document.write( "</table></center>" )
</script>
<style> table { color: #333; /* Lighten up font color */
font-family: Helvetica, Arial, sans-serif; /* Nicer font */
width: 640px; border-collapse: collapse; border-spacing: 0; }
td, th { border: 1px; solid #CCC; height: 30px; } /* Make cells a bit taller */
th {background: #2676af; /* Light grey background */
font-weight: bold; /* Make sure they're bold */ }
td {background: #FAFAFA; /* Lighter grey background */
text-align: center; /* Center our text */ }
</style>
</head>
</html>
Program 5: Write a JavaScript code that displays text “TEXT-GR OWING” with increasing
font size in the interval of 100ms in RED COLOR, when the font size reaches 50pt it displays
“TEXT-SHRINKING” in BLUE color.Then the font size decreases to 5pt.

<?xml version = "1.0" encoding = "utf-8" ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head> <title>JavaScript - Grow and Shrink Text </title>
<script type="text/javascript">
var c = 0, t1;
function start()
{ t1 = window.setInterval("incr()", 100);
}
function incr()
{ c = c + 1;
t.innerHTML = "TEXT-GROWING : " + c + "pt";
t.style.fontSize = c + "pt";
//window.status = c;
if (c > 50)
{ window.clearTimeout(t1);
alert("Font Size Reached 50pt. Text will Now Shrink");
t1 = window.setInterval("decr()", 100); }
t.style.color = "red";
}
function decr()
{ c = c - 1;
t.innerHTML = "TEXT-SHRINKING: " + c + "pt";
t.style.fontSize = c + "pt";
//window.status = c;
if (c == 5)
{ window.clearTimeout(t1); }
t.style.color = "blue"; }
</script> </head>
<body bgcolor="#ffdead" onload="start()">
<center> <p id="t"> </p> </center>
</body>
</html>
Program 6: Develop and demonstrate, using JavaScript, and XHTML document to make an
image toggle on click of a button.

<?xml version = "1.0" encoding = "utf-8" ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head><title> Visibility Control </title>
<script type='text/javascript' src=’showhide.js’>
</script>
</head>
<body>
<form action=””>
<div id=’apple’ style=”position:relative; visibility:visible;”>
<img src=”apple.jpg”/>
</div>
<p>
<input type=”button” value=”Toggle Image” onclick=”flipimage()”/>
</p>
</form>
</body>
</html>

Showhide.js

Function flipimage()
{ dom=document.getElementById(“apple”).style;
if(dom.visibility==”visible”)
dom.visibility=”hidden”;
else
dom.visibility=”visible”;
}
Program 7: Develop and demonstrate, using Java script , a XHTML document that contains
three short paragraphs of text, stacked on top of each other, with only enough of each showing so
that the mouse cursor can be placed over some part of them. When the cursor is placed over the
exposed part of any paragraph, it should rise to the top to become completely visible. When a
paragraph is moved from the top stacking position, it should return to its original position.

<?xml version = "1.0" encoding = "utf-8" ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head><title> Paragraph Stacking </title>
<link rel=”stylesheet” type=”text/css” href=”stacking.css”/>
<script type='text/javascript'>
var toplayer=”layer4”;
function stack(totop)
{
var oldtop=document.getElementById(toplayer).style;
var newtop=document.getElementById(totop).style;
oldtop.zIndex=”0”;
newtop.zIndex=”10”;
toplayer=document.getElementById(totop).id;
}
</script>
</head>

<body bgcolor=”teal”>
<h1> Program to demonstrate usage of stacking of paragraph</h1>
<div class=”ls1”
id=”layer1” onmouseover=”stack(‘layer1’)”>
<b>… FIRST PARAGRAPH..DOWN ONE(Pink)…………..</b>
</div>

<div class=”ls2”
id=”layer2” onmouseover=”stack(‘layer2’)”>
<b>… SECOND PARA..LAST BUT ONE(Blue)…………..</b>
</div>

<div class=”ls3”
id=”layer3” onmouseover=”stack(‘layer3’)”>
<b>… THIRD PARA..(Gray)…....</b>
</div>

<div class=”ls4”
id=”layer4” onmouseover=”stack(‘layer4’)”>
<b>… TOP LAYER..FOURTH PARAGRAPH…(Yellow)…...</b>
</div>
</body>
</html>
External Style Sheet ….// stacking.css :Type and save stacking.css in
HTML folder.

.ls1 { border:solid-thick-block;
padding:1in;
width:500px;
background-color:pink;
position:absolute;
top:100px;
left:200px;
}
.ls2 { border:solid-thick-block;
padding:1in;
width:500px;
background-color:blue;
position:absolute;
top:150px;
left:250px;
}
.ls3 { border:solid-thick-block;
padding:1in;
width:500px;
background-color:gray;
position:absolute;
top:200px;
left:300px;
}
.ls4 { border:solid-thick-block;
padding:1in;
width:500px;
background-color:yellow;
position:absolute;
top:250px;
left:350px;
}
Program 8: Write a Perl program to accept the User Name and display a greeting message
randomly chosen from a list of 4 greeting messages.

Save in CGI-BIN as greeting.pl

PERL Program should be stored in CGI-BIN Folder…In FEDORA, to go to CGI-BIN folder


Type....Localhost# CD /VAR/WWW/CGI-BIN….In CGI-BIN Folder…Type VI (Editor) then followed by
filename.pl (Extension) as, (VI program7a.pl)…Type the program, and then save it: WQ (Save n
Quit).

All PERL Program should be set permission before running as:

Localhost:CGI-BIN# chmod 777 filename.pl

And make sure that the Apache Server is running:

Localhost:CGI-BIN# httpd

To Run perl program, open browser and type URL as: http://localhost/cgi-bin/greeting.pl

#!/usr/bin/perl
use CGI ':standard';
@msg = ("Welcome","Have a nice","Good Morning","Good Day");
$range = 4;
$random_number = int(rand($range));
if(param)
{
print header();
print start_html(-title=>"User Name",-bgcolor=>"Pink",-
text=>"blue");
$cmd=param("name");
print b("Hello $cmd,$msg[$random_number]"),br();
print start_form();
print submit(-value=>"Back");
print end_form();
print end_html();
}
else
{
print header();
print start_html(-title=>"Enter user name",-
bgcolor=>"yellow",-text=>"blue");
print start_form(),textfield(-name=>"name",-value=>" "),
submit(-name=>"submit",-value=>"Submit"),reset();
print end_form();
print end_html();
}
Program 9: Write a Perl program to insert name and age information entered by the user into a
table created using MySQL and to display the current contents of this table.

To Create DataBase: localhost # /etc/init.d/httpd start …./To Start Apache Server /.

localhost # /etc/init.d/mysqld start ..../To Start mysql server /.

Goto mysql > show databases; / show the existing DataBases /.

mysql> create database muz; / DataBase by name muz is created /.

mysql> use muz; /Allows to use DataBase muz /.

mysql> Create table stud (name varchar(15), age varchar(3));

mysql>desc stud; / Gives description of table created /.

mysql> GRANT SELECT,INSERT,DELETE,UPDATE ON muz.* TO apache@localhost

IDENTIFIED BY ‘cool’;

Type n Save as 9.pl in CGI-BIN Folder, and then set permission.

#! /usr/bin/perl
print "Content-type: text/html\n\n";
print "<HTML><HEAD><TITLE>Result of the insert operation
</TITLE></HEAD>";
use CGI ':standard';
use DBI;
$dbh=DBI->connect("DBI:mysql:muz","apache","cool");
$name=param("name");
$age=param("age");
$qh=$dbh->prepare("insert into stud values('$name','$age')");
$qh->execute();
$qh=$dbh->prepare("Select * from stud");
$qh->execute();
print "<table border size=1><tr><th>Name</th><th>Age</th></tr>";

while ( ($name,$age)=$qh->fetchrow())
{
print "<tr><td>$name</td><td>$age</td></tr>";
}

print "</table>";
$qh->finish();
$dbh->disconnect();
print"</HTML>";
Type html Program in, HTML Folder. And run it on the browser.

<html>
<body>
<h1> Enter Information :</h1>
<form action="http://localhost/cgi-bin/10.pl">
Name : <input type="text" name="name"> <br>
Age :<input type="text" name="age"> <br>
<input type="submit" value="SUBMIT">
<input type="reset" value="RESET">
</form>
</html>

You might also like