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.
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.
0 komentar:
Post a Comment