Contoh penggunaan HTML5

Pada tulisan sebelumnya, saya sudah mengenalkan sedikit tentang HTML5 yang meluputi fitur-fitur terbaru serta unggulan yang sudah disediakan dan bisa digunakan asalkan browsernya sudah mendukung. Berikut ini saya akan membuatkan beberapa contoh tag cara penulisan dan penggunaan HTML5.

Baca artikel sebelumnya : Mengenal html5

Membuat gambar dengan canvas html5

Contoh menampilkan objek ini akan terlihat seperti gambar berikut jika browser anda mendukung HTML5

 contoh html5 canvas

dan susunan perintah html5 sebagai berikut :

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      #myCanvas {
  border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 70;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#8ED6FF";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
      };

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
  </body>
</html>

Bisa juga dengan bentuk seperti gambar berikut :

penggunaan canvas dalam html5

dengan kode html5 sebagai berikut :

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      #myCanvas {
  border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        context.beginPath();
        context.moveTo(170, 80);
        context.bezierCurveTo(130, 100, 130, 150, 230, 150);
        context.bezierCurveTo(250, 180, 320, 180, 340, 150);
        context.bezierCurveTo(420, 150, 420, 120, 390, 100);
        context.bezierCurveTo(430, 40, 370, 30, 340, 50);
        context.bezierCurveTo(320, 5, 250, 20, 250, 50);
        context.bezierCurveTo(200, 5, 150, 20, 170, 80);
        context.closePath();

        // add linear gradient
        var grd = context.createLinearGradient(230, 0, 370, 200);
        // light blue
        grd.addColorStop(0, "#8ED6FF");
        // dark blue
        grd.addColorStop(1, "#004CB3");
        context.fillStyle = grd;
        context.fill();

        // add stroke
        context.lineWidth = 5;
        context.strokeStyle = "blue";
        context.stroke();
      };

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
  </body>
</html>

Cukup mudah kan??? Kalo mau contoh lengkapnya bisa dilihat di https://www.html5canvastutorials.com/

Menampilkan video dengan html5

Sama dengan canvas, jika browser anda tidak mendukung maka video tidak bisa ditampilkan.

 Berikut perintah html5 untuk menampilkan video

<!DOCTYPE HTML>
<html>
  <head>
  </head>
  <body>
<h2>Contoh video dalam html5</h2>
<video src="/uploads/video/html5-video.ogg" controls="true">
   Browser anda tidak mendukung <a href="/uploads/video/html5-video.ogg">dowload video disini.</a>
</video>
</body>
</html>

Semoga bermanfaat, lain waktu saya tambahkan lagi contohnya.

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **

Artikel Lainnya