Scribd
Upload
25 views27 pages

Mmlab

The document is a lab manual for a Computer Multimedia and Animation course, detailing various HTML, CSS, and JavaScript exercises. It includes tasks such as creating web pages with multimedia elements, interactive features, and form validation. Each section provides code examples and expected outputs for practical learning.

Uploaded by

pranav.hb.18
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
25 views27 pages

Mmlab

The document is a lab manual for a Computer Multimedia and Animation course, detailing various HTML, CSS, and JavaScript exercises. It includes tasks such as creating web pages with multimedia elements, interactive features, and form validation. Each section provides code examples and expected outputs for practical learning.

Uploaded by

pranav.hb.18
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/ 27

COMPUTER MULTIMEDIA AND ANIMATION

LAB-MANUAL

1.Develop anddemonstrate a HTML document that illustrates.:


Image as a background
Hyperlink Using an Image
Hyperlink with another web page (A,Base,Href)
Link toEmailaddress,FTP Websites
<html>
<head><title> Background Images, Hyper link</title></head>
<body background = "C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" width = "100%"
height = "100">
<a href="C:\Users\Public\Pictures\Sample
Pictures\Tulips.jpg" width=”50%” height=”50%”>TULIPS</a>
<a href="https://www.w3schools.com/” width=”50%” height=”50%”>Visit
W3Schools.com</a>
<a href = "email to: [email protected]" >Send email </a>
</body>
</html>
OUTPUT:

DEPT OF BCA SRNMNC Page 1


COMPUTER MULTIMEDIA AND ANIMATION
LAB-MANUAL

2.MULTIMEDIA:-a)Develop a webpage to play audio file using a tag.


b)Develop a web page to play video file using<embed> tag
<html>
<head>
<title> video </title>
<Body>
<audio src="C:\Users\Public\Music\Sample Music\Sleep Away.mp3" type=”audio/mp3”
controls>
</audio>
<embed src="C:\Users\Public\Sample videos\wildlife.wmv"
type=”video/wmv”controlsautoplay width=”500” height=”500”></embed>
</Body>
</html>
OUTPUT:

DEPT OF BCA SRNMNC Page 2


COMPUTER MULTIMEDIA AND ANIMATION
LAB-MANUAL

3.Write a JAVASCRIPT Program to determine whether the given year is a leapyear in the
Gregorian Calendar
<html>
<head>
<title> Leap year </title><script> function leapyear()
{
var x;
x = document.getElementById("demo").value; if( (x % 4==0) && ( x % 100!=0) || ( x %
400==0) )
{
alert(x+" is a leap year");
}
else
{
alert(x+" is not a leap year");
}
}
</script>
</head>
<body>
<h2>Javascript Program to find leap year</h2>
<input type="text" id="demo"></input>
<button onclick="leapyear()">Check</button>
</body>
</html>

DEPT OF BCA SRNMNC Page 3


COMPUTER MULTIMEDIA AND ANIMATION
LAB-MANUAL

OUTPUT:

4.Write a JAVASCRIPT Program to convert temperatures to and from Celsius, Fahrenheit


<html>
<head>
<title>JavaScript program to convert temperatures to and from celsius, fahrenheit</title>
<script> function TC(N)
{
N = parseFloat(N);
document.getElementById("outputCelsius").innerHTML = (N-
32)/l .8;
}
function TC1 (Nl)
{
N1 = parseFloat(N1); document.getElementById("
OutputFahrenheit").innerHTML = (N1*1.8)+32;
}

DEPT OF BCA SRNMNC Page 4


COMPUTER MULTIMEDIA AND ANIMATION
LAB-MANUAL

</script>
</head>
<body>
<p><label> Fahrenheit </label>
<input Id=”Faherenheit”type="number" placeholder="Fahrenheit"
oninput="TC(this.value)"onchange="TC(this.value)"></p>
<p> Celsius: <span id="outputCelsius"></span></p>
<p><label> Celsius </label>
<input id="Celsius" type="number" placeholder="Celsius"
Oninput=TC1(this.value)"onchange="TC1(this.value)"></p><p> Fahrenheit: <span
id="outputFahrenheit"></span></p></body>
</html>
OUTPUT:

5.Create an Animation using HTML

DEPT OF BCA SRNMNC Page 5


COMPUTER MULTIMEDIA AND ANIMATION
LAB-MANUAL

<!DOCTYPE HTML>
<html>
<head>
<title>Animation</title>
<link href=”ss.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div id=”change”>
</div>
</body>
</html>
#change
{
Width:100px;
Height:100px;
Border:2px solid black; -webkit-animation:changeColor 8s infinite;
}
@-webkit-keyframes changeColor
{
0%{background-color:blue;}
25%{background-color:yellow;}
50%{background-color:green;}
75%{background-color:red;}
100%{background-color:black;}
}

OUTPUT:

DEPT OF BCA SRNMNC Page 6


COMPUTER MULTIMEDIA AND ANIMATION
LAB-MANUAL

6.Create an interactive webpage using HTML5 layout tags.


<html>
<head>
<title >HTML5 layout tags</title>
<body>
<header>
<h2>Title</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Learn HTML</a></li>
<li><a href="#">About Us</a></li>
</ul>
</nav>
<article>
<h1>Home</h1>
<p>This is a home page.</p>
</article>
</section>
<footer>

DEPT OF BCA SRNMNC Page 7


COMPUTER MULTIMEDIA AND ANIMATION
LAB-MANUAL

<p>Footer</p>
</footer>
</body>
<style>
*{
box-sizing: border-box;
}
header { background-color: lightblue; text-align: center; padding: 2px; font-size:
25px; color:white;
} nav { float: left; width: 30%; height: 300px; background: #fff; padding: 20px;
}
navul { list-style -type: none; padding: 0; }
article { float: left; padding: 20px; width: 70%; background-color:
#f1f1f1; height: 300px;
}
footer { background-color: lightblue; padding: 10px; text-align: center; color:
white;
}
section::after {
content: ""; display: table; clear: both;
}
</style>
</body>
Page
</html>
OUTPUT:

DEPT OF BCA SRNMNC Page 8


COMPUTER MULTIMEDIA AND ANIMATION
LAB-MANUAL

7. Write a JavaScript that calculates the squares & cubes of the numbers from 0 to 10
and outputs HTML text that displays the resulting values in an HTML table format.
<html>
<head><title>Squares & Cubes</title></head>
<body>
<center>
<table border="1">
<tr><th>number</th><th>square</th><th>cube</th></tr><script> for(vari=0;i<=10;i++)
{ document.write("<tr><td>"+i+"</td><td>"+i*i+"</td><td>"+ i*i*i+"</td></tr>"); }
</script></table></center></body></html>
OUTPUT:

DEPT OF BCA SRNMNC Page 9


COMPUTER MULTIMEDIA AND ANIMATION
LAB-MANUAL

8.Demonstrate Canvas in HTML5


<!DOCTYPE HTML>
<html>
<head>
<style>
#test {width: 100px; height:100px; margin: 0px auto; }
</style><script>
function drawShape() {
var canvas = document.getElementById('mycanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
for (vari = 0;i<7;i++) {
for (var j = 0;j<7;j++) {
ctx.fillStyle = 'rgb(' + Math.floor(255-20.5*i)+ ','+ Math.floor(255 - 42.5*j) + ',255)';
ctx.fillRect( j*25, i* 25, 55, 55 );
}
}
} else { alert('sorry');

DEPT OF BCA SRNMNC Page 10


COMPUTER MULTIMEDIA AND ANIMATION
LAB-MANUAL

}
}
</script>
</head>
<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>
</html>
OUTPUT:

DEPT OF BCA SRNMNC Page 11


COMPUTER MULTIMEDIA AND ANIMATION
LAB-MANUAL

PART-B
1. Develop & demonstrate a HTML document that illustrates
The use of formatting text
Heading tags (H1 to H6)
Font details (font size, style, type and colour)
Setting colour (Bgcolor)
<html>
<head>
<Title>Formatting text, Heading tags,Fontdetails,setting color</title>
<body bgcolor=”yellow”>
<b> SRNMN COLLEGE </b>
<i> SRNMN COLLEGE </i>
<U> SRNMN COLLEGE </U>
<small>THIS IS A SMALLER TEXT </small>
<p>My address is <ins>Shimoga</ins></p>
<p>My address is <sub>Shimoga</sub></p>
<p>My address is <sup>Shimoga</sup></p>
<p>My address is <del>Shimoga</del></p>

<font type=”Lucida Fax” font style=”regular” size=”15” color=”red”>


<h1> SRNMN. </h1>
<h2> SRNMN. </h2>
<h3> SRNMN. </h3>
<h4> SRNMN. </h4>
<h5> SRNMN. </h5>
<h6> SRNMN. </h6>

DEPT OF BCA SRNMNC Page 12


COMPUTER MULTIMEDIA AND ANIMATION
LAB-MANUAL

</font>
</head>
</html>
OUTPUT:

DEPT OF BCA SRNMNC Page 13


COMPUTER MULTIMEDIA AND ANIMATION
LAB-MANUAL

2.Develop and Demonstrate a HTML document that illustrates


Unordered List(UL)
Ordered List (OL) and Definition List (DL)
Table alignment ( Cell spacing,Cellpadding,Height, Width,
Border,Rowspan,Colspan)
Setting Different Attributes (Color,Image)
<html>
<head>
<Title>List Types , Table attributes </title>
<body background=””>
<Ol type=”1”>
<li>keyboard</li>
<li>Monitor</li>
<li>Mouse</li>
</Ol>
<UL type=”square”>
<li>keyboard</li>
<li>Monitor</li>
<li>Mouse</li>
</Ul>
<Dl>
<dt>keyboard</dt>
<dd> Keyboard is an input device </dd>
<dt> Monitor</dt>
<dd>Displays output on the screen</dd>
</dl><br><br>
<table style=”width:50%” border=”1”>

DEPT OF BCA SRNMNC Page 14


COMPUTER MULTIMEDIA AND ANIMATION
LAB-MANUAL

<caption>Personal Details</caption>
<br><br>
<tr><th colspan=”2”>Name</th>
<th rowspan=”2”>Contact Number</th>
</tr>
<tr><th>First Name</th>
<th>Second Name</th>
</tr>
<tr><td>
Sahana</td><td>Kumar</td><td>1234567890</td></tr>
<tr><td>
Sneha</td><td>Kumar</td><td>9234567890</td></tr></table></body>
</html>
OUTPUT:

DEPT OF BCA SRNMNC Page 15


COMPUTER MULTIMEDIA AND ANIMATION
LAB-MANUAL

3.Create StyleSheet to set formatting for text tags and embed that StyleSheet on
WebPages Created For Your Site.
<html>
<head>
<title>Working with External Style Sheet</title>
<link rel=”stylesheet” href=”mystyle.css”></head>
<body>
<P class=”question”>How To Create <span class=”big”> Style Sheet?</span>
To alter an HTML Element? </P>
<P class=”answer”>The Style Assignment Process Accomplished with the Style Tags.</P>
</body>
</html>
File with Extension.css:Code for mystyle.css
P {font-size:12pt ; font-weight:bold; text-align:justify}
.question{color:red ; font-style:italic}
.answer{ color:#23238e }
.big{ font-size:14pt ; text-decoration:underline ;text-transformation:uppercase ; color:blue}

OUTPUT:

DEPT OF BCA SRNMNC Page 16


COMPUTER MULTIMEDIA AND ANIMATION
LAB-MANUAL

4.Design Time Table and Display it in tabular format using HTML


<html>
<title>Time table</title>
<body>
<table border="1"><caption text-align="center">TIME TABLE</caption>
<tr><th>Timings</th>
<th>9-00 to 10-00</th>
<th>10-00 to 11-00</th>
<th>11-00 to 12-00</th>
<th>12-00 to 1-00</th>
<th>1-00 to 1-30</th>
<th>1-30 to 4-
30</th></tr><tr><td>Monday</td><td>kan</td><td>cma</td><td>eng</td><td>python</
t d><td rowspan="6">LUNCH BREAK</td><td>-----PYTHON lab B1 and MM lab B2-----
</td></tr>
<tr><td>Tuesday</td><td>python</td><td>kan</td><td>eng</td><td>os</td ><td>-----
PYTHON lab B3 and MM lab B4-----</td></tr>
<tr><td>Wednesday</td><td>kan</td><td>os</td><td>O.E</td><td>cma</td ><td>-----
PYTHON lab B2 and MM lab B1-----</td></tr>
<tr><td>Thursday</td><td>eng</td><td>cma</td><td>os</td><td>python</t d><td>-----
PYTHON lab B4 and MM lab B3-----</td></tr>
<tr><td>Friday</td><td>kan</td><td>python</td><td>os</td><td>O.E</td><t d>-------
SPORTS-------</td></tr>
<tr><td>Saturday</td><td>python</td><td>cma</td><td>I.C</td><td>I.C</td ></tr>
</table></body>
</html>

DEPT OF BCA SRNMNC Page 17


COMPUTER MULTIMEDIA AND ANIMATION
LAB-MANUAL

OUTPUT:

05.Design a signup form to validate username,password and phonenumber using Java


script
<html>
<head>
<title>form creation</title>
</head>
<form name=”registration” onsubmit=”return formvalidation()”method=”post”>
<table>
<tr>

DEPT OF BCA SRNMNC Page 18


COMPUTER MULTIMEDIA AND ANIMATION
LAB-MANUAL

<td><label>User name:</label></td>
<td><input type="text" name="username" id="username" placeholder="your name"></td>
</tr>
<tr>
<td><label>password:</label></td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td><label>phone number:</label></td>
<td><input type="phonenumber" name="phonenumber" id="phonenumber"></td>
</tr>
<tr>
<td><label>about:</label></td>
<td><textarea name="about" id="about" placeholder="write about
yourself"></textarea></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="submit" name="submit"></td></tr>
<tr>
<td colspan="2">
<input type="reset" value="reset" name="reset"></td>
</tr>
</table>
</form>
</div><body><script>
document.registration.onsubmit=function form validation()

DEPT OF BCA SRNMNC Page 19


COMPUTER MULTIMEDIA AND ANIMATION
LAB-MANUAL

{
var name=document.getElementById("username"); var
password=document.getElementById("password");
varphonenumber=document.getElementById("phonenumber");
if(name.value.length<2||name.value.length>20)
{
alert("Characters must be less than 20");
this.name.focus(); return false;
}
if(!password.value.match(/^{5,15}$/))
{
alert("invalid password!!!.enter a vaild password");
this.password.focus();
return false;
}
if(!phonenumber.value.match(/^[1-9][0-9]{9}$/))
{
alert("invalid phonenumber!!!.enter a vaildphonenumber");
this.phonenumber.focus(); return false;
}
return true;
}
</script>
</body>
</html>
OUTPUT:

DEPT OF BCA SRNMNC Page 20


COMPUTER MULTIMEDIA AND ANIMATION
LAB-MANUAL

6.Write a JavaScript to design a simple calculator to perform the following operations:


sum, product, difference & quotient.
<html>
<head>
<title> JavaScript Calculator </title><style>
h1 { text-align: center; padding: 23px; background-color: skyblue; color: white; }
#clear{ width: 270px; border: 3px solid gray; border-radius: 3px; padding: 20px;
background-color: red;
}
.formstyle
{
width: 300px; height: 530px; margin: auto; border: 3px solid skyblue; border-radius:
5px; padding: 20px;
}
input
{
width: 20px; background-color: green; color: white; border: 3px solid gray; border-
radius: 5px; padding: 26px;
margin: 5px; fontsize: 15px;
}
#calc
{

DEPT OF BCA SRNMNC Page 21


COMPUTER MULTIMEDIA AND ANIMATION
LAB-MANUAL

width: 250px; border: 5px solid black; border-radius: 3px; padding: 20px;
margin: auto;
}
</style>
</head>
<body>
<div class= "formstyle"><form name = "form1”>
<input id = "calc" type ="text" name = "answer"><br><br>
<input type = "button" value = "1" onclick = "form1.answer.value += '1' ">
<input type = "button" value = "2" onclick = "form1.answer.value += '2' ">
<input type = "button" value = "3" onclick = "form1.answer.value += '3' ">
<input type = "button" value = "+" onclick = "form1.answer.value += '+' ">
<br><br>
<input type = "button" value = "4" onclick = "form1.answer.value += '4' ">
<input type = "button" value = "5" onclick = "form1.answer.value += '5' ">
<input type = "button" value = "6" onclick = "form1.answer.value += '6' ">
<input type = "button" value = "-" onclick = "form1.answer.value += '-' ">
<br><br>
<input type = "button" value = "7" onclick = "form1.answer.value += '7' ">
<input type = "button" value = "8" onclick = "form1.answer.value += '8' ">
<input type = "button" value = "9" onclick = "form1.answer.value += '9' ">
<input type = "button" value = "*" onclick = "form1.answer.value += '*' ">
<br><br>
<input type = "button" value = "/" onclick = "form1.answer.value += '/' ">
<input type = "button" value = "0" onclick = "form1.answer.value += '0' ">
<input type = "button" value = "." onclick = "form1.answer.value += '.' ">

DEPT OF BCA SRNMNC Page 22


COMPUTER MULTIMEDIA AND ANIMATION
LAB-MANUAL

<input type = "button" value = "=" onclick = "form1.answer.value =


eval(form1.answer.value) ">
<br>
<input type = "button" value = "Clear All" onclick ="form1.answer.value = ' ' " id= "clear" >
<br>
</form>
</div>
</body>
</html>

OUTPUT:

DEPT OF BCA SRNMNC Page 23


COMPUTER MULTIMEDIA AND ANIMATION
LAB-MANUAL

07. Develop and demonstrate a HTML5 file that includes Javascript script that uses
functions for the following problems
a)Parameter:A string
b)Output:The position in the string of the left-most vowel
c)Parameter:A number
d)Output:The number with its digits in the reverse order
<!doctype html>
<html>
<body>
<script type="text/javascript">varstr=prompt("enter the input"); if(!(isNaN(str)))
{
varnum,rev=0,remainder; num=parseint(str); while(num!=0)
{
remainder=num%10;
num=parseint(num/10); rev=rev*10+reminder;
}
alert("Reverse of "+str+" is"+rev);
}
else
{
str=str.toUppercase(); for(var i=0;i<str.length;i++)
{
Var chr=str.charAt(i);
if(char=='A'|| char=='E'|| char=='I'|| char=='O'|| char=='U') break;

DEPT OF BCA SRNMNC Page 24


COMPUTER MULTIMEDIA AND ANIMATION
LAB-MANUAL

}
if(i<str.length)
alert("The position of the left most vowel is"+(i+1)); else alert("No vowel is found in the
enterd string");
}
</script>
</body>
</html>
OUTPUT:

08.Write an HTML page that contains a solution box with a list of 5 countries. When the
user selects a country,its capital should be printed next in the list. Add CSS properties.
<html>
<head>
<title>Country with capital</title>
<body>

DEPT OF BCA SRNMNC Page 25


COMPUTER MULTIMEDIA AND ANIMATION
LAB-MANUAL

Select A country:
<select id="country" onchange="getCapital();">
<option value="0">INDIA</option>
<option value="1">RUSSIA</option>
<option value="2">ITALY</option>
<option value="3">FRANCE</option>
<option value="4">JAPAN</option></select>CAPITAL:
<input type="text" id="textbox">
<script> function getCapital()
{
var cap=["DELHI","MOSCOW","ROME","PARIS",TOKYO"];
var i=document.getElementById("country").selectedoptions[0].value;
document.getElementById("textbox").value=cap[i];
}
</script>
</body>
</html>
OUTPUT:

DEPT OF BCA SRNMNC Page 26


COMPUTER MULTIMEDIA AND ANIMATION
LAB-MANUAL

DEPT OF BCA SRNMNC Page 27

You might also like