Scribd
Upload
16K views

12th IT Practical Codes 2020-2021

The document describes four coding experiments involving HTML and JavaScript. Experiment 1 involves creating a webpage with two buttons - the first changes the background color every few seconds on mouseover, cycling through 7 distinct colors, and the second displays a message in the browser status bar on click. Experiment 2 automatically cycles the background color every few seconds on page load, displaying 7 distinct colors, and shows an alert when unloading. Experiments 3 and 4 involve creating webpages to play audio/video files with HTML5 tags, providing multiple format sources and controls.

Uploaded by

Khushi Jha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16K views

12th IT Practical Codes 2020-2021

The document describes four coding experiments involving HTML and JavaScript. Experiment 1 involves creating a webpage with two buttons - the first changes the background color every few seconds on mouseover, cycling through 7 distinct colors, and the second displays a message in the browser status bar on click. Experiment 2 automatically cycles the background color every few seconds on page load, displaying 7 distinct colors, and shows an alert when unloading. Experiments 3 and 4 involve creating webpages to play audio/video files with HTML5 tags, providing multiple format sources and controls.

Uploaded by

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

Group-A

Advanced Web Designing


Experiment No. 1
Title: Creation of website using HTML5

Create a website using HTML5 and CSS using any 4 CSS properties. Write a code for 2 separate pages having
different file names such as first page as Index.html and second page as page2.html. Use any theme such as
college profile or company profile etc. Every page must contain proper Meta information and design web page
as follows-

1) 1) The index page must contain a heading which is highest among other text on pages and must be at centre of
the page. There must be a paragraph which introduces general information about the theme chosen must have
at least 3 physical style tags and one image with alternate text. This page must be connected to other two
pages with proper navigational links.
2) 2) The 2nd page must contain the feedback or enrolment form related with theme chosen with features of
HTML5. The form must contain text element and email address of the company or person. Include the submit
button.

Code for index.html

<!Doctype html>
<! SOP 1 (Chapter Advanced Web Designing, Teacher: Sagar Kotwal)>
<html>
<head>
<title>Mahatma Phule Junior College</title>
<meta charset = "utf-8>
<meta name = "description" content="MP college website">
<meta name = "keywords" content= "Mahatma Phule,College website, MP college">
<style>
h1
{
background-color:red;
color:white;
font-family:algerian;
border-radius:25px
}
img

border:4px solid darkblue;

border-radius:25px;

</style>

</head>

<body bgcolor = "skyblue">

<h1 align = "center"> Mahatma Phule Junior College, Pune</h1>

<p>This Website contains information about Mahatma Phule junior College, Pune. M.P College is English
Medium Junior College with Science , Arts and Commerce Streams, established on 14th March 2005.It is one of
the best leading colleges in pune. </p>

<big>Today its name known to all for the high standard of teaching.</big><br>

<i>Our Aim is to impart high quality education and values to students.</i><br>

<mark>M.P College affiliated to Maharashtra State Board</mark><br><br>

<center>

<img src = "mp.jpeg" width = "400" height = "250" alt = " MP junior College".><br>

<a href = page2.html>Click to fill feedback/enrolment form</a>

</center>

</body>

</html>

Code for page2.html

<!DOCTYPE html>
<! SOP 1, Page 2 (Chapter Advanced Web Designing, Teacher: Sagar Kotwal)>
<html>
<head>
<title>Page Title</title>
<meta charset = "utf-8>
<meta name = "description" content="MP college website">
<style>
table
{
background-color:silver;
border-radius:5px;
}

h1
{
background-color: blue;
color:white;
font-family:comic sans ms;
border-radius: 25px;
}
</style>
</head>
<body bgcolor = " skyblue">
<h1 align = "center">MP Junior College, Pune</h1>
<h2 align = "center"> Feedback Form </h2>
<center>
<form name = "f1">
<table>
<tr>
<td>Enter Your Name</td><td><input type = "text" name = "name" placeholder="your name"</td></tr>
<tr>
<td>Enter Email Id</td><td><input type = "email" name = "Email" placeholder="your email id"</td></tr>
<tr>
<td>Enter Address</td><td><textarea name = "tx" rows = "5" cols="20
"></textarea></td></tr>
<tr><th colspan = "2"><input type = "submit", name = "submit" value="submit"></th></tr>

</table>
</form>
<br>
<a href = "index.html">Click here to go to Home Page</a>
</center>
</body>
</html>
Group-A
Advanced Web Designing
Experiment No. 2
Title: Use of Audio on web pages using HTML5

Create a webpage named audio.html to set an audio file in web page with controls such that it uses HTMLS
elements. The audio file must play as soon as the webpage loads in browser and it will start over again, every
time when it is completed.
Create another webpage named audio1.html which provides multiple source file formats for the same audio file
that plays a sound automatically with controls. The browser should display the message with appropriate
attribute, when audio file is not supported by browser. The code must incorporate the list of sound files
formats (like wav, MP3 or ogg etc).

Code for audio.html

<!doctype html>
<html>
<head>
<title>Single Audio file with controls</title>
</head>
<body>
<h1 align = "center"> This is a program which plays an Audio file as soon as it is ready</h1>
<audio src ="india.mp3" controls autoplay loop = "-1">
</audio>
</body>
</html>

Code for audio1.html

<!Doctype html>
<html>
<head>
<title>Multiple Audio Files with Controls</title>
</head>
<body>
<h1 align = "center"> Multiple Audio Files with Controls</h1>
<h2>The text between the audio tags will only be displayed in browsers
that do not support the audio element.</h2>
<audio controls autoplay>
<source src = "india.mp3" type = "audio/mp3">
<source src = "india.wav" type = "audio/wav">
<source src = "india.ogg" type = "audio/ogg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Group-A
Advanced Web Designing
Experiment No. 3
Title: Use of Video on web pages using HTML5

Create a webpage named video.HTML to display a video file on web page and plays automatically with controls.
The dimension of video area should be 150 * 150 pixels.

Create another webpage which provide multiple source file formats for the same Video file that plays a sound
automatically with controls. The dimension of video area should be 100*100 pixels. The browser should
display the message with appropriate attribute when video file is not supported by browser. The code must
incorporate the list of video files formats (like webM, MP4 or ogg etc).
Code for video.html
<!Doctype html>
<html>
<head>
<title>Program to play video file on web page with controls</title>
</head>
<body>
<h1 align = "center"> Single Video File on web Page with Controls</h1>
<video src = "nature.mp4" width = "500" height ="500" controls autoplay loop = "-1" >
</video>
</body>
</html>

Code for video1.html

<!Doctype html>
<html>
<head>
<title>Multiple Video File on web page with controls</title>
</head>
<body>
<h1 align = "center"> This page contains a video with dimention 100 by 100 px</h1>
<h2>The text between the video tags will only be displayed in browsers that
do not support the video element</h2>
<video width = "100" height = "100" controls autoplay >
<source src = "nature.mp4" type = "video/mp4">
<source src = "nature.ogg" type = "video/ogg">
<source src = "nature.webm" type = "video/webm">
Your browser does not support give audio file format.
</video>
<body>
</html>
Group-A
Advanced Web Designing
Experiment No. 4
Title: Navigation on an image using Client side image Mapping in web page using html 5.

Create a webpage named “imagemap.html” with an inserted image having jpeg, png, or gif extension.
Create 3 different shapes ( like rectangle, circle and polygon ) which do not overlap. Note the co-ordinates
making use of Ms-Paint/GIMP/Irfan View/Pinta. Each shape should be mapped or navigate with a different URL
that should navigate to a local webpage.
Code for imagemap.html
<!doctype html>
<html>
<head>
<title> Client side image mapping></title>
</head>
<body>
<h1 align = "center">Client side image mapping program</h1>
<img src ="sky.jpg" usemap = "#mymap">
<map name = "mymap">
<area shape = "circle" coords="200,158,22" href ="page1.html " alt =" beach" >
<area shape = "rect" coords="89,105,184,135" href =" page2.html " alt = "Water">
<area shape = "poly" coords="170,12,124,39,141,80,198,80,215,39" href ="page3.html " alt = "sky">
</map>
</body>
</html>

Code for page1.html


<html>
<head>
<title>First Local Page</title>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>

Code for page2.html


<!DOCTYPE html>
<html>
<head>
<title>second local page</title>
</head>
<body>
<h1>Highest level of heading</h1>
</body>
</html>
Code for page3.html

<html>
<head>
<title>third local page</title>
</head>
<body>
<i>This is a text in italic</i>
</body>
</html>
Group-B
Advanced Javascript
Experiment No. 5

ote m Create a web page in HTML having a white background and two Button Objects. Write code using JavaScript
such that when the mouse is placed over the first button object without clicking, the color of the background of
the page should change after every _ seconds. There should at least be 7 different and visibly distinct
background colors excluding the default color. When the second button object is clicked, appropriate message
should be displayed in Browsers status bar.

Create another web page using JavaScript where the background color changes automatically after every _
seconds. This event must be triggered automotically after the page gets loaded in the browser. There should at
least be 7 different and visibly distinct background colors. When the page is unloaded, the appropriate alert
message should be displayed.

Code for color.html

<!DOCTYPE html>
<html>
<head>
<title>Background Colors</title>
</head>
<body>
<h1 align = "center"> 7 Different & visibly distinct background colors(Page 1/Color.html)</h1>
<form name = "form1">
<center>
<input type = "button" value = " Change Colors" onMouseOver= "f1()">
<input type = "button" value = " Message Display" onClick= "msg()">
</center>
</form>
</body>
<script type = "text/javascript">
function f1()
{
document.bgColor="red";
window.setTimeout("f2()",1500);
}
function f2()
{
document.bgColor="green";
window.setTimeout("f3()",1500);
}
function f3()
{
document.bgColor="pink";
window.setTimeout("f4()",1500);
}
function f4()
{
document.bgColor="orange";
window.setTimeout("f5()",1500);
}
function f5()
{
document.bgColor="skyblue";
window.setTimeout("f6()",1500);
}
function f6()
{
document.bgColor="violet";
window.setTimeout("f7()",1500);
}
function f7()
{
document.bgColor="aqua";
window.setTimeout("f1()",1500);
}
function msg()
{
window.status = " Display of 7 different colors";
}
</script>
</html>

Code for color1.html

<!DOCTYPE html>
<html>
<head>
<title>7 Different & visibly distinct background colors(Page 2/Color2.html)</title>
</head>
<body onLoad = "f1()" onbeforeunload = "return msg()">
<h1 align = "center"> Different background colors</h1>
</body>
<script type = "text/javascript">
function f1()
{
document.bgColor="red";
window.setTimeout("f2()",1500);
}
function f2()
{
document.bgColor="green";
window.setTimeout("f3()",1500);
}
function f3()
{
document.bgColor="pink";
window.setTimeout("f4()",1500);
}
function f4()
{
document.bgColor="orange";
window.setTimeout("f5()",1500);
}
function f5()
{
document.bgColor="skyblue";
window.setTimeout("f6()",1500);
}
function f6()
{
document.bgColor="violet";
window.setTimeout("f7()",1500);
}
function f7()
{
document.bgColor="aqua";
window.setTimeout("f1()",1500);
}
function msg()
{
return " Do you want to close this window?";
}
</script>
</html>
Group-B
Advanced Javascript
Experiment No. 6
Create event driven JavaScript program for the following. Make use of appropriate variables, JavaScript inbuilt
string functions and control structures.

 To accept string from user and count number of vowels in the given string.

Code for countvowel.html

<!Doctype html>
<html>
<! IT Practical, Chapter: Advanced javascript, SOP 2-->
<head>
<title> String Functions</title>
</head>
<body>
<form name = form1>
Enter name string: <input type = "text" name ="t1"> <br><br>
<input type = "button" value = "Count Vowels" onClick=calc()>
</form>
</body>
<script type = "text/javascript">
function calc()
{
var s, i , ch , cnt ;

/* usage of variables
s = Stores actual string submitted by user.
i = index of characters/letters/alphabets in string
ch = to get character stored at index i
cnt = maintain count of vowels in given string . initial value of cnt = 0;

e.g string given is s = "ABe"

for A ……. i = 0 , ch = A, cnt = 1


for B ------ i = 1, ch= B, cnt = 1
for e -------- i = 2 , ch = e , cnt =2 */

cnt = 0;
s = form1.t1.value;
for(i=0;i<=s.length;i++)
{
ch=s.charAt(i);
if(ch =="A"||ch=="a"||ch=="E"||ch=="e"||ch=="I"||ch=="i"||ch=="O"||ch=="o"||ch=="U"||ch=="u")
cnt++;
}

alert("No. of Vowels in Given String are :" +cnt);


}
</script>
</html>
Group-B
Server Side Scripting(PHP)
Experiment No. 7
Write a PHP program to check if a person is eligible to vote or not. The progrom should include the
following-

 Minimum age required for vote is 18.


 Use PHP functions.
 Use Decision making statement.
Code for age.html

<!Doctype html>

<html>

<body>

<h1 align = "center"> Person Eligible to vote or not</h1>

<form method ="post" action ="age.php">

Enter the age of user<input type="number" name = "age"><br><br>

<input type="submit" name = "submit" value="Check Eligibility">

</form>

</body>

</html>

Code for age.php

<?php

if(isset($_POST['submit']))

$age=$_POST['age'];

if($age>=18)

echo"<br><br>You are eligible to vote";

else

echo"<br><br>You are not eligible to vote";

?>
Group-B
Server Side Scripting(PHP)
Experiment No. 8
Write a PHP function to count the total number of vowels (a,e,i,o,u) from the string. Accept a
string by using HTML form.

Code for vowels.html


<!doctype html>
<html>
<head>
<title>PHP program to count total no of vowels in a string</title>
</head>
<h1 align ="center">String functions</h1>
<body>
< form method ="post" action="b.php">
Enter String: <input type ="text" name ="str"><br><br>
<input type = "submit" name ="submit" value ="Count Vowels">
</form>
</body>
</html>
Code for b.php

<?php
if(isset($_POST['submit']))
{
$str=strtolower($_POST['str']);
$vowels=array('a','e','i','o','u');
$len=strlen($str);
$num=0;
for($i=0;$i<$len;$i++)
{
if(in_array($str[$i],$vowels))
{
$num++;
}
}
echo "Number of vowels: $num";
}
?>

You might also like