HTML 5 didesain untuk mempermudah pengembangan aplikasi web. Salah satunya dengan mengenalkan elemen-elemen markup yang baru.
Struktur konten web umumnya terbagi atas blok-blok seperti header, footer, sidebar, dan seterusnya. Cara yang umum digunakan saat ini adalah membagi blok tersebut dengan elemen
atau membaginya secara inline dengan elemen , untuk membedakan blok tertentu, elemen
ataupun memanggil atribut class atau id yang telah didefi nisikan dalam CSS. Karena itu umum ditemukan pemanggilan class seperti
,
, dan seterusnya.
Sebagian dari class-class yang popular tersebut diusulkan menjadi elemen pada HTML 5, sehingga web developer dapat membuat struktur langsung dengan menggunakan elemen seperti
Penulisan dasar HTML 5 adalah sebagai berikut:
Beberapa kelebihan yang dijanjikan pada HTML 5:
* Dapat ditulis dalam sintaks HTML (dengan tipe media text/html) dan XML.
* Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya.
* Integrasi (‘inline’) MathML dan SVG dengan doctype yang lebih sederhana.
* Penulisan kode yang lebih efisien.
* Dapat dimengerti oleh peramban lawas (backwards compatible). Sehingga istilah ‘deprecated’ tidak akan diperlukan lagi.
Yang masih diperdebatkan dalam pengembangan HTML 5:
* Makna semantik beberapa elemen presentasioal.
* Fitur aksesibilitasnya. Seperti atribut alt dan summary.
* Dapat ditulis dalam sintaks HTML (dengan tipe media text/html) dan XML.
* Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya.
* Integrasi (‘inline’) MathML dan SVG dengan doctype yang lebih sederhana.
* Penulisan kode yang lebih efisien.
* Dapat dimengerti oleh peramban lawas (backwards compatible). Sehingga istilah ‘deprecated’ tidak akan diperlukan lagi.
Yang masih diperdebatkan dalam pengembangan HTML 5:
* Makna semantik beberapa elemen presentasioal.
* Fitur aksesibilitasnya. Seperti atribut alt dan summary.
Keunggulan HTML 5 adalah teletak pada
1. API
HTML 5 akan memperkenalkan API (Application Programming Interface) yang semakin memperluas batasan HTML, antara lain:
a. Offline Data Storage.
Memungkinkan Anda untuk tetap mengakses data (lama) di browser dalam keadaan offl ine. Contoh offl ine data, seperti saat Anda membaca arsip e-mail pada program Outlook atau
Thunderbird, yang merupakan aplikasi desktop. Dengan kemampuan offline data pada aplikasi web, membuat aplikasi web semakin menandingi aplikasi desktop.
b. Drag and Drop.
Seperti halnya offl ine data, drag and drop adalah sesuatu yang biasa kita lakukan pada aplikasi desktop. Dengan API drag and drop pada aplikasi web, akan membuat interaksi menjadi lebih mudah. Contoh demo drag and drop (dan juga demo lainnya) dapat Anda lihat pada website http://html5demos.com, Gam-bar 4 memperlihatkan halaman web di mana Anda dapat melakukan drag and drop text, hyperlink, bahkan file dari desktop, ke dalam area yang disediakan pada browser (http://html5demos.com/drag-anything). Pastikan browser yang Anda gunakan men-support demo ini, contoh: Firefox 3.5, Safari 4, Google Chrome 2.0.
C. Geolocation.
API untuk menunjukkan informasi lokasi geografis, sumber informasi diambil dari GPS (Global Positioning System), IP, sinyal jaringan seperti WiFi, Bluetooth, atau id GSM/CDMA. Implementasi API ini di masa depan akan cocok bagi Anda yang sering berinternet menggunakan mobile device.Masih terdapat banyak API lainnya dan terus dikembangkan. Dalam implementasinya, Anda akan memerlukan pemrograman JavaScript untuk menjembatani penggunaan API ini.
2. Canvas
Setelah melihat berbagai demo HTML 5, berikutnya kita akan membuat dokumen HTML 5 yang sederhana, tetapi dapat memberikan pemahaman yang lebih mendalam lagi, tentang bagaimana HTML 5 bekerja.Salah satu elemen baru dalam HTML 5 adalah canvas. Fung-sinya untuk mendefi nisikan daerah/region pada halaman web, di mana Anda dapat menyisipkan objek di dalamnya. Penggunaannya sederhana, dua atribut utama pada canvas adalah
width (lebar) dan height (tinggi). Contoh penggunaannya sebagai berikut:
2px blue dashed”>Gunakan browser yang mendukung HTML 5 untuk melihat area canvas
Tuliskan kode HTML tersebut dan simpan pada sebuah file dengan ekstensi html atau htm, dan jalankan pada browser Anda. Jika browser Anda mendukung HTML 5 akan tampil sebuah area segi empat dengan border putus-putus berwarna biru. Area ini adalah area canvas tersebut. Perhatikan teks yang
diapit oleh elemen
Selanjutnya, kita dapat menyisip objek yang kita inginkan pada area canvas, contoh berikut akan menampilkan tulisan berbayang dengan menggunakan JavaScript dan method DOM (Document
Object Model). Kode selengkapnya sebagai berikut:
2px blue dashed”>
Gunakan browser yang mendukung HTML 5 untuk melihat area
canvas
3. Teknologi dan Tren
Seperti efek domino, HTML 5 menggerakkan banyak hal. Browser-browser beradaptasi mendukungnya, berbagai CMS mengarahkan developmentnya untuk ikut mengimplementasi-
kannya, yang pada akhirnya menggeser kebiasaan pengguna internet membentuk sebuah kebiasaan dan tren baru. Tetapi pada prinsipnya, yang berubah hanyalah tools atau caranya,
tujuan dari teknologi web itu sendiri tetap terarah memecahkan kendala-kendala komunikasi. Mengingat hal ini, kita perlu angkat topi untuk orang-orang yang mendedikasikan diri pada kemajuan teknologi yang kita gunakan saat ini
