Html5

 BAB I

PENDAHULUAN

1.      A. Latar Belakang

      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 monotone 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 Microsoft  Word, hal ini akan sangat membosankan dalam membaca. dan selain itu pertamakali muncul internet user mengakses masih menggunakan sebuah terminal, hal itu jelas sangatlah tidak friendly. Pemograman HTML muncul seiring perkembangan teknologi dan informasi.

B.   Rumusan Masalah

1.      Pengertian  HTML?

2.      Pengembangan HTML?

3.      Bagaimanakah cara menggunakan HTML?

4.      Pengertian HTML 5.    

5.      Sejarah HTML 5.

6.      Fungsi HTML 5.

6.      Kelebihan dan Kekurangan HTML 5

7.      Game yang menggunakan HTML 5

C.Tujuan

1.      Untuk mengetahui apakah yang dimaksud dengan HTML.

2.      Untuk mengetahui bagaimana pengembangan HTML.

3.      Untuk mengetahui cara menggunakan HTML.

4.      Mengetahui apa itu HTML 5 dan implementasinya

1.      D.    Manfaat

1.      Dapat mengetahui apakah HTML itu.

2.      Dapat mengetahui bagaimana pengembangan HTML.

3.      Dapat mengetahui cara menggunakan HTML.

4.      Dapat mengetahui apa itu HTML 5 dan sejarahnya.

5.      Dapat mengetahui fungsi serta kelebihan dan kekurangan HTML 5.

BAB II

PEMBAHASAN

1.      A.     Pengertian HTML

Sebelum kita membahas apa itu HTML 5, saya akan memperkenalkan  terlebih dulu apa itu HTML dan apa untuk apa sebenarnya HTML itu. HTML adalah, (HyperText Markup Language) sebuah bahasa standar yang digunakan oleh browser Internet untuk membuat halaman dan dokumen pada sebuah Web yang kemudian dapat diakses dan dibaca layaknya sebuah artikel. HTML juga dapat digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet. 

HyperText 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. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan kedalam format ASCII normal sehingga menjadi home page 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).

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 Langiage, 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 adalah HTML 4.01, meskipun saat ini telah berkembangXHTML yang merupakan pengembangan dari HTML.

1.      B.     Pengembangan HTML

Nah mulai pada tahun kelahiran saya yaitu 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 kemarin 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

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.

Nah yang terakhir perombakan terjadi pada tahun 1999 tepatnya tanggal 24 Desember yaitu HTML versi 4.0, seperti yang kita kenal HTML pada saat ini penambahan link, meta, imagemaps , image dan lain lain sebagai penyempurnaan versi 3.2

Pada tanggal 4 Maret 2010, terdapat sebuah informasi bahwasanya HTML versi 5.0 masih dikembangkan oleh W3C (World Wide Web Consortium) dan IETF (Internet Engineering Task Force) yaitu sebuah organisasi yang menangani HTML sejak versi 2.0

Browser yang Mendukung HTML

·         Opera Web Browser (mulai dari Opera 9.2 sampai yang terbaru saat ini yaitu opera 10)

·         Safari (mulai dari versi 3.1)

·         FireFox (Mulai dari FireFox 3 )

·         Google Chrome (Mulai dari versi 3)

·         Internet Explorer (Mulai dari versi 8)

1.      C.     PENGERTIAN HTML 5

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun1997) dan hingga bulan Juni 2011 masih dalam pengembangan. 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 adalah versi terbaru dari HTML (HyperText Markup Language) yang mana dikembangkan oleh W3C atau Word Wide Web Consortium. Lalu apakah yang dimaksud dengan Semantic Web? Semantic berasal dari bahasa Yunani (Greek), merupakan bahasa pembelajaran semiotic, yakni pembelajaran untuk memahami penanda. Semantic sendiri mempunyai arti bahasa yang berfokus pada penanda untuk mengetahui arti yang terkandung di dalamnya. Jadi, yang dimaksud semantic web adalah bahasa pemrograman yang mempunyai penanda khusus dalam implementasinya dengan tujuan agar mampu mendeskripsikan apa yang terkandung dalam website tersebut. Web semantic ini bukan hanya dikembangkan di Web 2.0, namun sudah ke Web 3.0 bahkan akan berkembang ke Web 4.0. Perkembangan teknologi benar-benar cepat sekali berubah. 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.

Tujuan dibuatnya HTML5 antara lain:

1.      Fitur baru harus didasarkan pada HTML, CSS, DOM , dan JavaScript. 

2.      Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).

3.      Penanganan kesalahan yang lebih baik.

4.      Lebih banyak markup untuk menggantikan scripting.

5.      HTML5 merupakan perangkat mandiri.

Fungsi HTML 5

Secara umum, fungsi HTML 5 adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web.
Fungsi HTML yang lebih spesifik yaitu :

·         Membuat halaman web.

·          Menampilkan berbagai informasi di dalam sebuah browser Internet.

·          Membuat link menuju halaman web lain dengan kode tertentu (hypertext).

·         Membentuk tata letak dokumen, dalam hal ini menentukan jenis huruf, gambar, dan komponen dokumen lainnya.

·         Menentukan hubungan ke dokumen lain, HTML merupakan suatu bahasa komputer yang termasuk dalam katagori SGML (Standard Generalized Markup Language) dimana bentuknya merupakan file standar ASCII yang berisi kode-kode untuk mengatur dokumen.

·         Menentukan ukuran dan alur tulisan.

·         Mengintegerasikan gambar dengan tulisan.

·         Mengintegerasikan berkas suara dan rekaman gambar hidup.

·         Membuat form interaktif.

·         Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.

·         Kita dapat menampilkan tulisan dalam bentuk cetakan tebal

·         Kita dapat menampilkan sekelompok kata dalam bentuk miring.

·         Kita dapat menampilkan naskah dalam bentuk huruf yang miring dengan hasil ketikan mesin ketik.

·         Kita dapat mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.

Fitur baru dalam HTML5:

·         Unsur kanvas untuk menggambar.

·         Video dan elemen audio untuk media pemutaran.

·         Dukungan yang lebih baik untuk penyimpanan secara offline.

o    Elemen  konten yang  lebih  spesifik, seperti  artikel, footer, header,
navigation, section.

o    Bentuk kontrol form seperti kalender, tanggal, waktu, e-mail, URL, search.

Beberapa teknologi yang juga terkait namun tidak dijadikan bagian dalam spesifikasi HTML5 W3C dan WHATWG HTML5 adalah :

·         Geolocation

·         Web SQL Database, media penyimpanan database lokal.

·         API Database terindeks, mode penyimpanan hierarkis key-value   (WebSimpleDB).

Beberapa kelebihan yang dijanjikan pada HTML5:

·         Merupakan bahasa penkodean yang lintas platform (cross platform), maksudnya HTML dapat digunakan pada berbagai jenis mesin komputer yang berbeda dan berbagai macam sistem operasi yang berbeda. Jadi bersifat fleksibel karena ditulis cukup dengan menggunakan editor karakter ASCII.

·         Dapat disisipi gambar baik gambar statis atau dinamis (animasi) termasuk menggunakan gambar untuk dijadikan hyperlink. Gambar di sini digunakan untuk merujuk pada suatu halaman web, dimana setiap titik-titik yang sudah didefinisikan berupa rectangular (kotak), poligon (kurva tak beraturan) atau lingkaran digunakan untuk ‘jump’ ke halaman lain, atau link ke halaman di luar web yang bersangkutan.

·         Dapat disisipi animasi berupa Java Applet atau file-file animasi dari Macromedia Flash atau Macromedia Shockwave (untuk keperluan ini, browser harus memiliki plug-in khusus untuk menjalankan file-file animasi ini).

·         Dapat disisipi bahasa pemrograman untuk mempercantik halaman web seperti Javascript, VBScript, Active Server Pages, Perl, Tcl, PHP dan sebagainya.

·         Bukan merupakan bahasa pemrograman jadi tidak memerlukan kompiler. Cara menjalanakannya cukup dengan menggunakan browser.

·         Tidak perlu plugin eksternal lagi seperti Flash/photoshop untuk memutar video,audio dan gambar

·         Mampu menangani error handling lebih efisien

·         Ada beberapa element baru untuk menyederhanakan penulisan coding

·         Ada local storage nya, biasanya sering dimanfaatkan untuk aplikasi game

·         Mendukung element dan scrpting untuk 3D

Adapun kekurangan dari HTML ini adalah:

·         Menghasilkan halaman yang statis, untuk memperoleh halaman yang dinamis harus menggunakan bahasa pemrograman tertentu seperti Javascript atau VBScript dan animasi seperti Flash atau Shockwave.

·         Memiliki tag-tag yang begitu banyak sehingga susah dipelajari untuk yang masih awam.

·         Tidak dapat menghasilkan halaman yang interaktif. Interaktif di sini maksudnya client dapat berinteraksi dengan server. Untuk keperluan itu, HTML harus disisipi bahasa pemrograman yang dapat menangani hal tersebut, contohnya Perl atau Tcl.

Saat ini HTML5 masih dalam pengembangan, namun hanya beberapa browser sudah mendukung HTML5. Beberapa browser tersebut seperti Safari, Chrome, Firefox, dan Opera. Kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML5.

HTML5 memperkenalkan sejumlah elemen dan atribut baru yang membantu dalam membangun website modern. Berikut ini adalah fitur yang terpenting diperkenalkan pada HTML5 :

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

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

·         Canvas: Ini mendukung gambar dua dimensi surface yang dapat diprogram dengan JavaScript.

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

PERBEDAAN HTML 4 DAN HTML 5

Untuk memahami pentingnya HTML5, kita perlu mengetahui apa saja perubahan yg ada antara HTML4 dg HTML5 kan? Yuk kita lihat.Secara umum, kita bisa kelompokkan perubahan yang dibawa HTML5 ke dalam 5 kategori:

·         Struktur halaman,

·         presentasi visual,

·         tools grafis,

·         support rich media, dan

·         peningkatan support javascript.

·         Section 

·         Header 

·         Footer 

·         Nav 

·         Article 

              Struktur halaman artinya bahwa struktur halaman web HTML5 lebih mudah dipahami secara semantik oleh search engine. Misalnya, search engine bisa mengetahui mana bagian header, artikel, navigasi, bahkan nilai uang dlm sebuah halaman web. Dengan cara ini, kita dan search engine bisa lebih mudah mengelompokkan informasi dari berbagai website secara terstruktur. Itu artinya HTML5 sudah mendukung semantic web.

              Presentasi visual ditingkatkan dengan CSS3. CSS3 membawa perubahan pada pengelolaan font, animasi dan mobile  untuk urusan grafis, HTML5 memungkinkan kita membuat gambar langsung dalam format SVG maupun CANVAS. HTML4 hanya gambar berbasis pixel seperti JPEG dan GIFF. Support untuk rich media ditunjukkan HTML5 dengan munculnya tag video dan audio yg bisa mensupport beragam format. tanpa perlu Flash. Terakhir peningkatan support javascript. Ada beberapa fitur menarik yg muncul pada HTML5 seperti localstorage dan geolocation.

Section : Sebuah bagian atau bab dalam sebuah buku, sebuah bagian dalam sebuah bab, atau pada dasarnya apa pun yang memiliki pos sendiri dalam HTML .

Header : Header Halaman yang ditampilkan pada halaman , tidak sama dengan unsur kepala.

Footer : Halaman footer di mana baik cetak pergi; tanda tangan dalam sebuah pesan e-mail.

Nav : Koleksi link ke halaman lain.

Article : Sebuah entri independen dalam sebuah blog, majalah, ringkasan, dan sebagainya.

Struktur HTML5 adalah sebagai berkut :

·         Penambahan Tag baru pada HTML5 (Semantic/Structural Elements baru pada HTML5)

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

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

Nilai Baru Atribut Tipe Input

Sebuah atribut elemen input yang memiliki nilai-nilai baru, untuk kontrol input yang lebih baik sebelum mengirimnya ke server:

Tipe	Penjelasan
tel	Nilai input untuk nomor telepon
search	Untuk bidang pencarian
url	Nilai input untuk memasukkan URL
email	Untuk mengisi email atau lebih dari 1 email
datetime	Untuk pengisian waktu dan tanggal
date	Untuk pengisian tanggal
month	Untuk pengisian bulan
week	Untuk pengisian minggu
time	Untuk pengisian waktu
datetime-local	Untuk pengisian lokal waktu/tanggal
number	Untuk pengisian nomer
range	Untuk pengisian rentang waktu
color	Untuk pengisian heksadesimal sebuah warna, contohnya #FF8800

Berikut adalah contoh penulisan dari atribut HTML5 yang menggambarkan bagaimana untuk menandai sebuah elemen div dengan atribut class dengan menggunakan nilai “contoh“:

Penghapusan Tag pada 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.

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 :

Contoh diatas menggunakan plugin Flash dari Adobe untuk menjalankan aplikasi web pada browser maka lain caranya bila kita menggunakan Silverlight. Teknologi Silverlight dikembangkan oleh Microsoft. Contoh penggunaan Silverlight pada halaman web dapat dilihat pada HTML dibawah ini :

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

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.

Video di Web

Sampai saat ini, tidak pernah ada sebuah standar untuk menampilkan video pada halaman web. Hari ini, video yang paling akan ditampilkan melalui plugin (seperti flash). Namun, tidak semua browser memiliki plugin yang sama.

HTML5 menetapkan cara standar untuk memasukkan video, dengan elemen video. Format video Saat ini, ada 3 format video yang didukung untuk elemen video:

Format	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

HTML5 Audio

HTML5 menyediakan standar untuk memutar audio. Audio di Web sampai saat ini, tidak pernah ada standar untuk memainkan audio di sebuah halaman web. Saat ini, sebagian besar audio diputar melalui sebuah plugin (seperti flash). Namun, tidak semua browser memiliki plugin yang sama.

HTML5 menetapkan cara standar untuk memasukkan audio, dengan unsur audio. Unsur audio bisa memutar file suara, atau stream audio. Format audio Saat ini, terdapat 3 format yang didukung untuk unsur audio:

Format	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis	No	Yes	Yes	Yes	No
MP3	Yes	No	No	Yes	Yes
Wav	No	Yes	Yes	No	Yes

Cara Bekerja untuk memutar file audio di HTML5, ini adalah semua yang di butuhkan:

Atribut kontrol untuk menambahkan play, pause, dan kontrol volume. Sisipkan konten antara <audio> dan </ audio> tag untuk browser yang tidak mendukung elemen audio:

Contoh di atas menggunakan file ogg, dan akan bekerja di Firefox, Opera dan Chrome. Untuk membuat karya audio di Internet Explorer dan Safari, menambahkan file audio jenis MP3.

Elemen elemen audio memungkinkan beberapa sumber. Sumber elemen dapat link ke file audio yang berbeda. Browser akan menggunakan format diakui pertama:

Attribute	Value	Description
autoplay	autoplay	Specifies that the audio will start playing as soon as it is ready.
controls	controls	Specifies that controls will be displayed, such as a play button.
Loop	loop	Specifies that the audio will start playing again (looping) when it reaches the end
preload	preload	Specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present.
Src	url	Specifies the URL of the audio to play

Bangkitnya game-game berbasis HTML5

Tahun-tahun belakangan ini merupakan tahun yang sangat menjanjikan untuk game HTML5 dan JavaScript, baik bagi konsumen dan pengembang. Beberapa platform berbasis web telah mulai matang dan menyatu dalam hal teknologi yang dibutuhkan untuk game ini, kuantitas game HTML5 di beberapa toko aplikasi dan portal jejaring sosial juga semakin meningkat setiap hari, studio game besar mulai menunjukkan ketertarikannya, dan kualitas game secara umum terus meningkat pada level yang nyata. Semua ini berpadu dengan kegelisahan seputar masa depan Flash dan adanya kesadaran bahwa platform yang sekarang ini tidak lagi mempunyai masa depan yang cerah. Game berbasis HTML5 hadir sebagai solusi yang aman dan nyata.

Dan yang lebih menarik dari semua itu adalah potensi HTML5 sebagai platform game yang serius. Pengembang HTML5 sekarang telah memiliki kemampuan ini untuk membuat game 2D yang keren dengan elemen kanvas, dan bahkan game dengan visualisasi 3D yang menakjubkan lewat WebGL. Dan yang paling menggairahkan adalah segera masuknya teknologi penunjang untuk pengalaman konsol gaming yang sebenarnya; seperti hadirnya Gamepad API (Applications Programming Interface), Mouse Lock API, dan Full Screen API. Ini adalah teknologi sederhana yang akan membantu menghancurkan persepsi luas bahwa game berbasis HTML5 adalah game-game standar yang biasa di mainkan dalam situs web. Dengan kemampuan untuk menghubungkan kontroler gamepad dan memungkinkan elemen HTML5 untuk dijalankan pada layar penuh, game HTML5 akan memberikan pengalaman gaming yang jauh lebih mendalam, seperti pada konsol dan desktop PC.

Berikut ini adalah contoh dari beberapa game berbasis HTML5 yang ada saat ini:

1.      Angry Birds

Siapa yang tidak tahu game populer yang ada di hampir semua platform ini. Ceritanya berkisar pada sekelompok burung yang marah kepada sekelompok babi yang telah mencuri telurnya. Anda harus merobohkan bangunan dan penghalang sebanyak mungkin agar bisa membunuh babinya. Game ini menggunakan WebGL untuk akselerasi grafis 2D yang digunakan.

1.      Fieldrunners

Ini adalah porting dari game yang awalnya dibuat untuk Apple iOS, sama seperti halnya Angry Birds. Fieldrunners adalah game tower defence tradisional di mana Anda harus menjalankan strategis untuk membela tempat Anda dari gerombolan musuh yang menyerang. Game ini menggunakan WebGL untuk akselerasi grafis 2D yang digunakan.

1.      Bejeweled

Bejeweled adalah contoh yang bagus dari sebuah game yang sukses di berbagai platform proprietary yang diporting ke versi HTML5. Gameplay dan efek yang halus benar-benar membuat game ini menonjol, dan  pasti akan mengira bahwa game ini dihasilkan oleh sebuah studio game besar. Game besutan PopCap ini menggunakan WebGL untuk akselerasi grafis 2D.

1.      Tankworld

Tankworld adalah game 3D di mana  mengendarai tank menjelajah seluruh wilayah dan menembaki semua musuh yang Anda lihat. Game ini benar-benar telah mengeksplorasi dunia 3D kecil yang diterapkan dengan baik yang membuat game ini menyenangkan untuk dimainkan. Anda bahkan dapat membangun level 3D sendiri pada game ini yang juga dapat dimainkan orang lain. Game ini menggunakan kanvas HTML5 untuk membentuk grafis 3D.

1.      GT Racing: Motor Academy

GT Racing: Motor Academy adalah game 3D berbasis HTML5 pertama dari pengembang besar Gameloft. Game bergenre racing ini secara grafis, sound dan gameplay tidak kalah dengan versi HD yang dirilis sebelumnya pada iPhone dan smartphone beda.

1.      SKiDRacer
Ini juga salah satu game racing 3D yang revolusioner yang berbasis HTML5. Dibuat berdasarkan OpenGL ES 2.0 yang menawarkan rute langsung ke API grafis 3D, termasuk dukungan shader melalui GLSL, serta WebGL untuk akselerasi GPU.

Dari beberapa contoh game-game HTML5 diatas menunjukkan adanya keragaman dan kualitas dari apa yang tersedia saat ini. Apa yang dapat kita yakin adalah bahwa 2013 akan menjadi tahun yang menjanjikan untuk kategori game, kualitas akan meningkat sebagaimana HTML5 mulai menuju kematangan sebagai platform masa depan. Dan tentu saja ini adalah berita gembira untuk platform mobile Tizen yang mengandalkan aplikasi yang berbasis HTML5.

BAB III

PENUTUP 

A.      Simpulan

Dalam pembuatan website, dikenal dua komponen penting yaitu www dan HTML. Dimana www merupakan suatu protokol standar dari internet, sedangkan HTML merupakan script atau program standar yang dijalankan oleh www atau internet. Proyek HTML ini dibuat dengan menggunakan media web editor notepad.

Di dalam HTML terdapat dua bagian dokumen yaitu bagian kepala (head) dan bagian tubuh (body). Pembuatan proyek web/HTML sekolah dengan menggunakan notepad ini dimulai dengan pembuatan bahasa HTML dalam notepad. Yang kemudian untuk setiap baris dalam proyek ini selalu dibuat dengan bahasa HTML tersendiri sesuai dengan apa yang akan kita buat.

Kesimpulan yang penulis peroleh dalam penulisan makalah  ini adalah dalam Mendesain HTML berarti melakukan suatu tindakan pemrograman, namun HTML bukanlah sebuah bahasa pemrograman. HTML hanyalah berisi perintah-perintah yang telah terstruktur berupa tag-tag penyusun.

Mendesain HTML adalah sebuah seni tersendiri. Homepage yang merupakan implementasi  refleksi dari orang yang membuatnya. Untuk itu kita perlu mendesainnya dengan baik agar para pengunjung homepage yang kita buat merasa senang dan bermanfaat.

DAFTAR PUSTAKA

http://id.wikipedia.org/wiki/HTML5/ di unduh tanggal 20 oktober 2013 jam 13.00

http://roes-wibowo.com/pengertian-html5/ di unduh tanggal 20 oktober 2013 jam 13.05

http://id.wikipedia.org/wiki/HyperText_markup_language/ di unduh tanggal 20 oktober 2013 jam 13.10

http://www.w3schools.com dan id.wikipedia.org/ di unduh tanggal 20 oktober 2013 jam 13.00

http://wsc.joomlavue.com/index.php?title=Dasar-dasar_HTML / di unduh tanggal 21 oktober 2013 jam 19.00

http://www.klik-kanan.com/desainweb/html/tutorial_html5.shtml : di unduh tanggal 22 oktober 2013 jam 19.50

http://tizenindonesia.blogspot.com/2012/01/bangkitnya-game-game-berbasis-html5.html/ di unduh tanggal 23 oktober 2013 jam 22.30

http://www.jeanotnahasan.com/2012/02/pengertian-tujuan-fitur-baru-dan.html/ di unduh tanggal 22 oktober 2013 jam 00.05.

http://mkr-site.blogspot.com/2012/07/apa-itu-html5-dan-kelebihannya.html/ di unduh tanggal 23 oktober 2013 jam 22.35

http://csshtml5.blogspot.com/2013/08/pengertian-html-5.html/ di unduh tanggal 23 oktober 2013 jam 23.40

http://infoter-lengkap.blogspot.com/2013/03/pengertian-html-5-dan-browser-yg-suport.html/ di unduh tanggal 23 oktober 2013 jam 00.40