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:
