Scribd
Upload
34 views

WEBPROGRAMMING PRACTICAL

Uploaded by

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

WEBPROGRAMMING PRACTICAL

Uploaded by

aak67283
Copyright
© © All Rights Reserved
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