teknik informatika

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

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

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

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

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

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

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

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.

9.  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.

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

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

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

13. 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 :

14.  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

15.  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

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

17. 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“:

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

19. 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:
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.
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

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

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

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

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

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