Belajar HTML5

BAB I

PENDAHULUAN

1. Latar Belakang

Perkembangan setiap segi kehidupan manusia di abad ke 21 ini semakin maju dan berkembang.  Dimulai dari segi sosial, budaya, pendidikan, ekonomi, politik, dan teknologi. Perkembangan dalam berbagai segi kehidupan manusia tersebut menimbulkan perubahan dalam mekanisme setiap masing-masing segi. Di sisi lain, perubahan dalam mekanisme suatu segi yang satu ikut mempengaruhi mekanisme segi yang lain. Hal tersebut dikarenakan adanya saling keterkaitan antara segi yang satu dengan segi yang lain. Sebagai salah satu contohnya yaitu terjadi pada segi teknologi dan segi pendidikan.

Perkembangan teknologi memang selalu mengalami peningkatan yang sangat pesat. Hal ini terbukti dengan digunakannya komputer, smartphone, hingga internet dalam berbagai segi kehidupan. Tidak hanya di kalangan instansi-instansi pemerintahan atau swasta saja yang bisa menggunakannya, masyarakat awam pun saat ini bisa mengaksesnya dengan begitu bebasnya. Karena memang banyak diakui penggunaan produk-produk teknologi tersebut telah banyak membantu mempermudah setiap orang dalam mengerjakan pekerjaannya.

Terlebih teknologi internet yang sangat banyak memberikan berbagai informasi bagi setiap penggunanya. Mengingat betapa pentingnya hal tersebut maka para programmer berusaha membuat dan mendesain berbagai program-program dan aplikasi yang dibutuhkan oleh para penggunanya saat melakukan browsing internet. Tujuannya agar setiap pengguna internet bisa semakin mudah dalam mencari informasi atau materi yang dibutuhkannya.

Salah satu media yang digunakan para programmer dalam membuat dan mendesain berbagai program dan aplikasi di internet yaitu dengan menggunakan HTML5. HTML5 adalah versi terbaru dari HTML (HyperText Markup Language) yang mana dikembangkan oleh W3C atau Word Wide Web Consortium. Apabila dilihat dari perkembangannya teknologi HTML ini terbilang cukup pesat mengingat versinya sudah sampai ke seri yang ke 5. Pemakaiannya pun semakin banyak semenjak kehadirannya pada tahun 1990.

Oleh karena itu, makalah ini dibuat untuk menjelaskan mengenai bahasa pemrograman HTML5 yang saat ini terbilang cukup banyak penggunanya.

B.    Rumusan Masalah

Dari latar belakang yang telah dijelaskan, penulis dapat merumuskan masalah sebagai berikut:

1.    Apa yang dimaksud dengan HTML5 ?

2.    Bagaimana sejarah HTML5 ?

3.    Apa saja dasar-dasar HTML5 ?

4.    Apa saja struktur HTML5 ?

5.    Apa tujuan dibuatnya HTML5 ?

6.    Apa saja istilah-istilah dalam HTML5 ?

7.    Apa fungsi HTML5 ?

8.    Apa saja fitur-fitur dalam HTML5 ?

9.    Apa kelebihan HTML5 ?

10. Apa kelemahan HTML5 ?

11. Bagaimana contoh penggunaan HTML5 ?

3. Tujuan Penulisan

Adapun tujuan dari penulisan makalah ini antara lain:

1.    Untuk mengetahui pengertian HTML5

2.    Untuk mengetahui sejarah HTML5

3.     Untuk mengetahui dasar-dasar HTML5

4.    Untuk mengetahui struktur HTML5

5.    Untuk mengetahui tujuan dibuatnya HTML5

6.    Untuk mengetahui istilah-istilah dalam HTML5

7.    Untuk mengetahui fungsi-fungsi HTML5

8.    Untuk mengetahui fitur-fitur HTML5

9.    Untuk mengetahui kelebihan HTML5

10. Untuk mengetahui kelemahan HTML5

11. Untuk mengetahui bagaimana contoh penggunaan HTML5

4. Metodologi Pengumpulan Data

Dalam penulisan makalah ini, metode pengumpulan data yang penulis gunakan adalah metode kepustakaan. Yaitu dimana penulis mencari referensi melalui internet yang berkaitan dengan pokok bahasan yang penulis kembangkan.

BAB II

PEMBAHASAN

1. Pengertian HTML   

Program adalah kata, ekspresi, pernyataan atau kombinasi yang disusun dan dirangkai menjadi satu kesatuan prosedur yang berupa urutan langkah untuk menyelesaikan masalah dan diimplementasikan dengan menggunakan bahasa pemrograman sehingga dapat dieksekusi oleh komputer. Pemrograman adalah proses mengimplementasikan urutan langkah untuk menyelesaikan suatu masalah dengan menggunakan suatu bahasa pemrograman. Bahasa pemrograman adalah suatu prosedur penulisan program. Sedangkan pemrograman terstruktur adalah metode untuk mengorganisasikan dan membuat kode-kode program supaya mudah untuk dimengerti, mudah ditest dan mudah dimodifikasi. Salah satu contoh pemrograman adalah pemrograman di internet.

HTML merupakan salah satu unsur penting dalam pemrograman di internet. HTML (Hypertext Markup Language) adalah bahasa pengkodean untuk menghasilkan dokumen-dokumen hypertext untuk digunakan di World Wide Web. Namun HTML bukanlah sebuah bahasa pemrograman, tetapi hanyalah berisi perintah-perintah yang telah terstruktur berupa tag-tag penyusun. HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu.

HTML ini  merupakan sebuah format bahasa dari world wide web (WWW) untuk menulis dan menampilkan dokumen. Sehingga dokumen  tersebut dapat dengan mudah tersebar ke PC melalui media jaringan komputer atau internet. HTML ini berupa kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sehingga, untuk dapat membuka dokumen yang ditulis dengan HTML maka diperlukan sebuah tool yaitu browser misalnya Opera, Mozila, Google Chrome, Netscape, dan banyak lagi yang lainnya. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser.

Adapun pengertian dari HTML5 itu sendiri adalah versi terbaru dari HTML (HyperText Markup Language) yang mana dikembangkan oleh W3C atau Word Wide Web Consortium. HTML5 diciptakan dalam pengembangan bahasa HTML untuk memperbaiki konten dan memperbarui teknologi multimedia yang sudah ada pada HTML 4 dan versi sebelumnya agar mudah dijalankan oleh browser dan mudah dimengerti. HTML5 merupakan kerjasama antara World Wide Web Consortium (W3C) dan Web Hypertext Application Teknologi Working Group (WHATWG).WHATWG bekerja dengan bentuk web dan aplikasi, dan W3C bekerja dengan XHTML 2.0. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

Di sisi lain HTML5 sering juga disebut dengan Semantic Web. Semantic web 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 memang cepat sekali berubah. 

2. Sejarah HTML5

Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk menulis halaman web. HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu.

Konsep HTML diciptakan pertama kali oleh IBM pada tahun 1980 pada saat berniat membuat bahasa kode untuk menggabungkan teks dengan perintah pemformatan agar mengenali elemen dokumen dan untuk meletakkan elemen-elemen yang menandai bagian suatu dokumen seperti judul, alamat dan isi dokumen. Lalu, pada akhirnya elemen-elemen itu menjadi suatu program untuk melakukan pemformatan dokumen secara otomatis. Bahasa pemprograman untuk melakukan tugas tersebut disebut markup language, atau lebih lengkapnya IBM menamai program tersebut sebagai Generalized Markup Language (GML).

Pada tahun 1986, ISO (International Standard Organization) mengeluarkan standarisasi bagi pembuatan dokumen-dokumen behasa markrup berdasarkan GML. Hal ini ditandai dengan keluarnya ISO 8879. ISO menamai GML ini menjadi SGML (Standard Generalized Markup Language). Dalam perkembangannya, bahasa SGML  kemudian banyak digunakan di dunia penerbitan.

Pada tahun 1989, Tim Caillau bekerja sama dengan Barners Lee Robert, dan ketika mereka kerja di CERN, sebuah lembaga peneliti fisika energi tinggi di Jenewa mencoba untuk melakukan pengembangan terhadap SGML. Dan akhirnya setelah pemikiran dan perkembangan-perkembangan yang sedemikian rupa rumitnya, lahirlah HTML yang digunakan untuk membuat halaman website. HTML ini pertama kali dipopulerkan oleh browser Mosaic.

Dalam perkembangannya selama awal tahun 1990 HTML mengalami perkembangan yang sangat pesat. Setiap pengembangan HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya. Namun perkembangan resmi dikeluarkan pada bulan November 1995 oleh IETF (Internet Engineering Task Force). HTML 2.0 ini merupakan penyempurnaan dari HTML+ (1993). Sejak tahun 1996, Worl Wide Web Consortium, (WWWC) juga ikut serta dalam melakukan pengembangan dan mengeluarkan versi HTML 3.2. Sejak itulah HTML digunakan sebagai bahasa standar internet yang merupakan perangkat dibawah kendali WWWC.

HTML 3.0 (1995) memberikan kemampuan lebih daripada versi sebelumnya. Sebuah usaha dari World Wide Web Consortium’s (W3C) HTML Working Group pada tahun 1996 menghasilkan HTML 3.2. HTML versi ini secara resmi diterbitkan pada bulan Januari 1997. HTML versi terbaru adalah HTML 4.01 yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998. HTML merupakan perbaikan dari HTML 4.0 yang lebih dulu diterbitkan. (18 Desember 1997). 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. Sejauh ini browser desktop maupun browser mobile sudah mampu mengimplementasikan HTML5, walaupun belum sepenuhnya sempurna. Browser yang saat ini paling maju untuk fitur HTML5 atau semantic web adalah Google Chrome.

3. Dasar-Dasar HTML5

Mendesain HTML berarti melakukan suatu tindakan pemrograman. Namun HTML bukanlah sebuah bahasa pemrograman. HTML hanyalah berisi perintah-perintah yang telah terstruktur berupa tag-tag penyusun. Menuliskan tag-tag HTML tidaklah sebatas hanya memasukkan perintah-perintah tertentu agar HTML kita dapat diakses oleh browser. Mendesain HTML adalah sebuah seni tersendiri. Homepage yang merupakan implementasi dari HTML adalah refleksi dari orang yang membuatnya. Untuk itu perlu mendesainnya dengan baik agar para pengunjung homepage merasa senang dan bermanfaat.

Mendesain HTML dapat dilakukan dengan dua cara:           

1.    Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, dan lain-lain. Dapatkan editor HTML lainnya disini.

2.    Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam dokumen HTML.     

Ada kelebihan dan kekurangan dari dua cara di atas. Cara pertama kelebihannya adalah HTML Editor merupakan sebuah program yang khusus didesain untuk membuat, melakukan editing bahkan mem-publish ke internet. Dengan kemampuannya menggabungkan kemudahan dan kecanggihan teknologi internet ke dalam dokumen HTML maka cara ini sangat disukai oleh para pemula dan desainer yang tidak ingin belajar lebih mendalam mengenai HTML. Sedangkan cara kedua adalah menuliskan secara manual satu persatu tag-tag HTML. Hal ini sangat disarakan sulit dikarenakan akan memakan tenaga dan waktu ekstra untuk melakukannya, ditambah lagi harus dilakukan cara-cara konvensional untuk melihat hasilnya pada web browser. Namun pada cara kedua adalah dasar dari segala bentuk HTML yang akan dipelajari, karena dengan cara itulah pengguna akan lebih paham mengenai cara kerja dan berbagai perintah yang biasa dipakai pada bahasa HTML.

4. Struktur Pada HTML5

Layaknya dokumen standar lainnya, HTML5 juga memiliki struktur tertentu. Secara garis besar, struktur dokumen HTML5 cuma terdiri dari dua bagian, yaitu head dan body. Namun tentunya ada beberapa detail lain yang perlu diperhatikan juga. Bagian head diawali dengan tag <head> dan ditutup dengan pasangannya, yaitu </head>. Bagian body diapit oleh tag <body> dan </body>. Bagian head dan body tersebut harus diapit lagi oleh tag <html> dan </html>. Dan jangan lupa, di baris paling awal harus ada deklarasi dokumen HTML sebagai berikut:

·      <!DOCTYPE html>

Jadi secara lengkap, struktur dokumen HTML5 terlihat seperti Listing 1. Listing 1 ini tidak ditujukan untuk dijalankan pada browser, melainkan hanya menunjukkan struktur dokumen HTML5 saja.

·      Bagian Head

Bagian head HTML5 digunakan untuk menyimpan berbagai informasi mengenai isi dokumen tersebut. Paling sedikit, bagian head harus mengandung judul dokumen. Judul dokumen ini diapit oleh tag <title> dan </title> serta akan ditampilkan pada bagian title bar browser. Selain judul dokumen, bagian head dapat mengandung informasi-informasi berikut:

a)    Metadata: berisi berbagai data tambahan tentang dokumen HTML5 seperti nama pengarang/penulis, tanggal publikasi, deskripsi isi dokumen, kata kunci, dan lain-lain. Informasi ini dinyatakan oleh tag <meta> saja, tanpa tag penutup </meta>.

b)    Base URL: menentukan basis lokasi untuk link-link yang ada pada dokumen. Informasi ini dinyatakan oleh tag <base> saja, tanpa tag penutup </base>.

c)    Link: menentukan link ke dokuman lain yang terkait erat dengan dokumen HTML5, misalnya skrip CSS yang digunakan dalam desain halaman web. Informasi ini dinyatakan oleh tag <link> saja, tanpa tag penutup </link>.

d)    Objek: berisi informasi mengenai objek yang mungkin ada pada dokumen HTML5. Objek yang mungkin terkandung pada dokumen HTML5 antara lain adalah video, audio, dan animasi flash. Informasi ini dinyatakan dengan diapit oleh tag <object> dan </object>.

e)    Skrip: berisi informasi mengenai skrip pemrograman yang mungkin ada pada dokumen HTML5. Skrip pemrograman ini umumnya bersifat client-side seperti JavaScript. Informasi ini dinyatakan dengan diapit oleh tag <script> dan </script>.

f)      Style: berisi informasi mengenai desain halaman web dalam format CSS yang langsung dituliskan di bagian head, bukan pada dokumen terpisah. Jika hendak dituliskan pada dokumen terpisah, gunakan link. Informasi ini dinyatakan dengan diapit oleh tag <style> dan </style>.

·      Bagian Body

a)    Bagian body HTML5 merupakan bagian yang nantinya diterjemahkan dan ditampilkan oleh browser. Di bagian inilah terkandung berbagai tag yang menyatakan desain dokumen HTML. Jadi bisa dibayangkan pastilah akan banyak terdapat tag HTML yang bisa digunakan di bagian ini. Karena itu PCplus akan membahasnya sedikit demi sedikit mulai dari yang paling mudah terlebih dahulu. Yang pertama adalah paragraf. Sebuah dokumen yang terstruktur dengan baik pastilah terdiri dari beberapa paragraf. Untuk memisahkan antara satu paragraf dengan paragraf yang lain digunakan tag <p>. Tag ini harus ditutup dengan pasangannya, yaitu </p>.

b)    Untuk sekedar ganti baris tanpa ganti paragraf, digunakan tag <br>. Karena tag ini tidak memiliki pasangan maka ditulis dengan <br />. Ganti baris pada dokumen HTML5 perlu diberi tag sendiri karena meski pada kode HTML-nya ganti baris tetapi browser tidak akan menampilkannya pada baris terpisah.

c)    Untuk memberikan format tampilan tertentu terhadap teks, tersedia beberapa tag berikut:
• <b> dan </b> untuk menampilkan teks secara tebal.
• <i> dan </i> untuk menampilkan teks secara miring.
• <u> dan </u> untuk menampilkan teks dengan garis bawah.
• <font> dan </font> untuk menentukan jenis font.
• <img /> untuk menampilkan gambar.
• <hr /> untuk menampilkan garis horisontal.

d)    Dalam menuliskan dokumen HTML5, yang sangat perlu diperhatikan adalah letak tag, jangan sampai tag pembuka dan penutup tumpang tindih. Berikut adalah contoh yang benar: <b><i>teks</i></b>.

5. Tujuan Dibuatnya HTML5

Terdapat beberapa tujuan mengapa HTML5 diciptakan, diantaranya yaitu:

1.     Fitur baru harus didasarkan pada HTML, CSS, DOM , dan JavaScript. 

2.     Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).

3.     Penanganan kesalahan yang lebih baik.

4.     Lebih banyak markup untuk menggantikan scripting.

5.     HTML5 merupakan perangkat mandiri.

6. Istilah-Istilah Dalam HTML5

Meskipun HTML5 belum dirilis secara resmi, tetapi banyak fitur HTML5 yang sudah diimplementasikan oleh browser-browser besar seperti Mozilla Firefox, Opera, Safari, dan Google Chrome. Seorang programmer harus mengetahui fitur-fitur yang pastinya akan banyak dipakai di dunia Internet masa mendatang tersebut. Berikut ini adalah beberapa hal tentang HTML5 yang wajib Anda ketahui, yaitu:

1.      Deklarasi doctype baru

Sebelum membuat sebuah halaman dengan HTML5, tentu saja doctype yang digunakan juga harus benar. Doctype pada HTML5 jauh lebih sederhana daripada XHTML, sehingga tidak perlu menghafalnya. Pada doctype untuk XHTML 1.0, harus dituliskan dengan panjang.

2.      Struktur semantic

Pada XHTML, programmer HTML bisa saja menjadi pembuat stress programmer CSS karena struktur halaman yang dibuatnya. Harus ada kesepakatan penamaan yang solid antara kedua pihak agar tidak ada masalah pembacaan struktur halaman. Biasanya, dalam XHTML akan dibuat sebuah “div” dengan id-nya masing-masing, seperti pada gambar.

Struktur tersebut tidak terlihat semantic, sulit dibaca dan dideskripsikan, serta bagi programmer HTML yang iseng, bisa saja id header diubah sesukanya. HTML5 menawarkan elemen-elemen yang umum digunakan dalam sebuah struktur halaman website. Sehingga, penulisan tag setiap elemen dapat terlihat lebih semantic dan mudah dibaca, seperti pada gambar.

Banyak manfaat jika menggunakan struktur seperti ini. Elemen “header” merepresentasikan header dari suatu section. Elemen “footer” juga merepresentasikan footer dari suatu section. Elemen “nav” cocok digunakan untuk merepresentasikan link navigasi. Sedangkan elemen “section” merepresentasikan suatu bagian generic dari dokumen.

3.      Contenteditable

Yaitu atribut baru dari HTML5 yang memungkinkan sebuah elemen untuk dimodifikasi langsung pada tampilan. Hasil tampilan dari kode di atas adalah memungkinkan untuk penambahan list dalam tag “ul” yang telah diberikan atribut tersebut. Jika dikombinasikan dengan sedikit Javascript, fitur ini bisa menghasilkan sebuah mekanisme input yang cukup powerful namun mudah untuk dibuat.

4.      Validasi email

Dengan validasi langsung di tampilan, maka dapat mencegah seorang user untuk memanggil script website dengan input yang salah. Ini dapat mengurangi jumlah request yang tidak valid terhadap script program. HTML5 menawarkan fitur validasi email secara langsung dengan mengubah type dari elemen input menjadi “email”. Sayangnya, masih belum semua browser memberikan support untuk fitur ini. Dari percobaan penulis, salah satu browser yang memiliki fitur ini adalah Opera.

5.      Atribut required

Satu lagi untuk input pada HTML5, memungkinkan validasi pada sisi client terhadap input yang harus diisi. Dengan demikian, tidak perlu membuat fungsi javascript untuk melakukannya. Cukup menambahkan atribut “required” pada elemen “input”. Jika tombol submit ditekan, akan muncul pesan error.

6.      Internet Explorer Hack

Seperti biasanya, Internet Explorer selalu terlambat dalam mengimplementasikan teknologi website terbaru, meski Microsoft selalu memiliki teknologi sendiri seperti silverlight untuk browsernya tersebut. Pada IE, secara default semua elemen akan ditampilkan secara “inline”. Untuk itu, maka harus mendeklarasikan style tersendiri agar tampilan dapat seperti seharusnya.

Untuk kemudahan, seseorang bernama Remy Sharp telah membuat library javascript untuk mengatasi error yang dibuat oleh IE tersebut. Script ini biasa disebut dengan HTML5 shim.

G.   Fungsi HTML5

HTML seperti yang dijelaskan sebelumnya merupakan bahasa pemrograman berbahasa markup yang digunakan untuk menampilkan halaman website melalui browser. Namun tentu bukan hal itu saja yang dapat dilakukan HTML, berikut ini fungsi dari HTML.

1.     Membuat, mendesain, dan mengontrol tampilan dari web page (Halaman Web) dan isinya.

2.     Mempublikasikan dokumen secara online sehingga bisa di akses, dilihat dan ditampilkan dari dan ke seluruh dunia.

3.     Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online.

4.     Menambahkan objek-objek seperti image, audio, video dan juga java applet (aplikasi java seperti java game dll) dalam document HTML.

5.     Membuat link menuju halaman web lain dengan kode tertentu (hypertext).

H.   Fitur-Fitur HTML5

HTML5 memiliki berbagai fitur yang terbilang cukup berguna bagi para programmer. Fitur-fitur yang terdapat dalam HTML5 diantaranya yaitu:

v  Canvas Elemen

Dengan tag <canvas>, area tersebut dapat digunakan untuk menggambar grafik secara dinamis menggunakan javascript. Misalnya seperti shape lingkaran, garis diagonal, hingga grafik 3 dimensi.

v  Video & Audio Elemen

Sebelum HTML5, menyisipkan video atau audio dalam HTML memerlukan bantuan plugin pihak ketiga seperti Apple Quicktime atau Adobe Flash. Dalam HTML5, cukup gunakan tag <video> untuk menyisipkan file  video, dan <audio> untuk file audio.

v  Geolocation

Melacak posisi user bukanlah hal baru di internet, misalnya menggunakan IP addres detection. Namun metode ini tidak selalu dapat diandalkan. Dengan HTML5 dan javascript, posisi user dapat dilacak menggunakan informasi dari Wi-Fi dan GPS. Mirip seperti yang digunakan pada Smartphone.

v  Offline Web Application

HTML5 memungkinkan User untuk terus berinteraksi dengan aplikasi web tanpa harus selalu online. Misalnya mengedit dokumen pada google docs atau mengedit foto di situs olah gambar seperti picnic.com

Dan masih banyak fitur baru lainnya seperti kemampuan untuk Drag and Drop, text api, datagrid, Cross document mesaging, SVG elemen dan lainnya.

I.     Kelebihan HTML5

Beberapa kelebihan yang dimiliki oleh HTML5 (sebagai hipotesis awal) adalah:

-      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.

-      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.

-      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”Improved Accessibility, dengan teknologi HTML5 yang memudahkan struktur pembangunan sebuah web, maka developer dapat membangun pemahaman yang lebih detil mengenaik halaman web.

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

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

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

-      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)

-      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.

J.     Kelemahan HTML5

Saat ini HTML5 masih dalam pengembangan, sehingga hanya beberapa browser yang sudah mendukung HTML5, seperti fitur-fitur pada HTML 5 tidak semuanya bisa berfungsi dengan baik pada beberapa browser. Beberapa browser yang sudah mendukung HTML 5 seperti Safari, Chrome, Firefox, dan Opera. Namun kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML5.

K.    Contoh Penggunaan HTML5

Berikut ini adalah Contoh penggunaan HTML 5.

<!DOCTYPE html>

<html>

 <head>

   <title>HTML5</title>

 <header>

   <h1 align="center">Header HTML 5</h1>

   <hr size=1 color="black"/>

   <p><time pubdate datetime="2011-03-15"></time></p> 

 </header>

 <nav>

   <a href="/home/">Home</a>

   <a href="/profil/">Profil</a>

   <a href="/contact/">Contact</a>

   <a href="/About Us/">About Us</a>

 </nav>

   <hr size=1 color="black"/>

 </head>

 <body>

   <article>

      <h3>HTML 5</h3>

           <p color="red">Ini adalah contoh penggunaan HTML   5</p>

      <img src="C:\Users\Public\Pictures\Sample Pictures\HTML5_Logo.png" width=200 ><br>

      <textarea rows="4" cols="50">

           ini adalah contoh textarea

      </textarea>

   </article>

  <hr size=1 color="black"/>

  <footer>

     © <i>design by </i> <span style="color:green">Dimas Setiawan</span>

  </footer>

 </body>

</html>

Berikut ini hasil dari sintaks diatas:

BAB III

PENUTUP

A.  Kesimpulan

HTML (Hypertext Markup Language) adalah bahasa pengkodean untuk menghasilkan dokumen-dokumen hypertext untuk digunakan di World Wide Web. HTML5 adalah versi terbaru dari HTML (HyperText Markup Language) yang mana dikembangkan oleh W3C atau Word Wide Web Consortium. HTML5 merupakan 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. Selama ini, pengembangan dari HTML 4.01 dn XHTML 1.1 berjalan secara terpisah dan diimplementasikan secara berbeda-beda oleh berbagai aplikasi pembuat website. Intinya, dengan HTML5 bahasa pemrograman web akan lebih universal dan menjadi bahasa pemersatu dari beberapa bahasa pemrograman web yang ada sekarang. Selain itu, banyak fitur dari HTML5 yang telah dibuat sedemikian rupa dan memungkinkannya untuk berjalan di perangkat mobile seperti smartphone dan tablet.

Manfaat utama lainnya yang terkait dengan HTML5 yang seperti dukungan Geolocation dan meningkatkan aksesibilitas dari halaman web. Ini hanya menyoroti manfaat dari HTML5 dan para ahli percaya bahwa HTML5 akan berkembang menjadi bahasa pengembangan secara online penting dalam waktu dekat. Ada baiknya memang manusia mengetahui fitur-fitur yang pastinya akan banyak dipakai di dunia Internet masa datang ini.

DAFTAR PUSTAKA

Kurniawan, Agus. 2013. Pengertian HTML5 http://indracare.blogspot.com/2012/06/pengertian-html5.html. 19 Oktober 2013

Rasyak, Rishak. 2012. Penggunaan HTML. http://muhammadrishak.blogspot.com/2012/10/muhammad-rishak-rasyak.html. 19 Oktober 2013

Anonim.  Definisi dan Pengertian HTML5. http://rizkyynwa.blogspot.com/2013/01/definisi-dan-pengertian-html5.html. 19 Oktober 2013

Boja Sabara, Ferry. 2012. Pengertian dari HTML5 atau Semantic Web. http://kisah-progammer.blogspot.com/2012/10/pengertian-dari-html5-atau-semantic-web.html. 20 Oktober 2013

Mkr, Satank. 2012. Apa itu HTML5 dan Kelebihannya ? http://mkr-site.blogspot.com/2012/07/apa-itu-html5-dan-kelebihannya.html. 20 Oktober 2013

Supriadi. Sejarah HTML. http://supriadi.blogs.unhas.ac.id/sejarah-html/. 20 Oktober 2013

Tokotua, Ardian. 2012. Struktur Baru HTML5. http://tokotuaforex.blogspot.com/2012/10/struktur-baru-html-5.html. 21 OKtober 2013

Nasahan, Jeanot. 2012. Pengertian, Tujuan, Fitur Baru dan Kelebihan HTML5. http://www.jeanotnahasan.com/2012/02/pengertian-tujuan-fitur-baru-dan.html. 21 Oktober 2013

Haqqi. 2011. Komponen HTML5 yang Wajib Diketahui. http://blog.haqqi.net/2011/06/komponen-html5-yang-wajib-diketahui/. 21 Oktober 2013

Anonim. 2013. Kelebihan HTML5. http://www1.quadesert.com/2013/07/kelebihan-html5/. 21 Oktober 2013




  Thanks to : http://ininia94.blogspot.co.id/2013/10/makalah-dasar-dasar-html5.html