MMA NOTES by CodeWithJagadish

@codewithjagadish
MULTIMEDIA & ANIMATION

UNIT- 1
WEB DESIGN
1. Define HTML?
HTML (Hypertext Markup Language) is the standard markup language

used to create web pages.
2. Explain the basic syntax of HTML document?
<!DOCTYPE html> 
<html>
<head> 
<title>My Page</title> 
</head>
<body> 
<h1>Welcome to my page</h1> 
<p>This is some example text.</p> 
<a href="https://www.google.com">Visit Google</a>


</body>
</html> 
This example includes the basic structure of an HTML document, with a

DOCTYPE declaration, the <html>, <head>, and <body> tags, and some
basic content including a heading, a paragraph, and a link.
2. How do display images on the web page? Give syntax?
Images can be displayed on a web page using the <img> element in

HTML.
Syntax:
<img src="image.jpg" alt="Image description">
3. Explain types of lists in html?
HTML lists allow web developers to group a set of related items in lists.
Types:
1. Unordered List -
 An unordered list starts with the <ul> tag.
 Each list item starts with the <li> tag.
 The list items will be marked with bullets (small black

circles) by default
Example -
<ul>
<li>BCA</li>
<li>BBA</li>
<li>BCOM</li>
</ul>
2. Ordered List -
 An ordered list starts with the <ol> tag.
 Each list item starts with the <li> tag.
 The list items will be marked with numbers by default.
Example -
<ol>
<li>BCA</li>
<li>BBA</li>
<li>BCOM</li>
</ol>
3. Definition List -
 HTML also supports definition lists.
 A definition list is a list of terms, with a description of

each term.
 The <dl> tag defines the description list, the <dt> tag
defines the term (name), and the <dd> tag describes
each term.
Example -
<dl>
<dt>BCA</dt>
<dd>Technical Course</dd>
<dt>BBA</dt>
<dd>Management Course</dd>
</dl>
4. Define Table?
In HTML, a table is a structured element that allows you to display data

in rows and columns.
5. Define Forms? Give Syntax
In HTML, form elements are used to create different types of user input
fields, such as text fields, checkboxes, radio buttons, dropdown lists,

etc.
Syntax:
<form>
form elements
</form>
6. List and explain Input types in HTML ?

7. Explain frame in HTML ?
 HTML frames are used to divide your browser window into

multiple sections where each section can load a separate HTML
document.
 A collection of frames in the browser window is known as a

frameset.
 To use frames on a page we use <frameset> tag instead of <body>

tag.
 The <frameset> tag defines, how to divide the window into

frames.
Example -
<html>
<frameset cols="25%,25%,25%,*">
<frame src="frames1.html">
</frameset>
</html>
8. List features of HTML5 ?
1. Improved support for multimedia
2. Canvas element
3. Offline web applications
4. Improved forms
5. Compatibility with mobile devices
6. Geolocation
9. Define CSS?
CSS (Cascading Style Sheets) is a language used to describe the

presentation of web pages, including their layout, colors, fonts, and
other visual aspects.
Properties of CSS -
1. Layout properties - display, position, float, width, height,

margin,
padding, and others.
2. Typography properties - font-family, font-size, font-weight,

color, line-
height, and others.

3. Color and background properties - background-color, color,
opacity,
gradient, and others.
4. Animation and transition properties - animation, transition,

transform,
and others.
10. Give Syntax of CSS ?

selector {
Property 1 : value 1;
property 2 : value 2;
.......
Property n : value n;
11. Explain levels of Style sheets?
1. Inline CSS -
Inline CSS is used to style a specific HTML element.
Example:
<htmltag style="cssproperty1:value; cssproperty2:value;">

</htmltag>
2. Internal CSS -
Internal CSS refers to the use of CSS styling within the <head>
section of an
HTML document.
This is done by using the <style> tag to define the CSS styles that
will be applied to the HTML elements in the document.
Example:
<head>
<style>
body {
background-color: lightblue;
font-size: 16px;
h1{
font-style: italic;
</style>
</head>
3. External CSS -
 In external CSS, we link the web pages to the external .css

file. It is created by a text editor.
 CSS is a more efficient method for styling a website.
 By editing the .css file, we can change the whole site at once.
Example -
style.css
body {
background-color: lightblue;
font-size: 16px;
h1 {
color: red;
In the HTML document, add the following code to the <head> section to
link to the style.css file -
<link rel="stylesheet" type="text/css" href="style.css">
12. List and explain selectors in CSS?
1. Element Selector -
Selects all instances of a specific HTML element on the page.
Syntax -
p{
/* styles go here */
2. Id Selector -
An ID selector is used to target and style a specific HTML element

on a web page based on its unique "id" attribute.
Syntax -
#my-id {
3. Class Selector -
In CSS, a class selector is used to target and style HTML elements

that share a common class attribute.
Syntax -
.my-class {
4. Universal Selector -
In CSS, the universal selector is a type of selector that targets all

elements on a web page.
Syntax -
*{
5. Group Selector -
The grouping selector is used to select all the elements with the
same style
definitions.
Syntax -
h1, h2, p {
13. Explain the font properties in CSS?
CSS Font property is used to control the look of texts.
1. CSS Font color - This property is used to change the color of the
text
color : red;
2. CSS Font family - This property is used to change the face of the
font.
font-family: Arial, sans-serif;
3. CSS Font size - This property is used to increase or decrease the

size of the font.
font-size: 16px;
4. CSS Font style - This property is used to make the font bold,
italic or oblique.
font-style: italic;
5. CSS Font variant - This property creates a small-caps effect.
font-variant: small-caps;
6. CSS Font weight - This property is used to increase or

decrease the boldness and lightness of the font.
font-weight: bold;
14. List Color properties in CSS?
 RGB format
 RGBA format
 Hexadecimal notation
 HSL - Hue, Saturation, Lightness
 HSLA
 Built-in color
15. Explain Alignment of text in CSS?
In CSS, the text-align property is used to set the horizontal alignment of

text within an element.
Syntax:
text-align: justify | center | left | right |inherit;
16. List features of CSS?
1. Selectors
2. Box Model
3. Typography
4. Colors and Gradients
5. Transition and elements

6. Media Queries
7. Flexible Box Layout
8. Grid Layout
17. What is Javascript?
JavaScript is a high-level, dynamic, interpreted programming language

used primarily for client-side web development, although it can also be
used for server-side programming.
18. How to embed Javascript in HTML document?
Method 1 -
<script type = "text/javascript">
<! -- JavaScript script //-- >
</script>
Method 2 -
<script type = "text/javaScript" src = "myScript.js"> </script>
UNIT- 2
Animation
1. What is Animation?
An animation is nothing more than a visualization of change- a change

that occurs over a period of time.
2. What is the Start and End State?
The reference points which are used to visualize the change in an

animation is called as the start state and end state.
3. Define interpolation?
The process of creating these intermediate states is known as

interpolation.
4. Define Keyframe animation? Give Syntax for creating Keyframe

animation
A keyframe, is something that defines the starting and/or ending point

of any smooth transition.
Syntax -
@keyframes animationname {keyframes-selector {css-styles;}}
5. List properties of CSS Animation?
 @keyframes
 animation-name - Specifies the name of the keyframe you want to

bind to the selector.
 animation-duration - Specifies the speed curve of the animation.
 animation-delay - Specifies delay before the animation start.
 animation-iteration-count - Specifies how many times an

animation should be played.
 animation-direction - Specifies whether or not the animation

should play in reverse on alternate cycles.
 animation-timing-function - Specifies whether or not the

animation should play in reverse on alternate cycles.
 animation-fill-mode - Specifies what values are applied by the

animation outside the time it it executing.
 animation - Used to make shortend property.
6. What is CSS transition ?
CSS transitions allows you to change property values smoothly, over a

given duration.
7. List CSS transition properties ?
 Transition
 Transition-Delay
8. List Longhand Font Properties ?
Longhand properties, also known as individual properties, refer to CSS

properties that are broken down into separate components.
 font-style
 font-variant
 font-weight
 font-size
 font-family
 color
9. List CSS shorthand Properties?
Shorthand properties allow us to write multiple properties in a single

line and in a compact way.
Example -
font: italic normal bold 60px Century;
10. Write a program to demonstrate multiple transitions?

<html>
<head>
<style>
div
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, transform 2s;
div:hover
width: 300px;
height: 300px;
transform: rotate(180deg);
}
</style>
</head>
<body>
<h1>Transition + Transform</h1>
<p>Hover over the div element below:</p>
<div></div>
</body>
</html>
UNIT- 3
HTML5 - SVG
11. What is SVG ? List Advantages
SVG stands for Scalable Vector Graphics. It is used to draw

two-dimensional vector-based graphics on web pages.
 SVG images can be created with any text editors
 SVG images can be searched, indexed, scripted & compressed.
 SVG images are scalable.

 SVG images can be printed with high quality at any resolution.
12. List Some Predefined SVG shapes?
 Rectangle <rect>
 Circle <circle>
 Ellipse <ellipse>
 Line <line>
 Polyline <polyline>
 Polygon <polygon>
 Path <path>
13. Write a program to create SVG 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>
14. Write a program to create SVG rectangle ?
<html>
<body>
<svg width="200" height="100">
<rect width="200" height="100" stroke="black" stroke-width="10"
fill="red" />
</svg>
</body>
</html>
15. Write a program to create SVG line ?

<html>
<body>
<svg height="210" width="500">
<line x1="10" y1="10" x2="100" y2="100"
style="stroke:rgb(535,100,503);stroke-width:2" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
16. Write a program to create SVG Ellipse ?

<html>
<body>
<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
</body>
</html>
17. Write a program to draw SVG start ?

<html>
<body>
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:purple;stroke:lime;stroke-width:5;fill-rule:nonzero;"/
>
</svg>
</body>
</html>
18. What is SVG gradient? List its types
SVG Gradient is used to smooth transition one color to another color

within a shape.
 Linear Gradients - Transition from one direction to another.
 Radial Gradients - Transition circularly from one color to

another from one direction to another.
19. Explain Linear Gradients?
The SVG element can support to produce a smooth surface of colors in

a straight way which is called a linear SVG gradient.
Syntax:
<linearGradient id=”id” x1=”x1-percentage” y1=”y1-percentage”

x2=”x2 percentage” y2=”y2-percentage”>
Example Program -
<html>
<body>
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%"

y2="10%" >
<stop offset="0%" style="stop-color:red; stop-opacity:1;" />
<stop offset="100%" style="stop-color:yellow; stop-opacity:1;"

/>
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="50" fill="url(#grad1)" />
</svg>
</body>
</html>
UNIT- 4
HTML5 - Canvas
1. What is Canvas ?
HTML5 element <canvas> can be used to draw graphs, make photo

compositions or do simple (and not so simple) animations.
Example Program -
<html>
<head>
<style>
#mycanvas{border:1px solid red;}
</style>
</head>
<body>
<canvas id = "mycanvas" width = "100" height = "100"></canvas>
</body>
</html>
2. What is getContext?
The getContext, used to obtain the rendering context and its drawing
functions. This function takes one parameter, the type of context 2d.
3. Explain methods of drawing rectangles using HTML5 Canvas ?
1 fillRect(x,y,width,height) -
This method draws a filled rectangle.
2. strokeRect(x,y,width,height) -
This method draws a rectangular outline.
3. clearRect(x,y,width,height) -
This method clears the specified area and makes it fully

transparent
4. Explain methods of drawing paths & Lines using HTML5 Canvas ?
1. beginPath() -
This method resets the current path.
2. moveTo(x, y) -
This method creates a new subpath with the given point.
3. closePath() -
This method marks the current subpath as closed, and starts a

new subpath with a point the same as the start and end of the
newly closed subpath.
4. fill() -
This method fills the subpaths with the current fill style.
5. stroke() -
This method strokes the subpaths with the current stroke style.
5. Explain Line properties?
1. lineWidth [ = value ] -
This property returns the current line width and can be set, to
change the line width.
2. lineCap [ = value ] -
This property returns the current line cap style and can be set, to
change the
line cap style.
3. lineJoin [ = value ] -
This property returns the current line join style and can be set, to
change the line join style
4. miterLimit [ = value ] -
This property returns the current miter limit ratio and can be set,
to change the miter limit ratio.
6. Explain methods to create gradients using HTML5 Canvas?
1. addColorStop(offset, color) -
This method adds a color stop with the given color to the gradient
at the given offset.
2. createLinearGradient(x0, y0, x1, y1) -
This method returns a CanvasGradient object that represents a

linear gradient that paints along the line given by the coordinates
represented by the arguments.
3. createRadialGradient(x0, y0, r0, x1, y1, r1) -
This method returns a CanvasGradient object that represents a

radial gradient that paints along the cone given by the circles
represented by the arguments.
7. Write a program to create linear gradients?

<!DOCTYPE html>
<html>
<body>
<canvas id = "mycanvas" width="300" heigh="200" style="border: 1px

solid black"></canvas>

var c = document.getElementById("mycanvas")
var ctx = c.getContext("2d")
var grd = ctx.createLinearGradient(0, 10, 200, 10)
grd.addColorStop(0, "red")
grd.addColorStop(1, "white")
//Fill Style
ctx.fillStyle = grd;
ctx.fillRect(15, 10, 150, 70)
</script>
</body>
</html>
UNIT- 5
HTML5 - Canvas
1. Explain canvas text and font properties?
1. font [ = value ] - This property returns the current font

settings and can be set, to change the font.
2. textAlign [ = value ] - This property returns the current text

alignment settings and can be set, to change the alignment.
3. textBaseline [ = value ] - This property returns the current
baseline alignment settings and can be set, to change the baseline
alignment.
4. fillText(text, x, y [, maxWidth ] ) - This property fills the given

text at the given position indicated by the given coordinates x and
y.
5. strokeText(text, x, y [, maxWidth ] ) - This property strokes the

given text at the given position indicated by the given coordinates
x and y.
2. Write Syntax for strokeText() method?
Syntax -
ctx.strokeText(text, x, y, maxWidth);
3. Write program to demonstrate strokeText() method using HTML

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 type="text/javascript">
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>
4. Write Syntax for createPattern method in HTML5 Canvas ?
Syntax -
createPattern(image, repetition)
5. List and Explain shadow properties in HTML5 canvas?
HTML5 canvas provides capabilities to create nice shadows around the

drawings. All drawing operations are affected by the four global shadow
attributes.
Properties:
1. shadowColor [ = value ] - This property returns the current

shadow color and can be set, to change the shadow color.
2. shadowOffsetX [ = value ] - This property returns the current
shadow offset X and can be set, to change the shadow offset X.
3. shadowOffsetY [ = value ] - This property returns the current

shadow offset Y and can be set, change the shadow offset Y.
4. shadowBlur [ = value ] - This property returns the current

level of blur applied to shadows and can be set, to change the blur
level.
6. Define the Canvas save and restore state?
The save() method saves the state of the drawing context with all
its
attributes.
Attributes - clipping, transformation, direction, fillStyle,

font, lineCap, strokeStyle, textAlign, and textBaseline.
The restore() method restores the state of a saved drawing

context.
Attributes - clipping, transformation, direction, fillStyle,

font, lineCap, strokeStyle, textAlign, and textBaseline.
7. Explain the Javascript methods used for animations?
1. setInterval(callback, time) - This method repeatedly executes

the supplied code after a given time milliseconds
2. setTimeout(callback, time) - This method executes the

supplied code only once after a given time milliseconds.
8. Explain canvas translation method?
HTML5 canvas provides translate(x, y) method which is used to move

the canvas and its origin to a different point in the grid.
Here argument x is the amount the canvas is moved to the left or right,
and y is the amount it's moved up or down.
Example Program -
<html>
<body>
<h1>HTML5 Canvas</h1>
<h2>The translate() Method</h2>

solid grey"></canvas>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
ctx.fillRect(10, 10, 100, 50);
ctx.translate(70, 70);
ctx.fillRect(10, 10, 100, 50);
</script>
</body>
</html>
9. Write program to demonstration rotation in HTML5 canvas?
<html><body>
<h1>HTML5 Canvas</h1>
<h2>The rotate() Method</h2>
solid grey"></canvas>
<script>
ctx.rotate(20 * Math.PI / 180); //rotating shape
ctx.fillRect(50, 20, 100, 50);
</script></body></html>
10. Explain scaling with example ?
The scale() method adds a scaling transformation to the canvas units

horizontally and/or vertically.
Example Program -
<canvas id="canvas" height="300" width="500"></canvas>
<script>
const canvas = document.getElementById('canvas');
if (canvas.getContext) {
// rectangle width and height
var width = 100, height = 50;
// starting point
const x = 10,y = 10;
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.strokeRect(x, y, width, height);
ctx.scale(2, 2);
ctx.strokeStyle = 'rgba(0,0,255,.2)';
ctx.strokeRect(x / 2, y / 2, width, height);
</script>
11. Explain Composition?
The globalCompositeOperation property sets or returns how a source

are drawn over a destination.
Source - drawings you are about to draw on the canvas.
Destination - drawings that are already drawn on the canvas.
Syntax:
context.globalCompositeOperation = "value"
Example Program -
<html><body>
<h2>The globalCompositeOperation Property</h2>
<canvas id="myCanvas" width="300" height="150" ></canvas>
<script>
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
ctx.fillStyle = "blue";
ctx.globalCompositeOperation = "source-over";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "red";
ctx.fillRect(150, 20, 75, 50);
ctx.fillStyle = "blue";
ctx.globalCompositeOperation = "destination-over";
ctx.fillRect(180, 50, 75, 50);
</script></body></html>
12. Write a program to display animation using javascript methods ?

<html> <head>
function animate()
{
setInterval(drawShape, 1000);
function drawShape()
var canvas = document.getElementById('mycanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(10, 10, 100, 50);
ctx.translate(70, 70);
ctx.fillRect(10, 10, 100, 50);
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
</script>
</head>
<body onload = "animate();">
<canvas id = "mycanvas" width = "4000" height = "4000"></canvas>
</body></html>

MMA NOTES by CodeWithJagadish

Uploaded by

Copyright:

Available Formats

MMA NOTES by CodeWithJagadish

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

MMA NOTES by CodeWithJagadish

Uploaded by

Copyright:

Available Formats

@codewithjagadish

MULTIMEDIA & ANIMATION

HTML (Hypertext Markup Language) is the standard markup language

2. Explain the basic syntax of HTML document?

<!DOCTYPE html>

<head>

<title>My Page</title> <!-- Specifies the title of the

<body>

<h1>Welcome to my page</h1> <!-- Defines a heading

<a href="https://www.google.com">Visit Google</a>

</html>

This example includes the basic structure of an HTML document, with a

2. How do display images on the web page? Give syntax?

Images can be displayed on a web page using the <img> element in

<img src="image.jpg" alt="Image description">

3. Explain types of lists in html?

 An unordered list starts with the <ul> tag.

 Each list item starts with the <li> tag.

 The list items will be marked with bullets (small black

 An ordered list starts with the <ol> tag.

 Each list item starts with the <li> tag.

 The list items will be marked with numbers by default.

 HTML also supports definition lists.

 A definition list is a list of terms, with a description of

In HTML, a table is a structured element that allows you to display data

5. Define Forms? Give Syntax

fields, such as text fields, checkboxes, radio buttons, dropdown lists,

6. List and explain Input types in HTML ?

 HTML frames are used to divide your browser window into

 A collection of frames in the browser window is known as a

 To use frames on a page we use <frameset> tag instead of <body>

 The <frameset> tag defines, how to divide the window into

8. List features of HTML5 ?

1. Improved support for multimedia

3. Offline web applications

5. Compatibility with mobile devices

CSS (Cascading Style Sheets) is a language used to describe the

1. Layout properties - display, position, float, width, height,

padding, and others.

2. Typography properties - font-family, font-size, font-weight,

height, and others.

gradient, and others.

4. Animation and transition properties - animation, transition,

10. Give Syntax of CSS ?

11. Explain levels of Style sheets?

Inline CSS is used to style a specific HTML element.

<htmltag style="cssproperty1:value; cssproperty2:value;">

 In external CSS, we link the web pages to the external .css

 CSS is a more efficient method for styling a website.

link to the style.css file -

<link rel="stylesheet" type="text/css" href="style.css">

12. List and explain selectors in CSS?

Selects all instances of a specific HTML element on the page.

An ID selector is used to target and style a specific HTML element

In CSS, a class selector is used to target and style HTML elements

In CSS, the universal selector is a type of selector that targets all

13. Explain the font properties in CSS?

CSS Font property is used to control the look of texts.

font-family: Arial, sans-serif;