Scribd
Upload
25 views

Web Development Practical

The document outlines a web development practical project divided into multiple parts. It includes an index listing topics such as using basic tags, image maps, tables, forms, JavaScript references, and more. For each topic, it provides instructions to design a web page demonstrating various HTML elements, tags, and JavaScript programs related to that topic. The practical project aims to help students learn web development skills like creating basic pages, adding links and navigation, using images, tables, forms, JavaScript programming, and more.

Uploaded by

Kajal Goud
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
25 views

Web Development Practical

The document outlines a web development practical project divided into multiple parts. It includes an index listing topics such as using basic tags, image maps, tables, forms, JavaScript references, and more. For each topic, it provides instructions to design a web page demonstrating various HTML elements, tags, and JavaScript programs related to that topic. The practical project aims to help students learn web development skills like creating basic pages, adding links and navigation, using images, tables, forms, JavaScript programming, and more.

Uploaded by

Kajal Goud
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 58

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>
<h2>this is heading 2</h2>
<h3>this is heading 3</h3>
<h4>this is heading 4</h4>
<h5>this is heading 5</h5>
<h6>this is heading 6</h6>
</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>
<A HREF="DETAILSPAGE.HTML" TARGET="_PARENT">DETAIL
PAGE</A><BR><BR>
<A HREF="GALLERYPAGE.HTML" TARGET="_TOP">GALLERY
PAGE</A>
</BODY>
</HTML>

Detailspage.html
<html>
<HEAD>
</HEAD>
<BODY>
<H1>THIS IS DETAIL PAGE</H1>
<A HREF="MAINPAGE.HTML" TARGET="_SELF">BACK TO MAIN
PAGE</A><BR><BR>
<A HREF="CONTACTPAGE.HTML" TARGET="_PARENT">CONTACT
PAGE</A><BR><BR>
<A HREF="GALLERYPAGE.HTML" TARGET="_TOP">GALLERY
PAGE</A>
</BODY>
</HTML>

Gallerypage.html
<html>
<HEAD>
</HEAD>
<BODY>
<MARQUEE DIRECTION="LEFT">
<H1>THIS IS GALLERY PAGE</H1>
<A HREF="MAINPAGE.HTML" TARGET="_SELF">BACK TO MAIN
PAGE</A><BR><BR>
<A HREF="DETAILSPAGE.HTML" TARGET="_PARENT">DETAIL
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>
<h3>this is a heading 3</h3>
<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>
<h2>this is a heading 2</h2>
<h3>this is a heading 3</h3>
<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"
href="http://www.youtube.com" target="_blank">
<area shape="polygon" coords="80,100,180,140,200,240"
href="http://www.youtube.com" target="_blank">
</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>
<script type="text/javascript">
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>
<script type="text/javascript">
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>
<script type="text/javascript">
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>
<script type="text/javascript">
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>
<script type="text/javascript">
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>
<script type="text/javascript">
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>
<script type="text/javascript">
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
a=parseInt(document.getElementById("input1").value);
var
b=parseInt(document.getElementById("input2").value);
var c=a-b;
document.getElementById("output1").value=c;
}
function mul()
{
var
a=parseInt(document.getElementById("input1").value);
var
b=parseInt(document.getElementById("input2").value);
var c=a*b;
document.getElementById("output1").value=c;
}
</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 :&nbsp;<input type="text"
name="username"><br>
email :&nbsp;<input type="email" name="email"><br>
password :&nbsp;<input type="password"
name="password"><br>
retype password :&nbsp;<input type="password"
name="re"><br>
<input type="submit" name="register" value="register"
onclick="validdata()">&nbsp;&nbsp;&nbsp;&nbsp;<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 :&nbsp;<input type="text" name="number"
id="num">&nbsp;&nbsp;
<input type="button" name="factorial" value="factorial"
onclick="show()">&nbsp;<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.

You might also like