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

  • Perbedaan form method POST dan GET
    Bagi anda yang sudah terbiasa membuat form dalam HTML pasti sudah sering melihat kode yang tersusun dalam sebuah form, termasuk atribut form yang digunakan. Salah satu atribut yang digunakan dalam form adalah method. Atribut method bisa diberi nilai dengan POST atau GET.
  • 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?
  • Cara memasukkan file flash ke halaman website
    Berikut ini tutorial tentang memasukkan file animasi flash ke dalam halaman website atau blog dengan perintah html. Flash adalah salah satu jenis hasil karya multimedia yang dapat digunakan untuk menampilkan animasi berbentuk gambar, tulisan, video, dan suara dengan kualitas yang cukup baik.
  • Pengertian istilah TAG, ATRIBUT dan VALUE dalam HTML
    Mungkin istilah TAG, ATRIBUT dan VALUE dalam HTML agak terlupakan, karena kebanyakan teman-teman yang sedang belajar membuat web sekarang lebih dimanjakan oleh editor web visual yang sangat praktis dan instan. Berikut ini saya coba mengingatkan kembali tentang 3 istilah dasar tersebut agar pemahaman serta penggunaan HTML lebih mudah.
  • Cara memasukkan gambar dalam halaman web
    Panduan cara memasukkan gambar dalam halaman web/blog dengan kode html, lengkap dengan tips optimalisasinya. Untuk memasukkan gambar dalam web sekarang memang sudah dimudahkan dengan bantuan editor visual yang langsung membuat kode otomatis HTML secara instan, tapi tidak ada salahnya anda mengetahui cara teknis menyisipkanya.

Kiriman terbaru