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=”UTF8″?> <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 1990an.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"

wmode="transparent"
<param
<param

name="movie"

width="400"

height="220"

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

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

<object

web

dapat

width="300"

dilihat

pada

height="300"

HTML

dibawah

ini

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

<body>
<header>...</header>
<nav>...</nav>

kode,

dapat

ditulis

sebagai

berikut

:

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

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

: shadowColor mengatur

atribut

yang

dibuat

bayangan

warna

dari

bayanganshadowOffsetX dan shadowOffsetY memberikan
bayangan

untuk

dari

benda

atau

posisi
teks

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

Html5

More Related Content

What's hot (16)

Similar to Html5 (20)

More from asutenankoe (6)

Recently uploaded (20)

Html5