Scribd
Upload
218 views9 pages

CMA Lab

The document provides HTML/5 code examples to demonstrate various features of CSS, JavaScript, SVG and Canvas including font styles, lists, gradients, animations, keyframes, transitions, transformations, drawing shapes, and turning a light bulb on/off.

Uploaded by

Vinod S D
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
218 views9 pages

CMA Lab

The document provides HTML/5 code examples to demonstrate various features of CSS, JavaScript, SVG and Canvas including font styles, lists, gradients, animations, keyframes, transitions, transformations, drawing shapes, and turning a light bulb on/off.

Uploaded by

Vinod S D
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/ 9

COMPUTER MULTIMEDIA & ANIMATION

IV SEM BCA

KRUPANIDHI DEGREE COLLEGE


~Mr. Sayed Faizal
KRUPANIDHI DEGREE COLLEGE CMA-LAB

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.

Part B:
1. Write a HTML/5 program to draw rectangle, line, polygon, polyline using SVG.
2. Write a HTML/5 program to draw linear and radial gradient ellipse using SVG.
3. Write a HTML/5 program to draw a star using SVG.
4. Write a HTML/5 program to draw line, circle, rectangle, gradient, text using canvas.
5. Write a HTML/5 program to demonstrate translation, rotation, scaling, and transform using
canvas.
6. Write a HTML/5 program to demonstrate Bezier Curves and Quadratic Curves.
7. Write a HTML/5 program to create canvas and add a red square onto the game area with
up/down/left/right controller buttons.
8. Write a HTML/5 canvas program to add random size obstacles with red square controller button.

BCA DEPARTMENT 2nd SEM Page | 1


KRUPANIDHI DEGREE COLLEGE CMA-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>
<title>Font Styles</title>
<style>
.text {
font-family: Arial, sans-serif;
font-variant: small-caps;
font-style: italic;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Font Styles Demo</h1>
<p class="text">This is a sample paragraph demonstrating different font styles and sizes.</p>
<p>This is a paragraph with the default font.</p>
<p style="font-family: 'Courier New', monospace;">This paragraph uses a different font family.</p>
<p style="font-variant: normal;">This paragraph has normal font variant.</p>
<p style="font-style: normal;">This paragraph has normal font style.</p>
<p style="font-size: 24px;">This paragraph has a larger font size.</p>
</body>
</html>

BCA DEPARTMENT 2nd SEM Page | 2


KRUPANIDHI DEGREE COLLEGE CMA-LAB

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


a. Ordered list b) Unordered list
<!DOCTYPE html>
<html>
<head>
<title>Random Content Lists</title>
</head>
<body>
<h1>Ordered List</h1>
<ol>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Grapes</li>
<li>Pineapple</li>
</ol>

<h1>Unordered List</h1>
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
<li>Yellow</li>
<li>Orange</li>
</ul>
</body>
</html>

BCA DEPARTMENT 2nd SEM Page | 3


KRUPANIDHI DEGREE COLLEGE CMA-LAB

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


<!DOCTYPE html>
<html>
<head>
<title>Gradient Example</title>
<style>
body {
background: linear-gradient(to right, #ff6699, #ffcc99);
}
</style>
</head>
<body>
<h1>Gradient Example</h1>
<p>This is an example of a gradient background.</p>
</body>
</html>

BCA DEPARTMENT 2nd SEM Page | 4


KRUPANIDHI DEGREE COLLEGE CMA-LAB

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


a. Delay b) Direction c) Duration
<!DOCTYPE html>
<html>
<head>
<title>CSS Animation Properties</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
animation-name: move;
animation-duration: 3s;
animation-delay: 1s;
animation-direction: alternate;
animation-iteration-count: infinite;
}

@keyframes move {
0% {
left: 0;
}
100% {
left: 200px;
}
}
</style>
</head>
<body>
<h1>CSS Animation Properties Demo</h1>
<div class="box"></div>
</body>
</html>

BCA DEPARTMENT 2nd SEM Page | 5


KRUPANIDHI DEGREE COLLEGE CMA-LAB

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

<!DOCTYPE html>
<html>
<head>
<title>Keyframes Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
animation-name: move;
animation-duration: 3s;
animation-iteration-count: infinite;
}

@keyframes move {
0% {
left: 0;
background-color: blue;
}
50% {
left: 200px;
background-color: red;
transform: rotate(180deg);
}
100% {
left: 0;
background-color: blue;
}
}
</style>
</head>
<body>
<h1>Keyframes Example</h1>
<div class="box"></div>
</body>
</html>

BCA DEPARTMENT 2nd SEM Page | 6


KRUPANIDHI DEGREE COLLEGE CMA-LAB

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


<!DOCTYPE html>
<html>
<head>
<title>CSS Transition and Transformation Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: transform 1s, background-color 1s;
}

.box:hover {
transform: rotate(45deg);
background-color: red;
}
</style>
</head>
<body>
<h1>CSS Transition and Transformation Example</h1>
<div class="box"></div>
</body>
</html>

BCA DEPARTMENT 2nd SEM Page | 7


KRUPANIDHI DEGREE COLLEGE CMA-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>
<head>
<title>Light Bulb On/Off Example</title>
<style>
#lightBulb {
width: 200px;
height: 300px;
}
</style>
</head>
<body>
<h1>Light Bulb On/Off Example</h1>
<img id="lightBulb" src="light_off.gif" alt="Light Bulb">
<br>
<button onclick="turnOn()">Turn On</button>
<button onclick="turnOff()">Turn Off</button>

<script>
function turnOn() {
document.getElementById("lightBulb").src = "light_on.gif";
}

function turnOff() {
document.getElementById("lightBulb").src = "light_off.gif";
}
</script>
</body>
</html>

BCA DEPARTMENT 2nd SEM Page | 8

You might also like