1.Program to Design LOG IN Form in Html.

<!DOCTYPE html>

<head>

  <title>login page</title>

</head>

<body>

    <center>

    <h1>student login from</h1>

    <form>

        <div>

        <label>Username:</label>

        <input type="text" required /><br>

        <label>Password:</label>

        <input type="password"required /><br>

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

        <button type="button">cancle</button><br>

        <input type="checkbox" />remember me

        <a href="#">forgot password</a>

        </div>

    </form>

    </center>

</body>

</html>

3.Program to demonstrate a keyframe animation.

<!DOCTYPE html>

<html>

<head>

<style>

Div{

width:200px;

height:200px;

position:relative;

animation:demo 5s ease-in infinite, demo2 5s ease-in-out infinite;

border-radius:40px;

}

@keyframes demo

{

0% {background:red;}

50% {background:yellow; width:100px; height:100px;}

100% {background:green; width:300px; height:300px;}

}

@keyframes demo2

{

0% {left:0px; top:0px;}

25% {left:300px;top:0px;}

50% {left:300px;top:300px;}

75% {left:0px;top:300px;}

100% {left:0px; top:0px;}

}

</style>

</head>

<body>

<p>It is an example of keyframes animation </p>

<div> </div>

</body>

</html>

4.Program to demonstrate a Font style, font weight, and font size

properties using CSS.

<!DOCTYPE html>

<html>

<head>

<style>

p{

font-style:italic;

font-weight:100;

font-size:50px;

font-family:arial;

color:red;

}

</style>

</head>

<body>

<p>Welcome to multi media and animation.</p>

</body>

</html>

6. Program to use table tag to format web page. Also create the Time Table of your class using table tag.

<html>

<head>

<title>Time Table</title>

<style>

h1,td{

text-align:center;

}

.day{

text-align:start;

}

</style>

</head>

<body>

<h1>Time table</h1>

<table border="2" cellspacing="0" align="center">

<tr>

<th>DAY/PERIOD </th>

<th>9:30to<br> 10:20</th>

<th>10:20 to<br> 11:20</th>

<th>11:20to<br>12:00 </th>

<th>12:00to<br> 12:40</th>

<th>12:40to<br> 1:30</th>

<th>1:30to<br> 2:20</th>

<th>2:20to<br> 3:10</th>

<th>3:10to<br> 4:00</th>

</tr>

<tr>

<td class="day"> Monday</td>

<td>Eng</td>

<td >Mat</td>

<td> che</td>

<td rowspan="6" >B<BR>R<BR>E<BR>A<BR>K </td>

<td colspan="3"> lab</td>

<td>Phy</td>

</tr>

<tr>

<td class="day"> Tuesday</td>

<td colspan="3"> lab</td>

<td>Eng</td>

<td> che</td>

<td >Mat</td>

<td>Sport</td>

</tr>

<tr>

<td class="day"> Wednesday</td>

<td>Eng</td>

<td> che</td>

<td >Mat</td>

<td colspan="3"> lab</td>

<td>Sport</td>

</tr>

<tr>

<td class="day"> Thursday</td>

<td>Eng</td>

<td> che</td>

<td >Mat</td>

<td>Sport</td>

<td colspan="3"> lab</td>

</tr>

<tr>

<td class="day"> Friday</td>

<td colspan="3"> lab</td>

<td>Eng</td>

<td> che</td>

<td >Mat</td>

<td>Sport</td>

</tr>

<tr>

<td class="day"> Saturday</td>

<td>Eng</td>

<td> che</td>

<td >Mat</td>

<td colspan="3"> seminar</td>

<td>Sport</td>

</tr>

</body>

</html>

7.Program to Demonstrate Longhand properties in CSS.

<!DOCTYPE html>

<html>

<head>

<style>

p{

font-style:italic;

font-weight:100;

font-size:50px;

font-family:arial;

color:red;

}

</style>

</head>

<body>

<p>Welcome to multi media and animation.</p>

</body>

</html>

9. Program to Demonstrate animation in reverse direction or alternate cycles

<!DOCTYPE html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: #FF7A59;

position: relative;

animation: MyDiv;

animation-duration: 3s;

animation-iteration-count: 2;

animation-timing-function: ease-in;

animation-direction: alternate-reverse;;

}

@keyframes MyDiv {

0% {left: 0px; top: 0px;}

100% {left: 100px; top: 0px;}

}

</style>

<body>

<p>The animation plays forwards.</p>

<div></div>

</body>

</html>

10. Write JavaScript Program to show light ON/OFF Demo.

<html>

<head>

<style>

div{

height:200px;

width:200px;

border:2px solid black;

border-radius:50%;

}

button{

width:100px;

height:40px;

margin-left:50px;

}

</style>

</head>

<body>

<div> </div>

<button>ON</button>

<script>

let btn=document.querySelector("button");

let div=document.querySelector("div");

btn.addEventListener("click",change);

function change()

{

if(btn.innerText=="OFF")

{

div.style.backgroundColor="White";

btn.innerText="ON";

console.log("ON");

}

else

{

div.style.backgroundColor="yellow";

btn.innerText="OFF";

console.log("OFF");

}

}

</script>

</body>

</html>

1. Program to Demonstrate SVG (Scalable Vector Graphics) Circle.

<!DOCTYPE html>

<html>

<title> svg circle</title>

<head>

</head>

<body>

<svg height="300">

<circle cx="100" cy="100" r="70" stroke="black" stroke-width="3" fill="red" />

</svg>

</body>

</html>

2. Program to Demonstrate SVG (Scalable Vector Graphics) Eclipse.

<!DOCTYPE html>

<html>

<head>

<title> svg ceclipse</title>

</head>

<body>

<svg height="200">

<ellipse cx="100" cy="100" rx="90" ry="50" stroke="black" stroke-width="3" fill="red" />

</svg>

</body>

</html>

3. Program to Demonstrate SVG (Scalable Vector Graphics) Star.

<!DOCTYPE html>

<html>

<title> svg start</title>

<head>

</head>

<body>

<svg height="200">

<polygon points="100,10 40,180 190,60 10,60 160,180" stroke="black" stroke-width="2"

fill="yellow" />

</svg>

</body>

</html>

4. Program to demonstrate “StrokeText()” method using HTML Canvas.

<html>

<head>

<style>

#test{

height:100px;

width:100%;

margin:0px,auto;

}

</style>

<script type="text/javascript">

function drawShape()

{

var canvas=document.getElementById('my_canvas');

if(canvas.getContext)

{

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

//use built in methods

ctx.font="40px cursive"

ctx.strokeText("hello", 10,60);

ctx.font="50px cursive";

ctx.strokeText("Manjunath", 10,120);

}

else{

alert("your browser doesn't support canvas use another browser");

}

}

</script>

</head>

<body id="test" onload="drawShape()">

<h2>Example of strokeText() method</h2>

<canvas id="my_canvas" width="300" height="160" style="border:2px solid black;">

</canvas>

</body>

</html>

5. Program to demonstrate BezierCurveTo() method using HTML canvas.

<html>

<head>

<style>

#test{

height:100%;

width:100%;

margin:0px auto;

}

</style>

<script type="text/javascript">

function drawShape()

{

var canvas=document.getElementById("my_canvas");

if(canvas.getContext)

{

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

//use built in methods

ctx.moveTo(20,20);

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

ctx.stroke();

}

else

{

alert("your browser doesn't support canvas use another browser");

}

}

</script>

</head>

<body id="test" onload="drawShape()" >

<h2>Example of BezierCurveTo()method</h2>

<canvas id="my_canvas" height="160" width="300" style="border:2px solid black;" >

</canvas>

</body>

</html>

8. Program to demonstrate Text shadows using HTML Canvas.

<html>

<head>

<style>

#test{

height:100%;

width:100%;

margin:0px auto;

}

</style>

<script type="text/javascript">

function drawshape()

{

var canvas=document.getElementById('my_canvas');

if(canvas.getContext)

{

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

//use built in methods

ctx.font="40px varadana";

ctx.shadowColor="red";

ctx.shadowBlur=2;

ctx.shadowOffsetX=2;

ctx.shadowOffsetY=2;

ctx.fillText("Pavan_Patil",40,80);

}

else{

alert("your browser doesn’t support canvas use another browser");

}

}

</script>

</head>

<body id="test" onload="drawshape()" >

<h2>Example of Text shadows using HTML Canvas.</h2>

<canvas id="my_canvas" width="300" height="160" style="border:2px solid black;">

</canvas>

</body>

</html>

10. Program to create a rectangle and animate increase and decrease the

size of rectangle.

<!DOCTYPE html>

<head>

<title>Animated SVG Rectangle</title>

<style>

@keyframes increaseSzie{

0%{width:300px;height:100px;}

50%{width:500px;height:300px;}

100%{width:300px;height:100px;}

}

.rect{

fill:#cc6ec4;

stroke:black;

stroke-width:5;

}

</style>

</head>

<body>

<h1>Animated SVG Rectangle</h1>

<svg width="600" height="600px">

<rect class="rect" x="50" y="50" width="300" height="100" />

</svg>

<script>

const rectangle=document.querySelector(".rect");

function startIncreaseSize()

{

rectangle.style.animation='increaseSzie 2s infinite';

}

function stopAnimation()

{

rectangle.style.animation="";

}

rectangle.addEventListener('mouseover',startIncreaseSize);

rectangle.addEventListener('mouseout',stopAnimation);

</script>

</body>

</html>

Comments

Post a Comment

Popular posts from this blog

 3. Find the Sum of n Natural Numbers n = int(input("Enter number: ")) sum = 0 while n > 0: sum = sum + n n = n - 1 print("The sum of natural numbers:", sum) 4. Display Multiplication Table n = int(input("Enter number: ")) for i in range(1, 11): c = n * i print(n, '*', i, '=', c) 5. Check if a Given Number is Prime or Not n = int(input("Enter number: ")) if n > 1: for i in range(2, n): if (n % i) == 0: print(n, "is not a prime number") break else: print(n, "is a prime number") else: print(n, "is not a prime number") 6. Implement Sequential Search def sequential_search(dlist, item): pos = 0 found = False while pos < len(dlist) and not found: if dlist[pos] == item: found = True else: pos = pos + 1 return found, pos print(sequential_search([11, 23, 58, 31, 56, 77, 45, 12, 65, 19], 31)) 7. Create a Calculator Program def addition(num1, num2): return num1 + num2 def subtraction(num1, num2): return...
Read more
 3. Program to search an element using linear search technique #include <stdio.h> #include<conio.h> void main() { int a[100],i,n, key,c=0; clrscr(); printf("Enter the size of array : "); scanf("%d",&n); printf("\nEnter the array elements:\n"); for(i=0;i<n;i++) { scanf("%d",&a[i]); } printf("\nEnter the elements to be searched : "); scanf("%d",&key); for(i=0;i<n;i++) { if(key==a[i] ) { c=1; break; } } if(c==1) printf("\nSearch is successful"); else printf("\nSearch is unsuccessful"); getch(); } 5. Program to implement Stack #include<stdio.h> #include<conio.h> #define N 5 int top=-1; int s[N]; push(); pop(); display(); void main() { int ch; clrscr();  do { printf("\nEnter your choice :1-push() 2-pop() 3-display() : "); scanf("%d",&ch); switch(ch)  { case 1:push();  break; case 2:pop(); break;  case 3:di...
Read more