Untitled

Pray

GOD, i love them..

HTML 5.0

HTML 5.0 belum menjadi standar resmi, dan belu ada browser yang didukung HTML 5.0 secara penuh. Tapi semua browser utama (Safari, Chrome, Firefox, Opera, Internet Explorer) terus menambahkan fitur baru HTML 5.0 ke dalam browser terbaru mereka.

Fitur-fitur baru yanga ada di dalam HTML 5.0:

·         <canvas> untuk menggambar grafik dengan script

<canvas> adalah area berbentuk persegi dan kita bias mengontrol setiap pixel-nya, contoh:

<canvas id="myCanvas" width="200" height="100"></canvas>

·         Media untuk memutar video dan audio

Contoh script video:

<video width="320" height="240" controls="controls">

  <source src="movie.mp4" type="video/mp4" />

  <source src="movie.ogg" type="video/ogg" />

Browser anda tidak support video tag.

</video>

Bisa memiliki source lebih dari satu, juga bias menginput text jika browser tidak mendukung tag video.

Ada 3 format video yang mendukung <video>, yaitu: MP4,WebM, dan Ogg.

Browser	MP4	WebM	Ogg
Internet Explorer 9	YES	NO	NO
Firefox 4.0	NO	YES	YES
Google Chrome 6	YES	YES	YES
Apple Safari 5	YES	NO	NO
Opera 10.6	NO	YES	YES

                Dalam <video> ini juga bias menambahkan method play(), pause(), dan load().

Contoh Script audio:

<audio controls="controls">

  <source src="song.ogg" type="audio/ogg" />

  <source src="song.mp3" type="audio/mpeg" />

  Browser anda tidak mendukung tag audio.

</audio>

Ada 3 format audio yang mendukung <audio>, yaitu: MP3, Wav, Ogg.

Browser	MP3	Wav	Ogg
Internet Explorer 9	YES	NO	NO
Firefox 4.0	NO	YES	YES
Google Chrome 6	YES	YES	YES
Apple Safari 5	YES	YES	NO
Opera 10.6	NO	YES	YES

·         Dukungan yang lebih baik untuk penyimpanan local secara offline

Sebelumnya, kita menggunakan cookie. Cookies tidak cocok untuk data yang besar, karena mereka terus diakses setiap ada permintaan ke server, sehingga membuat sangat lambat dan tidak efektif.

HTML 5.0, data tidak diakses oleh setiap permintaan server, tetapi digunakan hanya ketika ditanya untuk. Dengan itu kita bias menyimpan data yang cukup besar tanpa mempengaruhi kinerja situs web.

Contoh:

<script type="text/javascript">

localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

• Elemen form baru <datalist>, <keygen>, <output>

Browser yang mendukung:

Tag	IE	Firefox	Opera	Chrome	Safari
<datalist>	No	4.0	9.5	No	No
<keygen>	No	4.0	10.5	3.0	No
<output>	No	4.0	9.5	10.0	5.1

Contoh datalist:

Webpage: <input type="url" list="url_list" name="link" />

<datalist id="url_list">

<option label="Google" value="http://www.google.com" />

<option label="Microsoft" value="http://www.microsoft.com" />

</datalist>

Contoh keygen:

<form action="demo_form.asp" method="get">

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

Encryption: <keygen name="security" />

<input type="submit" />

</form>

Contoh output:

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

<input type="range" name="a" value="50" />100

+<input type="number" name="b" value="50" />

=<output name="x" for="a b"></output>

</form>

·         Control baru seperti calendar, date, time, email, url, search

Browser yang mendukung:

Input type	IE	Firefox	Opera	Chrome	Safari
email	No	4.0	9.0	10.0	No
url	No	4.0	9.0	10.0	No
number	No	No	9.0	7.0	5.1
range	No	No	9.0	4.0	4.0
Date pickers	No	No	9.0	10.0	5.1
search	No	4.0	11.0	10.0	No
color	No	No	11.0	12	No

Contoh-contoh:

<input type="email" name="user_email" />

<input type="url" name="user_url" />

<input type="number" name="points" min="1" max="10" />

<input type="range" name="points" min="1" max="10" />

<input type="date" name="user_date" />

<input type="color" name="user_color" />

·         Web Worker

Biasanya javascript kadangkala menyebabkan computer menjadi lambat atau membuat browser kita lambat untuk loading, tetapi dengan web worker ini, bisa menjadi jalannya. Fitur web worker ini adalah fitur untuk threading, sehingga javascript bisa dipakai untuk melakukan beberapa proses sekaligus tanpa harus menghambat proses terkait UI.

HTML 5.0 juga menggunakan CSS3 dengan fitur-fitur baru yang ditambahkan seperti:

·         Selektor baru

·         Properties baru

·         Animasi-animasi

·         Transformasi 2D/3D

·         Sudut yang membulat

·         Efek bayangan

·         Font yang bisa di-download

Banyak sekali perubahan yang terjadi pada HTML 5.0, seperti event-event, method-method, attribute, elemen, dan lainnya.