Html5

508 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
508
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5

  1. 1. 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
  2. 2. 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. 3. 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.
  4. 4. 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
  5. 5. 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
  6. 6. 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.
  7. 7. 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
  8. 8. 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.
  9. 9. 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.
  10. 10. 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 :
  11. 11. 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:
  12. 12. 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
  13. 13. 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.
  14. 14. 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
  15. 15. 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
  16. 16. 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.
  17. 17. 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.
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. “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 :
  22. 22. <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>
  23. 23. </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"
  24. 24. name="someInput" placeholder="Muhammad Fauzil Haqqi" required> <buttontype="submit">Go</button> </form>. 6. Internet Explorer Hack. Seperti biasanya, Internet Explorer selalu terlambat dalam mengimplementasikan teknologi website terbaru, meski Microsoft selalu memiliki teknologi sendiri seperti silverlight untuk browsernya tersebut. Pada IE, secara default semua elemen akan ditampilkan secara “inline”. Untuk itu, Anda harus mendeklarasikan style tersendiri agar tampilan dapat seperti seharusnya, seperti berikut ini.header, footer, article, section, nav, menu, hgroup {display: block;}Meskipun demikian IE tetap tidak menghiraukan style tersebut. Anda harus membuat javascript di bawah ini ke dalam “head” dari setiap halaman. document.createElement("article"); document.createElement("footer"); document.createElement("header"); document.createElement("hgroup"); document.createElement("nav"); document.createElement("menu"); Untuk kemudahan, seseorang bernama Remy Sharp telah membuat library javascript untuk mengatasi error yang dibuat oleh IE tersebut. Script ini biasa disebut dengan HTML5 shim. Anda bisa memasukkan kode di bawah ini ke dalam head halaman website Anda, atau mendownload script tersebut secara lokal. <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
  25. 25. 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.
  26. 26. 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();
  27. 27. 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");
  28. 28. context.beginPath(); context.moveTo(170, 80); context.bezierCurveTo(130, 100, 130, 150, 230, 150); context.bezierCurveTo(250, 180, 320, 180, 340, 150); context.bezierCurveTo(420, 150, 420, 120, 390, 100); context.bezierCurveTo(430, 40, 370, 30, 340, 50); context.bezierCurveTo(320, 5, 250, 20, 250, 50); context.bezierCurveTo(200, 5, 150, 20, 170, 80); context.closePath(); // add linear gradient var grd = context.createLinearGradient(230, 0, 370, 200); // light blue grd.addColorStop(0, "#8ED6FF"); // dark blue grd.addColorStop(1, "#004CB3"); context.fillStyle = grd; context.fill(); // add stroke context.lineWidth = 5; context.strokeStyle = "blue"; context.stroke(); }; </script> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> </body> </html> Cukup mudah kan??? Kalo mau contoh lengkapnya bisa dilihat di http://www.html5canvastutorials.com/ Sama dengan canvas, jika browser anda tidak mendukung maka video tidak bisa ditampilkan. Berikut perintah html5 untuk menampilkan video <!DOCTYPE HTML> <html> <head> </head>
  29. 29. <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>
  30. 30. 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.
  31. 31. 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/

×