WEBPROGRAMMING PRACTICAL
Pract1 (A):Design a webpage using a document structure tag:-
<html>
<head>
<title>Structure of WebPage</title>
</head>
<body>
<h1>Company Name</h1>
<p>This is my first page</p>
<p>This is an example of paragraph tag</p>
</body> </html>
Pract1 (B):Design a webpage using a Formatting Tags:-
<html>
<head>
<title>Text Formatting Tags</title>
</head>
<body>
<p>This is a paragraph tag</p>
<p><b>This is a sentence using bold tag</b></p>
<br/><b><i>This is a new sentence without a paragraph break, in bold
italics</i></b>
<hr/>
<p><u>This is sentence using underline tag</u></p>
</body> </html>
Pract1 (C):Design a webpage using a List Tags:-
<!DOCTYPE html>
<html>
<head>
<title>List Item</title>
</head>
<body>
<p>An Ordered list: </p>
<al type="2">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ol>
<p>An Unordered list:</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
</body>
</html>
Pract1 (D):Design a webpage using a image and imagemap:-
<!DOCTYPE html>
<html>
<head>
<title> Images</title>
</head>
<body>
<img src="Lighthouse.jpg" width="300" height="200" alt="Image not
Available">
</body>
</html>
Image Map: <!DOCTYPE html>
<html>
<head>
<title>Click on Image</title>
</head>
<body>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" />
<map name="workmap">
<area
shape="rect"
coords="34,44,270,350"
alt="Computer"
href="https://en.wikipedia.org/wiki/Computer"
د/
<area
shape="rect"
coords="290,172,333,250"
alt="Phone"
href="https://en.wikipedia.org/wiki/Mobile_phone"
/>
<area shape="circle" coords="337,300,44" alt="Coffee"
href="https://en.wikipedia.org/wiki/Coffee" />
</map> </body>
Pract2 (A):Design a webpage using a Table Tag:-
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border="1">
<tr>
<th>Students</th>
<th>Total</th>
</tr>
<tr>
<td>Boys</td> <td>50</td>
</tr>
<tr>
<td>Girls</td>
<td>700</td>
</tr>
</table>
</body>
</html>
Pract2 (B):Design a webpage using a Form Tag:-
<!DOCTYPE html>
<html>
<head>
<title>Form Page: Sampleform</title>
</head>
<body>
<h1>Sample form page</h1>
<form id="sampleform" method="post" action="">
<p>
Name:<input type="text" name="Name"/>
</p>
<p>
Email:<input type="text" name="Email"/>
</p> <p>
Gender:<input type="radio" name="r1"/>Male <input type="radio" name="r1"
/>Female
</p>
<p>
Hobbies:<input type="checkbox" name="Hobbies" value="on">Dancing <input
type="checkbox" name="Hobbies" value="on">Singing
</p>
<p>
<input type="submit" name="Submit" value="Submit">
</p>
</form>
</body>
</html>
Pract2 (C):Design a webpage using a Navigation of multiple
webpages:-
<!DOCTYPE html>
<title>Navigation Links</title>
<html>
<head>
</head>
<body>
<div align="center">
<a href="index.html">Index</a> <a href="nature.html">Nature</a> <a
href="history.html">History</a> <a href="arts.html">Arts</a>
</div>
</body> </html>
Pract2 (D):Design a webpage using a Embedded Multimedia
Elements:-
<!DOCTYPE html>
<html>
<head>
<title>Video Insertion</title>
</head>
<body>
<video width="300" height="200" autoplay>
<source src="Person Typing Fast.mp4" type="video/mp4">
</video>
</body>
</html>
Pract3 (A):Design a webpage that makes use of cascading style sheet with CSS
properties to change the background of page:-
<!DOCTYPE html>
<html>
<head>
<title>Changing background of page</title>
<style>
h1{
background-color:green;
p{
background-color: yellow;
</style>
</head>
<body>
<h1>CSS background color example</h1>
<div>
We are in the div tag
<p>This is paragraph will have a different background color</p>
</div>
</body> </html>
Pract3 (B):Design a webpage that makes use of cascading style sheet with CSS
properties to change the fonts and text styles of page:-
<!DOCTYPE html>
<html>
<head>
<style>
p.normal{
font-family: 'Times New Roman', Times, serif;
font-style: normal;
p.italic{
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
p.oblique{
font-style: oblique:
</style>
</head>
<body>
<p class="normal">Paragraph in normal form</p>
<p class="italic">Italic style</p>
</body> </html>
Pract3 (C):Design a webpage that makes use of cascading style sheet with CSS
properties for positioning an element:-
<!DOCTYPE html>
<html>
<head>
<style>
div.static{
position: static;
border: 3px solid #73AD21;
p.relative{
position: relative;
left: 30px;
border: 3px solid #73AD21;
</style>
</head>
<body>
<h2>Position: static</h2>
<p class="relative">This paragraph will be positioned relatively </p>
<div class="static">
this div element has position: static;
</div>
</body></html>
Pract4 (A 1):Write A Javascript program for calculating Factorial of
number:-
<!DOCTYPE html>
<html>
<head>
<script>
function show(){
var i,no,fact;
fact=l:
no=Number(document.getElementById("num").value);
for(i=1;i<=no;i++)
fact=fact*i;
document.getElementById("answer").value=fact;
</script>
</head>
<body>
Enter Num:<input id="num">
<button onclick="show()">Factorial</button>
<input id="answer">
</body></html>
Pract4 (A 2):Write A Javascript program for Finding Fibonacci
series:-
<!DOCTYPE html>
<html>
<head> </head>
<body>
<script> var n1 = 0.
n2 = 1, nextnum,
i;
var num = prompt(" Enter the limit for Fibonacci Series ");
document.write("Fibonacci Series: ");
for (i = 1; i <= num; i++) {
document.write(" <br> " + nl); nextnum = nl + n2;
n1 = n2;
n2 = nextnum;
</script>
</body>
</html>
Pract4 (A 3):Write A Javascript program for displaying prime
numbers:-
<!DOCTYPE html>
<html>
<head>
<script>
function calcprimeno(){
var beginno=parseInt(document.numbers.firstnum.value); var
endno=parseInt(document.numbers.secondnum.value); var primeNumbs=new
Array();
var ctr=beginno;
while (ctr<=endno) {
if (isPrime(ctr)==true) {
primeNumbs[prime Numbs.length]=ctr;
ctr=ctr+1;
if (primeNumbs.length==0) {
document.getElementById('output_content').innerHTML="There were no
prime no within the range":
else{
outputPrimeNums(primeNumbs):
}
}
function isPrime(num){
var flag=true;
for (var i=2;i<=Math.ceil(num/2);i++) { if ((num%i)==0) {
flag=false;
break;
return flag:
function outputPrimeNums(primes){
var html="<h2>Prime Numbers</h2>"; for(i=0;i<primes.length;i++){
html += primes[i]+"<br>";
document.getElementById('output_content').innerHTML=html;
</script>
</head>
<body>
<form name="numbers">
Beginning Number:<input type="text" name="firstnum">
End Number:<input type="text" name="secondnum">
<input type="button" value="Find Prime Numbers" onclick="calcprimeno()">
</form>
<div id="output_content"></div>
</body></html>
Pract4 (A 4):Write A Javascript program for Evaluating Expressions:-
<!DOCTYPE html>
<html>
<body>
<p>Click the button t evaluate/execute Javascript code/expressions.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction(){
var x=10;
var y=20;
var a=eval("x"y")+"<br>";
var b=eval("2+2")+"<br>";
var c=eval("x+17")+"<br>";
var res=a+b+c:
document.getElementById("demo").innerHTML=res;
} </script>
</body> </html>
Pract4 (A 5):Write A Javascript program for Finding Reverse
Number:-
<!DOCTYPE html>
<html>
<head>
<script>
function palin(){
var a,no,b,temp=0;
no=Number(document.getElementById("no_input").value);
b=no;
while(no>0){
a=no%10;
no=parseInt(no/10):
temp-temp*10+a:
alert(temp);
</script>
</head>
<body>
Enter any Number:<input id="no_input">
<button onclick="palin()">Check</button><br><br>
</body></html>
Pract4 (B):Write A Javascript program for Validating various form
elements:-
<!DOCTYPE html>
<html>
<head>
<script>
function validateform() {
var name = document.myform.name.value; var password =
document.myform.password.value;
if (name == null || name == """) {
alert("Name can't be blank");
return false;
}else if (password.length <6) {
alert("Password must be at least 6 characters long."); return false;
}else if(cpassword!=password){
alert("Confirm Password Should be same");
}else if(atposition<1 || dotposition<atposition+2 ||
dotposition+2=email.length){
alert("Please enetr a valid email address \n atposition:"+atposition+"\n
dotposition:"+dotposition);
}else{
alert("Your Form has been subitted successfully");
}
</script>
<title>Document</title>
</head>
<body>
<form
name="myform"
method="post"
action="abc.jsp"
onsubmit="return validateform()"
Name: <input type="text" name="name" /><br /> Password: <input
type="password" name="password" /><br /> Confirm Password:<input
type="password" name="cpassword" /><br /> E-mail:<input type="email"
name="email" /><br /> <input type="submit" value="register"/>
</form>
</body>
</html>
Pract5 (A1):Write A Javascript program for demonstrating regular
expressions:-
<!DOCTYPE html>
<html>
<body>
<p>Regular Expression</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction(){
var str="All these are not possible using HTML!"; var n=str.search(/possible/i);
document.write("<br>"+n+"<br>");
var res=str.replace(/possible/i,"POSSIBLE");
document.write("<br>"+res+"<br>");
var patt=/e/;
document.write("<br>"+patt.test(str)+"<br>");
</script>
</body>
</html>
Pract5 (A2):Write A Javascript program for demonstrating string:- <!DOCTYPE
html>
<html>
<body>
<script>
var strl="Hey diddle diddle, the cat and the fiddle, the cow jumped over the
moon.";
var str2="The little dog laughed to see such fun, and the dish ran away with the
spoon!";
document.write(strl+"<br>"+str2+"<br>");
var sln=strl.length;
document.write("<br>"+"Length of string is"+sln+"<br>");
var x='It\'s alright';
var y="we are the so-called\"Vikings"from the north":
document.write("<br>"+x+"<br>");
document.write("<br>"+y+"<br>");
</script>
</body>
</html>
Pract5 (A3):Write A Javascript program for demonstrating math:- <!DOCTYPE
html>
<html>
<body>
<h2>Javascript Math Demo</h2>
<script>
document.write("PI"+Math.PI+"<br>");
document.write("Random number="+Math.round(49.657)+"<br>");
document.write("rounding="+Math.round(6.433)+"<br>");
document.write("pow="+Math.pow(10,3)+"<br>");
document.write("Square root="+Math.sqrt(64)+"<br>");
document.write("absolute="+Math.abs(-67.7)+"<br>");
document.write("ceil="+Math.ceil(6.4)+"<br>");
document.write("floor="+Math.floor(4.7)+"<br>");
document.write("sin="+Math.sin(90*Math.PI/180)+"<br>");
document.write("cos="+Math.cos(0*Math.PI/180)+"<br>");
document.write("finding max="+Math.max(0,150,30,20,-8.-200)+"<br>");
document.write("finding min="+Math.min(0,150,30,20,-8,-200)+"<br>");
</script>
</body>
</html>
Pract5 (A4):Write A Javascript program for demonstrating date:- <!DOCTYPE
html>
<html>
<body>
<h2>Date Demonstration</h2>
<script>
document.write(Date());
var d=new Date();
document.write("<br>"+d+"<br>");
var dl=new Date("August 30,2004 17:11:00");
document.write("<br>"+d1+"<br>");
var d2=new Date(45400000); document.write("<br>"+d2+"<br>");
var d3=new Date(99,5,24,11,33,30,0); document.write("<br>"+d3+"<br>"); var
d4=new Date(99,5,24);
document.write("<br>"+d4+"<br>");
document.write("<br>"+"d.toUTCString()"+d.toUTCString());
</script>
</body>
</html>
Pract5 (B1):Write A Javascript program for demonstrating WINDOW object:-
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<input type="button" value="Delete Record" onclick="del()">
<script>
function del(){
var ans=confirm("Are u sure?");
if(ans==true){
alert("OK");
}else{
alert("Cancel");
</script>
</body> </html>
Pract5 (B2):Write A Javascript program for demonstrating Navigator object:-
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h2>Javascript Navigator Object</h2>
<script>
document.write("<br>navigator.appCode Name:"+navigator.appCode Name):
document.write("<br>navigator.cookieEnabled:"+navigator.cookieEnabled);
document.write("<br>navigator.userAgent:"+navigator.userAgent);
document.write("<br>navigator.appName:"+navigator.appName);
document.write("<br>navigator.appVersion:"+navigator.appVersion);
document.write("<br>navigator.platform:"+navigator.platform);
document.write("<br>navigator.language:"+navigator.language);
document.write("<br>navigator.online:"+navigator.online);
</script>
</body>
</html>
Pract5 (B3):Write A Javascript program for demonstrating History object:-
<!DOCTYPE html>
<html lang="en"> <head>
<script>
function goBack(){
window.history.back()
</script>
<title>Document</title>
</head>
<body>
<input type="button" value="Back" onclick="goBack()">
</body> </html>
Pract5 (B4):Write A Javascript program for demonstrating Location object:-
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<input type="button" value="Replace URL" onclick="myFunc()">
<script>
function myFunc(){
location.replace("http://www.google.com")
</script>
</body> </html>
Pract5 (C):Write A Javascript program for Storing and Retrieving Cookies:-
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function set_cookie(c_name,c_value,exdays){
var dt=new Date();
dt.setTime(dt.getTime()+(exdays*24*60*60*1000));
var exp="expires="+dt.toGMTString();
document.cookie=c_name+"="+c_value+":"+exp+";path=/";
function get_cookie(c_name){
var name=c_name+"=";
var decoded_cookie-decodeURIComponent(document.cookie);
var ca=decoded_cookie.split(':');
for(var i=0;i<ca.length;i++){
var x=ca[i];
while(x.charAt(0)=="){
x=x.substring(1);
if(x.indexOf(name)==0){
}
return x.substring(name.length,x.length);
return
||||
function check_cookie(){
var user=get_cookie("username");
if(user != ""){
alert("Welcome again"+user);
}else{
user=prompt("Please enter your name:".""");
if(user != ""&& user!=null){
set_cookie("username",user.20);
</script>
</head>
<body onload="check_cookie()">
</body> </html>
Practical 6(A):create a xml file with internal/external DTD and display it using
CSS
<?xml version="1.0 encoding="UTF-8" standalone="yes"?>
<!DOCKTYPE book[
<!ELEMENT book (bname,author.price)>
<!ELEMENT bname(#PCDATA)>
<!ELEMENT author(#PCDATA)>
<!ELEMENT price (#PCDATA)>
]>
<book>
<bname>@ashwithyou_ </bname>
<author>TutorialsPoint</author>
<price>(011) 123-4567</price>
</book>
Practical 6(B): Create a xml file with internal/external DTD and display it using
XSL.
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheetversion="1.0">
-<xsl:template match="/">
-<html>
-<body>
<h2> BOOKS DETAILS</h2>
-<table border="1">
-<tr bgcolor="#ffff0000">
<th>BOOK ID</th>
<th> BOOK NAME</th>
<th> AUTHOR</th>
<th>PUBLISHER</th>
<th> PRICE</th>
-<xsl:for-each select="class/book"/>
-<tr>
-<td>
-<xsl:value-of select="@bid"/>
</td>
-<td>
-<xsl:value-of select="bname"/>
-</td>
-<td>
-<xsl:value-of select="publisher"/> </td>
-<td>
-<xsl:value-of select="price"/>
</td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Practical 7(A):Design a webpage to handle asynchronous request using AJAX
onmouseover.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h1>The XMLHttpRequestAsynchronous Request demo</h1> <button
onmouseover="showDoc()">Show File Content</button> <div
id="show"></div>
<script>
function showDoc(){
var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){ if(xhttp.readyState==4){
if(xhttp.status==200){
document.getElementById("show").innerHTML=xhttp.responseText;
};
xhttp.open("get"."My_File.txt",true);
xhttp.send();
</script></body></html>
Practical 7(B): Design a webpage to handle asynchronous requests using AJAX
on button click.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h1>The XMLHttpRequestAsynchronous Request demo</h1> <button
onclick="showDoc()">Show File Content</button>
<div id="show"></div>
<script>
function showDoc(){
var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){
if(xhttp.readyState==4){
if(xhttp.status==200){
document.getElementById("show").innerHTML=xhttp.responseText:
};
xhttp.open("get","My_File.txt",true);
xhttp.send();</script> </body></html>
Pratical 8(A):write php scripts for retrieving data from HTML forms.
Form1.html:
<html>
<body>
<form action="welcome.php" method="get">
Name:<input type="text" name="name ne"/>
<input type="submit" value="visit"/>
</form>
</body>
</html>
Welcome.php
<?php
$name=$_GET["name"]; //receiving name field value in $name variable
echo "welcome, $name":
?>
Practical 8(B):performing certain mathematical operation such as calculating
factorial/finding Fibonacci series/displaying prime numbers in a given
range/evaluating expressions/calculating
reverse of a number.
1.Factorial:
<?php
$num=4;
$fact=1;
for($x=1;$x<=$num:$x++){
$fact=$fact*$x:
echo "Factorial of $num is $fact";
?>
2.Fibonacci series:
<?php
$num=10;
$a=0;
$b=1;
echo "Sa $b";
for ($i=3; $i< $num; $i++) {
?>
echo $c=$a+$b;
echo "";
$a=$b;
$b=$c;
3.prime numbers:
<?php $n=50;
for($j=2:$j<=Sn:$j++){ for($k=2:$k<$j:$k++){ if($j%$k==0)
break;
if($k==$j){
echo "Prime number: ".$j;
?>
4.reverse number:
<?php $num=139; $r=0;
while($num!=0){ $r=$r*10+$num%10; $num=(int)($num/10);
echo "Reverse number: ",$r:
?>
Practical 8(C):Write PHP scripts for working with arrays.
<!DOCTYPE html>
<html>
<body>
<?php
$num=array(1,2,3,4,5):
foreach($num as $v){
?>
echo "Value=$v";
</body>
</html>
Practical 8(D):Write PHP script for working with files(reading/writing).
1.file writing: <!DOCTYPE html>
<html>
<body>
<?php
$fp = fopen('My_File.txt', 'w');//opens file in write-only mode
fwrite($fp, 'welcome ');
fwrite($fp, 'to php file write'); fclose($fp);
echo "File written successfully":
?>
</body> </html>
2.File reading:
<?php
$filename = "data.txt";
$fp = fopen($filename, "r")://open file in read mode
$contents = fread($fp, filesize($filename))://read file
echo "<pre>$contents</pre>"://printing data of file fclose($fp)://close file
?>
Practical 9(A): write php scripts for working with databases.
<?php
$servername="localhost":
$username="root":
Spassword="1234":
$dbname="myDB":
$conn-new mysqli($servername, $username, $password,$dbname);
if($conn->connect_error){
die("connection failed: ".$conn->connect_error);
$sql="INSERT INTO MyGuests
if($conn->query($sql)==TRUE){
echo "New Record Created Succefully":
}else{
echo "Error: ".$sql."<br>".$conn->error:
$sql="SELECT id,firstname, lastname FROM MyGuests":
$result=$conn->query($sql); if($result->num_rows>0){
while($row=$result->fetch_assoc()){
echo "id: ".$row["id"]."Name:
".$row["firstname"]."".$row["lastname"]."<br>";
}
}else{
echo "O results":
$conn->close();
?>
Practical 9(B): write php scripts for storing and retrieving cookies.
<?php
setcookie("user","Guest");
?>
<html>
<body>
<?php
if(!isset($_COOKIE["user"])){
echo "Sorry, cookie is not found!";
}else{
?>
echo "<br>Cookie Value: ".$ COOKIE["user"];
</body>
</html>
Practical 9(C):write php scripts for storing and retrieving sessions.
<?php
session_start();
?>
<html>
<body>
<?php
$_SESSION["favcolor"]="Green":
$_SESSION["favflower"]="Rose";
echo "Session variables are set."."<br>";
echo "Favorite color: ".$_SESSION["favcolor"]."<br>"; echo "Favorite flower:
".$_SESSION["favflower"].".";
?>
</body>
</html>
Practical 10: design wepage with some jQuery animation effects.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '250px'});
});
});
</script> </head>
<body>
<button>Start Animation</button>
<p>A simple animation example:</p>
<div
style="background:#98bf21;height:100px;width:100px;position:absolute;"></d
iv>
</body> </html>
