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 http://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 **

Komentar

Halaman Lainya

  • Membuat tulisan berjalan dengan HTML
    Panduan lengkap dan mudah cara membuat animasi tulisan berjalan dengan HTML
  • Game Online dengan HTML5
    Teknologi HTML5 memang menjadi bahan perbincangan bagi para pengembang web, karena teknologi yang dihadirkan pada versi HTML5 ini memang luar biasa. Bahkan sekarang sudah banyak game/permainan online dibuat dengan HTML5 sehingga bisa dimainkan dengan cukup ringan dan tanpa perlu aplikasi bantu lainya selain browser.
  • Membuat menu pada bidang gambar
    Mungkin sudah jarang sekali kita temui menu sebuah web yang hanya dibuat dengan gambar sehingga banyak pilihan menu/link halamannya diletakkan pada gambar itu juga. Umumnya sekarang gambar hanya digunakan pada bagian tertentu saja dan ukurannya pun tidak terlalu besar.
  • Cara membuat form dengan HTML
    Sebuah web yang ideal bukan hanya bisa memberikan informasi tapi juga harus memiliki fasilitas untuk menerima masukan dari pengunjungnya seperti buku tamu, komentar atau fasilitas lainya. Untuk bisa menerima masukan berarti halaman web harus menyedikan fo
  • Membuat tabel dengan HTML
    Tabel adalah salah satu objek terpenting yang bisa kita gunakan untuk banyak keperluan. Tabel bisa digunakan untuk membuat laporan dengan HTML, bisa digunakan untuk menyusun objek lain seperti gambar atau tulisan, bahkan tabel juga bisa digunakan untuk menata layout tampilan web. Bagi anda yang sedang belajar bahasa pemrograman web seperti PHP atau yang lainya, tabel ini juga bagian terpenting yang harus anda ketahui karena bentuk laporan dari database tentunya akan disajikan dalam bentuk tabel. Bagaimana cara membuat tabel yang benar? dan bagaimana contohnya?

Kiriman terbaru