Scribd
Upload
165 views11 pages

Multimedia & Animation Part-A Lab Manual

Uploaded by

itsworkbox
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
165 views11 pages

Multimedia & Animation Part-A Lab Manual

Uploaded by

itsworkbox
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/ 11

GFGC BOY’S COLLEGE, KOLAR M&A - Lab

COMPUTER MULTIMEDIA & ANIMATION

LAB MANUAL : PART-A

4TH SEM – BCA

Part -A:

1) Write a HTML/5 program to demonstrate the use of Font family, font variant, font style, and font size.

2) Write a HTML/5 program to display random contents using list properties:


a) Ordered list b) Unordered list
3) Write a HTML/5 program to create gradient using CSS.

4) Write a HTML/5 code to demonstrate following CSS animation properties:


a) Delay b) Direction c) Duration
5) Write a HTML/5 program to demonstrate key frames

6) Write a HTML/5 code to demonstrate CSS transition and transformation.

7) Write a HTML/5 program to turn on/off a light bulb using JavaScript. Make use of .gif image and
buttons.

4TH SEM - BCA Page 1


GFGC BOY’S COLLEGE, KOLAR M&A - Lab

1) Write a HTML/5 program to demonstrate the use of Font family, font variant, font style, and font size.

<!DOCTYPE html>

<html>

<head>

<style>

// Font Family

p.p1 {

font-family: "Times New Roman", Times, serif;

p.p2 {

font-family: Arial, Helvetica, sans-serif;

p.p3 {

font-family: "Lucida Console", "Courier New", monospace;

// Font Style

p.normal {

font-style: normal;

p.italic {

font-style: italic;

// Font Variant

p.normal {

font-variant: normal;

p.small {

font-variant: small-caps;

4TH SEM - BCA Page 2


GFGC BOY’S COLLEGE, KOLAR M&A - Lab

// Font Size

p.p1 {

font-size: 15px;

p.p2 {

font-size: large;

p.p3 {

font-size: 150%;

</style>

</head>

<body>

<h1>The font-family</h1>

<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>

<p class="p2">This is a paragraph, shown in the Arial font.</p>

<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>

<h1>The font-style</h1>

<p class="normal">This is a paragraph in normal style.</p>

<p class="italic">This is a paragraph in italic style.</p>

<h1>The font-variant</h1>

<p class="normal">Governament First Grade College, Kolar.</p>

<p class="small">Governament First Grade College, Kolar.</p>

<h1>The font-size</h1>

<p class="p1">Governament First Grade College, Kolar.</p>

<p class="p2">Governament First Grade College, Kolar.</p>

<p class="p3">Governament First Grade College, Kolar.</p>

</body>

</html>

4TH SEM - BCA Page 3


GFGC BOY’S COLLEGE, KOLAR M&A - Lab

2) Write a HTML/5 program to display random contents using list properties:


a) Ordered list b) Unordered list

a) Ordered list
<!DOCTYPE html>

<html>

<head>

<title>Ordered List</title>

</head>

<body>

<h1>List of CS Subjects</h1>

<ol type = "A">

<li>HTML</li>

<li>Java</li>

<li>Data Structure</li>

<li>C Programming</li>

<li>Python</li>

</ol>

</body>

</html>

b) Unordered list
<!DOCTYPE html>

<html>

<head>

<title>Unordered List</title>

</head>

<body>

<h1>List of CS Subjects</h1>

<ul type="circle">

<li>HTML</li>

4TH SEM - BCA Page 4


GFGC BOY’S COLLEGE, KOLAR M&A - Lab

<li>Java</li>

<li>Data Structure</li>

<li>C Programming</li>

<li>Python</li>

</ul>

</body>

</html>

3) Write a HTML/5 program to create gradient using CSS.

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 200px;

background-color: red;

background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

</style>

</head>

<body>

<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">

Rainbow Background

</div>

</body>

</html>

4TH SEM - BCA Page 5


GFGC BOY’S COLLEGE, KOLAR M&A - Lab

4) Write a HTML/5 code to demonstrate following CSS animation properties:


a) Delay b) Direction c) Duration

a) Delay

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}

@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>
<p>The animation-delay property specifies a delay for the start of an animation. The following example has a 2
seconds delay before starting the animation:</p>
<div> </div>
</body>
</html>

4TH SEM - BCA Page 6


GFGC BOY’S COLLEGE, KOLAR M&A - Lab

b) Direction
<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

position: relative;

animation-name: example;

animation-duration: 4s;

animation-direction: reverse;

@keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

</style>

</head>

<body>

<h1>CSS Animation</h1>

<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in
alternate cycles. The following example will run the animation in reverse direction (backwards):</p>

<div></div>

</body>

</html>

4TH SEM - BCA Page 7


GFGC BOY’S COLLEGE, KOLAR M&A - Lab

c) Duration
<!DOCTYPE html>

<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>

</body>

</html>

4TH SEM - BCA Page 8


GFGC BOY’S COLLEGE, KOLAR M&A - Lab

5) Write a HTML/5 program to demonstrate key frames

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: red;

position: relative;

animation: mymove 5s infinite;

@keyframes mymove {

0% {top: 0px; background: red; width: 100px;}

100% {top: 200px; background: yellow; width: 300px;}

</style>

</head>

<body>

<h1>Demonstration of keyframes</h1>

<div></div>

</body>

</html>

4TH SEM - BCA Page 9


GFGC BOY’S COLLEGE, KOLAR M&A - Lab

6) Write a HTML/5 code to demonstrate CSS transition and transformation.

<!DOCTYPE html>

<html>

<center>

<head>

<style>

div {

width: 100px;

height: 100px;

background: green;

transition: width 2s, height 2s, transform 2s;

div:hover {

width: 300px;

height: 300px;

transform: rotate(180deg);

</style>

</head>

<body>

<h1>Transition and Transform</h1>

<p>click the below animation to see the Transition and Transformation effect:</p>

<div></div>

</body>

</center>

</html>

4TH SEM - BCA Page 10


GFGC BOY’S COLLEGE, KOLAR M&A - Lab

7) Write a HTML/5 program to turn on/off a light bulb using JavaScript. Make use of .gif image and
buttons.

<!DOCTYPE html>

<html>

<body>

<center>

<p>Click the below Button to turn on/off the light.</p>

<script>

function light(value)

var pic;

if (value == 0)

pic= "bulboff.gif";

else

pic= "bulbon.gif";

document.getElementById('bulb').src=pic;

</script>

<img id="bulb" src="bulboff.gif" width="150px" height="200px"> <br/> <br/>

<button onclick="light(1)">Turn ON</button>

<button onclick="light(0)">Turn OFF</button>

</center>

</body>

</html>

4TH SEM - BCA Page 11

You might also like