html5

PENGEMBANGAN TEKNOLOGI PEMROGRAMAN WEB

HTML5

Diajukan Untuk Memenuhi Tugas Mata Kuliah

Teknologi Informasi dan Komunikasi

Disusun Oleh :

Nama : PROBO PAMUNGKAS

NIM : 1102412030

UNIVERSITAS NEGERI SEMARANG

2013

BAB I

PENDAHULUAN

A. Latar Belakang

Teknologi selalu berkembang dan mengalami kemajuan, seiring dengan

perkembangan zaman dan perkembangan cara berpikir manusia. Akibat hal tersebut, manusia

saling bersaing satu sama lain untuk menguasai pasar teknologi yang menjanjikan. Banyak

perusahaan yang saat ini berstatus sebagai penguasa teknologi seperti; Google, Microsoft dan

perusahaan besar lainnya. Merekalah penguasa pasar teknologi saat ini dan mungkin di masa

yang akan datang. Dan sekarang ini teknologi yang juga sedang berkembang adalah

Pemrograman web berbasis HTML5 yang merupakan versi kesekian dari HTML.

HTML5 merupakan 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. Proyek HTML5 ini dimulai di tahun 2009 untuk menyempurnakan bahasa penanda

sebelumnya yang dianggap sudah lawas. Tujuan utama dengan adanya HTML5 adalah

mengurangi penggunaan plugin-plugin 3rd party pada HTML sehingga dapat mempercepat

kinerja web itu sendiri. Plugin-plugin tersebut seperti Adobe Flash, Microsft Silverlight, Java

dan lain-lainnya.

Oleh karena itu, makalah ini dibuat untuk menjelaskan tentang perkembangan

teknologi pemrograman berbasis web HTML5 yang saat ini cukup berkembang di dunia.

B. Rumusan Masalah

Dari latar belakang yang telah dijelaskan, penulis dapat merumuskan masalah

sebagai berikut:

1. Apakah pengertian HTML5 ?

2. Bagaimanakah sejarah HTML dan HTML5 ?

3. Apa saja fitur-fitur dalam HTML5 itu ?

4. Apa saja kelebihan dan kekurangan HTML5 ?

5. Bagaimanakah pengembangan teknologi HTML5 ?

6. Bagaimanakah dasar dan cara kerja HTML5 ?

C. Tujuan Penulisan

Adapun tujuan dari penulisan makalah ini antara lain:

1. Untuk mengetahui pengertian HTML5,

2. Untuk mengetahui sejarah HTML dan HTML5,

3. Untuk mengetahui fitur-fitur yang terdapat di HTML5,

4. Untuk mengetahui kelebihan dan kekurangan HTML5,

5. Untuk mengetahui pengembangan teknologi HTML5,

6. Untuk mengetahui dasar dan cara kerja HTML5.

D. Kegunaan Penulisan

Adapun kegunaan dari penulisan makalah ini antara lain:

1. Untuk mengetahui pengembangan teknologi HTML5,

2. Untuk memenuhi tugas mata kuliah Teknologi Informasi dan Komunikasi

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

A. Pengertian HTML5

Sebelum membahas lebih lanjut mengenai HTML5, sebaiknya kita harus memahami

terlebih dahulu apa itu HTML. HTML merupakan sebuah dasar ataupun pondasi bahasa

pemograman sebuah web page. HTML muncul sebagai standar baru dari kemajuan dan

berkembangnnya internet, pada pertama kali muncul internet masih dalam keadaan berbasis

text dimana tampilan sebuah halaman web hanya berisikan sebuah text yang monoton tanpa

sebuah format dokumen secara visual, bayangkan saja sebuah dokument text yang dikemas

dalam bungkus format seperti tipe file .txt atau sering disebut notepad, tanpa paragraph, satu

warna, satu ukuran huruf tanpa gambar serta tidak adanya visual format dokumen seperti

halnya Ms. Word, hal ini tentu akan membosankan dalam membaca. Selain itu ketika

pertama kali muncul internet, user masih mengakses dengan menggunakan sebuah terminal,

hal itu jelas tidak friendly user. Untuk itulah hadir teknologi pemrograman web HTML yang

dapat memudahkan user dalam memogram sebuah halaman web.

HTML5 (Hypertext Markup Language5) adalah suatu markup language yang

berfungsi untuk menampilkan isi dari website dan juga merupakan teknologi inti dari

pemrograman web HTML. HTML5 juga memiliki pengertian lain yaitu file teks atau ASCII

yang mengandung script yang ditunjukkan kepada web browser untuk menampilkan grafis

dari suatu halaman web.

B. Sejarah HTML dan HTML5

Pemograman HTML muncul seiring perkembangan teknologi dan informasi. Pada

tahun 1980 IBM mulai untuk mengembangkan sebuah bahasa pemograman dimana text dan

format sebuah dokumen dijadikan satu dalam bahasa pemrograman yang sering kita sebut

sebagai HTML (Hyper Text Markup Language) akan tetapi pada saat itu pihak IBM

memberikan sebuah nama GML (Generalized Markup Language). 

Pada tahun 1986 ISO mengeluarkan sebuah standarisasi tentang bahasa pemograman

tersebut dan menyatakan sebuah nama baru dari GML tersebut dengan sebutan SGML

(Standard Generalized Markup Language). Kemudian pada tahun 1989, Sebuah nama HTML

muncul dari pemikiran Caillau Tim yang bekerja sama dengan Banners Lee Robert yang

ketika itu masih bekerja di CERN memulai mengembangkan bahasa pemrograman ini, dan

dipopulerkan pertama kali dengan browser Mosaic. Nah mulailah dari tahun 1990 HTML

sangat berkembang dengan cepat hingga mencapai versi HTML versi 5.0 yang digarap pada 4

Maret 2010 lalu oleh W3C.

HTML versi 1.0 ini adalah versi pertama sejak lahirnya nama html tersebut, memiliki

sebuah kemampuan untuk heading, paragraph, hypertext, bold dan italic text, wrapping serta

memiliki dukungan dalam peletakan sebuah gambar. Lalu, perkembangan selanjutnya HTML

versi 2.0 pada 14 Januari 1996, pada versi ini ada beberapa tambahan kemampuan

diantaranya penambahan form comment, hal ini menyebabkan adanya sebuah interaktif dan

mulai dari versi ini yang menjadikan sebuah pioneer dalam perkembangan homepage

interaktif.

Tak lama kemudian HTML versi 3.0 dirilis pada 18 Desember 1997 yang sering

disebut sebut sebagai HTML+ yang mempunyai kemampuan dalam beberapa fasilitas

diantaranya adalah penambahan fitur table dalam paragraph, akan tetapi versi ini tidak

bertahan lama. Dan pada bulan Mei 1996 dikeluarkan versi baru sebagai pengganti dan

penyampurnaan versi 3.0 ini yaitu HTML versi 3.2, keluarnya versi ini dikarenakan adanya

beberapa kasus yang timbul pada pengembang browser yang telah melakukan pendekatan

dengan cara lain yang justru hal tersebut menjadi popular, maka di bakukan versi 3.2 untuk

mengakomodasi praktek yang banyak digunakan oleh pengembang browser dan diterima

secara umum, dapat dikatakan bahwa versi 3.2 ini merupakan versi 3.0 yang dikembangkan

oleh beberapa pengembang browser seperti Netscape dan Microsoft.

Pada tahun 1999, tepatnya tanggal 24 Desember lahirlah HTML versi 4.0, seperti

yang kita kenal HTML pada saat ini penambahan link, meta, imagemaps , image dan lain lain

sebagai penyempurnaan versi 3.2. Pada tanggal 4 Maret 2010, terdapat sebuah informasi

bahwasanya HTML versi 5.0 masih dikembangkan oleh W3C (World Wide Web

Consortium) dan IETF (Internet Engineering Task Force) yaitu sebuah organisasi yang

menangani HTML sejak versi 2.0

HTML5 ini merupakan hasil revisi dari HTML pertama yang diciptakan pada tahun

1990 dan HTML4 pada tahun 1997. HTML5 memiliki standar baru untuk HTML, XHTML

dan DOM HTML. Tidak seperti pendahulunya, Standard HTML4 yang dijumpai banyak

memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak

orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini

dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight.

HTML5 merupakan proyek dari W3C

(World Wide Web Consortium) dan WHATWG

( Web Hypertext Application Technology Working

Group). W3C merupakan pengembang XHTM L

2.0 dan WHATWG mengembangkan situs serta

aplikasinya. Perbaikan HTML5 dari masa ke masa

bertujuan untuk memperbaiki teknologi HTML

terutama mendukung teknologi multimedia terkini,

mudah dibaca dan mudah dimengerti oleh mesin. HTML5 ini telah dikenal luas oleh para

developer sejak lama namun pada April 2010 CEO Apple Inc. Steve Jobs memberikan

pernyataan bahwa Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video

ataupun menyaksikan konten multimedia apapun di internet.

HTML5 merupakan hasil terkini perkembangan dari HTML4 dan XTHML 1.1 yang

selama ini dioperasikan terpisah dan dimplementasikan berbeda-beda oleh banyak software

developer web. Tujuan dibuat HTML5 ini adalah dibuatnya suatu fitur baru yang didasarkan

pada HTML, CSS, DOM, dan Javascript dan mengurangi kebutuhan plugin untuk

menampilkan multimedia eksternal contohnya Flash Player. Sampai saat ini HTML5 masih

dalam tahap pengembangan, jadi masih beberapa browser saja yang mendukung HTML5.

Contohnya Mozilla Firefox, Google Chrome, Safari dan Opera. HTML5 memiliki satu

keunggulan dimana dapat ditampilkan pada platform berbeda namun memiliki tampilan yang

sama seperti pendahulunya.

C. Fitur-fitur HTML5

Fitur-fitur baru yang terdapat dalam HTML5 :

1. Unsur kanvas untuk menggambar

Pada HTML sebelumnya kita membutuhkan suatu aplikasi yang membantu

kita untuk berhubungan dengan web kita, misalnya Flash atau Java. Namun pada

HLML5 aplikasi tersebut akan diganti oleh elemen <canvas> pada HTML5 sebagai

Canvas web -- kertas yang bisa dicoreti sesuai imajinasi -- atau dalam hal lain, Canvas

memungkinkan kita untuk bereksperimen lebih pada HTML5. Lebih lanjut akan

dibahas pada subbab berikutnya.

2. Video dan elemen audio untuk media pemutaran

Versi HTML pendahulun kita harus menyisipkan flash untuk memutar

audio/video untuk memutar audio/video, namun pada HTML5 akan dengan mudah

menyisipkan file multimedia tersebut ke dalam webnya. Pada HTML5 ada tag

<audio> dan <video> yang berfungsi untuk menyisipkan file audio dan video

tentunya.

3. Dukungan yang lebih baik untuk penyimpanan secara offline,

4. Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section,

5. Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search,

6. Kesederhanaan elemen layout dan format (semantics)

Semantics disini merupakan fitur yang dijadikan unggulan dalam HTML5.

Pada HTML sebelumnya banyak web designer yang menggunakan elemen div, nav,

dan lainnya. Nah pada HTML5 hal seperti itu sudah tidak digunakan dengan adanya

semantics akan menjadi masa depan tag layout dan format yang membuat web akan

lebih dinamis serta lebih menarik.

7. Dukungan yang lebih baik pada Web Workers

Pada web yang menggunakan HTML sebelumnya sering kali kita lama dalam

membuka web tersebut, ini dikarenakan banyaknya penggunaan JAVASCRIPT. Pada

HTML5 disediakan WEB WORKERS yang mempercepat pemrosesan JAVASCRIPT

dan multitasking.

8. Dukungan pada Local Storage

Local Storage ini mempunyai fungsi sebagai pengganti cache sebagai media

penyimpanan history halaman web. Memungkinkan web untuk menyimpan data

cache lebih besar di storage local-nya daripada cache pada browser biasa. 

D. Kelebihan dan Kekurangan HTML5

a. Kelebihan yang dimiliki HTML5 diantaranya :

1. Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML) danXML,

2. Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya,

3. Integrasi (‘inline’) dengan doctype yang lebih sederhana,

4. Penulisan kode yang lebih efisien,

5. Konten yang ada di situs lebih mudah terindeks oleh search engine,

6. Dapat ditulis dalam sintaks HTML dan XML,

7. Penulisan code lebih efisien,

8. Konten pada situs mudah ter-indeks oleh search engine,

9. Memiliki integrasi yang bagus terhadap aplikasi web,

10. Integrasi dengan doctype lebih sederhana,

11. Dapat dideteksi oleh browser lama.

b. Sedangkan kekurangan yang terdapat dalam HTML5 antara lain :

1. Masalah keamanan pada HTML5 

Bagi pengguna yang mengerti pemograman dan sejenisnya, peluang untuk

mendobrak aplikasi HTML5 jauh lebih mudah dibandingkan aplikasi native.

Misalnya saja, aplikasi Angry Bird berbasis HTML5 dapat dengan mudah di-hack

untuk membuka semua level setelah beberapa jam di-launching.

2. HTML5 belum tentu bisa dijalankan di semua perangkat. 

Walaupun dikatakan write once run everywhere, HTML5 tidak sepenuhnya

bisa dijalankan di mana-mana. Salah satu akibatnya adalah dukungan browser

sendiri yang belum tentu mendukung semua fitur dari HTML5, apalagi W3C

selaku badan yang membuat standar HTML5 menyatakan standar HTML5

mungkin baru akan rampung 2014.

3. HTML5 masih menstranfer data dari server

Meskipun HTML5 dapat berjalan dengan baik di perangkat mobile yang telah

ada saat ini, namun kelemahan yang ada pada HTML5 yaitu bahwa HTML5

masih harus transfer data dari server ke perangkat tangan Anda dibandingkan

dengan native app.

4. HTML5 tidak efisien.

HTML5 dapat dikatakan tidak efisien dikarenakan developer berbasis Web

HTML5, dia harus memikirkan berbagai kemungkinan yang pada ujungnya

sehingga harus mengorbankan efisiensi. 

5. Kemampuan HTML5 lebih terbatas

Kemampuan HTML5 lebih terbatas, hal ini dimungkinkan karena sampai saat

ini HTML5 masih dalam perkembangan dan belum, rampung maka banyak akses

yang tidak dapat dilakukan oleh HTML5 seperti banyaknya video yang belom

support pada versi HTML5. HTML5 Hanya berfungsi pada browser yang sudah

kompatibel.

E. Pengembangan HTML5

World Wide Web Consortium (W3C) baru baru ini membuat proposal mengenai

spesifikasi HTML 5 hal ini dipicu dari pengembangan akan aplikasi web yang terus

berkembang sesuatu yang tidak dapat di penuhi oleh HTML pada masa saat ini.

Dengan kata lain HTML 5 nantinya akan menghilangkan gap antara Flash,

Silverlight, dan JavaFX yang sedang mengisi pangsa pasar web application.

Sebagaimana yang diketahui InfoWorld Test Center telah melakukan penelitian

mengenai teknologi baru pada Microsoft Silverlight 3 dan Adobe Flex 4, Flash 4, dan

juga Catalyst rich Internet application. HTML 5 juga nantinya akan menyandang

posisi yang sama misalnya nantinya spesifikasi HTML 5 mampu mendongkrak

kemampuan web untuk menangani video dan graphic di Web. Teknologi HTML 5

yang disebut sebut dengan Canvas, digunakan untuk 2-D drawing pada sebuah Web

page akan menjadi andalan bagi pengguna web yang suka mendesain web kelas berat

hal ini telah di coba oleh Apple, Google, dan Mozilla. “Beberapa fitur dari HTML 5

seperti Canvas, local storage, dan Web Worker akan mengizinkan kita untuk

melakukan hal yang lebih banyak melalui browser” ungkap Ben Galbraith, yang

merupakan co-founder dari Ajaxian Web site dan co-director dari developer tools di

Mozilla. Local storage akan mengizinkan anda untuk bekerja dengan menggunakan

walaupun koneksi internet anda ngedrop anda masih dapat bekerja, ini akibat dari the

“next generation” applications yang mampu menjalankan task lewat background,

ungkapnya.

Web applications tentu saja akan lebih menarik, kata Ian Fette, project manager

dari Google untuk Chrome browser: “Web application akan bekerja lebih cepat dan

akan memberikan user experience yang lebih baik dan menghilangkan batasan antara

online apps dan desktop apps”.

Teknologi apa yang akan di perkenalkan HTML5 ?

API (Aplication Programming Interface) merupakan teknologi yang akan di usung

oleh HTML5, berikut ini adalah batasan-batasannya :

1. Offline Data Storage

Memungkinkan kita bisa mengakses data lama di broser dalam keadaan offline.

Contoh offline data seperti kita membaca arsip e-mail pada program Outlook atau

Thunderbird.

2. Drag and Drop

Drag and Drop ini kita dapat dengan memudahkan mendrag atau mendrop

misalnya text, hyperlink, bahkan file di aplikasi dekstop sekalipun.

3. Geolocation

Aplikasi ini memungkinkan kita untuk untuk mengetahui lokasi geografis, sumber

informasi di ambil dari GPS (Global Position System).

Masih terdapat banyak API lainya dan terus di kembangkan. Dalam implementasinya,

Anda akan memerlukan pemrogramanan Java Script untuk menjembatani penggunaan

API ini.

Sebenarnya pada saat selesainya perkembangan HTML4, W3C pernah mengatakan

bahwa HTML4 merupakan versi terakhir dari bahasa HTML karena pada versi ini telah

memeiliki banyak perbaikan dan terdapatnya fungsi-fungsi yang cukup memadai. Tetapi

tidak dapat dipungkiri dengan perkembangan zaman yang begitu cepat sehingga munculah

berbagai kekurangan pada HTML4 sehingga mendorong para pengembang untuk membuat

versi yang baru yaitu HTML5 guna untuk memperbaiki segala kekurangan dan

mempermudah dalam penggunaan dan pengembangan.

Tujuan utama dengan adanya HTML5 adalah mengurangi penggunaan plugin-plugin

3rd party pada HTML sehingga dapat mempercepat kinerja web itu sendiri. Plugin-plugin

tersebut seperti Adobe Flash, Microsft Silverlight, Java dan lain-lainnya.

Selain itu, HTML5 juga membawa fungsi-fungsi yang baru seperti:

1. Element

article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer,

header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source,

summary, time, video

2. Input Type pada Form

 dates and times, email, url, search

3. Attribut

ping (pada a dan area), charset (pada meta), async (pada script)

Di sini akan dijelaskan beberapa fungsi baru yang menarik seperti :

<canvas> - Element atau tag ini memiliki fungsi untuk menampilkan kertas gambar sehingga

pengguna dapat menggunakan canvas untuk menggambar ataupun menulis bagaikan kertas

biasa tanpa menggunakan plugin seperti Java

<audio><video> - Bila kita ingin menampilkan video ataupun audio pada website kita maka

kita akan menggunakan pllugin seperti adobe dengan format .swf, .fla dan .flv. Tetapi dengan

menggunakan HTML5, kita tinggal menggunakan tag <audio> ataupun <video> untuk

menampilkan audio dan video pada website kita dengan menggunakan format Ogg Theora

yang bersifat free alias gratis!

Selain terdapatnya fungsi-fungsi baru, HTML5 juga memberikan beberapa kemudahan

seperti pada bagian awal file HTML kita harus menulis coding DOCTYPE yang panjang.

Pada HTML5, DOCTYPE dapat ditulis lebih ringkas

<!DOCTYPE html>

Kemudian pada baris berikutnya kita tulis seeprti ini

Versi HTML5 berubah menjadi

Selain itu,  coding CSS dan Javascript pada HTML5 tidak perlu lagi menulis

seperti type=text/css dan type=text/javascript

<style>

* { margin:0px; padding:0px;}

</style>

HTML5 juga menghilangkan beberapa tag ataupun element yang telah jarang dipakai

dan digantikan oleh CSS seperti acronym, applet, basefont, big, center, dir, font, frame,

frameset, isindex, noframes, s, strike, tt, u

HTML5 telah menyediakan banyak fungsi baru dan berbagai kemudahan tetapi

apakah browser kita mendukung teknologi baru ini? Kebanyakan browser yang terkenal

seperti Firefox, Opera, Safari dan Chrome dan lain-lain telah mendukung

HTML5 kecuali Internet Explorer.

Contoh Penulisan HTML 5

Kesederhanaan HTML 5:

<!doctype html> <html> <head> <meta charset=”UTF-8″> <title>Contoh dokumen

HTML 5</title> </head> <body> <p>Teks paragraf disini.</p> </body> </html>

Yang menarik dari kesederhanaan kode di atas:

1. Tidak perlu lagi memakai <meta http-equiv=”Content-Type”

content=”text/html; charset=UTF-8″>. Walau tag meta tersebut masih

diijinkan digunakan.

2. Deklarasi <!DOCTYPE html> adalah ‘case-insensitive’. Tidak harus huruf

besar/kapital semua.

Sebagai XML, dengan tipe media application/xhtml+xml atau application/xml,

HTML 5 cukup dideklarasikan dengan format tambahan:

<?xml version=”1.0″ encoding=”UTF-8″?

> <htmlxmlns=”http://www.w3.org/1999/xhtml”><head> …

F. Dasar Dan Cara Kerja HTML5

a. Dasar HTML5

Seperti yang tertulis dalam situs dj-note.blogspot.com, dasar-dasar mengenai

HTML5 yang mesti kita ketahui adalah sebagai berikut ;

1. It’s not one big thing (Ini Bukan Sesuatu hal yang besar)

Pertama kali mendengar nama HTML 5 tentu anda akan bertanya:

"Bagaimana saya bisa mulai menggunakan HTML 5 jika browser lama tidak

mendukung itu" Tapi? Pertanyaan itu justru akan menyesatkan anda.Kenapa?

karena HTML5 bukanlah satu hal yang besar. Bayangkan, untuk apa anda

memikirkan dukungan Browser yang setiap waktu akan berubah versi ke yang

lebih baik? dan saya yakin suatu saat nanti setiap Browser pasti tidak ingin

kehilangan pangsa pasarnya dan mengabaikan HTML 5.

Selanjutnya, Anda mungkin berpikir tentang tag dan kurung sudut dari

HTML.Ya, Itu memang merupakan bagian penting, tapi bukan keseluruhan

Dari yang kita bicarakan. HTML5 tidak hanya mendefinisikan tag <video>;

ada juga yang sesuai DOM API untuk obyek video dalam DOM. Anda dapat

menggunakan API ini untuk mendeteksi dukungan untuk format video yang

berbeda, memutar video, jeda, audio berhenti, melacak berapa banyak video

yang telah didownload, dan segala sesuatu yang Anda butuhkan untuk

membangun pengalaman pengguna yang kaya di sekitar tag <video> itu

sendiri .

2. Anda Tidak Perlu Membuang apapun

Suka atau tidak, kita harus sama-sama mengakui bahwa HTML 4

adalahformat markup yang paling berhasil. Dan tentunya, HTML5 dibangun

di atas kesuksesan itu. Anda tidak perlu membuang markup yang telah

ada. Anda pun tidak perlu mempelajari kembali hal-hal yang sudah Anda

ketahui. Jika aplikasi web Anda telah menggunakan HTML 4, anda pu tidak

perlu khawatir karena masih akan bekerja di HTML5. 

Nah, jika Anda ingin meningkatkan aplikasi web Anda, Anda telah datang

ke tempat yang tepat. kenapa? karena HTML5 mendukung semua bentuk

kontrol dari HTML 4, tetapi juga mencakup kontrol masukan baru. Beberapa

di antaranya adalah penambahan lama tertunda seperti slider.

3. Sangat Mudah untuk Mulai Mengaplikasikan HTML 5

Untuk melakukan Upgrade ke HTML 5 anda hanya perlu

mengubah DOCTYPE Anda. DOCTYPE tersebut biasanya ada di baris

pertama Tag HTML anda Contohnya seperti Berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

nah, di HTML 5, hanya ada satu DOCTYPE yang dipergunakan yaitu:

<!DOCTYPE html>

Dan yang terpenting, setelah melakukan Upgrade ke HTML 5 anda tidak

akan merusak markup yang ada, karena semua tag yang didefinisikan di

HTML 4 masih didukung di HTML 5. Tapi selanjutnya, mau tidak mau anda

akan memvalidasi elemen baru seperti <article>, <section>, <header>, dan

<footer>. 

4. Ini Sudah Bekerja

Menggambar pada kanvas, memutar video, desain bentuk yang lebih baik,

atau membangun aplikasi web yang bekerja offline sudah dapat Anda temukan

di HTML5. Browser seperti, Firefox, Safari, Chrome, Opera, dan browser

ponsel sudah mendukung kanvas , video , Geolocation , penyimpanan lokal ,

dan banyak lagi. selain itu, Google pun sudah mendukung penjelasan

microdata . Bahkan, Microsoft yang selama ini hanya mendukung bentuk

standart akan mendukung fitur HTML5 di Internet Explorer 9 mendatang. Jadi

jangan ragu lagi.

5. HTML 5 akan segera terwujud

Tim Berners-Lee Merupakan pencipta dunia web yang luas di awal 1990-

an.Dia kemudian mendirikan W3C untuk membantu mengetahui standar web,

yang telah dilakukan selama lebih dari 15 tahun. Berikut adalah apa yang

dikatakan W3C tentang masa depan standar web, pada bulan Juli 2009.

Direktur mengumumkan bahwa ketika XHTML 2 charter berakhir pada

akhir tahun 2009, piagam ini tidak akan diperpanjang. Dengan demikian, dan

dengan meningkatkan sumber daya dalam HTML Kelompok Kerja, W3C

berharap untuk mempercepat kemajuan HTML5 dan memperjelas posisi W3C

tentang masa depan dari HTML.

Itulah sebagian hal awal yang harus kita ketahui untuk melangkah maju

dan tidak ragu lagi menggunakan HTML 5.

b. Cara Kerja HTML5

Seperti yang sudah dituliskan diatas, beberapa browser sudah mendukung HTML5

seperti safari, chrome, firefox, dan opera. Kabarnya IE9 ( Internet Explorer ) akan

mendukung beberapa fitur dari HTML5.

Untuk Struktur Dasar HTML5, berikut uraiannya

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>Judul halaman</title>

</head>

<body>

<p>Contoh Isi Halaman</p>

</body>

</html>

Dari beberapa referensi yang saya baca, fitur yang dominan dalam HTML5 ini yaitu :

Fitur Multimedia

Dalam HTML5 kita bisa menambahkan video dan audio lebih mudah tanpa

memerlukan komponen/librari tambahan.

<video>...</video>

<audio>..</audio>

Fitur Grafik

HTML5 menyediakan cara menanamkan objek gambar secara instan dengan

fitur <svg>...</svg> untuk menambahkan jenis gambar SVG(Scalable Vector

Graphics) dan <canvas>..</canvas> untuk membuat gambar.

Fitur Aplikasi

HTML5 juga menambahkan fitur aplikasi yang diperkaya dengan database

lokal sehingga memungkinkan informasi disajikan lebih dinamis.

Selain tambahan fitur-fitur diatas masih banyak lagi yang lainnya seperti

penambahan objek form dengan input tanggal, bulan, tahun, pengecekan form, dll,

penambahan struktur seperti header, footer, article, dll. Selain penambahan struktur

penulisan juga kemungkinan akan ada pemangkasan perintah-perintah yang dirasa

kurang optimal.

Karena html5 ini masih dalam tahap pengembangan maka sekarang ini para

pengembang perangkat lunak browser juga berlomba dalam mengembangkan aplikasi

yang mereka buat agar nantinya pada saat resmi diluncurkan HTML5, semua browser

sudah mendukung.

Pembuatan HTML5 juga di karenakan Standard HTML4 yang dijumpai banyak

memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini

banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser.

Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight.

Semakin menjamurnya plugin didalam aplikasi atau browser membuat aplikasi

web ini susah untuk menembus banyak browser. Hal ini dikarenakan setiap plugin

mempunyai cara yang berbeda-beda, sebagai contoh kita ingin memasang plugin flash

untuk sharing video maka pada halaman web kita harus ditulis sebagai berikut

<object type="application/x-shockwave-flash" width="400" height="220"

wmode="transparent" data="flvplayer.swf?file=movies/holiday.flv">

<param name="movie" value="flvplayer.swf?file=movies/holiday.flv" />

<param name="wmode" value="transparent" />

</object>

Contoh diatas menggunakan plugin Flash dari Adobe untuk menjalankan aplikasi

web pada browser maka lain caranya bila kita menggunakan Silverlight. Teknologi

Silverlight dikembangkan oleh Microsoft. Contoh penggunaan Silverlight pada

halaman web dapat dilihat pada HTML dibawah ini

<object width="300" height="300" data="data:application/x-silverlight-2,"

type="application/x-silverlight-2" >

<param name="source" value="SilverlightApplication1.xap"/>

</object>

HTML5 ini dibuat menyederhanakan kompleksitas penggunaan media video

dengan standard baru yaitu penggunaan tag <video>. Dengan fitur baru ini maka kita

cukup menulis script untuk menjalankan file video sebagai berikut

<video src=tutorialku.mp4>

</video>

Isu bagaimana menjalankan file video pada aplikasi web merupakan salah satu

contoh bagaimana HTML4 tidak dapat mencakup masalah ini dan masih banyak lagi

isu pada HTML4. Oleh karena itu, kita sudah saatnya memanfaatkan HTML5 sebagai

standard aplikasi web kita.

Bagaimana caranya untuk menguji apakah browser yang telah kita install itu

sudah support HTML5 atau tidak dan seberapa banyak fitur HTML5 yang disupport?

Caranya cukup mudah, pertama-tama pastikan komputer anda sudah terhubung

dengan internet dan arahkan ke alamat web sebagai berikut:

http://html5test.com

Dari data yang ada pada website itu browser Maxthon 3.4.1 merupakan

browser terbaik dalam hal mendukung bahasa HTML5 dengan 422 total skor diikuti

kemudian dengan google Chrome 20 dengan 414 total skor kemudian berturut-turut

Opera 12.00 dengan 385, Firefox 13 dengan 345, Safari 5.1 dengan 317 dan Internet

Explorer 9 dengan 138 point.

Berikut ini adalah beberapa dasar kerja HTML5 yang biasanya developer web

gunakan.

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 Anda tidak perlu menghafalnya. Pada doctype

untuk XHTML 1.0, Anda harus menuliskannya dengan panjang.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Sedangkan pada HTML5, doctype tersebut disederhanakan menjadi

<!DOCTYPE html>

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.

Dalam penulisan kode, dapat ditulis sebagai berikut :

<body>

<header>...</header>

<nav>...</nav>

<article>

<section>

...

</section>

</article>

<aside>...</aside>

<footer>...</footer>

</body>

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. Contoh sederhananya:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Judul</title>

</head>

<body>

<h2>Daftar barang piknik</h2>

<ul contenteditable="true">

<li>Jas hujan</li>

<li>Tenda</li>

<li>Air minum</li>

</ul>

</body>

</html>

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, Anda dapat mencegah seorang user

untuk memanggil script website dengan input yang salah. Ini dapat

mengurangi jumlah request yang tidak valid terhadap script program Anda.

HTML5 menawarkan fitur validasi email secara langsung dengan mengubay

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.

<form action="" method="post">

<label for="email">Email:</label>

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

<button type="submit">OK</button>

</form>

5. Atribut required.

Satu lagi untuk input pada HTML5, memungkinkan validasi pada sisi

client terhadap input yang harus diisi. Dengan demikian, Anda tidak perlu

membuat fungsi javascript untuk melakukannya. Cukup menambahkan atribut

“required” pada elemen “input”. Jika tombol submit ditekan, akan muncul

pesan error

<form method="post" action=""><label

for="someInput">Nama:</label><input type="text" id="someInput"

name="someInput" placeholder="Muhammad Fauzil Haqqi" required>

<buttontype="submit">Go</button>

</form>.

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,

Anda harus mendeklarasikan style tersendiri agar tampilan dapat seperti

seharusnya, seperti berikut ini.header, footer, article, section, nav, menu,

hgroup {display: block;}Meskipun demikian IE tetap tidak menghiraukan

style tersebut. Anda harus membuat javascript di bawah ini ke dalam “head”

dari setiap halaman.

document.createElement("article");

document.createElement("footer");

document.createElement("header");

document.createElement("hgroup");

document.createElement("nav");

document.createElement("menu");

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. Anda bisa memasukkan kode di bawah ini ke

dalam head halaman website Anda, atau mendownload script tersebut secara

lokal.

<!--[if IE]>

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

Masih banyak elemen html5 lainnya seperti canvas, video, audio, mark,

dan sebagainya. Setiap elemen akan berperilaku berbeda di setiap browser,

karena memang standart resimnya belum dikeluarkan oleh W3C.

Lalu, fasilitas yang cukup menarik dalam HTML5 salah satunya adalah

Canvas. Sebuah canvas intinya adalah wilayah persegi di layar dimana anda

dapat menambahkan dan memanipulasi grafis. Kegiatan dasar untuk

menggambar sebuah garis membutuhkan hal-hal sebagai berikut : membuat

kanvas, menentukan konteks dari kanvas, memulai sebuah path (beginPath()),

mendefinisikan titik mulai ((moveTo(x, y)), menentukan titik akhir dari garis

(lineTo( x, y )), menutup path untuk mengatakan bahwa kita selesai

menggambar  (closepath()) dan terakhir menuliskan gambar tersebut

(stroke()).

Jika hal tadi terdengar cukup kompleks, saya ingin mengatakan kepada

anda, hal itu jauh lebih sederhana dibandingkan jika anda ingin membuat hal

yang sama sebelum teknologi ini ada.

Kita dapat membuat bentuk yang kompleks maupun sederhana

menggunakan “paths”. Menggambar sebuah garis mengikuti path tersebut

hanya akan bisa jika anda mengaktifkan  stroke() . Jika path digunakan  untuk

membuat sebuah bentuk tertentu maka ia juga dapat “diisi” dengan

menggunakan fill() . Sebuah “isi” dapat berupa warna atau gaya tertentu

(misalnya pola, gradien atau gambar).

Jika anda ingin menggambarkan bentuk kurva tertentu, anda dapat

menggunakan quadraticCurveTo(), bezierCurveTo(), arcTo() dan arc() untuk

membuat sebuah path untuk menggambar kurva.

Terpisah dari kegiatan menggambar dan mewarnai  (“filling”) , sebuah

gambar dapat pula ditransformasikan  ke skala tertentu (scale()), diputar

(rotate()) dan dimiringkan (transform ()). Selain dari bentuk, tentu anda dapat

menggambar dan meng”isi” sebuah teks di atas Canvas.

Dan ada juga API untuk membuat atribut untuk

bayangan : shadowColor mengatur warna dari

bayanganshadowOffsetX dan shadowOffsetY memberikan posisi dari

bayangan yang dibuat dari benda atau teks asalnya

dan shadowBlur memperkenankan anda untuk membuat bayangan tersebut

menjadi samar-samar.

Berikut salah satu aplikasi penggunaan HTML5. Contoh menampilkan

objek ini akan terlihat seperti gambar berikut jika browser anda mendukung

HTML5

dan susunan perintah html5 sebagai berikut :

<!DOCTYPE HTML>

<html>

<head>

<style>

#myCanvas {

border: 1px solid #9C9898;

}

</style>

<script>

window.onload = function() {

        var canvas = document.getElementById("myCanvas");

        var context = canvas.getContext("2d");

        var centerX = canvas.width / 2;

        var centerY = canvas.height / 2;

        var radius = 70;

        context.beginPath();

        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

        context.fillStyle = "#8ED6FF";

        context.fill();

        context.lineWidth = 5;

        context.strokeStyle = "black";

        context.stroke();

      };

    </script>

  </head>

  <body>

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

  </body>

</html>

Bisa juga dengan bentuk seperti gambar berikut :

dengan kode html5 sebagai berikut :

<!DOCTYPE HTML>

<html>

<head>

<style>

#myCanvas {

border: 1px solid #9C9898;

}

</style>

<script>

window.onload = function() {

        var canvas = document.getElementById("myCanvas");

        var context = canvas.getContext("2d");

        context.beginPath();

        context.moveTo(170, 80);

        context.bezierCurveTo(130, 100, 130, 150, 230, 150);

        context.bezierCurveTo(250, 180, 320, 180, 340, 150);

        context.bezierCurveTo(420, 150, 420, 120, 390, 100);

        context.bezierCurveTo(430, 40, 370, 30, 340, 50);

        context.bezierCurveTo(320, 5, 250, 20, 250, 50);

        context.bezierCurveTo(200, 5, 150, 20, 170, 80);

        context.closePath();

        // add linear gradient

        var grd = context.createLinearGradient(230, 0, 370, 200);

        // light blue

        grd.addColorStop(0, "#8ED6FF");

        // dark blue

        grd.addColorStop(1, "#004CB3");

        context.fillStyle = grd;

        context.fill();

        // add stroke

        context.lineWidth = 5;

        context.strokeStyle = "blue";

        context.stroke();

      };

    </script>

  </head>

  <body>

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

  </body>

</html>

Cukup mudah kan??? Kalo mau contoh lengkapnya bisa dilihat di

http://www.html5canvastutorials.com/

Sama dengan canvas, jika browser anda tidak mendukung maka video tidak bisa ditampilkan.

 Berikut perintah html5 untuk menampilkan video

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<h2>Contoh video dalam html5</h2>

<video src="/uploads/video/html5-video.ogg" controls="true">

   Browser anda tidak mendukung <a href="/uploads/video/html5-video.ogg">dowload

video disini.</a>

</video>

</body>

</html>

BAB III

PENUTUP

A. Kesimpulan

HTML merupakan sebuah dasar ataupun pondasi bahasa pemograman sebuah

web page. HTML memiliki beragam versi. Dan versi terakhir mereka yang masih

dalam tahap pengembangan adalah HTML5. HTML5 (Hypertext Markup

Language5) adalah suatu markup language yang berfungsi untuk menampilkan isi

dari website dan juga merupakan teknologi inti dari pemrograman web HTML.

HTML versi 5.0 masih dikembangkan oleh W3C (World Wide Web

Consortium) dan IETF (Internet Engineering Task Force) yaitu sebuah organisasi

yang menangani HTML sejak versi 2.0 HTML5 memiliki tambahan fitur-fitur

yang tidak dimiliki pendahulunya, yang semakin membantu para web developer

untuk mengembangkan sebuah laman website. Walau memiliki banyak kelebihan,

namun HTML5 masih terdapat beberapa kelemahan, namun para pengembang

masih melakukan pengembangan yang berkesinambungan guna memperbaiki

kekurangan-kekurangan yang terdapat dalam HTML5.

DAFTAR PUSTAKA

http://titus-vandorch.blogspot.com/

http://ini-blog.blogspot.com/

http://mkr-site.blogspot.com/

http://iralailatulmaghfiroh.blogspot.com/

http://tanyarezaervani.wordpress.com/

http://www.zainalhakim.web.id/

http://belajarhtml5.wordpress.com/