HTML 5

Pengertian HTML5

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. 

HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web.


HTML5 adalah versi terbaru dari HTML (HyperText Markup Language) yang mana dikembangkan oleh W3C atau Word Wide Web Consortium. Lalu apakah yang dimaksud dengan Semantic Web? Semantic berasal dari bahasa Yunani (Greek), merupakan bahasa pembelajaran semiotic, yakni pembelajaran untuk memahami penanda. Semantic sendiri mempunyai arti bahasa yang berfokus pada penanda untuk mengetahui arti yang terkandung di dalamnya.



Jadi, yang dimaksud semantic web adalah bahasa pemrograman yang mempunyai penanda khusus dalam implementasinya dengan tujuan agar mampu mendeskripsikan apa yang terkandung dalam website tersebut. Web semantic ini bukan hanya dikembangkan di Web 2.0, namun sudah ke Web 3.0 bahkan akan berkembang ke Web 4.0. Perkembangan teknologi benar-benar cepat sekali berubah.

Tujuan dibuatnya HTML5 antara lain:

1.      Fitur baru harus didasarkan pada HTML, CSS, DOM , dan JavaScript.

2.      Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).

3.      Penanganan kesalahan yang lebih baik.

4.      Lebih banyak markup untuk menggantikan scripting.

5.      HTML5 merupakan perangkat mandiri.

Fitur baru dalam HTML5:

• Unsur kanvas untuk menggambar.
• Video dan elemen audio untuk media pemutaran.
• Dukungan yang lebih baik untuk penyimpanan secara offline.
• Elemen  konten yang  lebih  spesifik, seperti  artikel, footer, header,
  navigation, section.
• Bentuk kontrol form seperti kalender, tanggal, waktu, e-mail, URL, search.

Beberapa kelebihan yang dijanjikan pada HTML5:

• Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML) danXML.
• Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya.
• Integrasi (‘inline’) dengan doctype yang lebih sederhana.
• Penulisan kode yang lebih efisien.
• Konten yang ada di situs lebih mudah terindeks oleh search engine.

Saat ini HTML5 masih dalam pengembangan, namun hanya beberapa browser sudah mendukung HTML5. Beberapa browser tersebut seperti Safari, Chrome, Firefox, dan Opera. Kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML5.

Markup

Pada HTML 5 diperkenalkan beberapa elemen baru dan atribut yang merefleksikan tipikal penggunaan website modern. Beberapa diantaranya adalah pergantian yang bersifat semantik pada blok yang umum digunakan: yaitu elemen (<div>) dan inline (<span>), sebagai contoh (<span>) (sebagai blok navigasi website) dan <footer> (biasanya dikaitkan pada bagian bawah suatu website atau baris terakhir dari kode html). Banyak elemen lain yang memberikan kegunaan baru melalui antar muka yang telah distandarkan, seperti elemen multimedia <audio> dan <video>. Beberapa elemen yang telah ditinggalkan juga ditiadakan, termasuk elemen presentasi semata seperti <font> dan <center>, yang sebenarnya dapat dikerjakan menggunakan Cascading Style Sheet (CSS).

API baru

Untuk menambah keluwesan pemformatan, pada HTML5 telah dispesifikasikan pengkodean application programming interfaces (APIs) antarmuka document object model (DOM) yang ada dikembangkan dan fitur de facto didokumentasikan. Beberapa APIs terbaru pada HTML5 antara lain :

• Elemen canvas, sebagai mode untuk menggambar object dua dimensi (2D). Lihat spesifikasi 1.0 untuk canvas 2D.
• Timed media playback
• Media penyimpanan luring (aplikasi web luring)
• Penyuntingan dokumen
• Drag and Drop
• Cross-document messaging
• Manajemen sejarah kunjungan penjelajah web
• Tipe MIME dan penanggung jawab protokol registrasi.

Tidak semua teknologi di atas dimasukkan pada spesifikasi HTML5 W3C, meski teknologi tersebut telah termaktub dalam spesifikasi milik WHATWG HTML. Beberapa teknologi yang juga terkait namun tidak dijadikan bagian dalam spesifikasi HTML5 W3C dan

WHATWG HTML5 adalah :

• Geolocation
• Web SQL Database, media penyimpanan database lokal.
• API Database terindeks, mode penyimpanan hierarkis key-value (WebSimpleDB).

Fungsi HTML5
 
Tujuan utama dengan adanya HTML5 adalah mengurangi penggunaan plugin-plugin 3rd party pada HTML sehingga dapat mempercepat kinerja web itu sendiri. Plugin-plugin tersebut seperti Adobe Flash, Microsft Silverlight, Java dan lain-lainnya.

Selain itu, HTML5 juga membawa fungsi-fungsi yang baru seperti:

1. Element article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video

2. Input Type pada Form dates and times, email, url, search

3. Attribut ping (pada a dan area), charset (pada meta), async (pada script) Di sini akan dijelaskan beberapa fungsi baru yang menarik seperti : <canvas> - Element atau tag ini memiliki fungsi untuk menampilkan kertas gambar sehingga pengguna dapat menggunakan canvas untuk menggambar ataupun menulis bagaikan kertas biasa tanpa menggunakan plugin seperti Java <audio><video> - Bila kita ingin menampilkan video ataupun audio pada website kita maka kita akan menggunakan pllugin seperti adobe dengan format .swf, .fla dan .flv. Tetapi dengan menggunakan HTML5, kita tinggal menggunakan tag <audio> ataupun <video> untuk menampilkan audio dan video pada website kita dengan menggunakan format Ogg Theora yang bersifat free alias gratis!

Selain terdapatnya fungsi-fungsi baru, HTML5 juga memberikan beberapa kemudahan seperti pada bagian awal file HTML kita harus menulis coding DOCTYPE yang panjang.

Pada HTML5, DOCTYPE dapat ditulis lebih ringkas

<!DOCTYPE html>

Kemudian pada baris berikutnya kita tulis seeprti ini Versi HTML5 berubah menjadi

Selain itu, coding CSS dan Javascript pada HTML5 tidak perlu lagi menulis seperti type=text/css dan type=text/javascript

<style>* {margin:0px;padding:0px;} </style>

HTML5 juga menghilangkan beberapa tag ataupun element yang telah jarang dipakai dan digantikan oleh CSS seperti acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, s, strike, tt, u

HTML5 telah menyediakan banyak fungsi baru dan berbagai kemudahan tetapi apakah browser kita mendukung teknologi baru ini? Kebanyakan browser yang terkenal seperti Firefox, Opera, Safari dan Chrome dan lain-lain telah mendukung HTML5 KECUALI Internet Explorer.  

Contoh menampilkan objek ini akan terlihat seperti gambar berikut jika browser anda mendukung HTML5

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>    

<canvasid="myCanvas"width="578" height="200"></canvas>  

</body>

</html>