PAHLAWAN_97

Belajar HTML5

PENGERTIAN

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 dan hingga bulan Juni 2011 masih dalam pengembangan.

Dimana tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

Tujuan dibuatnya HTML5 :

Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )
Penanagan kesalahan yang lebih baik
Lebih markup untuk menggantikan scripting
HTML5 merupakan perangkat mandiri
Proses pembangunan dapat terlihat untuk umum

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, nav, section
Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.

HTML5 sangat powerful, sampai-sampai almarhum Steve Jobs pernah mengatakan HTML5 sebagai pengganti Flash, perkataan Steve Jobs tersebut sedikit banyak mempengaruhi para programmer yang ingin mengembangkan flash. Tentunya membuat sebagian dari mereka berpindah ke HTML5. Steve Jobs juga mengatakan kalau Flash itu berat dan boros baterai. Dan Apple tidak akan mensupport Flash lagi.

LOGO HTML5

Status
Berdasarkan pada jadwal kerja W3C, HTML5 diperkirakan menjadi kandidat rekomendasi pada akhir tahun 2010. Namun, publikasi pertama draft HTML 5 meleset selama 8 bulan. Permintaan dokumen terakhir dan tahap kandidat rekomendasi diharapkan dapat dicapai pada tahun 2008, tetapi hingga bulan Juli 2010 HTML 5 masih dalam tahapan draft pengerjaan di W3C. WHATWG telah meminta penyelesaian terakhir untuk HTML5 sejak bulan oktober tahun 2009.
Editor HTML5, Ian Hickson, berharap spesifikasi HTML5 dapat mencapai tahap kandidat rekomendasi pada tahun 2012 . Kriteria di W3C agar sebuah spesifikasi dapat berstatus – Direkomendasikan – adalah “yang kedua: 100% selesai dan penerapannya dapat dilakukan pada dua atau lebih sistem yang berbeda”. Pada wawancaranya dengan TechRepublic, Hickson memperkirakan hal ini baru akan terjadi pada tahun 2022 atau setelahnya. Meski demikian, banyak bagian dari spesifikasi sudah stabil dan telah dapat diterapkan pada produk.

Markup / Struktur Penulisan

Bagaimana memulai HTML? Cukup menuliskan tag berikut

<!DOCTYPE HTML>

Lengkap nya sebagai berikut:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title></title>
</head>
<body>

</body>
</html>

Ada beberapa Tag HTML baru yang bisa dipakai seiring munculnya HTML5

<header>

Header dari sebuah section, mungkin lebih enak menyebutnya seperti itu
Biasanya Header berfungsi untuk menentukan header dari website yang berisi Logo/Nama Website atau deskripsi website
header juga bisa diletakkan diantara <section>, untuk menandakan judul dari sebuah section

<section>

Section biasanya digunakan untuk meletakkan konten, sebuah section biasanya diletakkan setelah Header, dan sebelum Footer

<nav>

Untuk mendefinisikan area navigasi, biasanya berisi daftar link.

<article>

Article biasanya untuk menempatkan entry independent dalam sebuah blog, majalah, ringkasan dan sebagainya.
biasanya terletak didalam section

<aside>

Sebuah aside menunjukan konten yang berkaitan dengan konten lain nya yang ada di sekitar nya. Biasanya aside bisa digunakan untuk area sidebar pada sebuah blog.

<footer>

Untuk menentukan bagian footer atau bagian bawah dari sebuah website, biasanya berisi hak cipta dari sebuah website.

Penggunaan nya dalam struktur HTML selengkapnya sebagai berikut:

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Your Website</title>
</head>
<body>
 <header>
  <nav>
   <ul>
    <li>Your menu</li>
   </ul>
  </nav>
 </header>

 <section>
  <article>
   <header>
    <h2>Article title</h2>
    <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
   </header>
   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </article>

  <article>
   <header>
    <h2>Article title</h2>
    <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
   </header>
   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </article>

 </section>

 <aside>
  <h2>About section</h2>
  <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 </aside>

 <footer>
  <p>Copyright 2009 Your name</p>
 </footer>
</body>
</html>

Beberapa browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera. Kabarnya IE9 ( Internet Explorer ) akan mendukung beberapa fitur dari HTML5

Referensi:
http://www.tutorial-webdesign.com/mengenal-struktur-html5/

Recent Post