Web Programming 1 To 4 Practicals

BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
Class: _____________ Sem: _____ Date of Performance: ___________
Course Name:_________________________ Course Number: __________
Practical Number: _______ Page Number: _______
Aim:
Teacher’s Signature : ____________________________

SYCS23 Mayur Nagesh Pujari Date: 1st July 2023
Practical 1
1. Design a webpage that makes use of
a. Document Structure Tags
Code:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Output:
Using only Title tag

Code:
<html>
<head>
This is head tag
<title>This is title tag</title>
</head>
</html>
Output:
b. Various Text Formatting Tags

1)Formatting Tags
Code:
<html>
<head>
This is head tag
<title>This is title tag</title>
</head>
<body bgcolor="pink">
<h1>H1 is the largest heading tag</h1>
<H6>h6 is the smallest heading</h6>
Breaking the line
<p> Paragraph tag</p>
<hr>
<center>
<img src="img1.png" width="20%" height="30%">
<br><font color=#FF0000>
<b>Name : HTML</b>
<br><u>Full form : Hypertext Markup Language</u>
<br><i>Purpose: Web Designing </i>
Page 1 of 21
PRACTICAL JOURNAL
Aim:

<hr>
</font>
<h1>H<sub>2</sub>O</h1>
<h2>x<sup>2</sup>
<big>Interest
</center>
</body>
</html>
Output:
2) <Prp> tag -used to show text in same format

Code:
<html>
<body>
pre tag is used to print text in same format eg. to display poems
***
Line without
using pre tag ***
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
</body>
Page 2 of 21
PRACTICAL JOURNAL
Aim:

</html>
Output:
3)span tag: The <span> tag is an inline container used to mark up a part of a text, or a part of a
document.
Code:
<html>
<body>
<p>This is how <span style="border:1px solid black"</span>works</p>
</body>
</html>
Output:
c. List Tags- Ordered and Unordered List

Code:
<HTML>
<head><title>List tag</title></head>
<body bgcolor=#B7E9F7>
<font color=#80000>
<h1><center><u>Different types of flowers</u></center></h1>
<h2><u>Flower names:</u></h2>
<ul>
<li> Rose </li>
<li> Mogra </li>
<li> Lily </li>
<li> Jasmine </li>
<li> Lotus </li>
</ul>
<h3><center><u>Ordered List:Different types of fruits</u></h3>
<ol>
<li><i>Apple</i></li>
<li><i>Orange</i></li>
<li><i>Mango</i></li>
<li><i>Pineapple</i></li>
</ol>
Page 3 of 21
PRACTICAL JOURNAL
Aim:

</font>
</body></html>
Output:
d. Image and Image Maps

Q1. Insert an image using <img> tag.
Code:
<html>
<head>
<body>
<img src="img.png" alt="Html" width=500px height=128px>
</body>
</head>
</html>
Output:
After using style tag

Code:
<html>
<head>
<body>
<style>img {width:600px; height:500px} </style>
<img src="img.png" alt="Html" width=500px height=128px>
</body>
</head>
</html>
Output:
Page 4 of 21
PRACTICAL JOURNAL
Aim:

Q1. Image mapping

Code:
<html>
<head> <title></title></head>
<body>
<map>
<img src="nature1.jpg" width="30%" height="50%" alt="imagemap" usemap="#photo">
<map name="photo">
<area shape="rec" coords="165,95,474,316" alt="picture" href="hello.html">
</map>
</body>
</html>
Output:
# Note: USE TAB KEY to see your clickable regions
On clicking the rectangular clickable region we get Redirected to hello.html webpage.

Code of hello.html :
<html>
<head>
<title>This is the title tag</title>
</head>
<body bgcolor="yellow">
<h1><i><b> Hello World </b></i></h1>
<br>
<u>Thankyou<u>
</body>
</html>
Output:
Page 5 of 21
PRACTICAL JOURNAL
Aim:

Q2. Image Mapping

Code:
<!doctype html>
<html>
<head>
<title>Image Mapping </title>
</head>
<body>
<img src="nature2.jpg" height="500" width="500" usemap="#mp">
<map name ="mp">
<area shape="rect" coords="30,52,235,214"
href="audio.html" alt="Rectangle: Click here to open audio page">
<area shape="poly" coords="387,73,490,138,449,234,326,235,290,136"
href="video.html" alt="Polygon: Click here to open video.html page">
<area shape="circle" coords="261,375,108"
href="https://www.google.com/" alt="Open Google Page">
</map>
</body>
</html>Output:
# Note: USE TAB KEY to see your clickable regions
Redirecting OUTPUT:
There are 3 Clickable regions(hotspots) here
Rectangle: Redirects to audio.html
Code:
<html>
<head><title>Audio Tag</title></head>
<body>
<audio src="audio.mp3"
controls autoplay loop=-1>
</audio>
</body>
</html>
Output:
Page 6 of 21
PRACTICAL JOURNAL
Aim:

Polygon : Redirects to video.html

Code:
<html>
<head><title>Audio Tag</title></head>
<body>
<video src="video.html" controls autoplay loop=-1 width="500" height="200">
</video>
</body>
</html>
Output:
Circle: Redirects to URL https://www.google.com/

Output:
Page 7 of 21
PRACTICAL JOURNAL
Aim:

SYCS23 Mayur Nagesh Pujari Date: 3rd July 2023
Practical - 02
2. Design a webpage that makes use of
Table tags
1)Table 1:
Code:
<html>
<head><title>Monthly Savings</title></head>
<body>
<table border="1" height="200" width="200" style="background-color:#EEDD82">
<tr>
<th>Month</th>
<th >Savings</th>
</tr>
<tr>
<td>January</td>
<td>$200</td>
</tr>
<tr>
<td>February</td>
<td>$400</td>
</tr>
<tr>
<td>June</td>
<td>$345</td>
</tr>
</table>
</body>
</html>
Output:
b) Table 2:
Code:
<html>
<body>
<table border="2">
<tr><th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr><td rowspan="3"> Mark Smith </td>
<td>English</td>
Page 8 of 21
PRACTICAL JOURNAL
Aim:

<td>67</td>
</tr>
<tr>
<td>Maths</td>
<td>82</td>
</tr>
<tr>
<td>Science</td>
<td>91</td>
</tr>
</table>
</body>
</html>
Output:
c) Table 3:
Code:
<html>
<body>
<table border="2" height="350" width="350">
<tr>
<th>Month</th>
<th >Savings</th>
</tr>
<tr>
<td>January</td>
<td><a href="table.html">Click here</a></td>
</tr>
<tr>
<td>February</td>
<td>
<a href="C:/Users/Mayur/Desktop/html/imagemap2.html">Hello please click here
</a></td></tr>
<tr>
<td>June</td>
<td>$345</td>
</tr>
</table>
</body>
</html>
Page 9 of 21
PRACTICAL JOURNAL
Aim:

Output:
Click here will navigate you to table1.html
d) Table :4
Code:
<html>
<head><title>Table 4</title>
<body>
<table border=1 bgcolor="yellow" align="center">
<tr bgcolor=pink>
<th>SN</th>
<th>Item</th>
<th>Quantity</th>
</tr>
<tr>
<td > 1 </td>
<td>Apple</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>Mango</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>Orange</td>
<td>1</td>
</tr>
<tr>
<td colspan="2" bgcolor="lightblue" >Total</td>
<td>5</td>
</tr>
</table>
</body>
</html>
Page 10 of 21
PRACTICAL JOURNAL
Aim:

Output:
b. Form Tags (forms with various form elements)

Code:
<html>
<head><title>Registration Form</title></head>
<body>
<center>
<form>
<label for="fname">First name: </label>
<input type="text" id="fname" name="fname"><br>
<input type="radio" id="Male" name="gender" value="Male">Male
<input type="radio" id="Male" name="gender" value="Male">Female
<br><label for="Exam">Exam passed:</label>
<select>
<option value="ssc">SSC</option>
<option value="hsc">HSC</option>
</select>
<input type="checkbox" id="Red" name="colour" value="Red">Red
<input type="checkbox" id="Blue" name="colour" value="Blue">Blue
<br><label>Address:</label>
<textarea rows="4" cols="50"></textarea>
<colspan = "2"><input type="submit" name="btsubmit">
<input type="reset" name="btreset">
</form>
</center>
</body>
</html>
Output:
Page 11 of 21
PRACTICAL JOURNAL
Aim:

c. Navigation across multiple pages

Code1:
<html>
<head>
</head>
<body>
<center>
<table border=1 height="350" width="450">
<tr align="center">
<th>My Page</th>
<th>Link</th>
</tr>
<tr align="center">
<td>My Audio</td>
<td><a href="audio.html"> Click Here </td><br><br>
</tr>
<tr align="center">
<td>My Video</td>
<td><a href="video.html"> Click Here </td><br><br>
</tr>
<caption>This table contains html pages and their link</caption>
</table>
</center>
</body>
</html>
Output:
Page 12 of 21
PRACTICAL JOURNAL
Aim:

d. Embedded Multimedia elements (Audio and Video Tags)

Note: Give Filename = if in same folder
Whole Path= if in different folder
Code2: Video tag
<html>
<body><h1>The video element</h1>
<video width="300" height="300" controls>
<source src="video.mp4" type="video/mp4">
</video>
<video width="300" height="300" controls>
<source src="v2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Output:
Code 3: Audio tag

<html>
<body>
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
</body>
</html>
Output 3:
Page 13 of 21
PRACTICAL JOURNAL
Aim:

SYCS23 Mayur Nagesh Pujari Date: 7th July 2023
Practical – 03
3. Design a webpage that make use of Cascading Style Sheets with
a. CSS properties to change the background of a Page
Code:
<html>
<head>
<title>CSS</title>
<style>
body {
background-image:url("cat.jpg"); 
background-color: lightorange;
background-size:200px 200px;
}
</style>
<body>
<center >
<b><i><h1 style="font-size:30px; font-family:Segoe Script; ">Japanese Anime</h1></i><b>
<br>
The word anime — pronounced "ah-knee-may" — is an abbreviation of the word animation. In Japan,
the word is used to refer to all animation. However, outside of Japan, it has become the catch-all term
for animation from Japan.
</center>
</body>
</html>
Output:
Background image is by – default repeated.
b. CSS properties to change Fonts and Text Styles

Code:
<html>
<head>
<title>CSS</title>
<style>
body {
Page 14 of 21
PRACTICAL JOURNAL
Aim:

background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
color: green;
}
</style>
</head>
<body>
<h1>Hello Heading 1</h1>
Unaffected area where no font is changed
<p>This is paragragh tag</p>
</body>
</html>
Output:
c. CSS properties for positioning an element

Code:
<html>
<head>
<link rel="stylesheet" href="bg.css">
<title>Birthday Party Invitation</title>
<style>
#pos1{ position:relative;
left:35px; top:40px;
}
#pos2{ position:relative; left:40px; top:10px;}
body{
background-image : url("img.jpg");background-repeat:no-repeat;
background-size:1500px 600px;
}
</style>
</head>
<body >
<center>
<h1 style="font-size:70px; font-family:Edwardian Script ITC; color=purple">
Birthday Invitation</h1>
<pre id="pos2" style="font-size:30; font-family: Edwardian Script ITC"; color:maroon; font-weight;
bold">
Your Presence at my birthday party is a must
No more today or tomorrow, and no if and but
The obligation of my birthday party is, you hav to be there to cut the cake and be on the floor to let
your body shake.
Page 15 of 21
PRACTICAL JOURNAL
Aim:

Party time, venue--

</pre>
<b id="pos1" style="font-size:50; font-family:Segoe Script; color=ORANGE">On 19<sup>th</sup>
of July 2022</b>
<address style="color:green;fonṭ-size:20px; font-family:Edwardian Script ITC; font-weight:bold">
<br>Andheri,
<br>Mumbai<br>
</address>
</center>
</body>
</html>
Output: Background image without repetition
Page 16 of 21
PRACTICAL JOURNAL
Aim:

Practical – 04
Part A
4. Write JavaScript code for
a. Performing various mathematical operations such as calculating factorial /
finding Fibonacci Series / Displaying Prime Numbers in a given range
Q.1 WAP to perform Arithmatic operations

Code:
<html>
<head>
<title>Variales...!!!</title>
</head>
<body>
<script type="text/javascript">
var num1 =22;
var num2 =3;
var add = num1 + num2;
var minus = num1 - num2;
var multiply=num1*num2;
var divide=num1/num2;
document.write("First No: =" + num1 +"<br/>Second No:" + num2+"<br/>");
document.write(num1+" + "+num2+" = "+add+"<br/>");
document.write(num1+" - "+num2+" = "+minus+"<br/>");
document.write(num1+" * "+num2+" = "+multiply+"<br/>");
document.write(num1+" / "+num2+" = "+divide+"<br/>");
</script>
</body>
</html>
Output:
Q.2 WAP to print Fibonacci series up to a given number.

Code:
<html>
<head>
<title>Fibonacci Series</title>
</head>
<body>
var num1=0,num2=1,num3,i;
var num=parseInt(prompt("Enter the limit for Fibonacci Series: "));
document.write("Fibonacci Series for the first "+num+" numbers is : ");
for(i=1;i<=num;i++){
document.write("<br>" + num1);
num3=num1+num2;
Page 17 of 21
PRACTICAL JOURNAL
Aim:

num1=num2;
num2=num3;
}
</script>
</body>
</body>
</html>
Output:
Q.3 WAP to check whether a given number is prime or not.

Code:
<html>
<body>
var n,k=0,i;
n=parseInt(prompt("Enter th number:"));
if(n>1){
for(i=2;i<n;++i){
if(n%i==0)
k++;
}
if(k>1)
alert("Number is not prime");
else
alert("Number is prime");
}
else if(n<0){
Page 18 of 21
PRACTICAL JOURNAL
Aim:

alert("Negative numbers are not prime numbers");

}
else{
alert(n+" is a non-prime composite number");
}
</script>
</body>
</html>
Output:
Q.4 WAP to print prime numbers up to a given range.

Code:
<html>
<head>
<title></title>
</head>
<body>
var beg,end,i,fact,j;
beg=parseInt(prompt("Enter a starting number:"));
end=parseInt(prompt("Enter a ending number:"));
document.write("Prime Numbers are: \n");
for(i=beg; i<=end; i++)
{
fact=0;
for(j=1; j<=end; j++)
{
if(i%j==0)
fact++;
}
if(fact==2)
document.write(i+" ");
}
</script>
</body>
</html>
Page 19 of 21
PRACTICAL JOURNAL
Aim:

Output:
Starting number: 2
Ending Number: 50
Result:
Q.5 WAP to calculate factorial of a given number.

Code:
<html>
<head>
<title>Factorial</title>
</head>
<body>
var n,i=1,fact=1;
n=parseInt(prompt("Enter a number:"));
if(n<0){
alert("Factorial of negative numbers are not possible");
}
else{
for(i=1;i<=n;i++){
fact=fact*i;
}
alert("Factorial of "+n+" is "+fact);
}
Page 20 of 21
PRACTICAL JOURNAL
Aim:

</script>
</body>
</html>
Output:
Page 21 of 21

Web Programming 1 To 4 Practicals

Uploaded by

Document Information

Original Description:

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 Programming 1 To 4 Practicals

Uploaded by

Copyright:

Available Formats

BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST

Teacher’s Signature : ____________________________

Using only Title tag

b. Various Text Formatting Tags

Teacher’s Signature : ____________________________

2) <Prp> tag -used to show text in same format

Teacher’s Signature : ____________________________

c. List Tags- Ordered and Unordered List

Teacher’s Signature : ____________________________

d. Image and Image Maps

After using style tag

Teacher’s Signature : ____________________________

Q1. Image mapping

On clicking the rectangular clickable region we get Redirected to hello.html webpage.

Teacher’s Signature : ____________________________

Q2. Image Mapping

Teacher’s Signature : ____________________________

Polygon : Redirects to video.html

Circle: Redirects to URL https://www.google.com/

Teacher’s Signature : ____________________________

Teacher’s Signature : ____________________________

Teacher’s Signature : ____________________________

Teacher’s Signature : ____________________________

b. Form Tags (forms with various form elements)

Teacher’s Signature : ____________________________

c. Navigation across multiple pages

Teacher’s Signature : ____________________________

d. Embedded Multimedia elements (Audio and Video Tags)

Code 3: Audio tag

Teacher’s Signature : ____________________________

b. CSS properties to change Fonts and Text Styles

Teacher’s Signature : ____________________________

c. CSS properties for positioning an element

Teacher’s Signature : ____________________________

Party time, venue--

Teacher’s Signature : ____________________________

Q.1 WAP to perform Arithmatic operations

Q.2 WAP to print Fibonacci series up to a given number.

Teacher’s Signature : ____________________________

Q.3 WAP to check whether a given number is prime or not.

Teacher’s Signature : ____________________________

alert("Negative numbers are not prime numbers");

Q.4 WAP to print prime numbers up to a given range.

Teacher’s Signature : ____________________________

Q.5 WAP to calculate factorial of a given number.

Teacher’s Signature : ____________________________

You might also like