@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> <!-- Defines the document type as HTML -->
<html>
<head> <!-- Contains metadata about the document -->
<title>My Page</title> <!-- Specifies the title of the
document -->
</head>
<body> <!-- Contains the visible content of the document -->
<h1>Welcome to my page</h1> <!-- Defines a heading
-->
<p>This is some example text.</p> <!-- Defines a
paragraph -->
<a href="https://www.google.com">Visit Google</a>
<!-- Defines a hyperlink -->
</body>
</html> <!-- Indicates the end of the HTML document -->
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">
<frame src="frames2.html">
<frame src="frames3.html">
<frame src="frames4.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 {
/* styles go here */
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 {
/* styles go here */
4. Universal Selector -
In CSS, the universal selector is a type of selector that targets all
elements on a web page.
Syntax -
*{
/* styles go here */
5. Group Selector -
The grouping selector is used to select all the elements with the
same style
definitions.
Syntax -
h1, h2, p {
/* styles go here */
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>
<svg height="140" width="500">
<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
17. Write a program to draw SVG start ?
<html>
<body>
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:purple;stroke:lime;stroke-width:5;fill-rule:nonzero;"/
>
Sorry, your browser does not support inline SVG.
</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>
<svg height="150" width="300">
<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>
<script type = "text/javascript">
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>
<canvas id="myCanvas" width="300" height="150" style="border:1px
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>
<canvas id="myCanvas" width="300" height="150" style="border:1px
solid grey"></canvas>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
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>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
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>
<script type = "text/javascript">
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>
