HTML5 Examples – HTML5 Tutorial Examples, HTML5 Reference Examples

Published on: September 9, 2014   Last Updated on : June 7, 2018   Posted By : WebDesignReference

HTML5 Doctype Example:

Doctype In HTML5 : <!DOCTYPE html> is used for creating a HTML5 document, It is easy to use other from Xhtml.

Example : Doctype in HTML5 Document.

< !DOCTYPE html > /* Doctype Definition*/
< 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=”http://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.

Example : Google Maps in HTML

<!DOCTYPE html>
<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.

Example : SVG Graphics in HTML

<!DOCTYPE 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.

Example : Canvas Graphics in HTML

<!DOCTYPE html>
<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>

Also Related to HTML5

 

Leave a Reply