Scribd
Upload
66 views43 pages

Practical 20

practical file web development

Uploaded by

kadama.soham
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
66 views43 pages

Practical 20

practical file web development

Uploaded by

kadama.soham
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 43

WP PRACTICAL 2022-23

Practical1:
Design a webpage using different text formatting tags.

<html>
<head>
<title></title></head>
<body>
<b>This text is bold</b><br>
<strong>This text is strong</strong><br>
<big>This text is big</big><br>
<em>This text is emphasized</em><br>
<i>This text is italics</i><br>
<small>This text is small</small><br>
This is<sub>subscript</sub>and<sup>superscript</sup><br>
This is<mark> Marked</mark><br>
This is <del>deleted text</del><br>
This is <ins>inserted text</ins><br>
</body>
</html>

1
WP PRACTICAL 2022-23

Practical2:
Design a webpage links to different pages and allow navigation between
webpages.

<html>
<head>
<title>Hyperlink</title>
</head>
<body>
<h2>HYPERLINKING</h2>
<img src="flower.jfif" width="200" height="200"></img>
<ol>
<li><a href="topic1.html">topic1</a></li>

2
WP PRACTICAL 2022-23

<li><a href="topic2.html">topic2</a></li>
<li><a href="topic3.html">topic3</a></li>
<li><a href="topic4.html">topic4</a></li>
</ol>
<font size="5" color="black">
<p>If you set the target attribute of a link to "blank",the link will open in the new
window.A "h placing
the arrow on the hyperlink and clicking on it, the user will jump quickly on
instantly somehere else on the Workd Wide Web.
Occasionally, clicking on a hyperlink will run a sc "unvisited" hyperlinks will be
blue in color.</p>
<font size="5" color="black">
<p>
After the hyperlink has been activated or "visited", its color should be changed to
purple.
Or the visited and unvisited hyperlink can be changed to any color by placing
appropriate command in the
body tag at the beginning of the documents. </p>
<p align="right">
<a href="#PAGETOP">TOP </a></p>
<p>CLICKING ON TOP WILL TAKE YOU TO TOP OF THE PAGE</p>
</body>
</html>

3
WP PRACTICAL 2022-23

Practical 3:
Design a webpage demonstrating all stylesheet types.

Inline
<html>
<head>
<title></title>
</head>
<body>
<h3 style="color:red;
font-style:italic;
text-align:center;
font-size:50px;
padding top: 25px;">

4
WP PRACTICAL 2022-23

Learnig HTML using Inline CSS</h3>


</body>
</html>

Internal

<html>
<head>
<style>
body{body-color:lavender;
text-align:center;}
h2{font-style:italic;
font-size:30px;
color:#f08080;}
.blue{color:blue;}
.red{color:red;}
.green{color:green;}
</style>

5
WP PRACTICAL 2022-23

</head>
<body>
<h2>Learning HTML with Internal CSS</h2>
<p class="blue">This is a blue color paragraph</p>
<p class="red">This is a red color paragraph</p>
<p class="green">This is a green color paragraph</p>
</bod>
</html>

External

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

6
WP PRACTICAL 2022-23

<body>
<h2>Learnig HTML with External CSS</h2>
<p class="blue">This is a blue color paragraph</p>
<p class="red">This is a red color paragraph</p>
<p class="green">This is a green color paragraph</p>
</body>
</html>

CSS file:

body{bgcolor:yellow;
text-align:center;}
h2{font-style:italic;
size:30px;
color:#f08080;}
p{font-size:20px;}
.blue{color:blue;}
.red{color:red;}
.green{color:green;}

7
WP PRACTICAL 2022-23

Practical 4:
Design a webpage with imagemap.

<html>
<head><title>imagemap</title></head>
<body>
<h4>Click anywhere on the image</h4>
<p>For a rectangle indicate the coordinates of the upper left corner and the
bottom right corner
<p>For a circle indicate the coordinates of the center and radius
<p>For a polygon indicate the coordinates of all corner
<p>
<img src="imgmap.jpeg" alt="this is an image map" border="1"
usemap="#imgmap">
<map name="imgmap">
<area shape="rect" coords="48,62,300,191"
href=http://google.com/>
8
WP PRACTICAL 2022-23

<area shape="circle" coords="530,157,83"


href=http://orkut.com/>
<area shape="poly" coords="130,335,371,266,373,428"
href=http://facebook.com/>
</map>
</body>
</html>

9
WP PRACTICAL 2022-23

Practical 5:
Design a webpage using table with its attribute.

<html>
<head>
<style>
table,th,td{
border:1px solid black;
border-collapse:collapse;
}
th,td{
padding:10px;
}
table#alter tr:nth-child(even){
background-color: #eee;
10
WP PRACTICAL 2022-23

}
table#alter tr:nth-child(odd){
background-color: #fff;
}
table#alter th{
color:white;
background-color:gray;
}
</style>
</head>
<body>
<table id="alter">
<caption>Student Records</caption>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>
<tr><td>Mike</td><td>Warn</td><td>60</td></tr>
<tr><td>Shane</td><td>Warn</td><td>42</td></tr>
<tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>
</table>
</body>
</html>

11
WP PRACTICAL 2022-23

Colspan:

<html>
<head>
<style>
table,th,td{border:1px solid black; border-collapse: collapse;}
th,td{padding:5px; text-align:left ;}
</style>
</head>
<body>
<table style="width:50%">
<tr>
<th>Name</th>
<th colspan="2">Mobile.No</th></tr>
<tr><td>Ajeet Maurya</td>
<td>7654896543</td>
<td>6548763456</td>
12
WP PRACTICAL 2022-23

</tr></table>
</body>
</html>

Practical 6:
Design a webpage using with a form that uses all types of controls.

<html>
<body>
<table>
<tr>
<td class="tdLabel"><label for="register_name" class="label">Enter
name:</label></td>
<td><input type="text" name="name" value="" id="register_name"
style="width:160px"/></td>
</tr>
<tr>

13
WP PRACTICAL 2022-23

<td class="tdLabel"><label for="register_password" class="label">Enter


password:</label></td>
<td><input type="password" name="password" id="register_password"
style="width:160px"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_email" class="label">Enter
Email:</label></td>
<td
><input type="email" name="email" value="" id="register_email"
style="width:160px"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_gender" class="label">Enter
Gender:</label></td>
<td>
<input type="radio" name="gender" id="register_gendermale" value="male"/>
<label for="register_gendermale">male</label>
<input type="radio" name="gender" id="register_genderfemale"
value="female"/>
<label for="register_genderfemale">female</label>
</td>
</tr>
<tr>
<td class="tdLabel"><label for="register_country" class="label">Select
Country:</label></td>

14
WP PRACTICAL 2022-23

<td><select name="country" id="register_country" style="width:160px">


<option value="india">india</option>
<option value="pakistan">pakistan</option>
<option value="africa">africa</option>
<option value="china">china</option>
<option value="other">other</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"><div align="right"><input type="submit" id="register_0"
value="register"/>
</div></td>
</tr>
</table>
</form>
</body>
</html>

15
WP PRACTICAL 2022-23

Practical 7:
Design a webpage demonstrating audio and video.

<html>
<body>
<video controls>
<source src="sesame.mp4.mp4" type="video/mp4">
Your browser does not support the html video tag.
</video>
</body>
</html>

16
WP PRACTICAL 2022-23

Javascript

Practical 8:
Using javascript design a webpage to accept number from the user
and print the factorial.

<html>
<head>
<title>Factorial Demo</title>
<script language="javascript">
var x=parseInt(prompt("Enter a number",""));
var fact=1,i;
for(i=1;i<=x;i++)

17
WP PRACTICAL 2022-23

fact*=i;
document.write("<h1>factorial of "+x+" is "+fact+"</h1>");
</script>
</head>
<body>
</body>
</html>

Practical 9:

Implement the native object:


1.Math object:

<html>
<head>
<title>Math Object</title>
<script language="javascript">
document.write("Random Number: "+Math.random(3)+"<br>");

18
WP PRACTICAL 2022-23

document.write("Minimum Number: "+Math.min(5,7,2)+"<br>");


document.write("Maximum Number: "+Math.max(25,10,15)+"<br>");
document.write("The Floor value 2.5: "+Math.floor(2.5)+"<br>");
document.write("The Ceil value 1.2: "+Math.ceil(1.2)+"<br>");
document.write("Power 3 of 2: "+Math.pow(2,3)+"<br>");
</script>
</head>
</html>

2.Date Object

<html>
<head>
<title>Date Object</title>
<script language="javascript">
var currentDate=new Date();

19
WP PRACTICAL 2022-23

document.write("Date is ");
document.write(currentDate.getMonth()+"/"+currentDate.getDate()
+"/"+currentDate.getFullYear()+"<br>");
document.write("Time is ");
document.write(currentDate.getHours()+":"+currentDate.getMinutes()
+":"+currentDate.getSeconds());
</script>
</head>
<body>
</body>
</html>

3.String Object:
<html>
<head>
<title>String Object</title>
<script language="javascript">

20
WP PRACTICAL 2022-23

var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.write(txt.length+"<br>");
var str="apple,banana,kiwi";
var res=str.slice(6,12);
document.write(res+"<br>");
var str="apple,banana,kiwi";
var res=str.substring(7,13);
document.write(res+"<br>");
var text1="hello world";
var text2=text1.toUpperCase();
document.write(text2+"<br>");
var text1="HELLO world";
var text2=text1.toLowerCase();
document.write(text2+"<br>");
var text1="Hello";
var text2="World";
text3=text1.concat(" ",text2);
document.write(text3+"<br>");
var txt="a,b,c,d,e";
var arr=txt.split(" ");
document.write(arr);
</script>
</head>
</html>

21
WP PRACTICAL 2022-23

4.Number Object:

<html>
<head>
<title>Number Object</title>
<script language="javascript">
document.write("Maximum value: "+Number.MAX_VALUE+"<br>");
document.write("Manimum value: "+Number.MIN_VALUE+"<br>");
var num1=5.56789;
document.write(num1.toFixed(2)+"<br>");
var num2=1.3714;
document.write(num2.toPrecision(2)+"<br>");
document.write(num1.toString());
</script>
</head>

22
WP PRACTICAL 2022-23

<body>
</body>
</html>

5.Array Object:

<html>
<head>
<title>Array Object</title>
<script language="javascript">
var cars=["Saab","Volvo","BMW","Honda"];
document.write("Array lenght is "+cars.length+"<br>");
result=cars.join("*")
document.write(result+"<br>");
cars.push("Opel");
document.write("After insert: "+cars.toString()+"<br>");
cars.pop();

23
WP PRACTICAL 2022-23

document.write("After delete: "+cars.toString()+"<br>");


cars.sort();
document.write("After sort: "+cars.toString()+"<br>");
cars.reverse();
document.write("After reverse: "+cars.toString());
</script>
</head>
<body>
</body>
</html>

Practical 10:
Using javascript design a webpage that print fibonacci series:

<html>
<head>

24
WP PRACTICAL 2022-23

<title>Fibonacci series</title>
<script language="javascript">
var a=0,b=1,c,n,i;
n=parseInt(prompt("Enter limit for fibonacci series:",""));
document.write("<h2>Fibonacci series: </h2><br>");
document.write(a+" "+b+" ");
for(i=2;i<n;i++)
{
c=a+b;
document.write(c+" ");
a=b;
b=c;
}
</script>
</head>
<body>
</body>
</html>

25
WP PRACTICAL 2022-23

Practical 11:
Write a javascript program to display prime numbers between 1 to
100.

<html>
<head>
<title>Prime Numbers</title>
<script>
for(var i=1;i<=100;i++)
{
var flag=0;
for(var j=2;j<=i/2;j++)
{
if(i%j==0)
{
flag=1;
break;

26
WP PRACTICAL 2022-23

}
}
if(flag==0)
{
document.write(i+"<br>");
}
}
</script>
</head>
</html>

Practical 12:
Write a javascript program to accept a number from the user and
display the sum of its digit.

27
WP PRACTICAL 2022-23

<html>
<head>
<title>Sum tof the digits</title>
<script>
var n=parseInt(prompt("Enter the number"," "));
var p=0,y;
while(n>0)
{
y=n%10;
n=parseInt(n/10);
p=p+y;
}
document.write("Sum of digit is "+p);
</script>
</head>
</html>

28
WP PRACTICAL 2022-23

Practical 13:
Write a javascript program to accept a sentence from the user and
display the number of words in sentence:

<html>
<head>
<title>Without using split function</title>
<script>
var str=prompt("Enter the sentence=","");
var count=0;
for (i=0;i<str.length;i++)
{
if(str.charAt(i,1)==" "&& str.charAt(i+1,1)!=" ")
count++;
}
document.write("Number of words are "+(count+1));

29
WP PRACTICAL 2022-23

</script>
</head>
<body>
</body>
</html>

Practical 14:
Write a javascript program to design simple calculator.

<html>
<head>

30
WP PRACTICAL 2022-23

<title>Calculator</title>
<script language="Javascript">
function calc()
{
var n1,n2,opr,x;
n1=parseInt(f1.s1.value);
n2=parseInt(f1.s3.value);
opr=f1.s2.value;
if(opr=="add")
x=n1+n2;
else if(opr=="sub")
x=n1-n2;
else if(opr=="mul")
x=n1*n2;
else if(opr=="div")
x=n1/n2;
else
alert("please select operator");
document.getElementById("ans").innerHTML="Answer is: "+x;
}
</script>
</head>
<body>
<form name="f1">

31
WP PRACTICAL 2022-23

<table width="50%">
<tr>
<td>Number1<br>
<select name="s1"size=1>
<option>Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>
<td>Operator<br>
<select name="s2" size=1>
<option>Select</option>
<option value="add">+</option>
<option value="sub">-</option>
<option value="mul">*</option>
<option value="div">/</option>

32
WP PRACTICAL 2022-23

</select>
</td>
<td>Number2<br>
<select name="s3" size="1">
<option>Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>
<td>
<input type="button" value="calculate" onclick="calc()">
</td>
</tr>
</table>
</form>
<p id="ans"></p>

33
WP PRACTICAL 2022-23

</body>
</html>

Practical 15:
Write a php code to find the greater of two numbers accept the
number from the user.

<html>
<head>
<title>greater of two number</title>
</head>
<body>
<form method="POST" action="mahima.php">
1st number: <input type="text" name="n1"><br>
2nd number: <input type="text" name="n2"><br>
<input type="submit" value="CHECK">
</form>

34
WP PRACTICAL 2022-23

</body>
</html>
<?php
$n1=(int)$_POST['n1']; $n2=(int)

$_POST['n2']; if($n1>$n2) echo

$n1." is greater than".$n2; else

if($n2>$n1) echo $n2."is greater

then".$n1; else echo"both are

equal”;

?>

Output:

Practical 16:

Write a php program to accept a numbers from the user and print the
factorial.
<html>

35
WP PRACTICAL 2022-23

<head>
<title>factorial of number </title>
</head>
<body>
<form method="POST" action="fact.php"> enter a number:

<input type="text" name="n1"><br>

<input type="submit" value="factorial">


</form>
</body>
</html>
<?php
$n1=(int)$_POST['n1'];
$fact=1; for($i=1;$i<=$n1;$i++)

{
$fact=$fact*$i;
} echo"factoial of" .$n1. "is". $fact;

?>

36
WP PRACTICAL 2022-23

Output:

Practical 17:
Write a php program to accept a number from the user and print
whether it is prime or not.

<html>
<head>
<title>prime number</title></head>
<body>
<form method="POST" action="checkprime.php"> enter a

number:<input type="text" name="n1"><br>

<input type="submit" value="checkprime">


</form>
</body>
</html>
<?php
$n1=(int)$_POST['n1'];

37
WP PRACTICAL 2022-23

$flag=0; for($i=2;$i<=$n1/2;$i++)

{ if($n1%$i==0)

{ $flag=1; break; } }

if($flag==0) echo"number is

prime"; else echo"number is

not prime";

?>

output:

Practical 18:
Write a php program to demonstrate different string function.

<?php
echo strlen("hello")." "; echo strchr("hello world","world")." "; echo

str_replace("world","peter","hello world")." "; echo

str_word_count("hello world")." "; echo strpos("i love php,i love php

too","php")." "; echo substr_count("hello world. the world is


38
WP PRACTICAL 2022-23

nice","world")." "; echo substr("hello world",6)." "; echo

strtolower("hELLo worLD")." "; echo strtoupper("hello world")." ";

echo strcmp("hello world","hello world")." "; echo strcasecmp("hello

world","hello world")." ";

?>

output:

Practical 19:
Write a php program to demonstrate different array function.

<?php
$salary=array("sonoo"=>"550000","vimal"=>"250000","ratan"=>"
200000"); print_r(array_change_key_case($salary,CASE_UPPER));

echo"<br>";

print_r(array_change_key_case($salary,CASE_LOWER));

echo"<br>"; print_r(array_chunk($salary,2));

$season=array("summer","winter","spring","autumn");

sort($season); foreach($season as $s)

{ echo"$s<br/>";

} echo"<br>".count($season);

?>
39
WP PRACTICAL 2022-23

output:

Practical 20:
Write a php program to demonstrate use of session and cookies.

<?php session_start();

if(isset($_SESSION['views']))

{
$_SESSION['views']+=1;
} else

{
$_SESSION['views']=1;
}
$msg= "you have visited this page".$_SESSION['views']. " times in this session.";
$cookie_name="user"; $cookie_value="john doe";

setcookie($cookie_name,$cookie_value,time()+(86400*30),"/");// 86400=1day
?>
<html>
40
WP PRACTICAL 2022-23

<body> <?php if(!

isset($_COOKIE[$cookie_name]))

{ echo"cookie named"." ".$cookie_name." " ."is not set"; } else

{ echo"cookie"." " .$cookie_name."is set"."<br> "; echo "value

is:".$_COOKIE[$cookie_name]."<br>";

} echo

$msg; ?>

</body>
</html>

output:

Practical 21:
Aim: Write a program for php mail.

<?php
ini_set("sendmail_from", "sonoojaiswal @javatpoint.com");
$to = "sonoojaiswal [email protected]:";//change receiver address

$subject = "This is subject";

41
WP PRACTICAL 2022-23

$message = "This is simple text message.";


$header = "From:[email protected] \r\n";
$result = mail ($to, $subject, $message, $header);
if( $result == true)
{
echo "Message sent successfully...";
}
Else
{
echo "Sorry, unable to send mail...";
}
?>

output:

42
WP PRACTICAL 2022-23

43

You might also like