Fitur Keren di HTML5

Dengan versi terbaru dari HTML ini, pasti juga memiliki beberapa fitur baru yang belum ada pada versi-versi sebelumnya. Fitur-fitur terbaru dari HTML5 memudahkan dalam pengembangan website. Berikut fitur-fitur baru yang keren dimilki HTML5, diantaranya:

1. Canvas 

   Fitur yang satu ini memungkinkan kita untuk memasukkan objek 2D atau 3D kedalam halaman web.Dengan canvas dapat membuat render grafik, diagram, gambar dan animasi secara dinamis. Awal mulanya konsep dari teknologi canvas ini diperkenalkan oleh Apple Inc. untuk digunakan dalam Mac OS X WebKit untuk membuat dashboard widgets. Sebelum canvas muncul, kita hanya bisa membuat gambar dalam browser melalui plug-ins seperti Adobe plug-ins for Flash and Scalable Vector Graphics (SVG), Vector Markup Language (VML) only in Internet Explorer, or other clever JavaScript hacks.

    Namun cara kerja canvas tidak bisa bekerja sendiri. Dibutuhkan javascript untuk membuat objek di dalamnya, baik 2D maupun 3D.Saat akan menambahkan elemen canvas ke halaman web Anda, Anda bisa memanipulasinya dengan berbagai macam cara.

Untuk membuat objek di dalam canvas implementasi kode sebagai berikut :

Output yang dihasilkan atau ditampilkan pada browser seperti gambar di bawah :

2. Doctype baru

   HTML lama yang biasanya memiliki Doctype yang panjang, HTML5 datang dengan membawa doctype yang lebih singkat sehingga kita tak perlu menghapal doctype lama yang panjang. Hal ini dapat dibuktikan dengan contoh berikut ini:

Dalam HTML 4 penulisan doctype seperti ini:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.wwe.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

Namun dengan HTML5 penulisannya hanya seperti ini

< !DOCTYPE html >

3. HTML5 Audio

  Salah satu fitur baru HTML5 yang paling fenomenal adalah disediakannya tag baru yang memungkinkan kita untuk memutar audio sesuai yang kita inginkan tanpa menggunakan plugin tambahan seperti flash player. Dengan menggunakan tag

Untuk menambahkan audio ke dalam web kita, cukup ketikkan kode berikut:

Keterangan dari tag diatas: 

- < audio >, tag audio utama, digunakan untuk memasukkan audio ke dalam HTML.

- < source >,  digunakan untuk mengambil source file yang akan dimainkan audionya.

Atribut pada audio 

- Autoplay, atribut ini digunakan untuk member opsi kepada tag audio apakah langsung dimainkan secara otomatis atau tidak.

- Controls, atribut ini memberikan pilihan untuk menampilkan kontrol audio (volume, seeker, play/pause button).

- Type, digunakan untuk mendefinisikan tipe audio yang dimainkan.

- Src, digunakan untuk mendefinisikan source audio yang dimainkan.

Saat ini, ada tiga tipe file audio yang sudah didukung HTML5 yaitu MP3, WAV, dan OGG. 

Output yang dihasilkan atau ditampilkan dari kode diatas pada browser (menggunakan GoogleCrome) seperti gambar di bawah :

4. HTML5 Video

   Fitur multimedia lainnya yang didukung oleh HTML5 adalah video. Jika selama ini kita harus menggunakan flash player untuk memasukkan konten video, pada HTML5 kita tidak perlu lagi menggunakannya.

Untuk menambahkan elemen video kita gunakan kode berikut:

Output yang dihasilkan atau ditampilkan dari kode diatas pada browser (menggunakan GoogleCrome) seperti gambar di bawah :

5. Element METER 

     Element Meter pada dasarnya digunakan untuk pengukuran skala nilai. Element meter harus memiliki enam atribut, yakni; nilai, min, max, tinggi, rendah, dan optimal.

Untuk menambahkan elemen meter kita gunakan kode berikut:

Output yang dihasilkan atau ditampilkan dari kode diatas pada browser (menggunakan GoogleCrome) seperti gambar di bawah :

6. HTML5 Drag and Drop
     Drag and Drop merupakan fitur yang paling menakjubkan hadir dari HTML5. dengan bantuan fitur Drag and Drop kita dapat memindahkan objeck dari satu tempat ke tempat lain. Dalam proses menyeret objek kita harus mengambil objek dari tempat asal dan menarik atau drag di area tertentu. Proses ini bekerja dilakukan dengan bantuan JavaScript. Drag and Drop mungkin sedikit rumit tapi fitur ini sungguh menarik untuk dipelajari dan di kembangkan untuk pembuatan game (menurut saya).
Untuk melihat fitur ini silahkan coba kode berikut: 

untuk output yang ditampilkan dari kode diatas pada browser (menggunakan GoogleCrome) seperti gambar di bawah :

Sekian aje dulu ye, Pemirsa, capek ngetiknya Masiih banyak seh sebenarnya fitur- fitur menarik dari HTML5,..Sampai bersua kembali dilain coretan ane..Clink...

Dibawah ane sertakan Contoh Drag and Drop, Monggo di tarik-ulur (jiaaaaaahhhh kayak karet aje maen tarik ulur) ,..

------------------------------------------------------------------------------------------------------------------

Kadang, terang itu menciptakan sebuah kegelapan. Dan, kegelapan itu berwujud keindahan. Tunjuklah satu arah untuk menuju harapan. Melangkah perlahan di dalam kegelapan menuju titik terang.