Tentang HTML 5

TENTANG HTML 5

A.     Sejarah HTML 5

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.

Setelah berakhirnya masa pengembangan HTML4 pada tahun 1998, dilanjutkan perkembangan HTML4 untuk XML yang dikenal dengan XHTML 1.0. XHTML 1.0 selesai dikembangkan pada tahun 2000. Saat itu sebenarnya HTML akan mulai dikembangkan, namun masih menunggu proses pengembangan XHTML 2.0 yang mana selesai pada tahun 2003.

Tahun 2004 kembali diadakan workshop tentang evolusi untuk HTML5 dan saat itulah muncul ide-ide dan gagasan tentang Semantic Web. Tahun 2007, W3C ikut serta dalam pengembangan HTML5 dan terbentuklah suatu komunitas WHATWG (Web Hypertext Application Technology Working Group). Perusahaan besar seperti Mozilla, Opera dan Apple mengakui HTML5 dipublikasikan oleh W3C dengan lisensi komunitas WHATWG.

HTML5 telah dipublikasikan secara resmi oleh W3C pada bulan Mei 2011 dan rencananya akan terus dikembangkan hingga tahun 2014 nanti. Walaupun HTML5 masih terus dikembangkan, jangan khawatir untuk menggunakan HTML5 karena saat ini HTML5 hanya membutuhkan penyempurnaan saja, sudah tidak lagi berada di masa percobaan yang bisa berstatus produksi gagal.

B.     Kelebihan dan kekurangan HTML5

Kelebihan :

1.      Cleaner code, karena sebagian besar kode telah termasuk di dalam sintaks html5, maka kode nampak terlihat lebih sederhana daripada penggabungan antara html, css dan java script.

2.      Greater consistency, HTML5 telah melakukan banyak sekali penambahan sintaks yang dibuat dalam struktur lebih baik dan lebih sederhana daripada sintaks-sintaks sebelumnya. Hal ini membuat developer terbantu dalam meningkatkan konsistensi dalam membangun sebuah web.

3.      Improve Semantics, dengan berbagai elemen kode di dalam html5 yang telah distandarisasi, maka nilai semantik dari sebuah web dapat lebih ditingkatkan. Itu berarti bahwa bagian-bagian dari web seperti header, nav, footer dan beberapa bagian lainnya terdefinisi dengan jelas maksud serta tujuannya selain itu juga terbentuk dalam sebuah “machine readible format”

4.       Improved Accessibility, dengan teknologi HTML5 yang memudahkan struktur pembangunan sebuah web, maka developer dapat membangun pemahaman yang lebih detil mengenaik halaman web.

5.      Client-side Database, HTML5 menyediakan model database SQL yang baru dengan API yang dapat dibangun dalam konsep lokal, dalam hal ini di sisi client.

6.      Geolocation, HTML5 mempunyai API yang terintegrasi terhadap geolocation, fasilitas tersebut dapat diakses melalui GPS atau fasilitas lain seperti Google Latitude pada iphone.

7.      Offline Aplication Cache, pengguna dapat terus melakukan interaksi dengan aplikasi meskipun mereka terputus dari jaringan internet.

8.      Smarter Forms, terdapat semacam reguler expression (regex) yang membuat form mampu mengenali secara lebih baik tentang input, validasi data dan interaksi dengan elemen lain (misal : format email, password dll)

9.      Sharper focus on Web Application Requiments, HTML5 membuat sebuah mekanisme yang lebih mudah dalam hal pembuatan front end, aplikasi chat, tools drag and drop, video player, pengolah grafis dan masih banyak lagi.

Kekurangan

1.      Kekurangan utama yang dimiliki oleh HTML5 ini adalah versi ini hanya support untuk browser modern/terbaru

2.      Karena bahasa HTML5 ini masih dalam perkembangan, jadi beberapa elemen yang ada bisa saja berubah

3.      Fitur keamanan yang ditawarkan HTML5 masih terbatas

4.       tidak dapat diandalkan dalam hal format karena web browser yang berbeda disebabkan mereka tidak mendukung salah satu format tunggal.

C.     Atribut HTML5

·         onafterprint Baru : Script yang akan dijalankan setelah dokumen dicetak

·         onbeforeprint Baru : Script yang akan dijalankan sebelum dokumen dicetak

·         onbeforeunload Baru :  Script yang akan dijalankan sebelum dokumen dibongkar

·         onerror Baru : Script yang akan dijalankan ketika kesalahan terjadi

·         onhaschange Baru : Script yang akan dijalankan ketika dokumen telah berubah

·         onload : Kebakaran setelah halaman selesai loading

·         onmessage Baru : Script yang akan dijalankan saat pesan dipicu

·         onoffline Baru : Script yang akan dijalankan ketika dokumen berjalan offline

·         ononline Baru : Script yang akan dijalankan ketika dokumen datang online

·         onpagehide Baru : Script yang akan dijalankan ketika jendela tersembunyi

·         onpageshow Baru : Script yang akan dijalankan ketika jendela menjadi terlihat

·         onpopstate Baru : Script yang akan dijalankan ketika jendela sejarah perubahan

D.     Fitur baru dalam HTML5

Fitur-fitur baru HTML5

·         Canvas : media yang bisa dicoret-coret langsung dan tidak memerlukan plugin khusus.

·         Video dan Audio : Karena sudah ada tag <audio> dan <video> maka kita tidak memerlukan flash lagi untuk memutar audio.

·         Local storage : dapat menyimpan data yang memiliki kapasitas besar dibanding yang lain tanpa harus mengimplementasikan trik dengan cookie atau flash.

·          Workers : Web workers ini mempunyai kelebihan dibanding dengan javascript, missal saja saat kita mengoperasikan computer dengan javascript maka akan menyebabkan computer melambat, nah ini yang membedakan dengan web workers.

·          Semantics : untuk mencari informasi namun juga dapat melakukan seperti yang dijelaskan diatas.

E.     HTML5 Semantic

Merupakan tag baru yang dikeluarkan pada HTML5 guna mendukung perubahan struktur halaman agar terlihat lebih rapi, selain itu juga untuk mengurangi pemakaian tag <div>

Elemen-elemen baru yang ditambahkan pada HTML5 adalah:

1.      <article > : tag ini mendefinisikan artikel, posting atau komentar dari pengguna, atau suatu konten yang independen

2.      < aside > : tag aside pada HTML5 menandakan suatu konten yang terpisah (aside) dari konten sebuah halaman, seperti sebuah sidebar

3.      < bdi > : teks tidak boleh terikat pada arah teks elemen

4.      < command > : Sebuah button, atau radiobutton, atau checkbox.

5.      < details > : Untuk menjelaskan detail tentang sebuah dokumen atau sebagian dari dokumen.

6.      < summary > : Digunakan pada sebuah ringkasan dan sejenisnya di dalam tag <details>

7.      < figure > : Untuk mengelompokkan sekumpulan section, biasanya berupa video

8.      < figcaption > : Berisi caption/keterangan yang ditempatkan di dalam tag <figure>

9.      < footer > : Anda tidak perlu lagi mendefinisikan ID header atau footer, gunakan tag ini untuk menggantikannya

10.  < header > : Anda tidak perlu lagi mendefinisikan ID header atau footer, gunakan tag ini untuk menggantikannya

11.   < hgroup > : Digunakan untuk sekumpulan heading

12.  < mark > : Digunakan pada teks yang akan di highlight

13.  < meter > : Digunakan untuk pengukuran, dimana nilai maksimal dan minimal telah ditentukan

14.  < nav > : navigasi pada website Anda dapat ditaruh didalam tag nav, yang dapat secara otomatis membuat daftar Anda seperti sebuah navigasi

15.  < progress > : Membuat Progress bar

16.  < ruby > : Digunakan untuk anotasi ruby

17.  < rt > : Untuk menjelaskan anotasi ruby

18.  < rp > : Menunjukkan elemen jika browser tidak mendukung ruby

19.   < section > : tag ini dapat mendefinisikan section apapun dalam document Anda. Section bekerja kurang lebih seperti div yang memisahkan section yang berbeda

20.  < time > : Untuk mendefinisikan waktu dan tanggal

21.  < wbr > : Word Break. Untuk memisah suatu kata bila diperlukan

F.      Manfaat dan kegunaan HTML5

- pemberian pertolongan

Untuk meningkatkan kegunaan, web designer saat membuat website yang sangat interaktif dengan memasukkan memutar musik dan pilihan streaming video, animasi cairan dan situs jejaring sosial seperti Twitter dan Facebook di situs tersebut. Namun, sebelum HTML5 debut, mereka hanya bisa melakukannya dengan menggunakan Silverlight atau Flash, JavaScript atau Flex alat yang tidak hanya membuat aplikasi web lebih rumit, tetapi juga dikonsumsi banyak waktu. Namun, HTML5 Desain membuatnya lebih mudah untuk menanamkan audio dan video, animasi berkualitas tinggi, grafik dan gambar nyaman tanpa perlu menggunakan program pihak ketiga lainnya atau plugin.

- peningkatan semantic

Berkat HTML5, sekarang mudah untuk melihat header, footer, nav dan bagian lain dari halaman web sebagai tag sekarang lebih spesifik dan memahami tujuan utama mereka dan makna seluruh format yang. Kode desain web sangat standar sehingga meningkatkan semantik.

-  kode peningkatan

Dengan menggunakan HTML5, web designer dan pengembang menikmati bekerja dengan rapi dan kode bersih dengan menghapus sebagian besar tag div di situs.

- konsistensi

Sebagai website mengadopsi unsur-unsur baru dari HTML5, hal ini membantu untuk mencapai konsistensi yang lebih besar ketika datang untuk menggunakan HTML dalam pengkodean halaman web. Dengan demikian, HTML5 Desain jauh lebih mudah dan dimengerti dan desainer dapat dengan mudah mengetahui struktur dari halaman web.

- Bentuk elegan

Web desainer dapat menggunakan bentuk pengujian dan HTML5 juga membuat validasi bentuk asli ke HTML, meningkatkan antarmuka pengguna dan mengurangi kebutuhan untuk javascript dalam pengembangan website

Contoh :

<html>

<head>

    <title>Belajar HTML5</title>

    <script type="text/javascript">

        // fungsi untuk menggambar canvas

        function draw(){

            var canvas = document.getElementById('belajar'); // penanda (id) canvas pada blok <body>

            // mulai menggambar canvas

            if (canvas.getContext) {

                var ctx = canvas.getContext('2d');

            }

    }

    </script>

    <style type="text/css">

        /* memberikan warna pada canvas */

        canvas {

            border: 2px solid red;

        }

    </style>

</head>

<body onLoad="draw();"> <!-- panggil fungsi untuk menggambar canvas -->

    <canvas id="belajar" width="175" height="175"></canvas> <!-- penanda (tag) canvas yang akan digambar -->

</body>

</html>