html5 demo

HTML5 Demo

HTML5 is the latest version of Hypertext Markup Language, the standard markup language used to structure content on the web. It introduces several new features and improvements over previous versions, making it more powerful and versatile. In this article, we will explore some HTML5 demos and showcase the code examples for each feature.

1. Canvas

Canvas is a powerful HTML5 element that allows you to draw graphics on the web page using JavaScript. It provides a 2D drawing API that can be used for creating animations, games, charts, and more.

<canvas id="myCanvas" width="200" height="100"></canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
</script>

In the above example, we create a canvas element with an id "myCanvas" and set its width and height. We then access the canvas using JavaScript and obtain its 2D rendering context. Finally, we set the fill style to red and draw a filled rectangle starting from the top-left corner of the canvas.

2. Geolocation

Geolocation is an HTML5 feature that allows websites to request a user's location information. This can be useful for various applications, such as finding nearby restaurants, tracking delivery status, or providing location-based services.

<button onclick="getLocation()">Get Location</button>

<script>
  function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      alert("Geolocation is not supported by this browser.");
    }
  }

  function showPosition(position) {
    alert("Latitude: " + position.coords.latitude +
      "\nLongitude: " + position.coords.longitude);
  }
</script>

In the above example, we create a button with an onclick event that calls the getLocation() function. This function checks if the browser supports geolocation and then calls getCurrentPosition() to get the user's position. The showPosition() function is called with the position object, and it displays the latitude and longitude using the alert() method.

3. Video

HTML5 introduces native video support, allowing you to embed videos directly into web pages without the need for plugins like Flash. You can control the playback, volume, and other aspects of the video using JavaScript.

<video id="myVideo" width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<script>
  var video = document.getElementById("myVideo");

  function playVideo() {
    video.play();
  }

  function pauseVideo() {
    video.pause();
  }
</script>

In the above example, we create a video element with an id "myVideo" and set its width, height, and controls attribute. We also provide a source tag with the video file and a fallback message for browsers that do not support video. The JavaScript functions playVideo() and pauseVideo() can be used to control the video playback.

Conclusion

HTML5 brings a range of new features and improvements to web development. The above examples demonstrate just a few of the many possibilities offered by HTML5. With canvas, geolocation, video, and other features, developers can create more interactive and engaging web applications. So, start exploring and implementing HTML5 in your projects to take advantage of its capabilities.