Scribd
Upload
16 views31 pages

M A Lab Journal

The document provides a series of HTML and CSS programs demonstrating various multimedia and animation techniques, including a login form, bouncing cloud animation, keyframe animations, and CSS properties for font styles. It also includes examples of table formatting for a class timetable, longhand and shorthand CSS properties, and JavaScript for a light bulb on/off demo. Additionally, it features SVG graphics examples such as circles and ellipses.

Uploaded by

whitedevils9009
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
16 views31 pages

M A Lab Journal

The document provides a series of HTML and CSS programs demonstrating various multimedia and animation techniques, including a login form, bouncing cloud animation, keyframe animations, and CSS properties for font styles. It also includes examples of table formatting for a class timetable, longhand and shorthand CSS properties, and JavaScript for a light bulb on/off demo. Additionally, it features SVG graphics examples such as circles and ellipses.

Uploaded by

whitedevils9009
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/ 31

COMPUTER MULTIMEDIA AND ANIMATION

1. Program to Design LOG IN Form in HTML

<html>
<body>
<form>
<h1>Logn Form</h1>
<label for="uname"><b>Username</b> </label>
<input type="text" placeholder="Enter Username" name="uname" required>
<br>
<br>
<br>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<br>
<br>
<br>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
<br>
<br>
<button type="submit">Login</button>
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="#">password?</a></span>
</form>
</body>
</html>

OUTPUT

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 1


COMPUTER MULTIMEDIA AND ANIMATION

2. Program for creating animation of “Bouncing Cloud” using HTML


and CSS.

Pgm2.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="pgm2.css">
</head>
<body>
<div id="mainContent">
<img id="bigcloud" alt="Eror" class="cloud" height="170"
src="bigCloud.png"width="265">
<img id="smallcloud" alt="Eror" class="cloud" height="103"
src="smallCloud.png" width="158">
</div>
</body>
</html>

pgm2.css
#mainContent
{
background-color:aliceblue;
border-radius: 4px;
padding: 10px;
width: 600px;
height: 300px;
overflow: hidden;
}
.cloud
{
position: absolute;
}
#bigcloud
{
animation: bobble 2s infinite;
margin-left: 100px;
margin-top: 15px;
}
#smallcloud
{

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 2


COMPUTER MULTIMEDIA AND ANIMATION

margin-top: 35px;
margin-left: 200px;
}
@keyframes bobble
{
0% {
transform: translate3d(50px, 40px, 0px);
animation-timing-function: ease-in;
}
50% {
transform: translate3d(50px, 60px, 0px);
animation-timing-function: ease-out;
}
100% {
transform: translate3d(50px, 40px, 0px);
}
}

@keyframes bobbleways
{
0% {
transform: translate3d(50px, 40px, 30px);
animation-timing-function: ease-in;
}
50% {
transform: translate3d(50px, 80px, 40px);
animation-timing-function: ease-out;
}
100% {
transform: translate3d(50px, 40px, 30px);
}
}
Output:

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 3


COMPUTER MULTIMEDIA AND ANIMATION

3. Program to demonstrate a keyframe animation.

<html>
<head>
<style>
div
{
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
}
@keyframes mymove
{
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
</style>
</head>
<body>
<h1>The @keyframes Rule</h1>
<div></div>
</body>
</html>

Output:

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 4


COMPUTER MULTIMEDIA AND ANIMATION

4. Program to demonstrate a Font style, Font weight, & Font size


properties using CSS.
<html>
<head>
<style>
h1
{
font-style:italic;
}
h2
{
font-weight:bold;
}
h3
{
font-size: medium;
}
</style>
</head>
<body>
<h1>The font-size Property</h1>
<h2>his is some text.</h2>
<h3>s is some text.</h3>
</body>
</html>

OUTPUT:

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 5


COMPUTER MULTIMEDIA AND ANIMATION

5. Program to demonstrate multiple animations.


<html>
<head>
<style>
div
{
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div>
</div>
<p><b>Note:</b> When an animation is finished, it goes
back to its original style.</p>

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 6


COMPUTER MULTIMEDIA AND ANIMATION

</body>
</html>
OUTPUT:

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 7


COMPUTER MULTIMEDIA AND ANIMATION

6. Program to use table tag to format web page. Also, create the timetable of
your class using table tags.

<html>
<body>
<h1>TIME TABLE</h1>
<table border="5" cellspacing="0" align="center">
<tr>
<td align="center" height="50"
width="100"><br>
<b>Day/Period</b></br>
</td>
<td align="center" height="50"
width="100">
<b>I<br>9:30-10:20</b>
</td>
<td align="center" height="50"
width="100">
<b>II<br>10:20-11:10</b>
</td>
<td align="center" height="50"
width="100">
<b>III<br>11:10-12:00</b>
</td>
<td align="center" height="50"
width="100">
<b>12:00-12:40</b>
</td>
<td align="center" height="50"
width="100">
<b>IV<br>12:40-1:30</b>
</td>
<td align="center" height="50"
width="100">
<b>V<br>1:30-2:20</b>
</td>
<td align="center" height="50"
width="100">
<b>VI<br>2:20-3:10</b>
</td>
<td align="center" height="50"

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 8


COMPUTER MULTIMEDIA AND ANIMATION

width="100">
<b>VII<br>3:10-4:00</b>
</td>
</tr>
<tr>
<td align="center" height="50">
<b>Monday</b></td>
<td align="center" height="50">Animation</td>
<td align="center" height="50">Python</td>
<td align="center" height="50">OS</td>
<td rowspan="6" align="center" height="50">
<h2>L<br>U<br>N<br>C<br>H</h2>
</td>
<td colspan="3" align="center"
height="50">Python LAB</td>
<td align="center" height="50">OST</td>
</tr>
<tr>
<td align="center" height="50">
<b>Tuesday</b>
</td>
<td colspan="3" align="center"
height="50">Animation LAB
</td>
<td align="center" height="50">OST</td>
<td align="center" height="50">FEIA</td>
<td align="center" height="50">Python</td>
<td align="center" height="50">SPORTS</td>
</tr>
<tr>
<td align="center" height="50">
<b>Wednesday</b>
</td>
<td align="center" height="50">Animation</td>
<td align="center" height="50">OS</td>
<td align="center" height="50">Python</td>
<td align="center" height="50">OST</td>
<td colspan="3" align="center"
height="50">LIBRARY

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 9


COMPUTER MULTIMEDIA AND ANIMATION

</tr>
<tr>
</td></tr>
<tr>

<td align=”center” height=”50”>


<b>Thursday</b>
</td>
<td align="center" height="50">Animation</td>
<td align="center" height="50">Python</td>
<td align="center" height="50">FEIA</td>
<td colspan="3" align="center"
height="50">Python LAB
</td>
<td align="center" height="50">Cultural</td>
</tr>
<tr>
<td align="center" height="50">
<b>Friday</b>
</td>
<td colspan="3" align="center"
height="50">Animation LAB
</td>
<td align="center" height="50">OS</td>
<td align="center" height="50">OST</td>
<td align="center" height="50">Python</td>
<td align="center" height="50">Animation</td>
</tr>
<tr>
<td align="center" height="50">
<b>Saturday</b>
</td>
<td align="center" height="50">OS</td>
<td align="center" height="50">Animation</td>
<td align="center" height="50">OST</td>
<td colspan="3" align="center"
height="50">SEMINAR

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 10


COMPUTER MULTIMEDIA AND ANIMATION

</td>
<td align="center" height="50">SPORTS</td></tr>
</table>
</body>
</html>

OUTPUT:

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 11


COMPUTER MULTIMEDIA AND ANIMATION

7. Program to Demonstrate Longhand properties in CSS


<html>
<head>
<style>
p
{
font-style:italic;
font-variant:normal;
font-weight:100;
font-size: 20px;
font-family:Arial;
color:deeppink;
}
</style>
</head>
<body>
<p>Welecome To Multimedia and Animation</p>
</body>
</html>
OUTPUT:

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 12


COMPUTER MULTIMEDIA AND ANIMATION

8. Program to demonstrate shorthand properties in CSS


<html>
<head>
<style>
p
{
font:italic normal bold 60px Century;
}
</style>
</head>
<body>
<p>Welecome To Multimedia and Animation</p>
</body>
</html>

OUTPUT:

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 13


COMPUTER MULTIMEDIA AND ANIMATION

9. Program to demonstrate animation in reverse direction or


alternate cycles.
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: myfirst 5s 2;
animation-direction: alternate;
}
@keyframes myfirst {
0% {background: red; left: 0px; top: 0px;}
25% {background: yellow; left: 200px; top: 0px;}
50% {background: blue; left: 200px; top: 200px;}
75% {background: green; left: 0px; top: 200px;}
100% {background: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>
<h1>animation-direction: alternate</h1>
<p>Play the animation forwards first, then backwards:</p>
<div></div>
</body>
</html>
OUTPUT:

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 14


COMPUTER MULTIMEDIA AND ANIMATION

10. Write a JavaScript program to show the light ON/OFF Demo.


<html>
<head>
<title>Document</title>
</head>
<script type="text/javascript">
function bulb_on()
{
document.getElementById('bulb').src='bulb-on.png';
}
function bulb_off(){
document.getElementById('bulb').src='bulb-off.png';
}
</script>
<body>
<header>
<h1>bulb on off program</h1>
</header>
<section>
<img src="bulb-off.png" id="bulb" width="200">
<div class="btn_container"><button id="on" class="bulb_btn"
onclick="bulb_on()">on</button>
<button id="off" class="bulb_btn"
onclick="bulb_off()">off</button></div>
</section>
</body>
</html>
OUTPUT:

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 15


COMPUTER MULTIMEDIA AND ANIMATION

PART-B
1. Program to Demonstrate SVG (Scalable Vector Graphics) Circle.
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4"
fill="yellow" />
</svg>
</body>
</html>

Output:

2. Program to demonstrate SVG (Scalable Vector Graphics) Eclipse.


<html>
<body>
<svg height="240" width="700">
<ellipse cx="250" cy="90" rx="250" ry="80"

style="fill:lime;stroke:purple;stroke-width:2" />
</svg>
</body>
</html>

Output:

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 16


COMPUTER MULTIMEDIA AND ANIMATION

3. Program to demonstrate SVG (Scalable Vector Graphics) Star.

<html>
<head>
<title> Draw a Star Using SVG</title>
</head>
<body>
<svg width="2000" height="2000">
<polygon points="100,9 50,200 180,75 10,75 160,200"
style="fill:blue;stroke:red;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>

Output:

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 17


COMPUTER MULTIMEDIA AND ANIMATION

4. Program to Demonstrate “StrokeText()” method using Canvas.


<html>
<body>
<canvas id="myCanvas" width="350" height="150"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "20px Georgia";
ctx.strokeText("Hello Students", 10, 50);

ctx.font = "30px Verdana";

var gradient = ctx.createLinearGradient(0, 0, c.width, 0);


gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");

ctx.strokeStyle = gradient;
ctx.strokeText("Welcome to BCA Lab", 15, 100);
</script>
</body>
</html>

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 18


COMPUTER MULTIMEDIA AND ANIMATION

OUTPUT:

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 19


COMPUTER MULTIMEDIA AND ANIMATION

5. Program to demonstrate BezierCurveTo() method using HTML


canvas.
<html>
<head>
<style>
#test
{
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script type = "text/javascript">
function drawShape()
{
var canvas = document.getElementById('mycanvas');
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fillStyle="red"
ctx.fill();
}
else
{
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 20


COMPUTER MULTIMEDIA AND ANIMATION

</script>
</head>

<body id = "test" onload = "drawShape();">


<canvas id = "mycanvas"></canvas>
</body>
</html>

OUTPUT:

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 21


COMPUTER MULTIMEDIA AND ANIMATION

6. Program to demonstrate different line patterns with different


colors using Canvas.
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script type = "text/javascript">
function drawShape()
{
var canvas = document.getElementById('mycanvas');
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.lineTo(25,105);
ctx.fillStyle="red"
ctx.fill();

ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 22


COMPUTER MULTIMEDIA AND ANIMATION

ctx.lineTo(45,125);
ctx.closePath();
ctx.stroke();
} else
{
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}

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

Output:

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 23


COMPUTER MULTIMEDIA AND ANIMATION

7. Program to demonstrate Gradients using HTML Canvas.

<html>
<head>
<style>
#test {
width:100px;
height:100px;
margin:0px auto;
}
</style>
<script type = "text/javascript">
function drawShape()
{
var canvas = document.getElementById('mycanvas');
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
var lingrad = ctx.createLinearGradient(0,0,0,150);
lingrad.addColorStop(0, '#00ABEB');
lingrad.addColorStop(0.5, '#fff');
lingrad.addColorStop(0.5, '#10BA09');
lingrad.addColorStop(1, '#fff');
var lingrad2 = ctx.createLinearGradient(0,50,0,95);
lingrad2.addColorStop(0.5, '#000');
lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
ctx.fillStyle = lingrad;
ctx.strokeStyle = lingrad2;

ctx.fillRect(10,10,130,130);

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 24


COMPUTER MULTIMEDIA AND ANIMATION

ctx.strokeRect(50,50,50,50);
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>

<body id = "test" onload = "drawShape();">


<canvas id = "mycanvas"></canvas>
</body>
</html>

Output:

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 25


COMPUTER MULTIMEDIA AND ANIMATION

8. Program to demonstrate Text Shadow using canvas.

<html>
<head>
<script type="application/javascript">
function init()
{
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
ctx.textAlign="start";
ctx.fillStyle = "red";
ctx.font = "25px verdana";
ctx.shadowColor = "black";
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.fillText("Believe Shadow", 100,20);
ctx.shadowBlur = 3;
ctx.fillText("Believe Bevel", 100,60);
}
}
</script>
</head>
<body onload="init();">
<canvas id="canvas" width="900" height="500"></canvas><br>
</body>

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 26


COMPUTER MULTIMEDIA AND ANIMATION

</html>
Output:

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 27


COMPUTER MULTIMEDIA AND ANIMATION

9. Program to demonstrate Source-Over, Source-In & Source-Out


properties for composition using HTML Canvas.
<html>
<head>
<script type = "text/javascript"> var compositeTypes = [
'source-over','source-in','source-out','source-atop',
'destination-over','destination-in','destination-out', 'destination-
atop','lighter','darker','copy','xor'
];
function drawShape() {
for (i=0;i<compositeTypes.length;i++) {
var label = document.createTextNode(compositeTypes[i]);
document.getElementById('lab'+i).appendChild(label);
var ctx = document.getElementById('tut'+i).getContext('2d');

ctx.fillStyle = "#FF3366"; ctx.fillRect(15,15,70,70);

ctx.globalCompositeOperation = compositeTypes[i];

ctx.fillStyle = "#0066FF"; ctx.beginPath();


ctx.arc(75,75,35,0,Math.PI*2,true); ctx.fill();
}
}
</script>
</head>
<body onload = "drawShape();">
<table border = "1" align = "center">
<tr>
<td><canvas id = "tut0" width = "125" height =
"125"></canvas><br/>
<label id = "lab0"></label>
</td>

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 28


COMPUTER MULTIMEDIA AND ANIMATION

<td><canvas id = "tut1" width = "125" height =


"125"></canvas><br/>
<label id = "lab1"></label>
</td>

<td><canvas id = "tut2" width = "125" height =


"125"></canvas><br/>
<label id = "lab2"></label>
</td>
</tr>

<tr>
<td><canvas id = "tut3" width = "125" height =
"125"></canvas><br/>
<label id = "lab3"></label>
</td>

<td><canvas id = "tut4" width = "125" height =


"125"></canvas><br/>
<label id = "lab4"></label>
</td>

<td><canvas id = "tut5" width = "125" height =


"125"></canvas><br/>
<label id = "lab5"></label>
</td>
</tr>

<tr>
<td><canvas id = "tut6" width = "125" height =
"125"></canvas><br/>
<label id = "lab6"></label>
</td>

<td><canvas id = "tut7" width = "125" height =

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 29


COMPUTER MULTIMEDIA AND ANIMATION

"125"></canvas><br/>
<label id = "lab7"></label>
</td>

<td><canvas id = "tut8" width = "125" height =


"125"></canvas><br/>
<label id = "lab8"></label>
</td>
</tr>
<tr>
<td><canvas id = "tut9" width = "125" height =
"125"></canvas><br/>
<label id = "lab9"></label>
</td>

<td><canvas id = "tut10" width = "125" height =


"125"></canvas><br/>
<label id = "lab10"></label>
</td>

<td><canvas id = "tut11" width = "125" height =


"125"></canvas><br/>
<label id = "lab11"></label>
</td>
</tr>
</table>
</body>
</html>

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 30


COMPUTER MULTIMEDIA AND ANIMATION

OUTPUT:

KLE SOCIETY’S COLLEGE OF BCA GOKAK[4419]Page 31

You might also like