What is HTML5
HTML5 adds a new feature.There are many simple, such as extra Components (Articles, sections, statistics, and Many more) that were used to describe Content Others are very complicated and helpful In creating powerful web applications You need to create web pages before you can rate HTML5 complex features.
-------------------------------------------------------------------------------
HTML5 Support in chrome,firefox,Opera
------------------------------------------------------------------------------
this tag is use in syntax
<meta charset="UTF-8">
SVG -- Scalable Vector Graphics
------------------------------------------------------------------------------------------
<html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h3>HTML5 SVG Circle</h3>
<svg id="svgelem" height="200">
<circle id="circle" cx="50" cy="50" r="50" fill="blue" />
</svg>
</body>
</html>
OUTPUT
---------------------------------------------------------------------------------------------------------------
<html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Rectangle</h2>
<svg id="svgelem" height="200">
<rect id="redrect" width="400" height="150" fill="orange" />
</svg>
</body>
</html>
OUTPUT
----------------------------------------------------------------------------------------------------------------
<html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Polygon</h2>
<svg id="svgelem" height="200">
<polygon points="50,10 300,20, 170,150" fill="black" />
</svg>
</body>
</html>
OUTPUT
-----------------------------------------------------------------------------------------------
<html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Gradient Ellipse</h2>
<svg id="svgelem" height="200">
<defs>
<radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%"
fy="50%">
<stop offset="0%" style="stop-color:rgb(300,300,300); stopopacity:
0"/>
<stop offset="100%" style="stop-color:rgb(250,10,100); stopopacity:
1"/>
</radialGradient>
</defs>
<ellipse cx="100" cy="50" rx="100" ry="50" style="fill:url(#gradient)" />
</svg>
</body>
</html>
OUTPUT
---------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
#svgelem{
position: relative;
left: 50%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2 align="center">HTML5 SVG Star</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,5 20,180 190,10 10,60 160,150" fill="purple"/>
</svg>
</body>
</html>
OUTPUT
No comments:
Post a Comment