Web Development Practical

Name.
kishankumar goud
Roll no.37
div. fybsc.it A
index
Sr Topic Pg.
no. no.
1 USE OF BASIC TAGS
a. DESIGN A WEB PAGE USING DIFFERENT TEXT
FORMATTING TAGS.
B. DESIGN A WEB PAGE WITH LINKS TO DIFFERENT PAGES

AND ALLOW NAVIGATION BETWEEN WEB PAGES.
C. DESIGN A WEB PAGE DEMONSTRATING ALL STYLE SHEET

TYPES.
2 IMAGE MAPS (TABLES, FORMS AND MEDIA)
a. DESIGN A WEB PAGE WITH IMAGE MAPS.
b. DESIGN A WEB PAGE DEMONSTRATING DIFFERENT

SEMANTICS
C. DESIGN A WEB PAGE WITH DIFFERENT TABLES. DESIGN A

WEB PAGES USING TABLE SO THAT THE CONTENT APPEARS
WELL PLACED.
c. DESIGN A WEB PAGE WITH A FORM THAT USES ALL

TYPES OF CONTROLS.
3 JAVA SCRIPT REFERENCES
a. DESIGN A WEB PAGE DEMONSTRATING DIFFERENT

CONDITIONAL STATEMENTS.
I. WRITE A PROGRAM IN JAVASCRIPT TO FIND
WHETHER THE AGE IS LESS THAN 18 OR NOT.
II. WRITE A PROGRAM IN JAVASCRIPT TO FIND
WHETHER THE NUMBER IS EVEN OR ODD.
III. WRITE A PROGRAM IN JAVASCRIPT TO FIND
WHETHER THE NUMBER IS POSITIVE OR NEGATIVE.
IV. WRITE PROGRAM IN JAVASCRIPT TO FIND THE DAY
OF THE WEEK BY USING SWITCH STATEMENT
B.DESIGN A WEB PAGE USING DIFFERENT LOOPING

STATEMENTS
1.WRITE A PROGRAM IN JAVASCRIPT TO PRINT 5 NUMBERS

USING FOR LOOP
2.WRITE A PROGRAM TO PRINT NUMBER FROM 3 TO 5 BY

USING WHILE LOOP
3.WRITE A PROGRAM IN JAVASCRIPT TO PRINT NUMBER

FROM 1 TO 10 AND CONCATENATE HELLO WORLD WITH
EVERY NUMBER BY USING DO WHILE LOOP
4 JAVASCRIPT
a. WRITE A JAVA SCRIPT PROGRAM TO DESIGN SIMPLE

CALCULATOR.
b. DESIGN A FORM AND VALIDATE ALL THE CONTROLS

PLACED ON THE FORM USING JAVA SCRIPT
c. USING JAVASCRIPT DESIGN, A WEBPAGE THAT

PRINTS FACTORIAL OF ANY NUMBER
5. STRING FUNCTIONS AND ARRAYS
A. WRITE A PHP PROGRAM TO DEMONSTRATE DIFFERENT

STRING FUNCTIONS.
B. WRITE A PHP PROGRAM TO CREATE ONE DIMENSIONAL

ARRAY.
6 BASIC PHP I
a. WRITE A PHP PROGRAM TO ACCEPT A NUMBER FROM

THE USER AND PRINT IT FACTORIAL.
B. WRITE A PHP PROGRAM TO ACCEPT A NUMBER FROM THE
USER AND PRINT WHETHER IT IS PRIME OR NOT.
7. BASIC PHP II
A. WRITE A PHP CODE TO FIND THE GREATER OF 2 NUMBERS.
ACCEPT THE NO. FROM THE USER.
B. WRITE A PHP PROGRAM TO DISPLAY THE FOLLOWING

BINARY PYRAMID:
1
01
101
0101
8 DESIGN AN XML DOCUMENT AND DISPLAY IT IN BROWSER
USING XSL
Web development practical
Practical 1(a)
Aim:-design a web page using different text using

formatting text.
Input:-
<!Doctype html>
<html>
<head>
<title>text and block formatting</title>
</head>
<body>
<marquee behavior="scroll" direction="up" scrolldelay="1">
<p>there is a paragraph</p>
there is a <b>bold text</b><br>
there is a <i>italic text</i><br>
there is a <u>underlined text</u><br/>
there is a <em>emphasize text</em><br>
there is a <big>big text</big><br>
there is a <small>small text</small><br/>
this is subscript X<sup>2</sup>+Y<sup>2</sup><br>
this is H<sub>2</sub>O<br>
this is <tt>typewriter text</tt><br>
this is <strike>striked text</strike><br>
this is <ins>inserted text</ins><br>
this is <del>deleted text</del><br>
this is <mark>marked text</mark><br>
this is <strong>strong text</strong><br></marquee>
<h1>this is heading 1</h1>
</body>
</html>
Output:-
Practical no. 1
Part-b
Aim. Design a web page with links to different pages and
allow navigation between pages
Input :-
Main page.html
<html>
<head>
</head>
<body BGCOLOR="LIGHTBLUE">
<h1 STYLE="BACKGROUND-COLOR:BLUE; COLOR:WHITE;
WIDTH:320PX;">THIS IS HOME PAGE</H1>
<A HREF="CONTACTPAGE.HTML" TARGET="_SELF">CONTACT
PAGE</A><BR><BR>
<A HREF="DETAILSPAGE.HTML" TARGET="_PARENT">DETAIL
PAGE</A><BR><BR>
<A HREF="GALLERYPAGE.HTML" TARGET="_TOP">GALLERY
PAGE</A>
</BODY>
</HTML>
Contactpage.html
html>
<HEAD>
</HEAD>
<BODY>
<H1>THIS IS CONTACT PAGE</H1>
<A HREF="MAINPAGE.HTML" TARGET="_SELF">BACK TO MAIN
PAGE</A><BR><BR>
PAGE</A><BR><BR>
PAGE</A>
</BODY>
</HTML>
Detailspage.html
<html>
<HEAD>
</HEAD>
<BODY>
<H1>THIS IS DETAIL PAGE</H1>
PAGE</A><BR><BR>
<A HREF="CONTACTPAGE.HTML" TARGET="_PARENT">CONTACT
PAGE</A><BR><BR>
PAGE</A>
</BODY>
</HTML>
Gallerypage.html
<html>
<HEAD>
</HEAD>
<BODY>
<MARQUEE DIRECTION="LEFT">
<H1>THIS IS GALLERY PAGE</H1>
PAGE</A><BR><BR>
PAGE</A><BR><BR>
<A HREF="CONATACTPAGE.HTML" TARGET="_TOP">CONTACT
PAGE</A>
</MARQUEE>
</BODY>
</HTML>
Output:-
Practical no.1
Part-c
AIM:-DESIGN A WEB PAGE DEMONSTRATING ALL STYLE SHEET TYPES
INPUT:
Inline CSS
<html>
<head>
<title>INLINE CSS</title>
</head>
<body>
<h1 style="color:red; text-align:center;">INLINE CSS</h1>
<h2 style="background-color:pink;">this is a heading 2</h2>
<h3 style="background-color:yellow; text-align:right;">this
is a heading 3</h3>
<p style="color:red;">INLINE CSS Paragraph</p>
<h1>This Tag Is Not Formatted</h1>
</body>
</html>
Internal css
<html>
<head>
<title>INTERNAL CSS</title>
<style type="text/css">
body{border-style:solid;
border-color:black}
h1{color:red; text-align:center;}
h2{background-color:pink;}
h3{border-style:solid;
border-color:black;
background-color:yellow; text-align:right;}
p{border-style:dashed;
border-color:green;
color:red;
text-align:left;}
</style>
</head>
<body>
<h1>INTERNAL CSS</h1>
<h2>this is a heading 2</h2>
<p>INTERNAL CSS Paragraph</p>
<h1>This Tag Is Formatted</h1>
</body>
</html>
External css
h1{color:red; text-align:center;}
h2{background-color:pink;}
h3{background-color:yellow; text-align:right;}
p{color:red;}
<html>
<head>
<title>EXTERNAL CSS</title>
<link rel="stylesheet" type="text/css" href="external.css">
</head>
<body>
<h1>EXTERNAL CSS</h1>
<p>EXTERNAL CSS Paragraph</p>
<h1>This Tag Is Formatted</h1>
</body>
</html>
Output:
Practical no.2
Part-a
Aim. Design a web page with image maps.
Program.
<html>
<head>
<title>image mapping: creating image with clickable
areas:action</title>
</head>
</body>
<img src="logo-social.jpg" alt="logo" usemap="#logo">
<map name="logo">
<area shape="circle" coords="20,60,100"
href="http://www.youtube.com" target="_blank">
<area shape="rect" coords="40,80,160,200"
<area shape="polygon" coords="80,100,180,140,200,240"
</map>
</body>
</html>
Output.
Practical no.2
Part-b
Aim. Design a webpage with tables and its different
attributes.
Program.
<html>
<head>
<style>
th {
color: red:
background-color:yellow
td{
background-color:silver;
}
table{
text-align:center;
color: blue;
background-color:green
</style>
</head>
<body>
<table border="1">
<tr>
<th colspan="3">Exhibit A</th>
</tr>
<tr>
<td rowspan="2">Population Survey</td> <td colspan="2">By

gender</td>
</tr>
<tr>
<td>Males</td>
<td>Females</td>
</tr>
<tr>
<td rowspan="2">All regions</td>
<td>9999</td> <td>10400</td>
</tr>
<tr>
<td>1111</td>
<td>1200</td>
</tr>
</table>
</body>
</html>
Output.
Practical no.2
Part-c
Aim. Design a web page embedding with multimedia features.
Program.
Audio html
<!doctype html>
<html>
<head>
<title>multimedia example</title>
</head>
<body>
<h1>let`s listen to music</h1>
<audio controls>
<source src="bird chirp.mp3" type="audio/mpeg">
<source src="sound1.ogg" type="audio/ogg">
your browser doesn`t support the audio html tag
</audio>
</body>
</html>
Video html
<!doctype html>
<html>
<head>
<title>multimedia example</title>
</head>
<body>
<h1>let`s watch a video</h1>
<video width="500px" height="250px" muted autoplay
controls >
<source src="sample video.mp4" type="video/ogg">
<source src="movie.ogg" type="video/ogg">
your browser doesn`t support the video html tag
</video>
</body>
</html>
Audio output
Practical no.2
Part-d
Aim. Design a web page with a form that uses all types of
controls.
Program
<!doctype html>
<html>
<head></head>
<<body>
<form>
<h1>registration form</h1>
<label name="name">first name:</label><input
type="text" name="name" value=""><br>
<label name="name">middlename:</label><input
type="text" name="name" value=""><br>
<label name="name">lastname:</label>
<input type="text" name="name" value=""><br>
<label name="password">password:</label><input
type="text" name="password" value=""><br>
<label name="address">address:</label>
<input type="text" name="address" value=""><br>
<label name="gender">select gender:</label><input
type="radio" name="gender" value="male">male<input
type="radio" name="gender" value="female">female<br>
<label name="stream">select stream:</label><input
type="radio" name="stream" value="science">science<br>
<input type="radio" name="stream"
value="commerce">commerce<br>
<input type="radio" name="stream" value="arts">arts<br>
<label name="city">select city:</label><input
type="checkbox" name="city" value="mumbai">mumbai
<input type="checkbox" name="city" value="pune">pune
<input type="checkbox" name="city" value="goa">goa<br>
<input type="submit" value="submit">
<input type="submit" value="reset">
</form>
</body>
</html>
Output.
Practical no.3
Part-a
Aim. Design a web page demonstrating different conditional
statements.
V. Write a program In JavaScript to find whether the
age is less than 18 or not.
VI. Write a program in JavaScript to find whether the
number is even or odd.
VII. Write a program in JavaScript to find whether the
number is positive or negative.
VIII. Write program in JavaScript to find the day of the
week by using switch statement
Program.
<html>
<head>
<title>javascript example</title>
</head>
<body>
<script type="text/javascript">
var x=60;
if(x>18)
{
document.write(x+" is greater than 18");
}
else
{
document.write(x+" is not greater than 18");
}
</script>
</body>
</html>
Part 2.
<html>
<head>
<title>
javascript program</title></head>
<body>
var num = 2;
document.write("number = "+num+"<br>");
if(num % 2 == 0)
{
document.write('number is even!');
}
else
{
document.write('number is odd!');
}
</script>
</body>
</html>
Part 3.
<html>
<head>
<title>
javascript program</title></head>
<body>
var x=20;
if(x>0)
{
document.write("<h2>"+x+" is postive</h2>");
}
else
{
document.write("<h2>"+x+" is negative</h2>");
}
</script>
</body>
</html>
Part 4.
html>
<head>
<title>
javascript program</title>
</head>
<body>
var day=new Date().getDay();
switch(day)
{
case 0:
day="sunday";
break;
case 0:
day="sunday";
break;
case 1:
day="monday";
break;
case 2:
day="tuesday";
break;
case 3:
day="wednesday";
break;
case 4:
day="thursday";
break;
case 5:
day="friday";
break;
default:
day="saturday";
}
document.write("Today is "+day);
</script>
</body>
</html>
Output:
PART B
AIM: Design a web page using different looping statements.
PART B1
PROGRAM: Write a program in JavaScript to print 5 numbers
using for loop
<!DOCTYPE html>
<html>
<head>
<title>Pract 3b a</title>
</head>
<body>
var num;
for(num=1;num<=5;num++)
{
document.write("<br>Number is: "+num);
}
</script>
</body>
</html>
OUTPUT:
PART B2
PROGRAM: Write a program to print number from 3 to 5
by using while loop
<html>
<head>
<title>Pract 3b b</title>
</head>
<body>
var num=3;
while(num>=3&&num<=5)
{
document.write("<br>Number is: "+num);
num++
}
</script>
</body>
</html>
Output.
PART B3
PROGRAM: Write a program in javascript to print number from 1
to 10 and concatenate Hello World with every number by using do
while loop
<!DOCTYPE html>
<html>
<head>
<title>Pract 3b c</title>
</head>
<body>
var n=1;
do
{
document.write("<br>Number is:"+n+"HELLO WORLD")
n++;
}
while(n<=10)
</script>
</body>
</html>
OUTPUT:
Practical no.4
Part-a
Aim. Write a java script program to design simple
calculator.
Program.
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
</head>
<body>
<form>
Enter first number: <input type="text" id="input1">
<br>
Enter second number: <input type="text" id="input2">
<br>
Operations: <br>
<input type="button" value="Addition" onclick="add()">
<input type="button" value="Subtraction" onclick="sub()">
<input type="button" value="Multiplication" onclick="mul()">
<input type="button" value="Division" onclick="div()">
<input type="button" value="Modulus" onclick="mod()"><br>
Answer: <input type="text" id="output1"> <br>

</form>
function add()
{
var
a=parseInt(document.getElementById("input1").value);
var
b=parseInt(document.getElementById("input2").value);
var c=a+b;
document.getElementById("output1").value=c;
}
function sub()
{
var
var
var c=a-b;
}
function mul()
{
var
var
var c=a*b;
}
</script>
</body>
</html>
Output.
Practical no.4
Part – b
aim. Design a form and validate all the controls placed on
the form using Java Script
Input.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function validdata()
{
var username=document.myform.username.value;
var password=document.myform.password.value;
var re=document.myform.re.value;
if(username==null||username=="")
{
alert("username cannot be blank");
document.myform.username.focus();
return false;
}
else if(password.length<9)
{
alert("password should be of minimum 8
characters");
document.myform.password.focus();
return false;
}
else if(password!=re)
{
alert("password should be same");
document.myform.re.focus();
return false;
}
else
{
alert("registeration completed successfully");
}
}
</script>
<form name="myform">
username : <input type="text"
name="username"><br>
email : <input type="email" name="email"><br>
password : <input type="password"
name="password"><br>
retype password : <input type="password"
name="re"><br>
<input type="submit" name="register" value="register"
onclick="validdata()"> <input
type="reset" name="reset" value="reset">
</form>
</body>
</html>
Output.
Practical no.4
Part-c
aim. Using JavaScript design, a webpage that prints
factorial of any number
input.
<!DOCTYPE html>
<html>
<head>
<script>
function show()
{
var num1=document.getElementById("num").value;
var i,fact;
fact=1;
for(i=1;i<=num1;i++)
{
fact=fact*i;
document.getElementById("answer").value=fact;
}
}
</script>
</head>
<body>
<form>
enter number : <input type="text" name="number"
id="num">
<input type="button" name="factorial" value="factorial"
onclick="show()"> <input type="text" name="factorial"
id="answer">
</form>
</body>
</html>
Output.
Practical no.5
Part – A
Aim. Write a php program to demonstrate string functions.
Program.
<!DOCTYPE html>
<html>
<head>
<title>string functions</title>
</head>
<body>
<?php
echo strlen("hello all")."<br>";
echo strpos("hello how are you!","you")."<br>";
echo str_replace("fyit","fybsc-it","welcome fyit students in
this class")."<br>";
echo strrev("hello patkar")."<br>";
echo str_word_count("hello patkar good day");
?>
</body>
</html>
Output.
Practical no.5
Part – B
Aim. Write a PHP program to create one dimensional array.
Program.
<!DOCTYPE html>
<html>
<head>
<title>string functions</title>
</head>
<body>
<?php
$fruits=array("apple","grapes","banana");
echo "my favourite fruit is ".$fruits[2]."<br>";
echo count($fruits)."<br>";
echo sort($fruits)."<br>";
for($i=0;$i<3;$i++)
echo $fruits[$i]."<br>";
var_dump($fruits);
?>
</body>
</html>
Output.
Practical no.6
Part-a
Aim. Write a php program to accept a number from the user
and print it factorial .
Program.
<!DOCTYPE html>
<html>
<body>
<?php
function fact()
{
$input=4;
$i=1;
for($i=1;$i<=input;$i++)
{
$fact=$fact*$i;
}
echo "factorial is ".$input."$fact";
}
fact();
?>
</body>
</html>
Output.
Practical no.6
Part-b
Aim. Write a php program to accept the value from user and
print if it is prime or not.
Program.
<!DOCTYPE html>
<html>
<body>
<?php
function isprimeornot($n)
{
for($i=2;$i<$n;$i++)
{
if($n % $i ==0)
{
return 0;
}
}
return 1;
}
$a = isprimeornot(8);
if($a==0)
echo 'This is not a prime....'."\n";
else
echo 'This is a prime number..'."\n";
?>
</body>
</html>
Output.
Practical no.7
Part-a
Aim. Write a PHP code to find the greater of 2 numbers.
Accept the no. from the user.
Program.
<!DOCTYPE html>
<html>
<body>
<?php
function greatest()
{
$num1=10;
$num2=15;
if($num1>$num2)
{
echo $num1." is the greatest number";
}
else
{
echo $num2." is the greatest number";
}
}
greatest();
?>
</body>
</html>
Output.
Practical no.7
Part-b
Aim. Write a PHP program to display the following Binary
Pyramid.
Program.
<!DOCTYPE html>
<html>
<body>
<?php
for ($i=0;$i<=4;$i++)
{
for($j=0;$j<=$i;$j++)
{
if(($i+$j)%2==0)
{
echo "1 ";
}
else
{
echo "0 ";
}
}
echo "<br/>";
}
?>
</body>
</html>
Output.
Practical no.8
Part-a
Aim. Design an XML document and display it in browser using
XSL.
Program.
Xml code.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl"
href="displaydetails.xsl"?>
<catalog>
<cd>
<title>.net</title>
<author>tyit</author>
<publisher>techno pvt</publisher>
<price>200</price>
</cd>
<cd>
<title>php</title>
<author>fyit</author>
<publisher>bookish pvt</publisher>
<price>600</price>
</cd>
<cd>
<title>java</title>
<author>syit</author>
<publisher>knowledge pvt</publisher>
<price>600</price>
</cd>
</catalog>
Xsl code.
<?xsl version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>
MY BOOK COLLECTION
</h2>
<table border="1">
<tr bgcolor="pink">
<th style="text-align:left">title</th>
<th style="text-align:left">author</th>
<th style="text-align:left">price</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="author"/></td>
<td><xsl:value-of select="price"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Output.

Web Development Practical

Uploaded by

Copyright:

Available Formats

Web Development Practical

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Development Practical

Uploaded by

Copyright:

Available Formats

Name.

B. DESIGN A WEB PAGE WITH LINKS TO DIFFERENT PAGES

C. DESIGN A WEB PAGE DEMONSTRATING ALL STYLE SHEET

b. DESIGN A WEB PAGE DEMONSTRATING DIFFERENT

C. DESIGN A WEB PAGE WITH DIFFERENT TABLES. DESIGN A

c. DESIGN A WEB PAGE WITH A FORM THAT USES ALL

3 JAVA SCRIPT REFERENCES

a. DESIGN A WEB PAGE DEMONSTRATING DIFFERENT

B.DESIGN A WEB PAGE USING DIFFERENT LOOPING

1.WRITE A PROGRAM IN JAVASCRIPT TO PRINT 5 NUMBERS

2.WRITE A PROGRAM TO PRINT NUMBER FROM 3 TO 5 BY

3.WRITE A PROGRAM IN JAVASCRIPT TO PRINT NUMBER

a. WRITE A JAVA SCRIPT PROGRAM TO DESIGN SIMPLE

b. DESIGN A FORM AND VALIDATE ALL THE CONTROLS

c. USING JAVASCRIPT DESIGN, A WEBPAGE THAT

5. STRING FUNCTIONS AND ARRAYS

A. WRITE A PHP PROGRAM TO DEMONSTRATE DIFFERENT

B. WRITE A PHP PROGRAM TO CREATE ONE DIMENSIONAL

a. WRITE A PHP PROGRAM TO ACCEPT A NUMBER FROM

B. WRITE A PHP PROGRAM TO DISPLAY THE FOLLOWING

Aim:-design a web page using different text using

<th colspan="3">Exhibit A</th>

<td rowspan="2">Population Survey</td> <td colspan="2">By

<td rowspan="2">All regions</td>

Answer: <input type="text" id="output1"> <br>

You might also like