<!
--Practical no:3-->
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem{
position:relative;
left: 50%;
-webkit-transform:translateX(-20%);
-ms-transform:translateX(-20%);
transform:translateX(-20%);
#test{
width: 100px;
height: 100px;
margin: 10px auto;
}
</style>
<script type="text/javascript">
function drawShape(){
var canvas=document.getElementById("mycanvas");
if(canvas.getContext){
var ctx=canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}else{
alert('You need a safari on FIrefox 1.5+ to see this demo')
}
}
</script>
<title>SVG</title>
<meta charset="UTF-8"/></head>
<body id="test" onload="drawShape();">
<canvas id="mycanvas"> </canvas>
<h2 align="center">HTML5 SVG CIRCLE</h2>
<svg id="svgelem" height="200">
<circle id ="redcircle" cx="50" cy="50" r="50" fill="red"/></svg>
<h2 align="center">HTML5 SVG LINE</h2>
<svg id="svgelem" height="200">
<line x1="0"line y1="0"line x2="200"line y2="1000" style="stroke:blue"
/></svg>
<h2 align="center">HTML5 SVG RECTANGLE</h2>
<svg id="svgelem" height="200">
<rect id ="redrect" width="300" height="100"fill="brown"/></svg>
<h2 align="center">HTML5 SVG POLYLINE</h2>
<svg id="svgelem" height="200">
<polyline points="0,0,20,40,60,80" fill="red"/></svg>
<h2 align="center">HTML5 SVG POLYGON</h2>
<svg id="svgelem" height="200">
<polygon points="200,100,300,400,600,800" fill="aqua"/></svg>
<h2 align="center">HTML5 SVG ELLIPSE</h2>
<svg id="svgelem" height="200">
<ellipse cx="100" cy="50" rx="100" ry="50" fill=" green"/></svg>
</body>
</html>
<!--practical no 1-->
<!DOCTYPE html>
<html>
<body>
<section>
<div>
<h2> Example of video</h2>
<video src="" width="300"height="200"controls autoplay>
Browser not suported
</video>
</div>
</section>
<section>
<div>
<hr>
<h2> Example of Audio </h2>
<audio src="" controls autoplay>
Brouse not suported
</audio>
</div>
</section>
</body>
</html>
