MAKALAH “ HTML5”

MAKALAH

“ HTML5”

Dosen Pengampu :

Septia Lutfi

Disusun Oleh :

Nama               : ZAINI MAFTUKHIN

NIM                : 2114R0809

STIMIK HIMSYA SEMARANG

TAHUN 2014/2015

BAB 1

PENDAHULUAN

1.      Latar Belakang

Seiring dengan kemajuan perkembangan jaman, maka banyak sekali yang sudah berubah di bumi ini. Banyak iilmuwan yang menemukan berbagai peralatan yang ditujukan untuk mempermudah tugas dan kewajiban manusia. Missal penemuan listrik, penemuan televise, lampu pijar bahkan sampai penemuan telepon, dan penemuan internet. Sekarang ini perkembangan internet sedang mengalami kemajuan yang pesat tentang pemrogramannya. Mulai dari HTML1, sampai HTML5.. Disini kita akan membahas lebih lanjut mengenai HTML5

2.      Rumusan masalah

1.      Jelaskan pengertian dari HTML5?

2.      Bagaimana sejarah lahirnya HTML5?

3.      Apa saja kelebihan dan kekurangan yang ada pada HTML5?

4.      Apa saja atribut baru dalam HTML5 saat ini?

5.      Sebut dan jelaskan fitur baru dari HTML5?

6.      Sebut dan jelaskan elemen baru dalam HTML5?

7.      Apakah manfaat dan kegunaan HTML5 dalam kehidupan sehari-hari?

8.      Jelaskan perbandingan antara HTML5 dengan HTML sebelumnya?

3.      Tujuan penulisan

1.      Untuk mengetahui pengertian dan sejarah dari HTML5

2.      Dapat menjelaskan kelebihan dan kekurangan yang dimiliki oleh HTML5

3.      dapat menjelaskan tentang atribut, fitur, dan elemen baru yang ada pada HTML5

4.      menjelaskan manfaat dan kegunaan dari HTML5 dalam kehidupan sehari-hari

5.      dapat membandingkan perbedaan antara HTML5 dengan HTML versi sebelumnya

4.      Manfaat penulisan

1.      Agar memberikan informasi mengenai HTML5 kepada para penggunanya.

2.      Para pembaca mengerti tentang bagaimana sejarhnya HTML5 bukan hanya mengerti cara menjalankannya saja

BAB II

PEMBAHASAN

1.      Pengertian HTML5

HTML5 adalah suatu spesifikasi sebagai hasil perbaikan dari standard HTML(Hypertext Markup Language) sebelumnya yang dikeluarkan oleh W3C( world Wide Web Consurtium) dan partner kerjanya yaitu Web Hypertext Application technology Working Group. Tujuan adanya revisi yang semula HTML menjadi HTML5 adalah untuk meningkatkan bahasa pada system multimedia yang sedang in  yang dengan mudah dapat terbaca oleh manusia dan dimengerti oleh computer itu sendiri sebagai perangkat.  Selain itu, juga bertujuan untuk mengurangi penggunaan plugin-plugin 3^rd party pada HTML sehingga dapat mempercepat kinerja web itu sendiri. Contoh plugin itu sendiri adalah, Adobe Flash, Microsoft Silverlight, Java dan lain-lainnya.

2.      Sejarah HTML5

HTML5 merupakan perbaikan kelima dari HTML yang pertama kali dibuat pada tahun 1990 dan terakhir kalinya versi HTML4 dirilis tahun 1997. Para kelompok kerja Teknologi Aplikasi Web Hyperteks memulai standar baru HTML5 ini pada tahun 2004, dan pada tahun 2009 W3C dan WHATWG bersatu dalam pengembangan HTML5. Konsep pertamanya sudah dipublikasikan pada tahun 2008, tetapi tidak banyak yang menggunakannya hingga tahun 2011. Pada tahun 2011, HTML 5 diterbitkan sepenuhnya dan orang-orang mulai menulis dan menggunakannya, namun penerapannya pada masing-masing browser yang berbeda masih bisa dibilang buruk. Hari ini, seluruh browser utama (Chrome, Safari, Firefox, Opera, IE) dapat mendukung HTML5, sehingga teknologi HTML terbaru dapat digunakan dengan sebaik-baiknya. HTML5 mulai dikenal oleh masyarakat pada tahun 2010 meskipun sudah dikenal sejak lama oleh para pengembang web. Dengan adanya pengembangan HTML5, adobe flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau konten apapun di web.

3.      Kelebihan dan kekurangan HTML5

Kelebihan :

1.      Cleaner code, karena sebagian besar kode telah termasuk di dalam sintaks html5, maka kode nampak terlihat lebih sederhana daripada penggabungan antara html, css dan java script.

2.      Greater consistency, HTML5 telah melakukan banyak sekali penambahan sintaks yang dibuat dalam struktur lebih baik dan lebih sederhana daripada sintaks-sintaks sebelumnya. Hal ini membuat developer terbantu dalam meningkatkan konsistensi dalam membangun sebuah web.

3. Improve Semantics, dengan berbagai elemen kode di dalam html5 yang telah distandarisasi, maka nilai semantik dari sebuah web dapat lebih ditingkatkan. Itu berarti bahwa bagian-bagian dari web seperti header, nav, footer dan beberapa bagian lainnya terdefinisi dengan jelas maksud serta tujuannya selain itu juga terbentuk dalam sebuah “machine readible format”
4. Improved Accessibility, dengan teknologi HTML5 yang memudahkan struktur pembangunan sebuah web, maka developer dapat membangun pemahaman yang lebih detil mengenaik halaman web.
5. Client-side Database, HTML5 menyediakan model database SQL yang baru dengan API yang dapat dibangun dalam konsep lokal, dalam hal ini di sisi client.
6. Geolocation, HTML5 mempunyai API yang terintegrasi terhadap geolocation, fasilitas tersebut dapat diakses melalui GPS atau fasilitas lain seperti Google Latitude pada iphone.
7. Offline Aplication Cache, pengguna dapat terus melakukan interaksi dengan aplikasi meskipun mereka terputus dari jaringan internet.
8. Smarter Forms, terdapat semacam reguler expression (regex) yang membuat form mampu mengenali secara lebih baik tentang input, validasi data dan interaksi dengan elemen lain (misal : format email, password dll)
9. Sharper focus on Web Application Requiments, HTML5 membuat sebuah mekanisme yang lebih mudah dalam hal pembuatan front end, aplikasi chat, tools drag and drop, video player, pengolah grafis dan masih banyak lagi.
10. Bersifat ompatibel dengan semua browser

Kekurangan

Saat ini HTML5 masih dalam pengembangan, sehingga hanya beberapa browser yang sudah mendukung HTML5, seperti fitur-fitur pada HTML 5 tidak semuanya bisa berfungsi dengan baik pada beberapa browser. Beberapa browser yang sudah mendukung HTML 5 seperti Safari, Chrome, Firefox, dan Opera. Namun kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML5.

         Kekurangan utama yang dimiliki oleh HTML5 ini adalah versi ini hanya support untuk browser modern/terbaru

         Karena bahasa HTML5 ini masih dalam perkembangan, jadi beberapa elemen yang ada bisa saja berubah

         Fitur keamanan yang ditawarkan HTML5 masih terbatas

         HTML5 tidak dapat diandalkan dalam hal format karena web browser yang berbeda disebabkan mereka tidak mendukung salah satu format tunggal.

4.      Atribut baru HTML5

Atribut Event Window

Peristiwa (event) yang dipicu objek window (berlaku untuk tag <body>):

Atribut	Nilai	Deskripsi
onafterprint Baru	script	Script yang akan dijalankan setelah dokumen dicetak
onbeforeprint Baru	script	Script yang akan dijalankan sebelum dokumen dicetak
onbeforeunload Baru	script	Script yang akan dijalankan sebelum dokumen dibongkar
onerror Baru	script	Script yang akan dijalankan ketika kesalahan terjadi
onhaschange Baru	script	Script yang akan dijalankan ketika dokumen telah berubah
onload	script	Kebakaran setelah halaman selesai loading
onmessage Baru	script	Script yang akan dijalankan saat pesan dipicu
onoffline Baru	script	Script yang akan dijalankan ketika dokumen berjalan offline
ononline Baru	script	Script yang akan dijalankan ketika dokumen datang online
onpagehide Baru	script	Script yang akan dijalankan ketika jendela tersembunyi
onpageshow Baru	script	Script yang akan dijalankan ketika jendela menjadi terlihat
onpopstate Baru	script	Script yang akan dijalankan ketika jendela sejarah perubahan
onredo Baru	script	Script yang akan dijalankan ketika dokumen melakukan redo
OnResize Baru	script	Dipicu ketika Window browser diubah ukurannya
onstorage Baru	script	Script yang akan dijalankan ketika sebuah wilayah Storage Web diperbarui
onundo Baru	script	Script yang akan dijalankan ketika dokumen melakukan undo
onunload	script	Dipicu setelah halaman telah diturunkan (atau jendela browser telah ditutup)

Event Form

Event dipicu oleh tindakan dalam form HTML (berlaku untuk hampir semua elemen HTML5, namun yang paling banyak digunakan dalam elemen form):

Atribut	Nilai	Deskripsi
onblur	script	Dipicu saat itu elemen kehilangan fokus
onchange	script	Dipicu saat ketika nilai dari elemen berubah
oncontextmenu Baru	script	Script yang akan dijalankan ketika menu konteks dipicu
onfocus	script	Dipicu saat ketika elemen mendapat fokus
onformchange Baru	script	Script yang akan dijalankan ketika perubahan bentuk
onforminput Baru	script	Script yang akan dijalankan ketika form mendapatkan masukan dari pengguna
oninput Baru	script	Script yang akan dijalankan ketika elemen mendapatkan masukan dari pengguna
oninvalid Baru	script	Script yang akan dijalankan ketika elemen tidak valid
onreset	script	Dipicu ketika tombol Reset dalam form diklik Tidak didukung di HTML5
onselect	script	Dipicu setelah beberapa teks dalam suatu elemen telah dipilih
onsubmit	script	Dipicu saat formulir dikirimkan

Event Keyboard

Atribut	Nilai	Deskripsi
OnKeyDown	script	Dipicu ketika pengguna menekan tombol
onkeypress	script	Dipicu ketika pengguna menekan tombol
onkeyup	script	Dipicu ketika pengguna melepaskan tombol

Event Mouse

Event dipicu oleh mouse, atau tindakan pengguna yang sama:

Atribut	Nilai	Deskripsi
onclick	script	Dipicu pada mouse klik pada elemen
ondblclick	script	Dipicu pada mouse klik dua kali pada elemen
ondrag Baru	script	Script yang akan dijalankan ketika elemen diseret
ondragend Baru	script	Script yang akan dijalankan pada akhir operasi drag
ondragenter Baru	script	Script yang akan dijalankan ketika elemen telah diseret ke target penurunan valid
ondragleave Baru	script	Script yang akan dijalankan ketika elemen meninggalkan target penurunan valid
ondragover Baru	script	Script yang akan dijalankan ketika elemen sedang diseret atas target penurunan valid
ondragstart Baru	script	Script yang akan dijalankan pada awal operasi drag
ondrop Baru	script	Script yang akan dijalankan ketika elemen menyeret sedang dijatuhkan
onmousedown	script	Dipicu ketika tombol mouse ditekan pada elemen
onmousemove	script	Dipicu ketika pointer mouse bergerak di atas elemen
onmouseout	script	Dipicu  ketika pointer mouse bergerak keluar dari elemen
onmouseover	script	Dipicu ketika pointer mouse bergerak di atas elemen
onmouseup	script	Dipicu ketika tombol mouse dilepaskan melalui elemen
onmousewheel Baru	script	Script yang akan dijalankan ketika mouse wheel sedang diputar
onscroll Baru	script	Script yang akan dijalankan ketika elemen scrollbar sedang menggulir

Events Media

Event dipicu oleh media seperti video, gambar dan audio (berlaku untuk semua elemen HTML5, namun paling sering terjadi pada unsur-unsur media, seperti audio, embed, img, objek, dan video):

Atribut	Nilai	Deskripsi
onabort	script	Script untuk dijalankan pada batalkan
oncanplay Baru	script	Script yang akan dijalankan bila file siap untuk mulai bermain (ketika telah buffered cukup untuk memulai)
oncanplaythrough Baru	script	Script yang akan dijalankan ketika file bisa dimainkan sepanjang jalan sampai akhir tanpa berhenti untuk buffering
ondurationchange Baru	script	Script yang akan dijalankan ketika panjang perubahan media yang
onemptied Baru	script	Script yang akan dijalankan ketika sesuatu yang buruk terjadi dan file tiba-tiba tidak tersedia (seperti tiba-tiba terputus)
onended Baru	script	Script yang akan dijalankan ketika media telah mencapai akhir (acara berguna untuk pesan-pesan seperti “terima kasih untuk mendengarkan”)
onerror Baru	script	Script yang akan dijalankan ketika kesalahan terjadi ketika file tersebut sedang dimuat
onloadeddata Baru	script	Script yang akan dijalankan ketika media data dimuat
onloadedmetadata Baru	script	Script yang akan dijalankan ketika meta data (seperti dimensi dan durasi) dimuat
onloadstart Baru	script	Script yang akan dijalankan seperti file mulai memuat sebelum apa sebenarnya dimuat
onpause Baru	script	Script yang akan dijalankan ketika media berhenti baik oleh pengguna atau pemrograman
onplay Baru	script	Script yang akan dijalankan ketika media siap untuk mulai bermain
onplaying Baru	script	Script yang akan dijalankan ketika media sebenarnya telah mulai bermain
onprogress Baru	script	Script yang akan dijalankan ketika browser sedang dalam proses untuk mendapatkan data media
onratechange Baru	script	Script untuk dijalankan setiap kali perubahan tingkat pemutaran (seperti ketika pengguna beralih ke gerakan lambat atau modus maju cepat)
onreadystatechange Baru	script	Script untuk dijalankan setiap kali perubahan negara siap (keadaan siap melacak keadaan data media)
onseeked Baru	script	Script yang akan dijalankan ketika atribut mencari diatur ke false menunjukkan bahwa pencarian telah berakhir
onseeking Baru	script	Script yang akan dijalankan ketika atribut mencari diatur ke benar menunjukkan seeking yang aktif
onstalled Baru	script	Script yang akan dijalankan ketika browser tidak dapat mengambil data media untuk alasan apapun
onsuspend Baru	script	Script yang akan dijalankan ketika mengambil data media dihentikan sebelum diisi penuh karena alasan apapun
ontimeupdate Baru	script	Script yang akan dijalankan ketika posisi bermain telah berubah (seperti ketika pengguna cepat maju ke titik yang berbeda di media)
onvolumechange Baru	script	Script untuk dijalankan setiap kali volume yang berubah (termasuk pengaturan volume untuk “bisu”)
onwaiting Baru	script	Script yang akan dijalankan ketika media telah berhenti namun diperkirakan untuk melanjutkan (seperti ketika media berhenti untuk buffer data lebih)

5.      Fitur baru dalam HTML5

Fitur-fitur baru HTML5

1.      Canvas

Canvas adalah media yang bisa dicoret-coret langsung dan tidak memerlukan plugin khusus. Canvas memberikan pilihan kepada para penggunanya. Dulu, saat ingin menggambar di halaman web maka harus menggunakan applet Java atau flash namun sekarang dapat menggunakan canvas, dengan cara menambahkan canvas dan javascript saja maka kita sudah dapat menggambar di halaman web.

2.      Video dan Audio

Karena sudah ada tag <audio> dan <video> maka kita tidak memerlukan flash lagi untuk memutar audio. Untuk masuk di dalamnya dapat menggunakan berbagai format, yang paling menonjol adalah Ogg Theora dan H.264. namun sampai sekarang penggunaan kode masih dipertanyakan kembali.

3.      Local storage

Fitur ini merupakan standard dalam HTML5. Fitur ini dapat menyimpan data yang memiliki kapasitas besar dibanding yang lain tanpa harus mengimplementasikan trik dengan cookie atau flash.

4.      Web workers

Kita sebelumnya pernah menikmati fitur ini dalam Google gears. Web workers ini mempunyai kelebihan dibanding dengan javascript, missal saja saat kita mengoperasikan computer dengan javascript maka akan menyebabkan computer melambat, nah ini yang membedakan dengan web workers.

5.      Semantics

Fitur ini sangatlah cocok bagi para perancang yang sering meng-abuse div dan span sebagian elemen nav, fret no more. Semantic ini bermanfaat sekali, karena bukan hanya untuk mencari informasi namun juga dapat melakukan seperti yang dijelaskan diatas.

6        fitur pemrograman terbaru pada HTML5, yaitu:

1.      Kemunculan Elelmen <Hgroup>

Ketika memasang judul diikuti dengan subheading di bagian header website, anda mungkin biasa menggunakan tag standar yaitu <h1> dan <h2>. Sayangnya. tidak ada cara yang semantik untuk mengaitkan hubungan di antara keduanya. Padahal secara hirarki,tag <h2> seharusnya berada di bawah <h1>. Nah, dengan elemen <hgroup>, kini kita dapat mengelompokkan tag heading agar sesuai hirarki, tanpa sedikipun memengaruhi skema aliran dokumen.

<header>

<hgroup>

<h1></h1>

<h2>supersite in just click away Supersite in just click way </h2>

</hgroup>

</header>

2. Kemunculan Elemen <Figure>

Perhatikan kode berikut, yang saat ini mungkin seringkali anda gunakan untuk menampilkan sebuah gambar.

<img src="path/to/image" alt="Leonidas" />

<p>Leonidas Berteriak Spartan. </p>

Sayangnya, kode di atas tidak semantik. Caption yang dibungkus dalam tag paragraf <p> benar-benar terpisah elemen <img> di atasnya. HTML5 memperbaiki hal ini dengan mengenalkan elemen <figure>. Jika anda mengkombinasikan dengan elemen <figcaption>, maka anda sekarang bisa mengasosiasikan caption yang secara hirarki sesuai dengan gambar masing-masing.

<figure>

<img src="path/to/image" alt="Leonidas" />

<figcaption> <p> Leonidas Berteriak Spartan. </p> </figcaption>

</figure>

3. Kemunculan Elemen <Mark>

Bayangkan sebuah efek stabilo yang muncul setiap kali anda melakukan pencarian kata di suatu halaman. Maka elemen <mark> adalah senjata baru HTML5 yang memungkinkan anda untuk memunculkannya. Anda dapat menggabungkan dengan JavaScript pula. Contohnya,jika ada penggunjung yang mencari kata "Spartan!" di website saya, saya bisa memanfaatkan JavaScript untuk wrap setiap string yang cocok dengan kata "Spartan!" dengan tag <mark> untuk memunculkan efek stabile.  

<h3> Hasil Pencarian </h3><p> Di hadapan Leonidas berbaris 100.000 pasukan Persia. Namun tanpa sedikitpun rasa gentar, dia menyerukan, <mark>"Spartan1"</mark>. </p>

4. HTML5 Melengkapi <Form> Dengan Berbagai Atribut Baru

Setiap programmer pasti tahu bagaimana caranya membuat form. Tambahkan sebuah tag <form> berisi elemen <input type="text">, <input type="password">, dan sebuah <input type="submit">, maka jadilah. Namun rupanya form yang sekarang ini anda kenal sudah tidak relevan lagi. HTML5 telah melengkapi form dengan sejumlah atribut-atribut baru yang lebih menarik, dinamis, dan mungkin tidak pernah anda kenal sebelumnya. Misalnya <placeholder>, <autofocus>. dan <type> dengan kapabilitas masing-masing. Sayangnya fitur-fitur baru ini mungkin masih belum dapat ditampilkan potensi sepenuhnya pada beberapa browser. Namun tidak ada salahnya untuk dipelajari dan diterapkan sekarang atau ketika di masa depa dimana browser versi lama telah kehilangan peminat dan punah dari permukaan bumi.

5.Form Dilengkapi Email Validation

Jika anda terapkan type "email" pada form, maka anda dapat memerintahkan browser untuk hanya mengijinkan isian yang sesuai dengan struktur alamat email saja. Artinya, HTML5 sudah dilengkapi email validation didalamnya. Meskipun pada beberapa browser (sebut saja IE), hasilnya tidak akan ditampilkan sesuai dengan yang anda inginkan.

<!DOCTYPE html>

<head> <title>untitled</title> </head>

<body>

<form action="" method="get">

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

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

<button type="submit"> Submit Form </button> </form>

</body> </html>

6.      Munculnya Attribut <Required> pada Form

Form pada HTML5 kini juga telah dilengkapi atribut <required>, yang mampu membuat isian tertentu menjadi wajib diisi.

<input type="text" name="isian" required>

Dengan kode ini, maka sebuah form tidak dapat disubmit bila field "isian" dibiarkan kosong. Berikut adalah contoh singkat mengenai penerapannya.

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

<label for="isian"> Nama: </label>

<input type="text" id="isian" name="isian" place-holder="King Xerxes"

required>

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

</form>

7. Munculnya Attribut <Pattern> pada Form

Dengan atribut <pattern>, kini anda dapat memerintahkan form untuk melakukan validasi isian sesuai aturan yang telah ditentukan. Misalnya pada kode berikut :

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

<label for="username">Membuat username baru: </label>

<input type"text" name="username" id="username" pattern="[A-Za-z]{4,10}"

required>

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

</form>

Jika anda familiar dengan "regular expression", maka pattern [A-Za-z]{1,10} memerintahkan pada form agar hanya menerima huruf besar dan kecil saja, sekaligus harus diisi dengan 1-10 karakter.

8.Elemen baru HTML5

Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya:

1.             section serupa seperti h1-h6.

2.            article bisa berupa entri blog atau tulisan konten.

3.            aside menyajikan konten pelengkap.

4.            header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi.

5.            footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya.

6.            dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan percakapan.

7.            yang fenomenal adalah penggunaan elemen figure, video, audio, source, embed, canvas, dan elemen terkait berkas multimedia lainnya.

Atribut baru di HTML5

1.      Atribut media, ping pada elemen pranala

2.      Autofocus, placeholder, required, autocomplete dan sebagainya

3.      Reversed

Browser pendukung dari HTML5

1.      Operasi web browser

2.      Safari ( versi 3.1 )

3.      Firefox ( firefox 3)

4.      Google chrome ( versi 3 )

5.      Internet explore ( versi 8 )

HTML5 Semantic

Merupakan tag baru yang dikeluarkan pada HTML5 guna mendukung perubahan struktur halaman agar terlihat lebih rapi, selain itu juga untuk mengurangi pemakaian tag <div>

Elemen-elemen baru yang ditambahkan pada HTML5 adalah:

1.      <article > : tag ini mendefinisikan artikel, posting atau komentar dari pengguna, atau suatu konten yang independen

2.      < aside > : tag aside pada HTML5 menandakan suatu konten yang terpisah (aside) dari konten sebuah halaman, seperti sebuah sidebar

3.      < bdi > : teks tidak boleh terikat pada arah teks elemen

4.      < command > : Sebuah button, atau radiobutton, atau checkbox.

5.      < details > : Untuk menjelaskan detail tentang sebuah dokumen atau sebagian dari dokumen.

6.      < summary > : Digunakan pada sebuah ringkasan dan sejenisnya di dalam tag <details>

7.      < figure > : Untuk mengelompokkan sekumpulan section, biasanya berupa video

8.      < figcaption > : Berisi caption/keterangan yang ditempatkan di dalam tag <figure>

9.      < footer > : Anda tidak perlu lagi mendefinisikan ID header atau footer, gunakan tag ini untuk menggantikannya

10.  < header > : Anda tidak perlu lagi mendefinisikan ID header atau footer, gunakan tag ini untuk menggantikannya

11.   < hgroup > : Digunakan untuk sekumpulan heading

12.  < mark > : Digunakan pada teks yang akan di highlight

13.  < meter > : Digunakan untuk pengukuran, dimana nilai maksimal dan minimal telah ditentukan

14.  < nav > : navigasi pada website Anda dapat ditaruh didalam tag nav, yang dapat secara otomatis membuat daftar Anda seperti sebuah navigasi

15.  < progress > : Membuat Progress bar

16.  < ruby > : Digunakan untuk anotasi ruby

17.  < rt > : Untuk menjelaskan anotasi ruby

18.  < rp > : Menunjukkan elemen jika browser tidak mendukung ruby

19.   < section > : tag ini dapat mendefinisikan section apapun dalam document Anda. Section bekerja kurang lebih seperti div yang memisahkan section yang berbeda

20.  < time > : Untuk mendefinisikan waktu dan tanggal

21.  < wbr > : Word Break. Untuk memisah suatu kata bila diperlukan

HTML5 Audio

HTML5 mengeluarkan salah satu fitur yang sangat keren yaitu dengan adanya tag baru yang nantinya digunakanuntuk pemutaran audio tanpa menggunakan plugin tambahan seperti flash player. Cara bagaimana untuk menambahkan audio ke dalam web kita adalah dengan mengetik kode berikut

<!DOCTYPE html>

<htmk>

<body>

<audio controls=””controls”>

<source src=”music/fromhere.ogg”type=”audio/ogg”>

Your browser does not support the audio element

</audio>

</body>

</html>

Sehingga nantinya akan muncul tampilan sebagai berikut

         Mozilla version 9.0.1

         Google chrome version 22.0.1229.94

                                                  

         Opera version 12.10 beta RC

Penjelasan dari tag yang sudah dituliskan diatas:

<audio> : digunakan untuk memasukkan audio ke dalam HTML

<source> : untuk memainkan audionya maka harus engambil source file nya dan ini merupakan tugas dari source

Autoplay : memberikan pilihan kepada penggunanya apakah audio tersebut akan disetel secara otomatis atau tidak

Control : memberikan opsi untuk menampilkan control audio berupa volume, seeker, play/pause botton

Type : fungsinya untuk mendefinisikan/ mengartikan jenis tipe audio apa yang akan dimainkan nantinya.

Src : mengartikan source audio yang akan 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

Selama ini jika kita ingin memutar video maka diharuskan menggunakan flash palyer terlebih dahulu, namun sekarang sudah tidak lagi seperti itu, cukup dengan cara seperti ini :

<!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 nantinya akan menghasilkan gambaran seperti berikut ini:

1.    Mozilla version 9.0.1

2.      Google chrome version 22.0.1229.94

3.      Opera version 12.10 beta RC

HTML5 Canvas

Canvas mempermudah kita dalam menginput objek 2D atau 3D ke dalam halaman web. Canvas sistemnya tidak dapat bekerja sendiri, canvas membutuhkan javascript untuk membuat objek di dalamnya, baik 2D maupun 3D. Berikut  kode yang digunakan:

<!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 akan muncul seperti di bawah ini:

1.      Mozilla version 9.0.1

2.      Google chrome version 22.0.1229.94

3.      Opera version 12.10 beta RC

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 akan muncul seperti di bawah ini:

1.      Mozilla version 9.0.1

2.      Google chrome version 22.0.1229.94

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

1.      Mozilla version 9.0.1

2.      Google chrome version 22.0.1229.94

3.      Opera version 12.10 beta RC

HTML5 (HyperText Markup Language)
Ekstensi berkas	.html, .htm
Jenis MIME	text/html
Type code	TEXT
Uniform Type Identifier	public.html
Dikembangkan oleh	Konsortium Waring Wera Wanua dan WHATWG
Jenis format	Bahasa markah
Pengembangan dari	SGML
Dikembangkan menjadi	XHTML5
Situs web	whatwg.org/html www.w3.org/TR/html5/

XHTML5
Ekstensi berkas	.xhtml, .xht, .xml, .html, .htm
Jenis MIME	application/xml, application/xhtml+xml
Dikembangkan oleh	Konsortium Waring Wera Wanua dan WHATWG
Jenis format	Bahasa markah
Pengembangan dari	XML, HTML5
Situs web	www.whatwg.org/specs/web-apps/current-work/multipage/the-xhtml-syntax.html

7.manfaat dan kegunaan HTML5

HTML5 Design menawarkan banyak manfaat lainnya yang seharusnya membuat Anda berpikir tentang menggunakan versi ini dalam situs web Anda.

- pemberian pertolongan

Untuk meningkatkan kegunaan, web designer saat membuat website yang sangat interaktif dengan memasukkan memutar musik dan pilihan streaming video, animasi cairan dan situs jejaring sosial seperti Twitter dan Facebook di situs tersebut. Namun, sebelum HTML5 debut, mereka hanya bisa melakukannya dengan menggunakan Silverlight atau Flash, JavaScript atau Flex alat yang tidak hanya membuat aplikasi web lebih rumit, tetapi juga dikonsumsi banyak waktu. Namun, HTML5 Desain membuatnya lebih mudah untuk menanamkan audio dan video, animasi berkualitas tinggi, grafik dan gambar nyaman tanpa perlu menggunakan program pihak ketiga lainnya atau plugin.

- peningkatan semantic

Berkat HTML5, sekarang mudah untuk melihat header, footer, nav dan bagian lain dari halaman web sebagai tag sekarang lebih spesifik dan memahami tujuan utama mereka dan makna seluruh format yang. Kode desain web sangat standar sehingga meningkatkan semantik.

-  kode peningkatan

Dengan menggunakan HTML5, web designer dan pengembang menikmati bekerja dengan rapi dan kode bersih dengan menghapus sebagian besar tag div di situs.

- konsistensi

Sebagai website mengadopsi unsur-unsur baru dari HTML5, hal ini membantu untuk mencapai konsistensi yang lebih besar ketika datang untuk menggunakan HTML dalam pengkodean halaman web. Dengan demikian, HTML5 Desain jauh lebih mudah dan dimengerti dan desainer dapat dengan mudah mengetahui struktur dari halaman web.

- Bentuk elegan

Web desainer dapat menggunakan bentuk pengujian dan HTML5 juga membuat validasi bentuk asli ke HTML, meningkatkan antarmuka pengguna dan mengurangi kebutuhan untuk javascript dalam pengembangan website

Manfaat utama lainnya yang terkait dengan HTML5 yang seperti dukungan Geolocation dan meningkatkan aksesibilitas dari halaman web. Ini hanya menyoroti manfaat dari HTML5 dan para ahli percaya bahwa HTML5 akan berkembang menjadi bahasa pengembangan secara online penting dalam waktu dekat.

Daftar Pustaka

1.      pelita, reza. 2010. Kelebihan dan kekurangan HTML5. http://rezzapelita.blogspot.com diakses pada 23 oktober 2013

2.      soeko, danang. 2012. Artikel tentang HTML5. http://danangsr.blogspot.com diakses pada 23 oktober 2013

3.      Wikipedia. 2013. HTML5. http://wikipedia.org diakses pada 17 oktober 2013

4.      Heikal, Muhammad. 2012. Kelebihan dan kekurangan HTML5. http://hei-art.blogspot.com. diakses pada 17 oktober 2013

5.      Saldi, fadli. 2009. HTML5 menjadi solusi para web development. http://akusukamikir.blogspot.com diakses pada 17 oktober 2013

6.      Presekal, Alfan. 2011. HTML5 Review. http://mhs.blog.ui.ac.id diakses pada 22 oktober 2013

7.      Post, othcreative. 2011. Fitur-fitur Baru di HTML5. http://canggih.web.id diakses pada 22 oktober 2013

8.      Meira, zolla. 2013. Apa HTML5 dan beberapa manfaat its top. http://zollameirablog1.com diakses pada 22 oktober 2013

9.      Alfin, bonard. 2013. 7 Fitur pemrograman  terbaru di HTML5. http://bonardalfin.blogspot.com diakses pada 23 oktober 2013

10.  Adiananta, fransisco assisi. 2013. Beberapa Fitur Baru di HTML5. http://lampukamar.blogspot.com diakses pada 22 oktober 2013