html



HTML
                                                    PART-A    

 

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


<!DOCTYPE html>
<html>
<head>
<meta name="view point" content="width"=device width, initial-scale="1">
<title> Login Page </title>
</head>
<body>
<center><h1> Student Login Form </h1> </center>
<form> <center>
<div class ="container">
<lable>username:</lable>
<input type ="text" place holder ="enter the username" name="username" requried> </div><div>
<lable> password:</lable>
<input type= "password" place holder ="enter password" name="password" requried></div><BR/>
<button type="submit"> login</button>
<input type="checkbox" checked ="checked"> Remember me
<button type ="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</title>
<style>
#mainContent
{
background-color:#A2BFCE;
border-radius:4px;
padding:10px;
width:600px;
height:300px;
}
.cloud
{
position:relative;
}
#bigCloud
{
animation:bobble 2s infinite;
margin-left:100px;
margin-top:15px;
}
@keyframes bobble
{
0%
{
transform:translate3d(50px,40px,0px);
animation-timing-function:ease-in;
}
0%
{
transform:translate3d(50px,60px,0px);
animation-timing-function:ease-out;
}
100%
{
transform:translate3d(50px,40px,0px);
}
} 

</style>
</head>
<body>
<div id="mainContent">
<img id="bigCloud" class="cloud" height="154" src="https://www.kirupa.com/images/bigCloud.png"
width="238">
</div>
</body>
</html>      











Program No.3: Program to demonstrate a keyframe animation.


<!DOCTYPE html>
<html>
<head>
<style>
h1{
color:black;
text-align:center;
}
div {
position :relative;
animation:jtp 7s infinite;
}
@keyframes jtp {
0%{
top:100px;
width:0px;
font-size:10px;
transform:translate(0px)scale(1.4)rotate(80deg);
}
25%{
top:100px;
width:50px;
background-color:yellow;
font-size:20px;
transform:translate(100px)scale(1.3)rotate(60deg);}
50%{
top:100px;
width:50px;
background-color:black;
font-size:10px;
transform:translate(200px)scale(1.2)rotate(40deg);}
75%{
top:100px;
width:50px;
background-color:blue;
font-size:40px;
transform:translate(400px)scale(1.1)rotate(20deg);}
100%{
top:50px;
width:60px;
background-color:red;

font-size:10px;
transform:translate(400px)scale(1)rotate(0deg);
} }
</style>
</head>
<body><div>
<h1> MULTIMEDIA AND ANIMATION </h1>
</div>
</body>
</html>









Program No.4: Program to demonstrate A Font style, font weight and font size
properties using CSS.


<!DOCTYPE html>
<html>
<head>
<style>
p.a{
font:50px Arial,sans-serif;
}
p.b{
font:italic small-caps bold 40px/30px Geroia,serif;
}
</style>
</head>
<body>
<h1> the font property</h1>
<p class="a">Multi Media</p>
<p class="b">Animation</p>
</body>
</html>





Program No.5: Program to demonstrate multiple animation.


<!DOCTYPE html>
<html>
<head>
<style>
div {
width :100px;
height :100px;
background-color :red;
position :relative;
animation-name :example;
animation-duration :4s;
}
@keyframes example {
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> MULTIPLE ANIMATION </h1>
<div> </div><p> <b> note: when animatin is finnished,it goes back to its originl style.</p>

</body>

<html>







Program No.7: Program to Demonstrate Long hand properties in CSS.


<!DOCTYPE html>
<html>
<head>
<style>
p
{
font-style : italic;
font-variant : normal;
font-weight :100;
font-size : 50px;
font-family : Arial;
color : red;
}
</style>
</head>
<body>
<p> Welcome To Multimedia And Animation </p>
</body>
</html>



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


<!DOCTYPE html>
<html>
<style>
P
{
font : italic normal bold 100px century;
}
</style>
</head>
<body>
<p> Welcome to Multimedia and Animation </p>
</body>
</html>





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


<!DOCTYPE html>
<html>
<head>
<title>
CSS |animation-direction Property
</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;
}
@keyframes text {
from {
margin-left:60%;
}to {
margin-left:0%;
}}
</style>
</head>
<body>
<h1>Multimedia And Animation</h1>
<h2>animation-direction property</h2>
<h3 id="one">Animation.....</h3>
</body>
</html>



Program No.10: Write JavaScript Program to show ON/OFF Demo.


<html>
<head>
<title> LIGHT ON AND OFF</title>
<style>
.light
{
width: 150px;
height: 150px;
border-radius: 100px;
margin-bottom: 30px;
border: 1px solid #000;
position: relative;
top: 30px
}
.on1
{
background-color: red;
}
.lightbottom
{
border: 2px solid #000;
width: 80px;
height: 40px;
border-top: none;
background-color: gray;
margin-bottom: 30px;
}
</style>
</head>
<body>
<center> <h1> Light ON And OFF </h1> </center>
<center>
<div class ="light">
</div>
<div class ="lightbottom">
</div>
<button id="on" Onclick="LightOn()"> ON </button>
<button class="off" Onclick="LightOff()"> OFF </button>
</center>
</body>
<script>

function LightOn()
{
document.querySelector('.light').classList.add('on1');
}
function LightOff() {
document.querySelector('.light').classList.remove('on1');
}
</script>
</html>









                                                PART-B

 

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

<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color="green">Welcome To Multimedia And Animation</h1>
<svg height="400" width="400">
<circle cx="150" cy="150" r="100" stroke="gray"
stroke-width="2" fill="green" />
</svg>
<svg height="300" width="300">
<circle cx="150" cy="150" r="100" stroke="green"
stroke-width="2" fill="blue" />
</svg>
</center>
</body>
</html>







Program No.2: Program to Demonstrate SVG (Scalable Vector Graphics) Ellipse.
 

<html>
<title>SVG Ellipse</title>
<body>
<h1>Sample SVG Ellipse Image</h1>
<svg width="800" height="800">
<g>
<text x="0" y="15" fill="black">Ellipse #1: without opacity.</text>
<ellipse cx="100" cy="100" rx="90" ry="50"
stroke="black" stroke-width="3" fill="rgb(0,0,0)"></ellipse>
</g>
</svg>
</body>
</html>



            

 

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

<html>
<head>
<style>
#svgelem{
left: 50%;
-webkit-transform: traslate X(-40%);
-ms-transform: translate X(-40%);
transform: translate X(-40%);
}
</style>
<title>SVG </title>
<meta charset="utf-8"/>
</head>
<body>
<h2>SVG STAR</h2>
<svg id= "svgelem" height= "200" xmlns= "http://WWW.W3.org/2000/svg">
<polygon points="100,10 40, 180 190, 60 10,60 160,180" fill="red"/>
</svg>
</body>
</html>     

 

 

 

Program No.4: Program to Demonstrate “Stroke Text ()” method using HTML
Canvas.
 

<!DOCTYPE html>
<html>
<body>
<canvas id= "myCanvas" width="300" height="150" style= "border:1px solid #d3d3d3;">
your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "20px Gerogia";
ctx.strokeText("Hello World!!",10 , 50);
ctx.font = "30px Verdana";
var gradient = 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("Welcome to BCA ", 10, 90);
</script>
</body>
</html>

 

             

Program No.5: Program to demonstrate BezireCurveTo() method using HTML
canvas.
 

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;" >
your browser does not supoprt the HTMLs canvas tag.</canvas>
<script>
var c = 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.
 

<!DOCTYPE html>
<html>
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const patterns = ['solid', 'dashed', 'dotted'];
const colors = ['red', 'green', 'blue'];
const startX = 50;
const startY = 50;
const endX = 750;
const endY = 550;
const patternHeight = 30;
const patternGap = 40;
for (let i = 0; i < patterns.length; i++) {
const pattern = patterns[i];
for (let j = 0; j < colors.length; j++) {
const color = colors[j];
const offsetY = (patternHeight + patternGap) * i;
const y = startY + offsetY;
ctx.strokeStyle = color;
ctx.lineWidth = 3;
if (pattern === 'dashed') {
ctx.setLineDash([10, 5]);
} else if (pattern === 'dotted') {
ctx.setLineDash([3, 3]);
} else {
ctx.setLineDash([]);
}
ctx.beginPath();
ctx.moveTo(startX, y);     

ctx.lineTo(endX, y);
ctx.stroke();
ctx.setLineDash([]); // Reset line dash
}
}
</script>
</body>
</html>







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

<!DOCTYPE HTML>
<body>
<h1> Gradient <h1>
<canvas id = "myCanvas" width="200" height="100" style="border:1px solid gray;"></canvas>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
const grd = 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>





Program No.8: Program Demonstrate Text Shadow using HTML Canvas.
 

<!DOCTYPE html>
<html>
<head>
<script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.textAlign="start";
ctx.fillStyle="red";
ctx.font="25px verdana";
ctx.shadowColor="black";
ctx.shadowOffsetX=2;
ctx.shadowOffsetY=2;
ctx.fillText("Believe Shadow",10,20);
ctx.shadowBlur =2;
ctx.fillText("Believe",10,60);
}}
</script>
</head>
<body onload="init();">
<canvas id="canvas" width="300" height="100" style="border:2px solid #d3d3d3"></canvas><br>
</body></html>



Program No.9: Program to Demonstrate Source-over, Source-in, Source-out
Properties for composition using HTML Canvas.
 

 <html>
<head>
<script type = "text/javascript">
var compositeTypes = ['source-over', 'source-in', 'source-out'];
function drawShape() {
for (i=0 ; i<compositeTypes.length;i++) {
var label = document.createTextNode(compositeTypes[i]);
document.getElementById('lab' +i).appendChild(label);
var ctx = 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>
<body onload = "drawShape();">
<table border = "1" align = "center">
<tr>
<td><canvas id = "tut0" width = "125" height = "125"></canvas></br>
<label id = "lab0"></label>
</td>
<td><canvas id = "tut1" width = "125" height = "125"></canvas></br>
<label id = "lab1"></label>
</td>
<td><canvas id = "tut2" width = "125" height = "125"></canvas></br>
<label id = "lab2"></label>
</td>
</tr>
</table>
</body></html>





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

 <!DOCTYPE html>
<html>
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const rectWidth = 100;
const rectHeight = 50;
let rectX = (canvas.width - rectWidth) / 2;
let rectY = (canvas.height - rectHeight) / 2;
let increasing = true;
let rectScale = 1;
function animate()
{
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;
const scaledHeight = rectHeight * rectScale;
rectX = (canvas.width - scaledWidth) / 2;
rectY = (canvas.height - scaledHeight) / 2;
ctx.fillStyle = 'blue';

ctx.fillRect(rectX, rectY, scaledWidth, scaledHeight);
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>




Comments

Popular posts from this blog
March 15, 2024
Program 1: Write c# program to show the machine details like machine name, operating system, version, physical memory and program calculate the time since last boot up. using System; class Program { static void Main(string[] args) { Console.WriteLine("machine name is:"+Environment.MachineName); Console.WriteLine("\ncurrent operating systeem is:"+Environment.OSVersion); Console.WriteLine("\nexecuting version of visual studio .net is"+Environment.Version); Console.WriteLine("\ncurrent directory is:"+Environment.CurrentDirectory); Console.WriteLine("\nyou have{0} byes of RAM in your system", + Environment.WorkingSet); Console.WriteLine("\nthe system time since last bootup is:{0} minutes", (Environment.TickCount)/1000/60); Console.WriteLine("\nlogical drives in the system are :"); String[] drives=Environment.GetLogicalDrives(); for (int i = 0; i < drives.Length; i++) Console.WriteLine("drives{0}:{
READ MORE
PYTHON
August 01, 2024
#Program 2: Demonstrate use of advanced regular expressions for data validation. import matplotlib.pyplot as plt student_performance = ["excellent", "good", "average", "poor"] student_values = [15, 20, 40, 10] plt.subplot(1, 2, 1) plt.pie(student_values, labels=student_performance, startangle=90, explode=[0.2, 0.1, 0, 0], shadow=True, colors=["violet", "indigo", "blue", "orange"]) marks = [90, 92, 40, 60, 55, 44, 30, 20, 10, 54, 74, 82] grade_interval = [0, 35, 70, 100] plt.subplot(1, 2, 2) plt.title("....STUDENT GRADE...") plt.hist(marks, bins=grade_interval, facecolor="cyan", rwidth=0.7, histtype="bar", edgecolor="black") plt.xticks([0, 35, 70, 100]) plt.xlabel("PERCENTAGE") plt.ylabel("No. of STUDENTS") plt.show() # program 3: demonstrate use of List. print("program for built in methods of list\n") animal=['Cat', 'Dog',

Popular posts from this blog

devil

Python Programming Lab PART-A Program No.1: Program to check if a number belongs to the Fibonacci Sequence. N = int(input("Enter a number : ")) f3 = 0 f1 = 1 f2 = 1 if ( N == 0 ) or ( N == 1 ) :     print("The given number belongs to fibonacci series") else :     while f3 < N :         f3 = f1 + f2         f2 = f1         f1 = f3     if f3 == N :         print("The given number belongs to fibonacci series")     else :         print("The given number does not belong to fibonacci series") OUTPUT: Enter a number : 5 The given number  belongs to fibonacci series Enter a number : 17 The given number does not belongs to fibonacci series Program No.2: Program to solve Quadratic Equations. import math def findRoots ( a, b, c ) :          D = b * b - 4 * a * c     if D > 0:         print(" re...
Read more

A2 python

Program1: check whether the number is belongs to Fibonacci series or not PART A n=int(input("Enter the number: ")) c=0 a=1 b=1 if n==0 or n==1: print("Yes the number belongs to Fibonacci series") else:  while c<n:  c=a+b  b=a  a=c  if c==n:  print("Yes,the number belongs to Fibonacci series")  else: print("No, the number not belongs to Fibonacci series") ==========OUTPUT========= Enter the number: 5 Yes the number belongs to fibonacci series Enter the number: 4 No the number not belongs to fibonacci series SNJPSNMS Trust’s Degree College,Nidasoshi Python Programming Lab Program 2: Solve Quadratic Equations #import complex math module import cmath print("Enter the value of a") a=float(input()) print("Enter the value of b") b=float(input()) print("Enter the value of c") c=float(input()) #calculate the discriminant d=(b**2)-(4*a*c) #find the solution soln1=(-b-cmath.sqrt(d))/(2*a) soln2=(-b+cmath.sqrt(d))/(2*a) #prin...
Read more