Pages

Kamis, 31 Oktober 2013

html5

PERKEMBANGAN PEMROGRAMAN WEB BERBASIS HTML5
Makalah ini dibuat untuk memenuhi tugas mata kuliah Teknologi Informasi dan Komunikasi

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

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
  1.     Mengintegerasikan gambar dengan tulisan.
  2.     Membuat Pranala.
  3.     Mengintegerasikan berkas suara dan rekaman gambar hidup.
  4.     Membuat form interaktif.
  5.    Menentukan format suatu teks
6.             Membuat list tentang sekelompok hal
  1.  Membuat link ke dokumen lain atau bagian lain dari dokumen yang sama.
  2.   Menyisipkan citra atau gambar.
  3.   Menampilkan informasi dalam bentuk tabel
  4.   Memodifikasi.Mengontrol tampilan dari web page dan contentnya.
  5.   Mempublikasikan dokumen secara online sehingga bisa di akses dari seluruh dunia.
  6.   Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online.
  7.  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:
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

Penjelasan dari tags diatas:
<    <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 :
·    Mozilla version 9.0.1

Google chrome Version 22.0.1229.94

Opera version 12.10 beta RC


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


      Google chrome Version 22.0.1229.94


        Opera version 12.10 beta RC



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



Opera version 12.10 beta RC


 Form Output
<!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
     Opera version 12.10 beta RC


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




0 komentar:

Posting Komentar