Scribd
Upload
39 views

WEBPROGRAMMING PRACTICAL

Uploaded by

aak67283
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
39 views

WEBPROGRAMMING PRACTICAL

Uploaded by

aak67283
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/ 50

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

VALUES(1,'Pawan', 'Kumavat', '[email protected]')":

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>

You might also like