PERKEMBANGAN PEMROGRAMAN WEB
BERBASIS HTML5
Oleh:
Nama : Sholakhuddin
NIM :1102412115
Prodi :
Teknologi Pendidikan
FAKULTAS
ILMU PENDIDIKAN
UNIVERSITAS
NEGERI SEMARANG
2013
BAB I
PENDAHULUAN
1.1
Latar
Belakang
Dewasa
ini perkembangan teknologi semakin pesat. Terutama dalam pemrograman web
berbasis HTML5 merpakan generasi selanjutnya dari HTML sebelumnya. 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.
Hyper
Text Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk
membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah
Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam
berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.
HTML5 merupakan revisi kelima dari HTML.
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 lama. 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.
Untuk itu penulis tertarik mengangkat tema “Perkembangan Permrograman Web
Berbasis HTML5”
1.2
Rumusan
Masalah
1. Bagaimana pengertian HTML?
2. Bagaimana
sejarah HTML5 ?
3. Bagaimana
karakteristik HTML 5 ?
4. Bagaimana perkembangan HTML ?
5. Bagaimana
pengembangan HTML5 ?
6. Bagaimana fitur-fitur yang ada
pada HTML5 ?
7. Bagaimana browser yang mendukung
HTML5 ?
8. Bagaimana
pembuatan HTML5 oleh intel ?
9. Bagaimana kelebihan dan kekurangan HTML5 ?
1.3 Tujuan
1.
mengetahui pengertian HTML5
2.
mengetahui sejarah HTML5
3.
mengetahui karakteristik HTML5
4.
mengetahui perkembangan HTML
5.
mengetahui pengembangan HTML5
6.
mengetahui fitur-fitur HTML5
7.
mengetahui browser yang mendukung HTML5
8.
mengetahui pembuatan aplikasi HTML5 oleh intel
9.
Mengetahui kelebihan dan kelemahan HTML5
BAB II
PEMBAHASAN
A. Pengertian HTML (Hyper Text
Markup Languange)
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.
HyperText
Markup Language5
(HTML5) adalah sebuah bahasa
markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai
informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks
sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan
tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam
perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga
menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa
yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang
disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah
standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini
merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya
oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM
dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN
adalah lembaga penelitian fisika energi tinggi di Jenewa).
HyperText
Markup Language (HTML) adalah bahasa dari Worl Wide Web (www) yang dipergunakan
utntuk menyusun dan membentuk dokumen agar dapat ditampilkan pada program web
browser. HTML juga dapat disebut sebagai protocol yang digunakan untuk
mentransfer data atau dokumen dari web server ke browser. HTML inilah yang
menjadi dasar bila akan menjelajah internet dan melihat halaman web yang
menarik.
HTML berupa kode-kode tag yang
menginstrusikan browser untuk menghasilkan tampilan sesuai yang diinginkan.
Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser
web seperti Mozilla firefox atau aplikasi pembuka email ataupun dari PDA dan
program lain yang memiliki kemampuan browser. HTML dokumen tersebut mirip
dengan dokumen teks biasa, hanya dalam dokumen ini sebuah teks biasa memuat
instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu.
·
Hypertext
Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.
Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.
·
Markup
Markup menunjukkan bahwa pada file HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada Word Wide Web.
Markup menunjukkan bahwa pada file HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada Word Wide Web.
·
Language
Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen. Pada awalnya HTML dikembangkan sebagai subset SGML(Standard Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana daripada SGML yang lebih pada format dokumen yang berorientasi pada aplikasi.
Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen. Pada awalnya HTML dikembangkan sebagai subset SGML(Standard Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana daripada SGML yang lebih pada format dokumen yang berorientasi pada aplikasi.
B. Sejarah HTML
Tahun 1980, IBM memikirkan pembuatan
suatu dokumen yang akan mengenali setiap elemen dari dokumen dengan suatu tanda
tertentu. IBM kemudian mengembangkan suatu jenis bahasa yang menggabungkan teks
dengan perintah-perintah pemformatan dokumen. Bahasa ini dinamakan Markup
Language, sebuah bahasa yang menggunakan tanda-tanda sebagai basisnya. IBM
menamakan sistemnya ini sebagai Generalized Markup Language atau GML.
Tahun 1986, ISO menyatakan bahwa IBM
memiliki suatu konsep tentang dokumen yang sangat baik, dan kemudian
mengeluarkan suatu publikasi (ISO 8879) yang menyatakan markup language sebagai
standar untuk pembuatan dokumen-dokumen. ISO membuat bahasa ini dari GML milik
IBM, tetapi memberinya nama lain, yaitu SGML (Standard Generalized Markup Language). ISO dalam
publikasinya meyakini bahwa SGML akan sangat berguna untuk pemrosesan informasi
teks dan sistem-sistem perkantoran. Tetapi diluar perkiraan ISO, SGML dan terutama subset dari SGML, yaitu HTML juga
berguna untuk menjelajahi internet. Khususnya bagi mereka yang menggunakan
World Wide Web. Versi terakhir dari HTML saat ini adalah HTML5.
C. Karakteristik HTML 5
HTML5 merupakan sebuah bahasa
markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah
teknologi inti dari Internet. HTML5 merupakan
revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalamipengembangan. 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.
HTML5
merupakan hasil proyek dari W3C (World Wide Web Consortium dan WHATWG ( Web
Hypertext Application Technology Working Group ). Dimana WHATWG bekerja dengan
bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun
2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru
dari HTML. Beberapa browser sudah mendukung HTML5 seperti safari, chrome, firefox,
dan opera. Kabarnya IE9 ( Internet Explorer ) akan mendukung beberapa fitur
dari HTML5.
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.
Pada
tahun 2007 Spesifikasi HTML5 diadopsi sebagai pekerjaan permulaan untuk grup
baru yang mengurus HTML di World Wide Web Consorsium (W3C). Kriteria baru dari
W3C inilah yang membuat HTML5 mempunyai standar tersendiri yang berbeda dari
yang lain.
Dalam teknologi HTML5 terdapat
berbagai pembaruan dari versi sebelumnya, perbedaan itu terlihat antara lain
terdapat berbagai fitur seperti frame, acronym, scope yang pada versi sebelumnya
ada kini telah dihilangkan.
Kegunaan HTML
-
Mengintegerasikan gambar dengan tulisan.
-
Membuat Pranala.
-
Mengintegerasikan berkas suara dan rekaman gambar hidup.
-
Membuat form interaktif.
- Menentukan format suatu teks
6.
Membuat
list tentang sekelompok hal
- Membuat link ke dokumen lain atau bagian
lain dari dokumen yang sama.
- Menyisipkan citra atau gambar.
- Menampilkan informasi dalam bentuk tabel
- Memodifikasi.Mengontrol tampilan dari
web page dan contentnya.
- Mempublikasikan dokumen secara online
sehingga bisa di akses dari seluruh dunia.
- Membuat online form yang bisa di gunakan
untuk menangani pendaftaran, transaksi secara online.
- Menambahkan object-object seperti image,
audi, video dan juga java applet dalam dokumen HTML.
Struktur
HTML
1. Elemen
Elemen terdiri atas tiga bagian,
yaitu tag pembuka, isi, dan tag penutup.Contonya untuk menampilkan judul
dokumen HTML pada web browser digunakan element title, dimana: <title>
ini adalah tag pembuka judul dokumen HTML
2. Tag
Adalah
teks khusus (markup) berupa dua karakter "<" dan ">",
sebagai contoh <body> adalah tag dengan nama body. Tag ditulis secara
berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan
karakter "/" setelah karakter "<"), sebagai contoh
<body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini
adalah tag penutup isi dokumen HTML. Yang merupakan tag-tag dasar dalam HTML
adalah:
a. <HTML> </HTML>
Tag
<HTML> dan </HTML> digunakan untuk menandai awal dan akhir dari
suatu file HTML.
b. <TITLE> </TITLE>
Tulisan
yang berada diantara tag <TITLE> dan </TITLE> akan ditampilkan oleh
browser pada bagian title yang mana merupakan title dari jendela browser.
c. <HEAD> </HEAD>
Berisi
keterangan informasi, seperti title dan jenis dokumen, ditulis diantara HEAD
tags.
d. <BODY> </BODY>
Bagian
tag BODY menandai awal dan akhir dari badan dokumen HTML. Tag ini memiliki
sejumlah attribut dapat ditentukan.
Contoh:
<HTML>
<HEAD>
<TITLE>Halaman
HTMLku yang pertama</TITLE>
</HEAD>
<BODY
TEXT="#000000" BGCOLOR="#FFFFFF">
Hello
World
</BODY>
</HTML>
D.
Perkembangan HTML
HTML
versi 1.0 adalah versi pertama sejak lahirnya nama html tersebut. Versi ini
memiliki kemampuan untuk heading, paragraph, hypertext, bold dan italic text,
wrapping serta memiliki dukungan dalam peletakkan sebuah gambar.
1.
HTML versi 2.0 ( 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 pionner dalam perkembangan homepage
interaktif.
2.
HTML versi 3.0 ( 18
Desember 1997 ). HTML versi 3.0 juga disebut-sebut HTML+ yang mempunyai
kemampuan dalam beberapa fasilitas diantaranya adalah penambahan fitur table
dalam paragraph, akan tetapi versi ini tidaj bertahan lama.
3.
HTML versi 3.2 ( 14
Januari 1997 ). HTML versi ini adalah penyempurnaan dari HTML versi 3.0.
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 dibakukan versi 3.2 untuk mengakomodasi
praktek yang banyak digunakan oleh pengembang browser dan diterima secara
umum. Dapat dikatakan versi 3.2 ini merupakan versi 3.2 yang dikembangkan oleh
beberapa pengembang browser seperti Netscape dan Microsoft.
4.
HTML versi 4.0 ( 18
Desember 1997). Versi ini sudah terdapat penambahan pada link, meta, image dan
lain-lain sebagai penyempurnaan versi 3.2.
5.
HTML versi 4.01 ( 24
Desember 1999 ). HTML versi 4.01 menjadi rekomendasi W3C. HTML 4.01 adalah
minor update-koreksi dan perbaikan bug dari HTML 4.0.
6.
XHTML versi 1.0 ( 20
Januari 2000 ). XHTML 1.0 merumuskan HTML 4.0 dalam XML.
7.
HTML 5 ( 22 Januari
2008 ). HTML 5 meningkatkan interoperabilitas dan mengurangi biaya pengembangan
dengan membuat aturan yang tepat tentang bagaiman untuk menangani semua elemen
HTML, dan bagaimana memulihakan dari kesalahan. Beberapa fitur dalam HTML 5
adalah fungsi untuk audio embedding, video, grafik, sisi penyimpanan data
klien, dan dokumen interaktif. HTML 5 juga mengandung unsur-unsur baru seperti
<nav>, <header><footer>, dan <figure>. Yang termasuk
kelompok kerja diantaranya AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia,
Opera dan banyak lagi vendor lainnya.
E. Pengembangan Teknologi HTML5
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. Demi mewujudkan struktur halaman web
yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen
baru, diantaranya:
·
section serupa seperti h1-h6.
·article bisa
berupa entri blog atau tulisan konten.
·
aside menyajikan konten pelengkap.
·
header bisa menyajikan judul,
deskripsi, bahkan nav untuk navigasi.
·
footer berisi catatan kaki seperti
informasi hak cipta, penulis, kontak, dan sebagainya.
·
Dialog
yang dikombinasikan dengan dt dan dd (seperti
pada halaman FAQ) dapat digunakan untuk menyajikan percakapan.
- Penggunaan elemen figure,
video, audio, source, embed, canvas dan elemen terkait berkas
multimedia lainnya.
- Elemen <canvas> untuk menggambar 2D
- Elemen <video> dan <audio> untuk media player
- Support
local storage
- Konten
spesifik elemen baru, seperti <article>,
<footer>, <header>, <nav>, <section>
- Kontrol
form baru, seperti kalender, tanggal, waktu, email, url, search
Daftar lengkap elemen baru di HTML5
Tag
|
Description
|
<article>
|
Mendefinisikan
sebuah artikel
|
<aside>
|
Mendefinisikan
konten selain dari konten halaman/post
|
<audio>
|
Mendefinisikan
konten audio
|
<canvas>
|
Digunakan
untuk menggambar grafik, on the fly, melalui scripting (JavaScript biasanya)
|
<command>
|
Mendefinisikan
tombol perintah untuk dapat memanggil
|
<details>
|
Mendefinisikan
rincian tambahan bahwa pengguna dapat melihat atau menyembunyikan
|
<datalist>
|
Menentukan
daftar pilihan standar untuk kontrol input
|
<embed>
|
Mendefinisikan
sebuah wadah untuk aplikasi eksternal (non-HTML)
|
<header>
|
Mendefinisikan
sebuah dokumen atau bagian header
|
<figure>
|
Menentukan konten mandiri
|
<footer>
|
Mendefinisikan
sebuah dokumen atau bagian footer
|
<hgroup>
|
Groups
heading (<h1> to <h6>) elemen
|
<mark>
|
Mendefinisikan
teks yang ditandai / disorot
|
<output>
|
Mendefinisikan
hasil penghitungan
|
<source>
|
Mendefinisikan
beberapa sumber media untuk elemen media (<video> dan <audio>)
|
<summary>
|
Mendefinisikan
sebuah visible heading untuk elemen <details>
|
<time>
|
Mendefinisikan
tanggal / waktu
|
<video>
|
Mendefinisikan
sebuah video atau film
|
<section>
|
Mendefinisikan
bagian dalam dokumen
|
Daftar lengkap elemen yang tidak dipakai lagi (obsolete) di HTML5, antara lain:
Tag
|
Description
|
<acronym>
|
Mendefinisikan
sebuah akronim
|
<basefont>
|
Menentukan
warna standar, ukuran, dan font untuk semua teks dalam dokumen
|
<big>
|
Mendefinisikan
ukuran teks besar
|
<center>
|
Mendefinisikan
posisi teks dicenter
|
<dir>
|
Mendefinisikan
direktori list
|
<font>
|
Mendefinisikan
font, warna, dan ukuran untuk teks
|
<frame>
|
Mendefinisikan
sebuah window (frame) dalam sebuah frameset
|
<frameset>
|
Mendefinisikan
satu set frame
|
<strike>
|
Mendefinisikan
teks strikethrough
|
<noframes>
|
Mendefinisikan
sebuah konten alternatif bagi pengguna bahwa konten tidak mendukung frame
|
<applet>
|
Mendefinisikan
sebuah applet embed
|
Juga
elemen saperti <blink>, <marquee>,
<multicol>, <tt> juga telah ditinggalkanipenggunaanyaidiistrukturiHTML5.
Selain elemen-elemen diatas ada juga fitur "conforming" pada HTML5, seperti penggunaan attribut pada elemen tertentu.
Attribut baru HTML 5 antara lain:
Selain elemen-elemen diatas ada juga fitur "conforming" pada HTML5, seperti penggunaan attribut pada elemen tertentu.
Attribut baru HTML 5 antara lain:
Tag
|
Description
|
Draggable
|
Menentukan
apakah suatu unsur adalah draggable atau tidak
|
contextmenu
|
Menentukan
menu konteks untuk suatu elemen. Menu konteks muncul ketika pengguna mengklik
kanan pada elemen
|
Hidden
|
Menentukan
bahwa elemen belum, atau tidak lagi, relevan
|
Spellcheck
|
Mendefinisikan
posisi teks dicenter
|
Dropzone
|
Mendefinisikan
direktori list
|
contenteditable
|
Mendefinisikan
font, warna, dan ukuran untuk teks
|
Itemprop
|
Digunakan
untuk group item
|
HTML5
Audio
Salah satu fitur baru HTML5 yang paling mencengangkan adalah
disediakannya tag baru yang memungkinkan kita untuk memutar audio sesuai yang
kita inginkan tanpa menggunakan plugin tambahan seperti flash player. Dengan
menggunakan tag <audio> kita sudah bisa memasukkan file mp3 dan ogg ke
dalam halaman web kita.
Untuk menambahkan audio ke dalam web kita, cukup
ketikkan kode berikut
<!DOCTYPE html>
<html>
<body>
<audio controls="controls">
<source src="music/FromHere.ogg" type="audio/ogg">
Your
browser does not support the audio element.
</audio>
</body>
</html>
Sehingga
akan menampilkan output seperti berikut :
· Mozilla version 9.0.1
Google chrome Version 22.0.1229.94
Opera version 12.10 beta RC
<
<audio>, tag audio utama, digunakan untuk memasukkan audio
ke dalam HTML.
·
<source>, digunakan untuk mengambil source file yang
akan dimainkan audionya.
Atribut pada audio
·
Autoplay, atribut ini digunakan untuk member opsi kepada tag
audio apakah langsung dimainkan secara otomatis atau tidak.
·
Controls, atribut ini memberikan pilihan untuk menampilkan
kontrol audio (volume, seeker, play/pause button).
·
Type, digunakan untuk mendefinisikan tipe audio yang
dimainkan.
·
Src, digunakan untuk mendefinisikan source audio yang
dimainkan.
Saat
ini, ada tiga tipe file audio yang sudah didukung HTML5 yaitu MP3, WAV, dan
OGG. Berikut adalah data dukungan browser terhadap audio.
Browser
|
MP3
|
Wav
|
Ogg
|
Internet
Explorer 9
|
Ya
|
Tidak
|
Tidak
|
Firefox
4.0
|
Tidak
|
Ya
|
Ya
|
Google
Chrome 6
|
Ya
|
Ya
|
Ya
|
Apple
Safari 5
|
Ya
|
Ya
|
Tidak
|
Opera
10.6
|
Tidak
|
Ya
|
Ya
|
HTML5
Video
Fitur multimedia lainnya yang didukung oleh HTML5 adalah
video. Jika selama ini kita harus menggunakan flash player untuk memasukkan
konten video, pada HTML5 kita tidak perlu lagi menggunakannya.
Untuk menambahkan elemen video kita gunakan kode
berikut:
<!DOCTYPE
html>
<html>
<body>
<video
width="320" height="240" controls="controls">
<source
src="video/movie.ogg" type="video/ogg">
Your
browser does not support the video tag.
</video>
</body>
</html>
Sehingga
akan menampilkan output sebagai berikut :
Google
chrome Version 22.0.1229.94
HTML5
Canvas
Fitur
yang lain pada HTML5 adalah <canvas>. Canvas memungkinkan kita untuk
memasukkan objek 2D atau 3D kedalam halaman web. Canvas juga sama
seperti GeoLocation, tidak bias bekerja sendiri. Dibutuhkan javascript untuk
membuat objek di dalamnya, baik 2D maupun 3D.
Untuk membuat objek di dalam canvas kita gunakan
kode berikut :
<!DOCTYPE
html>
<html>
<body>
<canvas
id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
Your
browser does not support the HTML5 canvas tag.
</canvas>
<script>
var
c=document.getElementById("myCanvas");
var
ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
Sehingga
kita dapatkan hasil output seperti berikut :
Mozilla version 9.0.1
HTML5
Form Element
Pada HTML5 kita mengenal beberapa elemen form baru. Jika
dahulu kita terbatas pada input dan textarea, kali ini HTML5
menambahkan tiga elemen baru yaitu datalist, keygen, dan output.
Namun untuk keygen, dukungan browser saat ini belum
memenuhi standar keamanan, sehingga lebih aman untuk para web programmer
menggunakan enkripsi pada server-side seperti md5, sha1,
dan base64_encode.
Form
Datalist
<!DOCTYPE
html>
<html>
<body>
<form
action="demo_form.asp" method="get">
<input
list="browsers" name="browser">
<datalist
id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input
type="submit"></form>
</body>
</html>
Sehingga
kita dapatkan hasil output seperti berikut :
Mozilla
version 9.0.1
Google chrome Version 22.0.1229.94
<!DOCTYPE
html>
<html>
<body>
<form
oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input
type="range" name="a" value="50">100 +
<input
type="number" name="b" value="50">=
<output
name="x" for="a b"></output>
</form>
</body>
</html>
Sehingga
kita dapatkan hasil output seperti berikut :
Mozilla version 9.0.1
Google Chrome Version 22.0.1229.94
Dikenalkan pula beberapa atribut dan aturan baru, seperti:
- atribut media, ping pada
elemen pranala,
- autofocus, placeholder,
required, autocomplete dan sebagainya, terkait elemen input dan form
·
reversed
pada elemen ol untuk urutan besar ke kecil.
- Fitur baru harus didasarkan
pada HTML, CSS, DOM, dan JavaScript
- Mengurangi kebutuhan untuk
plugin eksternal (seperti Flash)
- Lebih baik dalam hal penanganan
kesalahan/error handling
- Lebih markup untuk menggantikan
scripting
F. Fitur-fituripadaiHTML5
Didalam
HTML 5 memiliki fitur-fitur yang berbeda dari fitur aplikasi HTML versi yang
sebelum-sembelumnya. Adapun diantaranya HTML memiliki fitur-fitur baru seperti:
·
HTML5iCanvas
Pada HTLM 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.
Pada HTLM 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.
·
AudioidaniVideo
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.
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.
·
Web Workers
Pada web yang menggunakan HTML sebelumnya sering kali kita lama dalam membuka web tersebut, ini dikarenakan banyaknya penggunaan JAVESCRIPT. Pada HTML5 disediakan WEB WORKERS yang mempercepat dalam pemrosesan JAVASCRIPT lebih cepat dan multitasking.
Pada web yang menggunakan HTML sebelumnya sering kali kita lama dalam membuka web tersebut, ini dikarenakan banyaknya penggunaan JAVESCRIPT. Pada HTML5 disediakan WEB WORKERS yang mempercepat dalam pemrosesan JAVASCRIPT lebih cepat dan multitasking.
·
New Semantic Elements: Ini seperti pada elemen
<header>, <footer>, and <section>.
·
Forms 2.0: Perbaikan form web HTML di mana atribut baru
telah diperkenalkan tag <input>.
·
LocaliStorage
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.
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.
·
Semantics
Semantics disini merupakan fitur
yang dijadikan unggulan dalam HTML5. Pada HMLT 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.
- Persistent Local Storage: Untuk menghilangkan
ketergantungan pada plugin pihak ketiga.
- WebSocket: Sebuah generasi teknologi
terbaru komunikasi dua arah untuk aplikasi web.
- Server-Sent Events: memperkenalkan even yang
mengalir dari web server ke web browser yang disebut Server-Sent Events
(SSE).
- Audio & Video: Anda dapat menanamkan/embed
audio atau video pada halaman web Anda tanpa menggunakan plugin pihak
ketiga.
- Geolocation: Pengunjung dapat memilih
untuk berbagi lokasi fisik mereka dengan aplikasi web Anda..
- Microdata: Ini memungkinkan Anda membuat
kosakata Anda sendiri di luar HTML5 dan memperluas halaman web Anda dengan
kostum semantics.
- Drag and drop: Drag dan drop item dari satu
lokasi ke lokasi lain pada halaman web yang sama.
- Support terhadap media
penyimpanan offline
- Memiliki media video dan audio
untuk multimedia
- Terdapat elemen konten yang
spesifik contoh artikel, footer, header, navigation dan section.
- Memiliki kontrol form baru
seperti kalender, tanggal, waktu, e-mail, URL dan search.
- Artikel dapat berupa entri blog
atau konten.
G.
Browser yang mendukung HTML 5
Beberapa
browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera.
Kabarnya IE9 ( Internet Explorer ) akan mendukung beberapa fitur dari HTML5.
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 satunyaiadalahiFlashidaniSilverlight.
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>
<param name="movie" value="flvplayer.swf?file=movies/holiday.flv" />
<param name="wmode" value="transparent" />
</object>
Sementara beberapa teknologi HTML5
sudah ada di Internet Explorer 9 , dan yang lain sedang diumumkan untuk
Internet Explorer 10 lewat Internet Explorer Landasan Previews , beberapa
spesifikasi populer dan berita membutuhkan pekerjaan sedikit lebih oleh W3C dan
vendor browser sebelum mereka akan siap untuk mengimplementasikan dalam
aplikasi kita. Salah satu contohnya adalah Socket Web , spesifikasi menarik
yang memungkinkan pengembang membuka saluran komunikasi dua arah dengan server
back-end , sehingga memungkinkan tingkat " real-time " konektivitas
yang sebelumnya tidak tersedia dalam aplikasi Web.
H. Pembuatan Aplikasi HTML5 oleh Intel
Menurut informasi yang ada pada lamanCHIP.co.id , Pada Intel Developer
Forum (IDF) di Beijing, Intel mengatakan akan memperluas pemakaian HTML 5,
dengan meluncurkan HTML5 Development Environment. Platform ini
menyediakan sistem yang terintegrasi untuk mengembangkan, menguji, melakukan
debug, dan menjalankan aplikasi di beberapa sistem operasi seperti iOS,
Android, Windows 8 dan Windows Phone. Dengan perluasan plattform ini, maka
dipastikan penggunaan HTML5 akan digunakan oleh banyak apikasi alat komunikasi.
Hal ini pastinya turut membantu para pengembang mengatur aplikasi yang
mereka ciptakan untuk dijalankan pada platform secara
keseluruhan. Patrick Darling dari Intel mengatakan, ”HTML5 memudahkan
pada developer untuk menciptakan aplikasi yang dapat
dijalankan pada seluruhplatform." Patrick juga menambahkan
bahwa Intel turut membantu developer untuk membuat aplikasi
dengan biaya yang lebih rendah, cepat, dan kemudahan penyebarannya ke pasar
dengan HTML5.
Wakil Presiden Direktur dan General Manajer Divisi Software Intel, Doug
Fisher memperkenalkan platform baru pada hari ke-2 IDF Beijing
2013. Dia mengatakan platform tersebut membuat HTML5 dapat
diakses dan digunakan seluruh developer. Platform ini
membantu developer untuk menjual aplikasinya pada banyak pasar
aplikasi, seperti Amazon, AppStore, Facebook, Google Chrome Web Store, Google
Play Stire dan Windows Phone Store.
Lebihnya lagi, sarana baru dari Intel ini tersedia bebas dari biaya lisensi
dan biaya lainnya. Dikatakan bahwa HTML5 merupakan tren masa depan dalam
pembuatan dan pengembangan aplikasi cross platform, atau aplikasi
yang kompatibel dengan seluruh platform. Perluasan pijakan ini
tentunya akan menambah banyaknya penggunaan HTML5.
I. Kelebihan
dan Kekurangan HTML5
Kelebihan
HTML5
Sebagai suatu rancangan bagi web
browser yang lebih baru sudah pasti HTML 5 mempunyai beberapa kelebihan jika
dibandingkan dengan versi sebelumnya, beberapa diantara kelebihan HTML 5
diantarannya:
- Dapat
ditulis dalam sintaks HTML (dengan tipe media text/HTML) danXML.
- Integrasi
yang lebih baik dengan aplikasi situs dan pemrosesannya.
- Integrasi
(‘inline’) dengan doctype yang lebih sederhana.
- Penulisan
kode yang lebih efisien.
- Konten
yang ada di situs lebih mudah terindeks oleh search engine.
- Memiliki
integrasi yang bagus terhadap aplikasi web
- Dapat
dideteksi oleh browser lama
Format HTML5 juga menawarkan bentuk
ditingkatkan untuk mencari kotak, input teks dan bidang lain yang relevan dan
menawarkan validasi data yang mudah dan interaksi dengan elemen halaman serta perbaikan
yang berarti lainnya.
HTML5 mendukung fitur geo-lokasi
canggih, terlepas dari apakah yang diberikan oleh GPS atau tidak, secara
langsung diterapkan pada semua browser HTML5 kompatibel. Lintang Google pada
iPhone adalah contoh terbaik dari Geo-lokasi. Aplikasi geo-lokasi benar-benar
platform independen.
Format HTML5 juga fitur baru dan
lebih baik Database API umum digunakan secara lokal. Sederhananya, ia
menyediakan penyimpanan yang jelas database yang memberikan pengembang
kesempatan untuk menyimpan atau menyimpan data terstruktur. Database ini
digunakan ketika Anda ingin menyimpan belanja produk keranjang untuk situs
belanja secara online.
Kekurangan HTML5
·
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.
·
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.
·
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.
·
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.
·
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.
BAB III
PENUTUP
3.1
Kesimpulan
HyperText
Markup Language5 (HTML5) adalah sebuah bahasa markah yang digunakan untuk
membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah
penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam
berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan disajikannya makalah ini diharapkan pembaca dapat mengetahui lebih
dalam mengenai HTML5. Dengan adanya kelebihan dan keunggulan dalam HTML5, hal
ini akan menjadi pertimbangan para pengguna untuk menggunakan HTML5 sebagai
plattform dalam media komunikasi.
DAFTAR PUSTAKA
http://problogiz.blogspot.com/2013/01/html5-apa-saja-yang-baru.html. http://msdn.microsoft.com/en-us/magazine/hh335062.aspx.
http://blog.haqqi.net/2011/06/komponen-html5-yang-wajib-diketahui/. http://programwahid.blogspot.com/2013/03/dasar-pemrograman-web-dengan-html.html.
















0 komentar:
Posting Komentar