0
HTML 5
Posted by Unknown
on
02.10
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.
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.
Semakin
menjamurnya plugin didalam aplikasi atau browser membuat aplikasi web ini susah
untuk menembus banyak browser. Hal ini dikarenakan setiap plugin mempunyai cara
yang berbeda-beda, sebagai contoh kita ingin memasang plugin flash untuk
sharing video maka pada halaman web kita harus ditulis sebagai berikut
<object
type="application/x-shockwave-flash" width="400"
height="220" wmode="transparent"
data="flvplayer.swf?file=movies/holiday.flv">
<param
name="movie" value="flvplayer.swf?file=movies/holiday.flv"
/>
<param
name="wmode" value="transparent" />
</object>
Contoh
diatas menggunakan plugin Flash dari Adobe untuk menjalankan aplikasi web pada
browser maka lain caranya bila kita menggunakan Silverlight. Teknologi
Silverlight dikembangkan oleh Microsoft.
dibawah ini adalah salah satu contoh coding untuk memasukkan audio dan video ke dalam web
Memasukkan Musik
Memasukkan Musik
<!DOCTYPE html>
<html lang=”en”>
<head> </head>
<title> </title>
<body background=”gambar/wedding.jpg”>
<center>
<table border=”2” width=”800” bgcolor=”#F778A1”>
<tr>
<td width=”100”
height=”100” colspan=”6”>
<center><font size=”7” color=”#806517”><b> MY
WEDDING WITH YOU</b></font></center>
</td>
</tr>
<tr bgcolor=”#817679”>
<td width=”100”
height=”30” colspan=”2” bgcolor=”#C48793”>
<marquee
direction=”center”>
<font
face=”chromium” size= “5” color=”#348017” ><b>Welcome to my website
may be useful and do not forget to always visit my website</b>
</font>
</marquee>
</td>
<td width=”90”
height=”30”>
<center>
<font
color=”#7E2217”>
<b><a href=”home.html”>HOME</a></b>
</font>
</center>
</td>
<td width=”90”
height=”30”>
<center>
<font
color=”#7E2217”>
<b><a href=”galeri.html”> GALERRY</b>
</font>
</center>
</td>
<td width=”90”
height=”30”>
<center>
<font
color=”#7E2217”>
<b>
<a href=”about_me.html”>
ABOUT
ME</b>
</font>
</center>
</td>
</tr>
<tr bgcolor=”#FAAFBA”>
<td width=”100”
height=”500” colspan=”6”><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><center>
<audio
controls=”controls” height=”100px” width=”100px”>
<source src=”music/Marry.mp3” type=”audio/mpeg” />
<source src=”music/Marry.ogg” type=”audio/ogg” />
<embed
height=”50px” width=”100px” src= /></audio>
</td>
</tr>
</table>
</body>
</html>
|
Memasukan Video
Hampir sama dengan memasukkan music sebelumnya, simpan file video satu
folder dengan file project yang telah kita buat tadi. Pada pratikum ini format
video yaitu MP4
|
<html lang="en">
<head> </head>
<title> </title>
<body background="gambar/wedding.jpg">
<center>
<table border="2" width="800"
bgcolor="#F778A1">
<tr>
<td
width="100" height="100" colspan="6">
<center><font size="7"
color="#806517"><b> MY WEDDING WITH
YOU</b></font></center>
</td>
</tr>
<tr bgcolor="#817679">
<td
width="100" height="30" colspan="2"
bgcolor="#C48793">
<marquee direction="center">
<font
face="chromium" size= "5" color="#348017"
><b>Welcome to my website may be useful and do not forget to always
visit my website</b>
</font>
</marquee>
</td>
<td
width="90" height="30">
<center>
<font
color="#7E2217">
<b><a href="home.html">HOME</a></b>
</font>
</center>
</td>
<td
width="90" height="30">
<center>
<font
color="#7E2217">
<b><a href="galeri.html"> GALERRY</b>
</font>
</center>
</td>
<td
width="90" height="30">
<center>
<font
color="#7E2217">
<b>
<a href="about_me.html">
ABOUT
ME</b>
</font>
</center>
</td>
</tr>
<tr bgcolor="#FAAFBA">
<td
width="100" height="500" colspan="6">
<center>
<video
width="380" height="280" controls>
<source src="video/Marry.mp4"
type="video/mp4">
<source src="video/Marry.ogg"
type="video/ogg">
Your browser does not support the video
tag.
</video>
<br><br><br><br><br><center>
<audio
controls="controls" height="100px"
width="100px">
<source src="music/Marry.mp3" type="audio/mpeg"
/>
<source
src="music/Marry.ogg" type="audio/ogg" />
<embed
height="50px" width="100px" src= /></audio>
</td>
</tr>
</table>
</body>
</html>
|
Posting Komentar