Scribd
Upload
5 views

Web Programming - List of Practicals

The document outlines various exercises in HTML, JavaScript, PHP, and Perl, demonstrating different web development techniques. Each exercise includes an aim, algorithm, and coding examples for tasks such as text formatting, image handling, form creation, and event handling. The document serves as a guide for creating web pages and applications with specific functionalities.

Uploaded by

thent9526
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Web Programming - List of Practicals

The document outlines various exercises in HTML, JavaScript, PHP, and Perl, demonstrating different web development techniques. Each exercise includes an aim, algorithm, and coding examples for tasks such as text formatting, image handling, form creation, and event handling. The document serves as a guide for creating web pages and applications with specific functionalities.

Uploaded by

thent9526
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

EX.

NO:1 TEXT FORMATTING AND LINKS TAGS

AIM:
To create a HTML page to demonstrate the usage of Text Formatting and Link Tags.

ALGORITHM:
STEP 1: Start the process.
STEP 2: Create the html file.
STEP 3: Specify the necessary Formatting tags.
STEP 4: Insert the anchor tag <a> to link the document.
STEP 5: Save the document with .Html extension.
STEP 6: Display the result.
STEP 7: Stop the Process.

CODING:

File name.html
<html>
<head>
<title>Kongu </title>
</head>
<body>
<p><h1><font color="blue">KONGU ARTS AND SCIENCE COLLEGE</font></h1></p>
<p><h3>COURSES OFFERED</h3></p>
<p><i>DEPARTMENT OF COMPUTER SCIENCE</i></p>
<p><u>DEPARTMENT OF COMPUTER TECHNOLOGY AND INFORMATION
TECHNOLOGY</u></p>
<p><mark>DEPARTMENT OF BIOTECHNOLOGY</mark></p>
<p><strike>DEPARTMENT OF PHYSICS</strike></p>
<p>DEPARTMENT <sup> OF </sup> BIOCHEMISTRY </p>
<p>DEPARTMENT <sub> OF</sub>MANAGEMENT SCIENCE</p>
<p><a href="commerce.html">commerce</a></p>
</body>
</html>

Commerce.html
<html>
<head>
<title>bold</title>
1
</head>
<body>
<p><tt>B.COM</tt></p>
<p><b>B.COM(CA)</b></p>
<p><tt>B.COM(PA)</tt></p>
<p><strike>B.COM(B&I)</strike>
</body>
</html>

OUTPUT:

Commerce.html

2
EX.NO:2 IMAGES AND TABLES

AIM:
To create a HTML page to demonstrates the usage of images and tables.

ALGORITHM:
STEP 1: Start the process.
STEP 2: Create the html file.
STEP 3: Specify the image source along with its attribute within the image tag.
STEP 4: Specify the number of rows and columns of the table with attributes.
STEP 5: Display the result.
STEP 6: Stop the Process.

CODING:
Filename.html
<html>
<head>
<title>image</title>
</head>
<body>
<h1>html image</h1>
<img src="sample.jpg" alt="college" width="500" height="300">
<br>
<br>
<table border=5>
<caption><b>STUDENT DETAILS</b></caption>
<tr>
<th>S.No<th>Register.No<th>Name<th>Date of birth<th>Total Mark<th>Average<th>Rank<br>
<tr>
<td>1<td>18COS001<td>Swetha<td>02-06-2001<td>434<td>72%<td>3<br>
<tr>
<td>2<td>18COS002<td>Priya<td>25-06-2000<td>436<td>73%<td>2<br>
<tr>
<td>3<td>18COS003<td>Shiva<td>10-05-2000<td>301<td>56%<td>17<br>
<tr>
<td>4<td>18COS004<td>Kavin<td>15-09-2000<td>315<td>58%<td>15<br>

3
<tr>
<td>5<td>18COS005<td>Kavya<td>28-08-2000<td>405<td>67%<td>7<br>
</table>
</body>
</html>
OUTPUT:

EX.NO:3 COLLEGE COURSE DETAILS

AIM:
To create a webpage that displays college information using various stylesheets.

ALGORITHM:
STEP 1: Start the process.
STEP 2: Create the html files.
STEP 3: Specify a class with its listing tags.
STEP 4: Create an external stylesheets.
STEP 5: Link the external stylesheets with inline and internal stylesheets.
STEP 6: Display the result.
STEP 7: Stop the process.
CODING:
filename.html
<html>
<head>
<title> stylesheets </title>
4
<link rel="stylesheet"href="external.css"type="text/css">
<style type="text/css">
.vid{font-family:georgia;font-size:20pt;font-style:italic;color:red;text-align:center}
font{font-family:arial;color:blue;font-size:20}
ul{list-style-type:square}
ol{list-style-type:lower-alpha}
</style>
</head>
<body>
<p class="vid"> KONGU ARTS AND SCIENCE COLLEGE <br>
It is Approved by AICTE(All India Council for Technical Education)
It is Affliated to Bharathiar University<br> </p>
<font>
<h3> LIST OF COURSES OFFERED </h3>
<h3> UG:</h3>
<ol>
<li>B.Sc COMPUTER SCIENCE
<li>B.Sc COMPUTER TECHNOLOGY
<li>B.Sc INFORMATION TECHNOLOGY
<li>B.Sc BIOCHEMISTRY
<li>B.Sc COSTUME DEIGN AND FASHION
<li>B.COMMERCE
<li>B.COM(CA)
</ol>
<br>
<h3>PG:</h3>
<ul>
<li>M.Sc COMPUTER SCIENCE
<li>M.Sw
<li>MBA
<li>M.Sc MATHEMATICS
</ul>
</font>
</body>
</html>

5
EXTERNAL.CSS
h3{Font-Family:Arial;Font-size:20;color:Green}

OUTPUT:

EX.NO:4 FORMS

AIM:
To design a HTML page using Forms that displays the college application form.

ALGORITHM:
STEP 1: Start the process
STEP 2: Create a html file.
STEP 3: Specify the form tags with its attributes.
STEP 4: Display the result.
STEP 5: Stop the process

6
CODING:
Filename.html
<html>
<head>
<title>Application Form </title>
</head>
<body>
<h3>Application form for Graduation course</h3>
<br>
<form>
1.Name of the candidate.
<Input type="Text">
<br><br>
2.Date of birth
<Input type="text">
<br><br>
3.Age
<Input type="Text">
<br><br>
4.Phone number
<Input type="Text" type="Phone">
<br><br>
5.Fathers Name
<Input type'"Text">
<br><br>
6.Mothers Name
<Input type="Text">
<br><br>
7.Address
<Input type="Text">
<br><br>
8.Score in 12th
<Input name="Score" type="Text">
<br><br>

7
9.Are you physicaly challenged
yes<Input type="Checkbox" Name="yes">
no<Input type="checkbox" Name="No">
<br><br>
10.Gender
Male<Input type="Radio" Name="gender">
Female<Input type="Radio" Name="gender">
<br><br>
</form>
</body>
</html>

OUTPUT:

EX.NO:5 ADDING OF TWO NUMBERS

AIM:
To create a Javascript that collect numbers from a page and add them and prints them to a
blank field on the page.

8
ALGORITHM:
STEP 1: Start the process.
STEP 2: Create a html file.
STEP 3: Embed the <script> tag into the html file.
STEP 4: Get the input from the user and calculate it by using ADD button.
STEP 5: Display the result.
STEP 6: Stop the process.

CODING:
filename.html
<html>
<head>
<SCRIPT>
function add()
{
var Num1,Num2,Num3;
Num1=Number(document.getElementById("First").value);
Num2=Number(document.getElementById("Second").value);
Num3=Num1+Num2;
document.getElementById("answer").value=Num3;
}
</script>
</head>
<body>
Enter the 1st number:<input id="First">
<br>
Enter the 2nd number:<input id="Second">
<br>
<Button Onclick="add()"> ADD </Button>
<br>
<input id="answer">
</body>
</html>

OUTPUT:

9
EX.NO:6A FIBONACCI NUMBERS

AIM:
To create a Javascript for solving the first n Fibonacci numbers.

ALGORITHM:
STEP 1: Start the process.
STEP 2: Create a html file.
STEP 3: Embed the <script> tag into the html file.
STEP 4: Declare and initiate the necessary variables for the calculations.
STEP 5: Display the result.
STEP 6: Stop the process.

CODING:
Filename.html
<html>
<head>
<Title> Fibonacci series</title>
</head>
<body>
<Marquee>
<H3> Fibonacci series </h3> </Marquee>
<SCRIPT LANGUAGE="JavaScript">
var limit=(prompt("Enter the limitted generate the fibonacci series:","limit"));
var f1=0;
var f2=1;
document.write("The limit entered to generate the fibonnaci series is:",limit);
document.write("<br> FIBONACCI SERIES:<br>");
document.write("The fibonacci series is:");
document.write(" ",f1," ");
document.write(" ",f2," ");
var i,f3;
for(i=2;i<limit;i++)
{
f3=f1+f2;
document.write(" ",f3," ");

10
f1=f2;
f2=f3;
}
</script>
</body>
</html>

OUTPUT:

11
EX.NO:6B SQUARE ROOT

AIM:
To create a Javascript for solving a table of number from 1 to n and their square using alert.

AGORITHM:
STEP 1: Start the process.
STEP 2: Create a html file.
STEP 3: Embed the <script> tag into the html file.
STEP 4: Declare and initialize the necessary variables for the calculations.
STEP 5: Display the result.
STEP 6: Stop the process

CODING:
filename.html
<html>
<head>
<title> square </title>
<SCRIPT LANGUAGE="JavaScript">
function Square()
{
var n=(prompt("Enter the limit n to generate the table of numbers from 1 to n:","n"));
var msg=" ";
var res="( )";
for(var x=1;x<=n;x++)
{
res=x*x;
msg=msg+" "+x+"*"+x+"="+res+"\n";
}
alert(msg);
}
</SCRIPT>
</head>
<body style="background-color:gold"onload="Square();">
<h2 style="text-alignment:center;color:black">
Javascript to generate square of 1 to n
</h2>
</body>
12
</html>

OUTPUT:

EX.NO:7 EVENT HANDLING

AIM:
To develop a HTML page using Javascripts that use the onload and onfocus events.

13
ALGORITHM:
STEP 1: Start the process.
STEP 2: Create the html file.
STEP 3: Embed the<script> tag into the html file.
STEP 4: Declare the function to perform the events.
STEP 5: Display the result.
STEP 6: Stop the process.

CODING:
Onload.html
<html>
<head>
<script>
function myFunction()
{
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1> Hello World</h1>
</body>
</html>

Onfocus.html
<html>
<body>
Enter your name:<input type="text" onfocus="myFunction(this)">
<p> when the input field gets focus, a function is triggered which changes the background
color</p>
<script>
function myFunction(x)
{
x.style.background="yellow";
}
</script>
</body>
14
</html>

OUTPUT:
onfocus.html:

Onload.html:

EX.NO:8 VISITOR DETAILS

AIM:
To write a PHP program to count the number of visitor and display the number for each
visitors.

ALGORITHM:
STEP 1: Start the process.
STEP 2: Create a php document.
STEP 3: Using the <?php tag, Declare and initialize the variables.
15
STEP 4: Use increment operator to increase the count.
STEP 5: Display the result
STEP 6: Stop the process.

CODING:
Filename.php
<?php
session_start();
print"<center>";
if(!isset($_SESSION['count']))
{
$_SESSION['count']=0;
echo nl2br("Counter Initialized \n");
}
else
{
$_SESSION['count']++;
}
echo"The Counter is now<b>$_SESSION[count]</b>"."<p>Reload this page to increment</p>";
print"</center>";
?>

OUTPUT:

16
EX.NO:9 DIGITAL CLOCK

AIM:
To write a perl program to display the digital clock which displays the current time of the
server.

ALGORITHM:
STEP 1: Start the process.
STEP 2: Create a perl document.
STEP 3: Declare and initialize the variable.
STEP 4: Use the condition to specify the duration.
STEP 5: Display the result.
STEP 6: Stop the process.

CODING:
Filename.pl

#!"E:\xampp\perl\bin\perl.exe"
use strict;
use CGI':standard';
my $ampm;
my($sec,$min,$hour)=localtime();
print header;
print start_html(-bgcolor=>"orange");
print h1("THE DIGITAL CLOCK");
print "<META HTTP_EQUIV='Refresh'CONTENT='1'>";
if($hour>12)
{
$hour=$hour-12;
$ampm="PM";
}
else
{
$ampm="AM";
}

17
print h2("$hour:$min:$sec:$ampm");
print end_html();

OUTPUT:

EX.NO:10 GREETING MESSAGE

AIM:
To write a perl program to accept the User Name and display a greeting message, randomly
chosen from the list of 4 greeting message.

ALGORITHM:
STEP 1: Start the process
STEP 2: Create a perl document.
STEP 3: Declare the variable
STEP 4: Use the condition to get the message.
STEP 5: Display the result.
STEP 6: Stop the process.

CODING:
Filename.pl
#!"E:\xampp\perl\bin\perl.exe"
use CGI':standard';
@msg=("Welcome","have a nice day","hi","how are you");
[email protected];
$n=int(rand($len));
18
if(param)
{
print header();
print start_html(-bgcolor=>"pink");
$name=param("name");
print("Hello $name $msg[$n]"),br();
print start_form();
print submit(-value=>"Back");
print end_form();
print end_html();
}
else
{
print header();
print start_html(-bgcolor=>"pink",-text=>"blue");
print start_form();
print b("Enter user name");
print textfield(-name=>"name"),br();
print submit(-value=>"submit");
print end_form();
print end_html();
}

OUTPUT:

19
20

You might also like