Scribd
Upload
17 views62 pages

web practical manual pawan

The document outlines various practical exercises for web programming, including designing web pages using HTML structure, formatting tags, lists, images, tables, forms, navigation, multimedia, and CSS. It also includes JavaScript programs for calculating factorials, Fibonacci series, prime numbers, expression evaluation, and form validation. Each practice section provides sample code snippets demonstrating the respective concepts.

Uploaded by

casualworkcat
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
17 views62 pages

web practical manual pawan

The document outlines various practical exercises for web programming, including designing web pages using HTML structure, formatting tags, lists, images, tables, forms, navigation, multimedia, and CSS. It also includes JavaScript programs for calculating factorials, Fibonacci series, prime numbers, expression evaluation, and form validation. Each practice section provides sample code snippets demonstrating the respective concepts.

Uploaded by

casualworkcat
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/ 62

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>

Output:
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>

Output:
Pract1 (C):Design a webpage using a List Tags:-

<!DOCTYPE html>
<html>
<head>
<title>List Item</title>
</head>
<body>
<p>An Ordered list: </p>
<ol 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>
Output:
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>
Output:
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>
</html>

Output:
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>
Output:
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="Hobbies1" value="on">Dancing
<input type="checkbox" name="Hobbies1" value="on">Singing
</p>
<p>
<input type="submit" name="Submit" value="Submit">
</p>
</form>
</body>
</html>

Output:
Pract2 (C):Design a webpage using a Navigation of multiple
webpages:-
<!DOCTYPE html>
<html>
<head>
<title>Navigation Links</title>
</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>
Output:
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>
Output:
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>
Output:
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>
Output:
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>
Output:
Pract4 (A 1):Write A Javascript program for calculating Factorial of
number:-
<!DOCTYPE html>
<html>
<head>
<script>
function show(){
var i,no,fact;
fact=1;
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>
Output:
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> " + n1);
nextnum = n1 + n2;

n1 = n2;
n2 = nextnum;
}
</script>
</body>
</html>
Output:
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[primeNumbs.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>
Output:
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>
Output:
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>
Output:
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>
Output:
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>
Output:
Pract5 (A2):Write A Javascript program for demonstrating string:-
<!DOCTYPE html>
<html>
<body>
<script>
var str1="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(str1+"<br>"+str2+"<br>");
var sln=str1.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>
Output:
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>
Output:
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 d1=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>
Output:
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>
Output:
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.appCodeName:"+navigator.appCodeName);
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>
Output:
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>
Output:
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>
Output:
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>
Output:
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>
Output:
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>

Output:
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>

Output:
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>

Output:
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"/>
<input type="submit" value="visit"/>
</form>
</body>
</html>
Welcome.php
<?php
$name=$_GET["name"]; //receiving name field value in $name variable
echo "welcome, $name";
?>
Output:
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";
?>
Output:
2.Fibonacci series:
<?php
$num=10;
$a=0;
$b=1;
echo "$a $b";
for ($i=3; $i < $num; $i++) {
echo $c=$a+$b;
echo "";
$a=$b;
$b=$c;
}
?>
Output:
3.prime numbers:
<?php
$n=50;
for($j=2;$j<=$n;$j++){
for($k=2;$k<$j;$k++){
if($j%$k==0)
{
break;
}
}
if($k==$j){
echo "Prime number: ",$j;
}
}

?>
Output:
4.reverse number:
<?php
$num=139;
$r=0;
while($num!=0){
$r=$r*10+$num%10;
$num=(int)($num/10);
}
echo "Reverse number: ",$r;
?>

Output:
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>
Output:
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>

Output:
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
?>
Output:
Practical 9(A): write php scripts for working with databases.
<?php
$servername="localhost";
$username="root";
$password="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 "0 results";
}
$conn->close();
?>

Output:
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>

Output:
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>

Output:
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;"></div>
</body>
</html>
Output:

You might also like