MULTIMEDIA LAB PROGRAMS
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 and Sizes</title>
<style>
.custom-font {
font-family: Arial, sans-serif;
font-variant: small-caps;
font-style: italic;
font-size: 20px;
}
</style>
</head>
<body>
<h1>II YEAR BCA</h1>
<p class="custom-font">This batch started in the year 2021 and get graduated in the
year 2024</p>
<p style="font-family: 'Times New Roman', serif; font-variant: normal; font-style:
normal; font-size: 16px;">This text uses inline styles to specify different font properties.
</p>
</body>
</html>
2) Write a program to display random contents using list properties: a) Ordered
list b) Unordered list.
<!DOCTYPE html>
<html>
<head>
<title>List Program</title>
</head>
<body>
<h1>List Program</h1>
<h2>Ordered List:</h2>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h2>Unordered List:</h2>
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
</body>
</html>
3) Write an html/5 program to create a gradient using CSS.
<!DOCTYPE html>
<html>
<head>
<title>Gradient Example</title>
<style>
body {
background: linear-gradient(to right, #ff0000, #0000ff);
}
</style>
</head>
<body>
<h1>Gradient Example</h1>
<p>This is an example of a gradient background.</p>
</body>
</html>
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 Demo</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
animation-name: move;
animation-duration: 2s;
animation-delay: 1s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes move {
0% { transform: translateX(0); }
50% { transform: translateX(200px); }
100% { transform: translateX(0); }
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
5) Write a html/5 program to demonstrate key frames.
<!DOCTYPE html>
<html>
<head>
<title>CSS Keyframes Demo</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
animation-name: color-change;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes color-change {
0% { background-color: red; }
50% { background-color: blue; }
100% { background-color: green; }
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
6) Write a html/5 program to demonstrate CSS transition and transformation.
<!DOCTYPE html>
<html>
<head>
<title>CSS Transition and Transformation Demo</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transition-property: transform, background-color;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
.box:hover {
transform: rotate(45deg) scale(1.2);
background-color: blue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
7) Write a html/5 program to draw rectangle, line, polygon, polyline using SVG.
<!DOCTYPE html>
<html>
<head>
<title>SVG Drawing</title>
</head>
<body>
<svg width="400" height="300">
<rect x="50" y="50" width="200" height="100" fill="red" />
<line x1="50" y1="200" x2="250" y2="200" stroke="blue" stroke-width="2" />
<polygon points="300,100 350,150 325,200" fill="green" />
</svg>
</body>
</html>
8) Write a HTML/5 program to draw a star using SVG.
<!DOCTYPE html>
<html>
<body>
<svg height="200" width="400">
<polygon points="90,5,30,120,165,50,15,50,150,120" fill="green">
</svg>
</body>
</html>
9) Write a HTML/5 program to draw linear and radial gradient ellipse using
SVG.
<html>
<body>
<P> <B>LINEAR GRADIENT</B> </P>
<svg height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
<P><B> RADIAL GRADIENT </B> </P>
<svg height="150" width="500">
<defs>
<radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>
</body>
</html>
10) Write a HTML/5 program to demonstrate translation, rotation, scaling, and
transform using canvas.
<!DOCTYPE html>
<html>
<head>
<title>Canvas Transformations</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = [Link]("myCanvas");
var ctx = [Link]("2d");
// Perform translation
[Link](100, 100); // Move the coordinate system by (100, 100)
// Draw a rectangle after translation
[Link] = "blue";
[Link](0, 0, 100, 50);
// Perform rotation
[Link](50, 25); // Move the coordinate system to the center of the rectangle
[Link]([Link] / 4); // Rotate by 45 degrees (in radians)
// Draw a rectangle after rotation
[Link] = "red";
[Link](-50, -25, 100, 50); // (-50, -25) represents the top-left corner of the rectangle
// Perform scaling
[Link](1, 0, 0, 1, 0, 0); // Reset the transformation matrix
[Link](250, 250); // Move the coordinate system to the center of the canvas
[Link](2, 0.5); // Scale horizontally by 2x and vertically by 0.5x
// Draw a rectangle after scaling
[Link] = "green";
[Link](-50, -25, 100, 50);
// Perform custom transformation
[Link](1, 0, 0, 1, 0, 0); // Reset the transformation matrix
[Link](400, 100); // Move the coordinate system to the desired position
[Link](1, 0.5, -0.5, 1, 0, 0); // Apply a custom transformation matrix
// Draw a rectangle after custom transformation
[Link] = "orange";
[Link](0, 0, 100, 50);
</script>
</body>
</html>
11) Write a HTML/5 program to demonstrate Bezier Curves and Quadratic
Curves.
<!DOCTYPE html>
<html>
<head>
<title>Bezier and Quadratic Curves</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = [Link]("myCanvas");
var ctx = [Link]("2d");
[Link]();
[Link](50, 200);
[Link](100, 50, 300, 250, 400, 200);
[Link] = 5;
[Link] = "blue";
[Link]();
[Link]();
[Link](50, 300);
[Link](200, 100, 400, 300);
[Link] = 5;
[Link] = "green";
[Link]();
</script>
</body>
</html>
Write a html/5 program to demonstrate the use of font family, font variant, font style, and
font size.
