HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML.Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

Jika dibandingkan dengan versi HTML sebelumnya, HTML versi 5 banyak sekali memiliki fitur baru yang berpotensi untuk lebih memudahkan user dalam menggunakan website. Fitur-fitur tersebut antara lain:

HTML5 Form Elements

Bahasa HTML memiliki suatu elemen-elemen yang kemudian membentuk dokumen HTML itu sendiri. Elemen ini di dalam script, dituliskan dengan kurung siku buka dan tutup (ex: <p>).

Salah satu elemen-elemen HTML tersebut adalah form yang digunakan untuk menerima input (seperti formulir). Kini, dalam HTML 5, form tersebut memiliki jenis elemen baru yaitu:

<datalist>
<keygen>
<output>

HTML5 <datalist> Element

Elemen <datalist> merupakan suatu fitur di form yang memiliki kemampuan untuk secara otomatis menyelesaikan data yang diinput user, atau memberi pilihan atas data yang ingin diinput user, secara otomatis.

Tapi pilihan-pilihan tersebut harus disimpan terlebih dahulu di dalam script pemrogramannya.

Contoh :

<!DOCTYPE html>

<html>

<body>

</datalist>

</form>

<p><b>Note:</b> The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>

</body>

</html>

Output:

HTML5 <keygen> Element

Tujuan dari elemen <keygen> adalah untuk menyediakan otentikasi user yang aman.

Tag <keygen> ini dapat men-generate sepasang kunci (privet & publik), sebagai enkripsi untuk user dan server.

Kunci private disimpan locally untuk user, sedangkan kunci publiknya di kirim ke server. Kunci publik ini kemudian digunakan sebagai sertifikat untuk mengotentikasi klien.

Contoh:

Script:

<!DOCTYPE html>

<html>

<body>

Username: <input type="text" name="usr_name">

Encryption: <keygen name="security">

</form>

</body>

</html>

Output:

Input was received as:

usr_name=Ditto&security=MIICQDCCASgwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDmE6yRxQLQ%0D%0AMVs%2FjvBkf%2FqsFk410l2YOD6n8tA2NsPs0oE%2FqEx4IMOnLslwxdiWTcNj8g22Ugu%2B%0D%0A4Ns1dNiCi8ALyI9MOOJgtp3WZR5K%2BLPlVhZn2GwSvn38wP77v9TMOux5BILUz46t%0D%0AMqgfvVSlXKELdeGSuzNcvTcmwwKHtKPfdQiPKgRRyRt1F7aXX%2F1UhGM%2BGjXX1yr4%0D%0AN%2F3qSKE9AMD7krRTqiuY42%2B0lWprYoGXhDqzlpHvan4Hbk%2BDLahSxkbFHhaeBQs6%0D%0A36YCdOoHHiPqxHEZqjERXZVmqSoN%2BnHhs8Huee09arAkceZO7skLVWdZX7zvnt3X%0D%0AkUu21ZxR4IgxAgMBAAEWADANBgkqhkiG9w0BAQQFAAOCAQEAdn1v6imWQg2VTQF3%0D%0AEoTqkjLl%2Bqu3anb812ZYk1uqXOlScb51f%2FpdJ6lg2AS33NL9MPus7mHXNNy428L7%0D%0ATXnyQbiah0DzC8akxbVzIjuduNxNpnHOiw9x6v5bjAmr2%2BV%2FZsd8Q41Zv%2BGPgOre%0D%0AYm8c084sp0C9CvJjPPYIdYCQrZxvVSJwR7KpWUjKXjvGRtMxqXlFwxdQo%2FXw6yRV%0D%0AL50KFrF1NVTixWbfIk%2B1Qm%2Fnbv2%2Bg17EdkDNocIYIYv8CqINi1qfx98xMzWsItWl%0D%0ATlLXZDEZnqWV%2FoUm08gZgwklNEwLj71Z0UrdzK26tU1gLNd2yni4M%2BYpt7Q5ErQZ%0D%0AC6MMKA%3D%3D

This page was returned to you from the server. The server has processed your input and returned this answer.

It is not a part of the HTML5 tutorial to teach you how the server is processing this input. If you want to learn more about processing form input, please read our PHP or ASP tutorial.

HTML5 <output> Element

Tag <output> ini dapat digunakan dalam script HTML 5 untuk merepresentasikan hasil dari penghitungan operasi matematika.

Contoh :

<!DOCTYPE html>

<html>

<body>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

<input type="range" id="a" value="50">100 +

<input type="number" id="b" value="50">=

</form>

</body>

</html>

Output:

HTML5 New Form Attributes

Atribut merupakan suatu fitur yang dimiliki elemen-elemen dalam HTML. Atribut berfungsi untuk menyimpan suatu informasi tambahan, sehingga memampukan elemen tersebut untuk melakukan hal yang lainnya.

Contoh atribut : <a href="http://www.w3schools.com">This is a link</a>

Dengan atribut href, kata This is a link bisa menjadi link yang menyambungkan pada www.w3schools.com

Form dalam HTML juga memiliki atribut.

Dalam HTML5, elemen form dan input memiliki beberapa atribut baru.

Atribut baru <form>:

autocomplete
novalidate

Atribut baru <input>:

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step

<form> / <input> autocomplete Attribute

Atribut autocomplete, memampukan elemen form dan input untuk “mengingat” data yang telah diinput user sebelumnya, kemudian ketika user ingin memasukkan data yang sama, elemen form/input tersebut dapat meng-autocomplet data yang ingin diketik user sebelum selesai diketikkan.

Atribut ini dapat diaktifkan (on) atau di-non-aktifkan (off).

Atribut ini dapat berjalan di elemen form/input yang bertipe data seperti berikut: text, search, url, tel, email, password, datepickers, range, and color.

Contoh :

<form> novalidate Attribute

Atribut novalidate ini bertipe data boolean.

Ketika atribut ini digunakan, data yang dimasukkan ke dalam elemen input tidak akan divalidasi ketika disubmit.

<input> autofocus Attribute

Atribut novalidate ini bertipe data boolean.

Ketika atribut ini digunakan, elemen input tersebut akan aktif kolomnya ketika halaman di-load. Sehingga user dapat langsung memasukkan data.

<input> form Attribute

Atribut ini memampukan beberapa form untuk diletakkan di posisi yang berbeda (jauh) tapi ter-submit disaat yang sama ketika user men-submit data.

Contoh :

<input> formaction Attribute

Atribut formaction memampukan form untuk mengetahui URL dari suatu file yang akan memproses kontrol input ketika user men-submit file.

<input> formenctype Attribute

Atribut formenctype dapat mengetahui bagaimana data yang masuk ke elemen form harus dikodekan, ketika data dikirm ke server.

<input> formmethod Attribute

Atribut fommethod dapat mendefinisi metode dari HTTP untuk mengirim data yang dimasukkan ke elemen form ke URL aksi.

<input> formnovalidate Attribute

Atribut novalidate merupakan atribut bertipe boolean. Ketika digunakan, atribut formnovalidate dapat menetukan bahwa elemen input tidak harus divalidasi ketika di-submit.

<input> formtarget Attribute

Atribut formtarget menentukan suatu nama atau keyword yang mengindikasikan tempat (di halaman web baru atau di halaman web yang sama) di mana hasil tampilan respon setelah user memasukkan data. Dengan atribut ini, kita dapat menampilkan hasil tampilan dari submited input di halaman yang sama atau baru.

<input> height and width Attributes

Atribut height and width ini dapat menentukan panjang lebar suati input elemen.

Contoh :

<input> list Attribute

Atribut list ini hanya ada untuk elemen datalist. Berisi data-data untuk input otomatis, sehingga data input dari user dapat di-autocomplete sesuai inputan user.

<input> min and max Attributes

Atribut min and max dapat manentukan nilai terkecil dan terbesar dari data-data yang telah di-submit ke elemen input.

<input> multiple Attribute

Atribut multiple ini dapat memungkinkan user diperbolehkan untuk memasukkan data lebih dari satu ke elemen input.

Contoh :

<input> pattern Attribute

Atribut patern dapat menginformasikan kepada user pola dari data yang akan diinputkan. Informasi ini dapat muncul ketika kursor disentuhkan pada elemen input. Informasi yang dimunculkan dapat diisi sesuai dengan kebutuhan.

Contoh:

<input> placeholder Attribute

Atribut placeholders dapat memunculkan suatu hint atau petunjuk untuk user di dalam input field, supaya memasukkan data sesuai dengan data yang dibutuhkan.

Petunjuk pendek itu dimunculkan sebelum user mengetikkan data pada input-fieldnya.

Contoh :

<input> required Attribute

Atribut required dapat menentukan input field yang harus diisi dengan data. Dengan atribut ini, data tidak akan bisa disubmit, sebelum input field beratribut required diisi.

Atribut ini bertipe boolean.

Atribut ini dapat digunakan padi input types berikut : text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

Contoh :

<input> step Attribute

Atribut step dapat membuat suatu interval sesuai dengan data yang dimasukkan user.

Misal, jika data="3", maka legal numbers bisa -3, 0, 3, 6, dll.

Atribut ini dapat digunakan bersama dengan atribut min and max, dan menciptakan interval yang besar. Atribut ini bisa dipakai di elemen yang input typeny sbb: number, range, date, datetime, datetime-local, month, time dan week.

New Semantic Elements in HTML5

Semantic memiliki artii intensi / maksud.

Elemen semantik berarti elemen yang memiliki intensi.

Elemen semantik secara jelas mendeskripsikan intensi ini ke browser dan ke developer.

Contoh elemen non-semantik <div> and <span>

Contoh elemen semantik: <form>, <table>, and <img>

Banyak website yang sekarang ada mengandung kode HTML seperti ini: <div id="nav">, <div class="header">, atau <div id="footer">, untuk menunjukkan link navigasi dari web.

HTML5 menawarkan elemen-elemen semantik baru yang bisa membuat bagian-bagian baru yang berbeda dalam halaman website.

<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

Contoh :

<!DOCTYPE html>

<html>

<body>

<h1>Raising Roses</h1>

<h2>The guide to a perfect rose garden</h2>

</hgroup>

</header>

</article>

<p><a href="/blog.html">Blog</a> -

<a href="/archive.html">Archive</a> -

</nav>

</footer>

</body>

</html>

Output:

HTML5 Web Storage

Dengan HTML, halaman web dapat menyimpan data secara lokal, yaitu dengan menyimpan data pada browser yang digunakan user.

Pada awalnya penyimpanan dilakukan dengan cookies. Tapi penggunaan Web storage lebih cepat dan aman. Data tidak dimasukkan pada setiap permintaan server, tapi hanya digunakan ketika diminta. Maka hal ini memungkinkan untuk menumpan data yang besar ukurannya,m tanpa mempengaruhi performa website.

Data disimpan di value pairs, dan sebuah halaman web hanya bisa mengakses data yang secara otomatis disimpan.

Contoh :

<!DOCTYPE html>

<html>

<body>

if(typeof(Storage)!=="undefined")

{

localStorage.lastname="Smith";

document.getElementById("result").innerHTML="Last name: " + localStorage.lastname;

}

else

{

document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";

}

</script></body></html>

Application Cache

HTML5 mengenalkan Aplication Cache, yang berarti bahwa aplikasi dalam website telah “tersimpan” dan dapat diakses tanpa membutuhkan koneksi ke internet.

Application cache memberi sebuah aplikasi web 3 keuntungan ini:

1. User dapat melakukan browsing tanpa membutuhkan koneksi internet.

2. Data yang cached dapat di load dengan lebih cepat

3. Browser hanya akan me-load datayang di-update dari server, selebihnya tidak akan di-load ulang.

Server-Sent Events - One Way Messaging

Server-sent event adalah ketika halaman web secara otomatis mendapatkan update dari server.

Hal ini juga telah dapat dilakukan, tapi pada versi sebelumnya halaman web harus bertanya terlebih dahulu jika ada updates.

Dengan fitur server-sent event, update-an tersebut datang secara otomatis.

Contoh : Twitter / Facebook

Web Worker

Ketika meng-execute scripts dalam sebuah halaman HTML, halaman tersebut menjadi tidak responsive hingga script tersebut selesai di execute.

Web Worker adalah sebuah script javascript yang berjalan secara independen dan berjalan di background program, tanpa mempengaruhi performa dari halaman tersebut. Kita bisa melanjutkan melakukan hal-hal yang ingin kita lakukan. Misal mengklik web site, men-select yext, sementara web worker bekerja di belakang program.

Source :

http://w3schools.com/html/

http://id.wikipedia.org/wiki/HTML5

http://www.wufoo.com/html5/attributes/09-required.html

http://www.techrepublic.com/blog/web-designer/html5-using-structural-elements-for-header-footer-and-navigation/

Let's Shine

Tuesday, October 15, 2013

Beberapa Fitur Baru di HTML5

HTML5 Form Elements

HTML5 <datalist> Element