Kamis, 20 Desember 2012

Fitur-Fitur HTML5 dan Implementasinya



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 berawal dari kerjasama antara World Wide Web Consortium (W3C) dan Web Hypertext Permohonan Teknologi Kumpulan Kerja (WHATWG).
WHATWG bekerja dengan bentuk web dan aplikasi, dan W3C telah bekerja dengan XHTML 2.0. Pada tahun 2006, mereka memutuskan untuk bekerjasama dan mewujudkan versi baru HTML.

Beberapa peraturan untuk HTML5 telah ditubuhkan:

  • Ciri-ciri baru perlu berdasarkan HTML, CSS, DOM, dan JavaScript    
  • Mengurangkan keperluan untuk plugins luaran (seperti Flash)
  • Kesilapan yang lebih baik pengendalian
  • Markup Lebih untuk menggantikan skrip
  • HTML5 harus peranti bebas
  • Proses pembangunan perlu dilihat kepada orang awam

Fitur fitur terbaru dalam HTML5 yaitu :
  • Elemen <canvas> untuk lukisan 
  • Unsur-unsur yang <video> dan <audio> untuk media pemutaran
  • Dukungan untuk penyimpanan lokal
  • Terdapat konten baru yang khusus elemen, seperti <article>, <footer>, <header>, <nav>, <section> 
  • Banyak bentuk kontrol terbaru, seperti kalender, tanggal, waktu, email, url, search .


Aplikasi HTML5
Dengan HTML5, pembangunan aplikasi web adalah lebih mudah berbanding sebelum ini
  • Penyimpanan data Lokal
  • Fail akses tempatan
  • Tempatan SQL pangkalan data
  • Cache aplikasi
  • Javascript pekerja
  • XHTMLHttpRequest 2


Tag yang ada pada HTML5 diantaranya ;

<! - ... ->
Mentakrifkan komen

<! DOCTYPE>
Mentakrifkan jenis dokumen

<a>
Mentakrifkan hiperpautan

<abbr>
Mentakrifkan singkatan

<acronym>
Tidak disokong dalam HTML5. Mentakrifkan sapaan

<address>
Mentakrifkan maklumat hubungan untuk pengarang / pemilik dokumen

<applet>
Tidak disokong dalam HTML5. Dikecam dalam HTML 4.01. Mentakrifkan applet tertanam

<area>
Mentakrifkan kawasan di dalam peta imej-

<article>
Mentakrifkan artikel

<aside>
Mendefinisikan kandungan selain dari kandungan halaman

<audio>
Mentakrifkan kandungan bunyi

<b>
Mentakrifkan teks tebal

<base>
Menentukan URL asas / sasaran untuk semua URL relatif dalam dokumen

<basefont>
Tidak disokong dalam HTML5. Dikecam dalam HTML 4.01. Menetapkan warna lalai, saiz, dan fon untuk semua teks dalam dokumen

<bdi>
Mengasingkan sebahagian daripada teks yang mungkin akan diformat dalam arah yang berbeza dari teks lain di luar

<bdo>
MENGGANTIKAN arah teks semasa

<big>
Tidak disokong dalam HTML5. Mentakrifkan teks besar

<blockquote>
Mentakrifkan seksyen yang dipetik daripada sumber yang lain

<body>
Mentakrifkan badan dokumen

<br>
Mentakrifkan baris tunggal

<button>
Mentakrifkan butang diklik

<canvas>
Digunakan untuk menarik grafik, on the fly, melalui skrip (biasanya JavaScript)

<caption>
Mentakrifkan kapsyen jadual

<center>
Tidak disokong dalam HTML5. Dikecam dalam HTML 4.01. Mentakrifkan teks berpusat

<cite>
Mentakrifkan tajuk kerja

<code>
Mentakrifkan sekeping kod komputer

<col>
Menentukan sifat lajur untuk setiap lajur dalam unsur <colgroup>

<colgroup>
Menentukan kumpulan satu atau lebih lajur dalam jadual untuk format

<command>
Mentakrifkan butang arahan yang pengguna boleh sembah

<datalist>
Menentukan senarai pilihan yang telah ditetapkan untuk kawalan input

<dd>
Mentakrifkan Penerangan item dalam senarai definisi

<del>
Mentakrifkan teks yang telah dipadam dari dokumen

<details>
Mentakrifkan butiran tambahan bahawa pengguna boleh melihat atau menyembunyikan

<dfn>
Mentakrifkan istilah definisi

<DIR>
Tidak disokong dalam HTML5. Dikecam dalam HTML 4.01. Mentakrifkan senarai direktori

<div>
Mentakrifkan seksyen dalam dokumen

<dl>
Mentakrifkan senarai definisi

<dt>
Mentakrifkan istilah (item) dalam senarai definisi

<em>
Mentakrifkan teks ditekankan

<embed>
Mentakrifkan bekas untuk permohonan luar (bukan HTML)

<fieldset>
Kumpulan elemen berkaitan dalam bentuk

<figcaption>
Mentakrifkan kapsyen untuk elemen <figure>

<figure>
Menentukan kandungan layan-diri

<FONT>
Tidak disokong dalam HTML5. Dikecam dalam HTML 4.01. Mentakrifkan fon, warna, dan saiz untuk teks

<footer>
Mentakrifkan pengaki untuk dokumen atau seksyen

<form>
Mentakrifkan bentuk HTML untuk input pengguna

<frame>
Tidak disokong dalam HTML5. Mentakrifkan tetingkap (bingkai) dalam frameset

<frameset>
Tidak disokong dalam HTML5. Mentakrifkan set bingkai

<h1> untuk <h6>
Mentakrifkan tajuk HTML

<kepala>
Mentakrifkan maklumat mengenai dokumen

<header>
Mentakrifkan header untuk dokumen atau seksyen

<hgroup>
Kumpulan menuju (<h1> untuk <h6>) elemen

<hr>
Mentakrifkan perubahan tema dalam kandungan

<html>
Mentakrifkan akar dokumen HTML

<i>
Mentakrifkan sebahagian daripada teks dengan suara alternatif atau mood

<iframe>
Mentakrifkan bingkai sebaris

<img>
Mentakrifkan imej

<input>
Mentakrifkan kawalan input

<ins>
Mentakrifkan teks yang telah dimasukkan ke dalam dokumen

<kbd>
Mentakrifkan input papan kekunci

<keygen>
Mentakrifkan bidang penjana key-sepasang (untuk bentuk)

<label>
Mentakrifkan label untuk elemen <input>

<legend>
Mentakrifkan kapsyen untuk <fieldset>, <angka>, atau elemen <details>

<li>
Mentakrifkan item senarai

<link>
Mentakrifkan hubungan antara dokumen dan sumber luaran (yang paling digunakan untuk menghubungkan kepada style sheet)

<map>
Mentakrifkan client-side-peta imej

<mark>
Mentakrifkan teks yang ditanda / diserlahkan

<menu>
Mentakrifkan senarai / menu arahan

<meta>
Mentakrifkan metadata tentang dokumen HTML

<meter>
Mentakrifkan ukuran skalar dalam lingkungan yang dikenali (tolok)

<nav>
Mentakrifkan Pautan navigasi

<noframes>
Tidak disokong dalam HTML5. Mentakrifkan kandungan alternatif bagi pengguna yang tidak menyokong bingkai

<noscript>
Mentakrifkan kandungan alternatif bagi pengguna yang tidak menyokong skrip client-side

<object>
Mentakrifkan objek terbenam

<ol>
Mentakrifkan senarai diperintahkan

<optgroup>
Mentakrifkan kumpulan pilihan yang berkaitan dalam senarai drop-down

<option>
Mentakrifkan pilihan dalam senarai drop-down

<output>
Mentakrifkan hasil daripada pengiraan

<p>
Mentakrifkan perenggan

<param>
Mentakrifkan parameter bagi sesuatu objek

<pre>
Mentakrifkan teks diformat

<progress>
Mewakili kemajuan tugas

<q>
Mentakrifkan petikan pendek

<rp>
Mentakrifkan apa untuk menunjukkan dalam pelayar yang tidak menyokong anotasi ruby

<rt>
Mentakrifkan penjelasan / sebutan aksara (tipografi Asia Timur)

<ruby>
Mentakrifkan anotasi ruby ??(tipografi Asia Timur)

<s>
Mentakrifkan teks yang tidak lagi betul

<samp>
Mentakrifkan output sampel dari program komputer

<script>
Mentakrifkan skrip client-side

<section>
Mentakrifkan seksyen dalam dokumen

<select>
Mentakrifkan senarai drop-down

<small>
Mentakrifkan teks kecil

<source>
Mentakrifkan pelbagai sumber media untuk unsur-unsur media (<video> dan <audio>)

<span>
Mentakrifkan seksyen dalam dokumen

<strike>
Tidak disokong dalam HTML5. Dikecam dalam HTML 4.01. Mentakrifkan teks batal

<strong>
Mentakrifkan teks penting

<style>
Mentakrifkan maklumat gaya untuk dokumen

<sub>
Mentakrifkan teks subscripted

<summary>
Mentakrifkan tajuk dilihat untuk elemen <details>

<sup>
Mentakrifkan teks ditandakan

<table>
Mentakrifkan jadual

<tbody>
Kumpulan kandungan badan dalam jadual

<td>
Mentakrifkan sel dalam jadual

<textarea>
Mentakrifkan kawalan input multiline (kawasan teks)

<tfoot>
Kumpulan kandungan pengaki dalam jadual

<th>
Mentakrifkan sel pengepala dalam jadual

<thead>
Kumpulan kandungan pengepala dalam jadual

<time>
Mentakrifkan tarikh / masa

<title>
Mentakrifkan tajuk untuk dokumen

<br
Mentakrifkan berturut-turut dalam jadual

<track>
Mentakrifkan trek teks unsur-unsur untuk media (<video> dan <audio>)

tt
Tidak disokong dalam HTML5. Mentakrifkan teks teletip

<u>
Mentakrifkan teks yang harus stylistically berbeza daripada teks biasa

<ul>
Mentakrifkan senarai tidak tertib

<var>
Mentakrifkan pembolehubah

<video>
Mentakrifkan video atau filem

<wbr>
Mentakrifkan mungkin line break


Sumber :

Perbedaan HTML 4 dengan HTML 5

Pengertian HTML 

HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World wide  Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).


HTML 5
HTML 5 memperkenalkan elemen baru ke HTML untuk pertama kalinya sejak tahun 1990-an. Unsur struktural baru termasuk aside, figure, dan section. Elemen inline baru seperti waktu, meter, dan progress.Termasuk Elemen Embedding baru seperti video dan audio. Elemen interaktif baru mencakup details, datagrid, dan command.
Pengembangan standar baru untuk web ini didorong oleh kelompok Web Hypertext Application Technology Working Group (WHATWG), yaitu sebuah kelompok kerja yang terdiri dari wakil para pengembang browser utama dari Google, Apple, Mozilla und Opera. Menurut rencana, sepesifikasi untuk HTML 5 diterapkan mulai tahun ini (1999) menggantikan Standar HTML 4.01. Salah satunya adalah menerapkan elemen HTML 5 yang mampu menggambar atau manipulasi geometri di web. Fitur penting lain misalnya kemudahan mengintegrasikan Video, Audio dan aplikasi lain menggunakan HTML 5.



Browser support HTML5

HTML5 adalah tidak lagi standard rasmi, dan tiada pelayar mempunyai sokongan HTML5 penuh.
Tetapi semua pelayar utama (Safari, Chrome, Firefox, Opera, Internet Explorer) terus untuk menambah ciri-ciri HTML5 baru untuk versi terbaru mereka.

Tentang Spesifikasi HTML 5
Spesifikasi HTML 5 Spesifikasi HTML 5 menjabarkan vokabular yang dapat ditulis dalam dua sintak yaitu html dan XML yang disesuaikan dengan kebutuhan pemrogram, pasar atau aplikasi. Vokabular HTML dari jaman sebalumnya (HTML+, HTML 2.0, HTML 3.2) umumnya ditulis menggunakan aturan sintak SGML. Pada HTML 4 telah diterapkan dua sintak yaitu: SGML (disebut sebagai HTML 4.01) dan XML (disebut XHTML 1.0).

Halaman Web yang Biasa ditulis Dengan HTML 4;

<html>  <head>
<title>Hobo Web LTD Scotland</title>

</head>
<body>
<div id="page">
<div id="header">
<h1><a href="/blog/">Hobo Web</a></h1>
</div>
<div id="container">

<div id="center" class="column">
<div class="post" id="post-102">
<h2><a href="/test-page/">
Test Page 1</a></h2>        <div class="entry">
<p>Article Text here</p>

</div>
</div>
<div class="post" id="post-101">
<h2><a href="/test2/">
Test 2</a></h2>
<div class="entry">
<p>Article 2 Text here</p>

</div>
</div>
</div>
<div class="navigation">
<div class="alignleft">
<a href="/blog/page/2/">« Previous Entries</a>
</div>
<div class="alignright"></div>

</div>
</div>
<div id="right" class="column">
<ul id="sidebar">
<li><h2>Hobo Stuff</h2>
<ul>
<li><a href="/blog/comment-policy/">Comment Policy</a></li>

<li><a href="/blog/todo-list/">Todo List</a></li>
</ul></li>
<li><h2>Archives</h2>
<ul>
<li><a href='/blog/2008/04/'>April 2008</a></li>

<li><a href='/blog/2008/03/'>March 2008</a></li>
<li><a href='/blog/2008/02/'>February 2008</a></li>
<li><a href='/blog/2008/01/'>January 2008</a></li>

</ul>
</li>
</ul>
</div>
<div id="footer"><p>Copyright 2008 Hobo Web LTD</p>
</div>
</div>

</body>
</html>


Contoh Halaman Web yang Ditulis dengan HTML5;

<html> <head>
<title>Hobo Web LTD Scotland</title>

</head>
<body>
<header>
<h1><a href="http://blog/">Hobo Web</a></h1>
</header>
<section>
<article>

<h2><a href="/test-page/">
Test Page 1</a></h2>        <p>Article Text here</p>
</article>
<article>
<h2><a href="/test2/">

Test 2</a></h2>
<p>Article Text 2 here</p>
</article>
<nav>
<a href="/blog/page/2/">« Previous Entries</a>
</nav>

</section>
<nav>
<ul>
<li><h2>Hobo Stuff</h2>
<ul>
<li><a href="/blog/comment-policy/">Comment Policy</a></li>

<li><a href="/blog/todo-list/">Todo List</a></li>
</ul></li>
<li><h2>Archives</h2>
<ul>
<li><a href='/blog/2008/04/'>April 2008</a></li>

<li><a href='/blog/2008/03/'>March 2008</a></li>
<li><a href='/blog/2008/02/'>February 2008</a></li>
<li><a href='/blog/2008/01/'>January 2008</a></li>

</ul>
</li>
</ul>
</nav>
<footer>
<p>Copyright 2008 Hobo Web LTD</p>
</footer>
</body>

</html>

HTML 5 mendefinisikan kelima revisi besar bahasa inti dari World Wide Web – HTML – dari W3C (World Wide Web Consortium). Juga disebut Aplikasi Web 1.0 – masih ada tidak ada ruang nama atau skema. Unsur tidak harus ditutup. Browser akan mengampuni kesalahan. Sebuah p masih p, dan meja masih meja.
HTML 5 menambahkan unsur-unsur baru untuk secara khusus mengidentifikasi masing-masing konstruksi umum:
·  Section: Sebuah bagian atau bab dalam sebuah buku, sebuah bagian dalam sebuah bab, atau pada dasarnya apa pun yang memiliki pos sendiri dalam HTML 4
·  Header: header Halaman yang ditampilkan pada halaman , tidak sama dengan unsur kepala
·  Footer: Halaman footer di mana baik cetak pergi; tanda tangan dalam sebuah pesan e-mail
·  Nav: Koleksi link ke halaman lain
·  Article: Sebuah entri independen dalam sebuah blog, majalah, ringkasan, dan sebagainya

Dalam HTML5 banyak kelebihan nya dibanding dengan versi HTML yang sebelum nya. Terdapat juga fitur fitus canggih pada HTML5. Dengan HTML5, pengembangan aplikasi web adalah lebih mudah dibandingkan sebelumnya.
  • Penyimpanan data Lokal
  • File akses lokal
  • Lokal SQL database
  • Cache aplikasi
  •  Javascript karyawan 
Sumber :