HTML5 Examples: In this page includes HTML5 Reference Examples, HTML5 Code Examples, HTML5 Doctype Example, HTML5 Element Examples, HTML5 Media Examples, HTML Canvas Examples, HTML SVG Examples, HTML Attributes Examples, etc. Follow and Like us on Facebook, Twitter, LinkedIn, Pinterest for the latest posts.
HTML5 Doctype Example
HTML Doctype: <!DOCTYPE html> is used for creating a HTML5 document, It is easy to use other from Xhtml.
< html >
< body >
< h1 > My First Heading < /h1 >
< /body >
< /html >
HTML5 Attributes Example:
An attribute is an additional behavior or property of an element. It is specified within an element like title attribute, language attribute, Href attribute, etc.
Example: <a href=”https://www.webdesignreference.com/” title=”home-link”>This is a home page link</a>
Here “Href” and “title” are additional behaviour of an element.
Google Maps Example
Google Maps: Google Maps API allows to display maps on a web page.<html>
<head>
<title> Google Maps in HTML </title>
</head>
<body>
<script>
function myMap() {
var mapProp= {
center:new google.maps.LatLng(50.508742,-0.110850),
zoom:5,
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script><script src=”https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap”> </script>
<div class=”googleMap” style=”width:100%;height:300px;”> Your map display here. </div>
</body>
</html>
SVG Example:
SVG stands for Scalable Vector Graphics. SVG defines vector-based graphics in XML format.
The HTML <svg> element allows you to display a vector based graphics in HTML.<html>
<head>
<title> SVG Example </title>
</head>
<body>
<h1> SVG Example 1 </h1>
<svg width=”100″ height=”100″> <circle cx=”50″ cy=”50″ r=”40″ stroke=”blue” stroke-width=”4″ fill=”green”/> Sorry, your browser does not support inline SVG. </svg>
</body>
</html>
HTML Canvas Example
The HTML <canvas> element can be used draw graphics in HTML. The HTML <canvas> element is used to draw graphics, on the fly, using scripting. With the use of JavaScript to actually draw the graphics on a web page. Canvas element has several methods for drawing paths, boxes, circles, text, and adding images on a web page.
<html>
<head>
<title> Canvas Example </title>
</head>
<body>
<h1> Canvas Example 1 </h1>
<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #333;”> Your browser does not support the HTML5 canvas tag. </canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"blue");
grd.addColorStop(1,"green");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script></body>
</html>
Web Design Reference Guide Android App for Website Developers
Web Design Reference Guide Android App: Web Design Tutorial App is a tutorial and reference-based app. It provides Web Design Tutorial and Reference to Web Designers or Web Developers to grow their Web Development skills.