PART-A
1.Demontrate the use of font family ,font varient,font style and font
size order list and unordered list
<!DOCTYPE html>
<html>
<head>
<style>
body{background-color:powder blue;}
h1{color:red;font-family:"timer new roman";times,serif;}
p{color:blue;font-family:"lucida console","couries new",monospace;font-size:15px}
p.small{font-variant:small-caps:}
p.a{font-style:normal}
p.b{font-style:italic;}
p.c{font-style:oblique;}
</style>
<body>
<h1>html and css</h1>
<p>html(the hyper text markup language) and (cscoding style sheets)are two of the core
technologies for building web page,html provides
the structure of page,variety of device.along with grafics basis of building web pages and
applications</p>
<h1>what is html?</h1>
<p class="small">
html is the language for describing the structure of web page</p>
<h1>what is css?</h1>
<p class= "a">
css is hthe language for describing the presentation of web pages,including colors,layout,and fants.it
allows one to adopt the presentation
to different types of devices,such as large screen,small screeen,or printers</p>
<p class="b">
css is independent of html and can be used with only xml-basedmarkup language.the separation of
html from css makes it caries to maintain
sites,share style sheets across pages,and tailor pages to diffente environments</p>
<p class="c">
this is referred as the separation of structure(or:content)from presentation</p>
</body>
</html>
2. A- ORDER LIST
<html>
<head>
<title>order list tag</title>
<head>
<body>
<h3 align="center" style="color:red">To illustrate order list tags </h3>
<hr color="red">
<h4> UPPERCASE LETTERS LIST:</h4>
<ol type="A">
<li>apple</li>
<li>banana</li>
<li>lemons</li>
<li>oranges</li>
</ol>
<h4> lowercase letters list:</h4>
<ol type="a">
<li>apple</li>
<li>banana</li>
<li>lemons</li>
<li>oranges</li>
</ol>
<h4> Roman number list:</h4>
<ol type="I">
<li>apple</li>
<li>banana</li>
<li>lemons</li>
<li>oranges</li>
</ol>
<h4> lowercase roman number list:</h4>
<ol type="i">
<li>apple</li>
<li>banana</li>
<li>lemons</li>
<li>oranges</li>
</ol>
</body>
</html>
B.UNORDER LIST
<html>
<head>
<title>unorder list tag</title>
<head>
<body>
<h3 align="center" style="color:red">To illustrate unorder list tags </h3>
<hr color="red">
<h4> disc bullets list:</h4>
<ul type="disc">
<li>apple</li>
<li>banana</li>
<li>lemons</li>
<li>oranges</li>
</ul>
<h4> circle bullets list:</h4>
<ul type="circle">
<li>apple</li>
<li>banana</li>
<li>lemons</li>
<li>oranges</li>
</ul>
<h4> square bullets list:</h4>
<ul type="square">
<li>apple</li>
<li>banana</li>
<li>lemons</li>
<li>oranges</li>
</ul>
</body>
</html>
3.create gradient using css
<!DOCtype html>
<html>
<head>
<style>
#grad1{
height:200px;
background-color:red;
background-image:linear-gradient(to right,red,yellow);
#grad2{
hieght:200px;
background-color:red;
background-image:linear-gradient(to bottom,blue,white);
#grad3{
background-image:linear-gradient(180deg,white,green);
</style>
</head>
<body>
<div id="grad1">
first division of webpage
<h1>linear gradient left to right</h1>
<p>this linear gradient starts red at the left,trasitioning to yellow(to the right);
</p>
<div id="grad2">
secon division of webpage
<h1>linear gradient=diagonal</h1>
<p>this linear gradient starts red at top left,transitioning to yellow (at bottom right);
</p>
<div id="grad3">
third division of webpage
<h1>linear gradient-180deg staight line </h1>
<p>instead of get the gradation in different angles</p>
</div>
</body>
</html>
4.Demonstrate css animation properties
a.Delay b.direction c.duration
<!DOCTYPE html>
<html>
<style>
div.delay-0{
animation-name:move;
animation-delay:0s;
animation-duration:3s;
animation-fill-made:forword;
animation-direction:normal;
div.delay-1500{
animation-name:move;
animation-delay:1500s;
animation-duration:3s;
animation-fill-made:forword;
animation-direction:reverse;
div.delay-5{
animation-name:move;
animation-delay:5s;
animation-duration:3s;
animation-fill-made:forword;
animation-direction:alternate;
div.delay-neg-500{
animation-name:move;
animation-delay:-500ms;
animation-duration:3s;
animation-fill-made:forword;
animation-direction:alternate-reverse;
@keyframes move{
from{ left:0px;}
to{left:400px;}
div{
width:500px;
height:50px;
background-color:blue;
border-radius:25px;
position:relative;
</style>
</head>
<body>
<h1>animation-delay direction and duration </h1>
<p>animation-delay:0s;(default)</p>
animation delay of 0 seconds and the direction is normal
<div class="delay-0"></div>
<p>animation-delay:1500ms</p>
animation delay of 1500 seconds and the direction is reverse
<div class="delay-1500"></div>
<p>animation-delay:5s;</p>
animation delay of 5 seconds and the direction alternates between normal and reverse starting
forwords.
<div class ="delay-5"></div>
<ps>animation-delay:-500ms;</p>
animation delay of -500 seconds and the direction alternates starting backwords.
<div class="delay-neg-500"></div>
</body>
</html>
5.Demonstrate keyframes
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 65px;
background-color: blue;
position:relative;
animation: mymove 5s infinite;
@keyframes mymove {
from {
top: 100px;
to {
top: 300px;
</style>
</head>
<body>
<h1>the @keyframes rule</h1>
<div></div>
</body>
</html>
6.Demonstrate css transition and transformation.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: orange;
transition-property: width;
transition-duration: 5s;
transition-timing-function: linear;
transform: rotate(20deg); /* Corrected rotation value */
div:hover {
width: 300px;
</style>
</head>
<body>
<h1>The transition-duration property</h1>
<p>Hover over the div element below to see the transition effect (the transition effect will last for 5
seconds):</p>
<div></div>
</body>
</html>
7.Program to turn on bulb or turn of
<!DOCTYPE html>
<html>
<head>
<style>
button {
padding: 10px;
margin: 60px;
background-color: orange;
</style>
<script>
function light(value) {
var pic;
if (value === 0) {
pic = "of.png";
} else {
pic = "on.png";
document.getElementById('bulb').src = pic;
</script>
</head>
<body>
<img id="bulb" src="of.png">
<br>
<button onclick="light(1)">Turn On</button>
<button onclick="light(0)">Turn Off</button>
</body>
</html>
PART-B
1.Program to draw rectangle ,line polygon,polyline using svg
<!DOCTYPE html>
<body>
<h1>rectangle</h1>
<svg width="400" height="110">
<rect width="300" height="100"style="fill:orange;stroke-width:3;stroke:rgb(0,0,0)"/>
</svg
<br>
<h1>line</h1>
<svg height="210" width="500">
<line x1="0" y1="0" x2="100" y2="100"
style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
<br>
<h1>polygon</h1>
<svg height="210" width="500">
<polygon points ="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>
<br>
<h1>polyline</h1>
<svg height="200" width="500">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"style="fill:none; stroke:black;stroke-
width:3">
</svg>
</body>
</html>
2.program to draw linear and radial gradient ellipse
<!DOCTYPE html>
<html>
<body>
horizontal linear gradient
<br>
<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"/>
</lineargradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"/>
</svg>
<br>
vertical linear gradient
<br>
<svg height="150" width="400">
<defs>
<lineargradient id="grad2" x1="0%" y1="0%" x2="160%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
</lineargradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)"/>
</svg>
<br>
radial gradient
<br>
<svg height="150" width="500">
<defs>
<radialgradient id="grad3" 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(#grad3)"/>
</svg>
</body>
</html>
3.Program to draw a star using svg
<!DOCTYPE html>
<html>
<body>
<h1>polygon star with fill</h1>
<svg height="210" width="500">
<polygon points = "100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width: 5;fill-rull:nonzero;"/>
</svg>
<br>
</body>
</html>
4.Program to draw line ,circle ,rectangle ,gradient,text using canvas.
<!DOCTYPE html>
<html>
<body>
<canvas id="mycanvas" width="500" height="200"
style="border:1px solid #c3c3c3;">
</canvas>
<script>
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
/*draw a line*/
ctx.moveTo(200, 150);
ctx.lineTo(200, 100);
ctx.stroke();
/*draw a circle*/
ctx.beginPath();
ctx.arc(210, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
//create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
//fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(75, 75, 100, 80);
</script>
</body>
</html>
5.program to demonstrate translation ,rotation ,scaling and transform.
<!DOCTYPE html>
<html>
<body>
<canvas id="mycanvas" width="300" height="150" style="border:1px solid orange;">
</canvas>
<script>
var c= document.getElementById("mycanvas");
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);
</script>
</body>
</html>
5.a -rotation
<!DOCTYPE html>
<html>
<body>
<h1>Rotation</h1>
<canvas id="mycanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
your browser does not support the HTML5 canvas tag.
</canvas>
<script>
let c=document.getElementById("mycanvas");
let ctx = c.getContext("2d");
ctx.rotate(20*Math.PI/180);
ctx.fillRect(50,20,100,50);
</script>
</body>
</html>
5.b-scaling
<!DOCTYPE html>
<html>
<body>
<h1>Scaling</h1>
<canvas id="mycanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
your browser does not support the html5 canvas tag.
</canvas>
<script>
let c=document.getElementById("mycanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
</script>
</body>
</html>
5.c-tranform
<!DOCTYPE html>
<html>
<body>
<h1>Transform</h1>
<canvas id="mycanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
your browser does not support the html5 canvas tag.
</canvas>
<script>
let c=document.getElementById("mycanvas");
let ctx=c.getContext("2d");
ctx.fillstyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
</script>
</body>
</html>
6Program to demonstrate bezier and quadratic
.a-bezier
<!Doctype html>
<html>
<body>
<canvas id="mycanvas" width="300" height="150"
style="border:1px solid #d3d3d3;">
your browser does not support the html5 canvas tag.</canvas>
<script>
let c=document.getElementById("mycanvas");
let ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
</script>
</body>
</html>
6.b-quadratic
<!Doctype html>
<html>
<body>
<canvas id="mycanvas" width="300" height="150"
style="border:1px solid #d3d3d3;">
your browser does not support the html5 canvas tag.</canvas>
<script>
let c=document.getElementById("mycanvas");
let ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();
</script>
</body>
</html>
7.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
canvas {
border: 1px solid #d3d3d3;
background-color: #f1f1f1;
</style>
</head>
<body onload="startGame()">
<script>
var myGamePiece;
function startGame() {
myGamePiece = new component(30, 30, "red", 200, 120);
myGameArea.start();
var myGameArea = {
canvas: document.createElement("canvas"),
start: function () {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
},
clear: function () {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
};
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function () {
var ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
};
this.newPos = function () {
this.x += this.speedX;
this.y += this.speedY;
};
function updateGameArea() {
myGameArea.clear();
myGamePiece.newPos();
myGamePiece.update();
function moveUp() {
myGamePiece.speedY = -1;
}
function moveDown() {
myGamePiece.speedY = 1;
function moveLeft() {
myGamePiece.speedX = -1;
function moveRight() {
myGamePiece.speedX = 1;
function clearMove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
</script>
<div style="text-align: center; width: 480px;">
<button onmousedown="moveUp()" ontouchstart="moveUp()">UP</button>
<br><br>
<button onmousedown="moveLeft()" ontouchstart="moveLeft()">LEFT</button>
<button onmousedown="moveRight()" ontouchstart="moveRight()">RIGHT</button>
<br><br>
<button onmousedown="moveDown()" ontouchstart="moveDown()">DOWN</button>
</div>
<p>If you click a button, the red square will start moving. The movement will stop when you release
the button.</p>
<p>We have added the <code>ontouchstart</code> event on the buttons to make this example work
for touch devices.</p>
</body>
</html>
8.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
canvas {
border: 1px solid #d3d3d3;
background-color: #f1f1f1;
</style>
</head>
<body onload="startGame()">
<script>
var myGamePiece;
var myObstacles=[];
function startGame() {
myGamePiece = new component(30, 30, "red", 10, 120);
myGameArea.start();
var myGameArea = {
canvas: document.createElement("canvas"),
start: function () {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo=0;
this.interval = setInterval(updateGameArea, 20);
},
clear: function () {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop:function(){
clearInterval(this.interval);
};
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function () {
var ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
};
this.newPos = function () {
this.x += this.speedX;
this.y += this.speedY;
};
this.crashWith=function(otherObj){
var myleft=this.x;
var myRight=this.x+(this.width);
var myTop=this.y;
var mybottom=this.y+(this.height);
var otherleft=otherObj.x;
var otherRight=otherObj.x+(otherObj.width);
var otherTop=otherObj.y;
var otherBottom=otherObj.y+(otherObj.height);
var crash=true;
if((mybottom<otherTop)||(myTop>otherBottom)||(myRight<otherleft)||(myleft>otherRight)){
crash=false;
return crash;
};
function updateGameArea(){
var x,height,gap,minHeight,maxHeight,minGap,maxGap;
for(i=0;i<myObstacles.length;i+=1){
if(myGamePiece.crashWith(myObstacles[i])){
myGameArea.stop();
return;
myGameArea.clear();
myGameArea.frameNo+=1;
if(myGameArea.frameNo==1||everyInterval(100)){
x=myGameArea.canvas.width;
minHeight=20;
maxHeight=200;
height=Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
minGap=50;
maxGap=200;
gap=Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
myObstacles.push(new component(10,height,"green",x,0));
myObstacles.push(new component(10,x-height-gap,"green",x,height+gap));
for(i=0;i<myObstacles.length;i+=1){
myObstacles[i].x+=-1;
myObstacles[i].update();
myGamePiece.newPos();
myGamePiece.update();
function everyInterval(n){
if((myGameArea.frameNo/n)%1==0){return true;}
return false;
function moveUp() {
myGamePiece.speedY = -1;
}
function moveDown() {
myGamePiece.speedY = 1;
function moveLeft() {
myGamePiece.speedX = -1;
function moveRight() {
myGamePiece.speedX = 1;
function clearMove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
</script>
<div style="text-align: center; width: 480px;">
<button onmousedown="moveUp()" ontouchstart="moveUp()">UP</button>
<br><br>
<button onmousedown="moveLeft()" ontouchstart="moveLeft()">LEFT</button>
<button onmousedown="moveRight()" ontouchstart="moveRight()">RIGHT</button>
<br><br>
<button onmousedown="moveDown()" ontouchstart="moveDown()">DOWN</button>
</div>
<p>If you click a button, the red square will start moving. The movement will stop when you release
the button.</p>
<p>We have added the <code>ontouchstart</code> event on the buttons to make this example work
for touch devices.</p>
</body>
</html>
