Abhijit HTML

MultimediaAndAnimation

SECTION A

ProgramNo.1:Program to Design LOG IN Form in Html.

<!DOCTYPEhtml>

<html>

<head>

<metaname="viewpoint"content="width"=device width, initial-scale="1">

<title> Login Page</title>

</head>

<body>

<center><h1>StudentLogin Form</h1></center>

<divclass="container">

<lable>username:</lable>

<inputtype="text" place holder="entertheusername" name="username"requried></div><div>

<lable>password:</lable>

<inputtype="password"placeholder="enter password" name="password"requried></div><BR/>

<button type="submit">login</button>

<inputtype="checkbox" checked="checked"> Rememberme

<buttontype="button"class="Canclebtn">Cancle</button><BR/>

Forgot <a herf ="#">password? </a></center>

</div>

</form>

</body>

</html>

Program No.2: Program for Creating animation of “Bouncing Cloud” using HTML

and CSS.

<html>

<head>

<title>Bouncing Cloud Animation</title>

<style>

body

{

background-color: skyblue; overflow: hidden;

}

.cloud

{

position: absolute; top: 50%; left: 50%;

transform: translate(-50%, -50%);

width: 150px; height: 100px;

background-color: white;

border-radius: 50%;

animation: bounce 2s linear infinite;

}

.cloud::before,.cloud::after

{

content: "";

position: absolute;

width: 100px; height: 100px;

background-color: white;

border-radius: 50%;

transition: transform 0.5s ease-in-out;

}

.cloud::before

{

top: -50px; left: 30px;

}

.cloud::after

{

top: -20px; left: -50px;

}

@keyframes bounce {0%, 100% { top: 50%; }50% { top: 30%; }}

</style>

</head>

SNJPSNMSTrust’sDegreeCollege, Nidasoshi

Page3

MultimediaAndAnimation

<body>

</body>

</html>

ProgramNo.3:Programtodemonstrateakeyframeanimation.

<html>

<head>

<style>

div {

width: 220px;

height: 120px;

background: yellow;

animation-name: program3;

animation-duration: 4s;

}

@keyframes program3 {

from {background: blue;}

to {background: red;}

}

</style>

</head>

<body>

<h1>Keyframe Animation</h1>

<div><h1>MULTIMEDIA AND ANIMATION</h1></div>

</body>

</html>

ProgramNo.4:Program to demonstrate A Fontstyle,Fontweight and Fontsize

properties using CSS.

<!DOCTYPEhtml>

<html>

<head>

<style>

p.a{

font:50pxArial,sans-serif;

}

p.b{

font:italicsmall-capsbold40px/30px Geroia,serif;

}

</style>

</head>

<body>

<h1>the font property</h1>

<pclass="a">Multi Media</p>

<p class="b">Animation</p>

</body>

</html>

SNJPSNMSTrust’sDegreeCollege, Nidasoshi

Page8

MultimediaAndAnimation

ProgramNo.5:Programtodemonstratemultiple animation.

<!DOCTYPEhtml>

<html>

<head>

<style>

div {

width :100px;

height :100px;

background-color :red;

position :relative;

animation-name:example;

animation-duration :4s;

}

@keyframesexample{

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>MULTIPLEANIMATION</h1>

<div></div><p><b>note:whenanimatinisfinnished,itgoesbacktoitsoriginlstyle.</p></body><html>

SNJPSNMSTrust’sDegreeCollege, Nidasoshi

Page11

MultimediaAndAnimation

OUTPUT:

SNJPSNMSTrust’sDegreeCollege, Nidasoshi

Page12

MultimediaAndAnimation

Program No.6: Program to use table tag to format web page.Also create the Time

Table of your class using table tag.

<!DOCTYPEhtml>

<html>

<body>

<h1align="center">TIMETABLE</h1>

<tableborder="5"cellspacing="0"align="center">

<tr>

<tdalign="center"height="50" width=

"100"><br>

<b>Day/Period</b></br>

</td>

<tdalign="center"height="50" width=

"100">

</td>

<tdalign="center"height="50" width=

"100">

</td>

<tdalign="center"height="50" width=

"100">

</td>

<tdalign="center"height="50" width=

"100">

</td>

<tdalign="center"height="50" width=

"100">

</td>

<tdalign="center"height="50" width=

"100">

</td>

<tdalign="center"height="50" width=

"100">

<tdalign="center" height="50"

width= "100">

</td>

<tdalign="center"height="50" width=

"100">

</tr><tr>

<b>Monday</b></td>

<tdrowspan="6"align="center"height="50">

</td>

<tdalign="center"height="50">M&A </td>

<tdrowspan="5"align="center"height="50">

</td>

<tdcolspan="2"align="center"

height="50">LAB </td>

<tdalign="center" height="50">OEC</td>

</tr>

<tr>

<tdalign="center" height="50">

<b>Tuesday</b>

</td>

<td align="center" height="50">Sports</td>

<tdcolspan="2"align="center"height="

50">LAB</td>

<tdalign="center"height="50">M&A </td>

</tr>

<tr>

<b>Wednesday</b>

</td>

<tdalign="center"height="50">M&A</td>

<tdcolspan="2"align="center"height="

50">LAB</td>

</tr>

<tr>

<b>Thrusday</b>

</td>

<tdcolspan="2"align="center"height="

50">LAB

</td>

</tr>

<tr>

<b>Friday</b>

</td>

<tdcolspan="2"align="center"height="

50">LAB

</td>

</tr><tr>

<b>Saturday</b>

</td>

</tr>

</table></body></html>

ProgramNo.7:Program to Demonstrate Longhand properties in CSS.

<!DOCTYPEhtml>

<html>

<head>

<style>

{

font-style : italic;

font-variant:normal;

font-weight :100;

font-size : 50px;

font-family:Arial;

color : red;

}

</style>

</head>

<body>

<p>WelcomeTo Multimedia And Animation</p>

</body>

</html>

SNJPSNMSTrust’sDegreeCollege, Nidasoshi

Page17

MultimediaAndAnimation

OUTPUT:

SNJPSNMSTrust’sDegreeCollege, Nidasoshi

Page18

MultimediaAndAnimation

ProgramNo.8:Program to Demonstrate shorthand properties in CSS.

<!DOCTYPEhtml>

<html>

<style>

{

font: italic normal bold 100px century;

}

</style>

</head>

<body>

<p>WelcometoMultimediaand Animation</p>

</body>

</html>

MultimediaAndAnimation

Program No.9: Program to Demonstrate animation in reverse direction or alternate

cycles.

<!DOCTYPEhtml>

<html>

<head>

<title>

CSS|animation-directionProperty

</title>

<style>

body {

text-align:center;

}h1 {

color:green;

}

h3 {

width: 100%;

animation-name:text;

animation-duration:2s;

animation-iteration-count:infinite;}

#one {

animation-direction:alternate;

}

@keyframestext{

from {

margin-left:60%;

}to {

margin-left:0%;

}}

</style>

</head>

<body>

<h1>MultimediaAndAnimation</h1>

<h2>animation-directionproperty</h2>

<h3 id="one">Animation ..... </h3>

</body>

</html>

SNJPSNMSTrust’sDegreeCollege, Nidasoshi

Page21

MultimediaAndAnimation

SNJPSNMSTrust’sDegreeCollege, Nidasoshi Page22

OUTPUT:

MultimediaAndAnimation

ProgramNo.10:WriteJavaScriptProgramtoshowON/OFF Demo.

<html>

<head> <title>Light ON/OFF </title> </head>

<h2>JavaScript to show light ON / OFF </h2>

function light(sw) {

var pic;

if (sw == 0) {

pic = "bulboff.avif"

} else {

pic = "bulbon.avif"

}

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

}

</script>

<p>

<button type="button" onclick="light(1)">Light On</button>

<button type="button" onclick="light(0)">Light Off</button>

</p>

</body>

</html>

SECTION B

ProgramNo.1:Program to Demonstrate SVG(ScalableVectorGraphics) Circle.

<!DOCTYPEhtml>

<html>

<body>

<h1style="color="green">WelcomeTo MultimediaAnd Animation</h1>

<svgheight="400"width="400">

<circle cx="150" cy="150" r="100" stroke="gray"

stroke-width="2" fill="green" />

</svg>

<circle cx="150" cy="150" r="100" stroke="green"

stroke-width="2" fill="blue" />

</svg>

</center>

</body>

</html>

ProgramNo.2:Program to Demonstrate SVG(ScalableVectorGraphics) Ellipse.

<html>

<title>SVG Ellipse</title>

<body>

<h1>SampleSVGEllipseImage</h1>

<svgwidth="800"height="800">

<g>

<text x="0"y="15"fill="black">Ellipse#1:withoutopacity.</text>

<ellipsecx="100" cy="100"rx="90"ry="50"

stroke="black"stroke-width="3"fill="rgb(0,0,0)"></ellipse>

</g>

</svg>

</body>

</html>

MultimediaAndAnimation

ProgramNo.3:Program to Demonstrate SVG(ScalableVectorGraphics) Star.

<html>

<head>

</head>

<body>

</svg>

</body>

</html>

SNJPSNMSTrust’sDegreeCollege, Nidasoshi

Page30

MultimediaAndAnimation

OUTPUT:

SNJPSNMSTrust’sDegreeCollege, Nidasoshi

Page31

MultimediaAndAnimation

ProgramNo.4:Program to Demonstrate “StrokeText()” method using HTML

Canvas.

<!DOCTYPEhtml>

<html>

<body>

<canvasid="myCanvas"width="300"height="150"style="border:1pxsolid#d3d3d3;"> your

browser does not support the HTML canvas tag.</canvas>

varc=document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.font = "20px Gerogia";

ctx.strokeText("HelloWorld!!",10,50);

ctx.font = "30px Verdana";

vargradient=ctx.createLinearGradient(0,0,c.width,0);

gradient.addColorStop("0","black");

gradient.addColorStop("0.5","blue");

gradient.addColorStop("1.0","red");

ctx.strokeStyle = gradient;

ctx.strokeText("WelcometoBCA",10,90);

</script>

</body>

</html>

ProgramNo.5:ProgramtodemonstrateBezireCurveTo()methodusingHTMLcanvas.

<!DOCTYPEhtml>

<html>

<body>

<canvasid="myCanvas"width="300"height="150"style="border:1pxsolid#d3d3d3;"> your

browser does not supoprt the HTMLs canvas tag.</canvas>

varc=document.getElementById("myCanvas");

var ctx= c.getContext("2d");

ctx.beginPath();

ctx.moveTo(20,20);

ctx.bezierCurveTo(20,100,200,100,200,20);

ctx.stroke();

</script>

</body>

</html>

Program No.6: Program to demonstrate different line patterns with different colors

using Canvas.

<html>

<body> <h1> Line Patterns with different Colors using Canvas </h1>

const canvas = document.getElementById("myCanvas");

const ctx = canvas.getContext("2d");

ctx.lineWidth = 4;

// Dashed line

ctx.beginPath();

ctx.setLineDash([10, 5]);

ctx.moveTo(0, 50);

ctx.lineTo(500, 50);

ctx.strokeStyle = "red";

ctx.stroke();

// Solid line

ctx.beginPath();

ctx.setLineDash([]);

ctx.moveTo(0, 100);

ctx.lineTo(500, 100);

ctx.strokeStyle = "green";

ctx.stroke();

// Dotted line

ctx.beginPath();

ctx.setLineDash([3, 3]);

ctx.moveTo(0, 150);

ctx.lineTo(500, 150);

ctx.strokeStyle = "blue";

ctx.stroke();

</script>

</body>

</html>

ProgramNo.7:Program to Demonstrate Gradients using HTML canvas.

<!DOCTYPEHTML>

<body>

<h1>Gradient<h1>

constc=document.getElementById("myCanvas");

const ctx = c.getContext("2d");

constgrd=ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"blue");

grd.addColorStop(1,"black");

ctx.fillStyle = grd;

ctx.fillRect(10,10,150,80);

</script>

</body>

</html>

ProgramNo.8:Program to Demonstrate Text Shadow using HTML Canvas.

<!DOCTYPEhtml>

<html>

<head>

<scripttype="application/javascript">

function init() {

varcanvas=document.getElementById("canvas"); if

(canvas.getContext){

varctx=canvas.getContext("2d");

ctx.textAlign="start";

ctx.fillStyle="red";

ctx.font="25px verdana";

ctx.shadowColor="black";

ctx.shadowOffsetX=2;

ctx.shadowOffsetY=2;

ctx.fillText("BelieveShadow",10,20);

ctx.shadowBlur =2;

ctx.fillText("Believe",10,60);

}}

</script>

</head>

<canvasid="canvas"width="300"height="100"style="border:2pxsolid#d3d3d3"></canvas><br>

</body></html>

SNJPSNMSTrust’sDegreeCollege, Nidasoshi

Page41

MultimediaAndAnimation

OUTPUT:

SNJPSNMSTrust’sDegreeCollege, Nidasoshi

Page42

MultimediaAndAnimation

Program No.9: Program to Demonstrate Source-over, Source-in, Source-out

Properties for composition using HTML Canvas.

<html>

<head>

<scripttype="text/javascript">

varcompositeTypes=['source-over','source-in','source-out']; function

drawShape() {

for(i=0 ; i<compositeTypes.length;i++){

varlabel=document.createTextNode(compositeTypes[i]);

document.getElementById('lab' +i).appendChild(label);

varctx=document.getElementById('tut'+i).getContext('2d');

ctx.fillStyle = "#FF3366";

ctx.fillRect(15, 15, 70, 70);

ctx.globalCompositeOperation=compositeTypes[i];

ctx.fillStyle = "#0066FF";

ctx.beginPath();

ctx.arc(75,75,35,0,Math.PI*2,true);

ctx.fill();

}}

</script>

</head>

<tr>

<labelid="lab0"></label>

</td>

<labelid="lab1"></label>

</td>

<labelid="lab2"></label>

</td>

</tr>

</table>

</body></html>

Program No.10: Program to create Rectangle and animate increase decrease the size

of rectangle.

<!DOCTYPEhtml>

<html>

<head>

<style>c

anvas{

border: 1pxsolidblack;

}

</style>

</head>

<body>

<canvasid="myCanvas"width="300"height="200"></canvas>

constcanvas=document.getElementById('myCanvas'); const

ctx = canvas.getContext('2d');

constrectWidth=100;

const rectHeight = 50;

let rectX = (canvas.width - rectWidth) / 2;

letrectY=(canvas.height-rectHeight)/2; let

increasing = true;

let rectScale = 1;

functionanimate()

{

ctx.clearRect(0,0,canvas.width,canvas.height); if

(increasing) {

rectScale +=

0.02;if(rectScale>=

2){ increasing =

false;

}

} else {

rectScale-=0.02;

if(rectScale<=1){ increasing

= true;

}

const scaledWidth = rectWidth * rectScale;

constscaledHeight=rectHeight*rectScale;

rectX = (canvas.width - scaledWidth) / 2;

rectY = (canvas.height - scaledHeight) / 2;

ctx.fillStyle = 'blue';

SNJPSNMSTrust’sDegreeCollege, Nidasoshi

Page45

MultimediaAndAnimation

ctx.fillRect(rectX,rectY,scaledWidth,scaledHeight);

requestAnimationFrame(animate);

}

animate();

</script>

</body>

</html>

SNJPSNMSTrust’sDegreeCollege, Nidasoshi

Page46

MultimediaAndAnimation

Search This Blog

Prgms

Abhijit HTML

Comments

Post a Comment

Popular posts from this blog

Abhijit_python

Php