HTML5
merupakan sebuah 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.
HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium dan WHATWG ( Web Hypertext Application Technology Working Group ). Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.
Dimana tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.
HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium dan WHATWG ( Web Hypertext Application Technology Working Group ). Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.
Berikut tujuan dibuatnya HTML5 :
- Fitur
baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
- Mengurangi
kebutuhan untuk plugin eksternal ( Seperti Flash )
- Penanagan
kesalahan yang lebih baik
- Lebih
markup untuk menggantikan scripting
- HTML5
merupakan perangkat mandiri
- Proses
pembangunan dapat terlihat untuk umum
Fitur baru dalam HTML5
:
- Unsur
kanvas untuk menggambar
- Video
dan elemen audio untuk media pemutaran
- Dukungan
yang lebih baik untuk penyimpanan secara offline
- Elemen
konten yang lebih spesifik, seperti artikel, footer, header, nav, section
- Bentuk
kontrol form seperti kalender, tanggal, waktu, email, url, search.
Beberapa browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera. Kabarnya IE9 ( Internet Explorer ) akan mendukung beberapa fitur dari HTML5.
Pembuatan HTML5 juga di karenakan Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight.
Apakah
Browser Saya Support HTML5?
Bagaimana caranya untuk menguji apakah browser yang
anda 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
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 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 adalah Contoh dasar singkat pembuatan HTML 5 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
Unsur-unsur
baru yang paling menarik dalam HTML 5 ini adalah:
·
Unsur semantik baru seperti <header>,
<footer>, <article>, dan <section>.
·
Kontrol bentuk baru atribut seperti number, date,
time, calendar, and range.
·
Unsur-unsur baru grafis: <svg> dan
<canvas>.
·
Unsur-unsur baru multimedia: <audio yang> dan
<video>.
FITUR-FITUR
BARU DI HTML5:
·
Video dan Audio : tidak perlu menempelkan flash, quickplayer, atau realplayer untuk
memutar audio dan video.
·
Canvas : Media corat-coret langsung tanpa flash dan applet java.
·
Bentuk kontrol form seperti kalender, tanggal, waktu,
email, url, dan search.
·
Semantic: Mempermudah designer dengan tag khusus layout, seperti: artikel,
footer, header, navigasi, dan section.
·
Dukungan yang lebih baik untuk penyimpanan secara offline.
ELEMEN SEMANTIK BARU di HTML5:
Banyak situs web yang ada saat ini
mengandung kode HTML seperti ini:
<div id="nav">, <div
class="header">, atau <div id="footer">, untuk
menunjukkan link navigasi, header, dan footer.
Elemen semantik
baru untuk mendefinisikan bagian yang berbeda dari sebuah halaman web,
yaitu seperti:
·
<header>, digunakan untuk area header(bagian atas sebuah
halaman web).
·
<article>, untuk tempat meletakkan artikel atau tulisan
dihalaman web.
·
<aside>, digunakan sebagai penambah informasi utama didalam
halaman web. Biasanya berupa peringatan, catatan, dll.
·
<section>, untuk menentukan seksi-seksi dokumen. Misalnya bagian
yg mendefinisikan sebagai profil, kontak, berita, dan sebagainya.
·
<figure>, Menentukan konten mandiri, seperti diagram, foto,
daftar kode, dll.
·
<figcaption>,Mendefinisikan caption untuk elemen <figure>
CONTOH TAG FIGURE DAN FIGCAPTION :
Buat folder baru, lalu buat dokumen html 5, lalu buat folder baru di
samping file html kita dengan nama folder gambar, dan masukan 2 gambar dengan
nama A.jpg dan B.jpg, lalu buat Dokumen HTML dengan scrip dibawah ini :
<!DOCTYPE
html>
<html>
<head>
<meta
charset="UTF-8">
<title>TAG
FIGURE DAN FIGCAPTION</title>
</head>
<body>
<figure>
<img
src="gambar/A.jpg" width="192" height="320" />
<figcaption>Gambar
Kucing</figcaption>
<img
src="gambar/B.jpg" width="192" height="320" />
<figcaption>Gambar
Panda</figcaption>
</figure>
</body>
</html>
Penulisan tag VIDEO pada HTML 5 :
·
Digunakan untuk memasukkan video, misalnya ingin memutar
video kedalam halaman web.
·
Pada versi HTML sebelumnya untuk memutar video pada sebuah web
menggunakan plugins tambahanyang biasa disebut flash Player.
·
Tag Video Pada HTML5, setidaknya ada 3 jenis format videoyang
mendukung yaitu :
Ø Ogg(File Ogg
dengan Video Codec Theora dan Audio Codec Vorbis) (.ogg)
Ø MPEG4(File MPEG4
dengan Video Codec H.264 dan Audio Codec AAC) (.mp4)
Ø WebM(File WebM
dengan Video Codec VP8 dan Audio Codec Vorbis)(.webm)
·
Apabila anda mempunyai video dengan format video bukan ogg, mp4,
dan webm. Anda bisa menggunakan aplikasi video converter salah satunya miro
video converter.
·
Tag <video> Sintaks Penulisanya :
<video src="judulvideo.ogg"
controls="controls">
</video>
Atau :
<video controls="controls"><source
src="judulvideo.webm" type="video/webm"></video>
Berikut Ini
atribut pada Tag <video> :
|
Atribute
|
Value
|
Description
|
|
Controls
|
controls
|
Menentukan kontrol video
yang akan ditampilkan(Contoh: tombol play/pause)
|
|
Autoplay
|
autoplay
|
Menentukan bahwa video akan
mulaiberputar otomatis
|
|
Src
|
URL
|
Menentukan alamat URL dari
mana sumber video
|
|
Width
|
pixels
|
Mengatur lebar dari video
player
|
|
Height
|
pixels
|
Mengatur tinggi dari video
player
|
|
Loop
|
loop
|
Untuk mengulang / memainkan
kembali video yang telah selesai diputar.
|
|
Muted
|
muted
|
Menentukan bahwa output
suara akan dimute/dihilangkan
|
|
Poster
|
URL
|
Menentukan gambaryang akan
tampil ketika video masih belum berputar.
|
|
Preload
|
auto
metadata
none
|
Menentukanjika dan
bagaimana kapan video ini harus diputar menjalani proses loading ketika
halaman terbuka.
|
Contoh Singkat
Membuat Tag <Video> :
Buat folder baru dengan nama video, lalu masukan video dengan
format wabm dengan nama car.wabm didalam folder tersebut, lalu buat dokumen
html y disamping folder tersebut dengan penulisan seperti dibawah ini :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VIDEO</title>
</head>
<body>
<video>
<video controls="controls"
width="450" height="260"
<source
src="vidio/car.webm type="video/webm"/>
</video>
</body>
</html>
Atau merubah tag <video> dengan tag <iframe>
seperti dibawah ini :
<iframe width="560"
height="315"
src="https://www.youtube.com/embed/u1OKBqHICMQ"
frameborder="0" allowfullscreen>
</iframe>
Cukup sekian tutorial belajar HTML
5 dari saya dan yang telah saya pelajari semoga bermanfaat J
Tidak ada komentar:
Posting Komentar