Selasa, 28 April 2015

HTML5 Video

22.32    No comments

Salah satu keunggulan yang diusung oleh HTML 5 adalah kemudahan untuk menampilkan file Video pada halaman Web tanpa harus menggunakan Plugin Khusus atau plugin tambahan seperti Flash. Tetapi cukup hanya dengan menggunakan element yang ada. Element yang dimaksud adalah element <video>.
Sebelum mencobanya, ada beberapa hal yang perlu diketahui :
1. Hampir semua web browser sudah mendukung penggunakan HMTL5. Jadi install-lah terlebih dahulu salah satu web browser yang menjadi favorit anda. Disarankan menggunakan Google Chrome.
2. Format file video yang didukung oleh HTML5 adalah berformat .mp4, .oog dan .WebM.

Adapun cara menuliskannya adalah sbb :
<video width="320" height="240" controls>
  <source src="video_anda.mp4" type="video/mp4">
  <source src="video_anda.ogg" type="video/ogg">
</video>
Untuk melengkapi penggunaan element, anda dapat menambahkan beberapa properties :
  • width=”dalam pixel” (Untuk Menentukan lebar video)
  • height=”dalam pixel” (Untuk Menentukan tinggi video)
  • controls=”controls” (Untuk Menampilkan tombol kontrol video)
  • autoplay=”autoplay” (Untuk Memutar video secara otomatis)
  • loop=”loop” (Untuk Mengulangi pemutaran video terus menerus)
  • muted=”muted” (Untuk Menghilangkan Output SUara pada Video)
  • poster=”URL” (Untuk menampilkan gambar awal sebelum video diputar)
  • Keterangan lebih lengkapnya bisa dibaca di http://www.w3schools.com/tags/ref_av_dom.asp
Sehingga penulisan tag HTML nya bisa seperti dibawah ini :
<video width="320" height="240" autoplay=”autoplay” controls=”controls” poster=”cover.jpg” loop=”loop”>
  <source src="video_anda.mp4" type="video/mp4">
  <source src="video_anda.ogg" type="video/ogg">
</video>
PREVIEW


sumber:http://www.belajarpc.com/cara-menampilkan-video-pada-html-5.htm
Read More

HTML5: Form Element

22.29    No comments

HTML5 mempunyai elemen baru seperti dibawah ini :
  • <datalist>
  • <keygen>
  • <output>
Tapi tidak semua browser support elemen baru. Walaupun begitu, kita bisa memulai menggunakan mereka. Karena, apabila browser tidak support, maka elemen baru tersebut diberlakukan seperti teks biasa.

HTML5 <datalist> Elemen


Unsur <datalist> menetapkan daftar yang telah ditentukan pilihan untuk elemen <input>.

Unsur <datalist> digunakan untuk menyediakan sebuah “AutoComplete” fitur pada elemen <input>. Pengguna akan melihat daftar drop-down yang telah ditentukan pilihan karena mereka input data. Gunakan atribut daftar elemen <input> untuk mengikat bersama-sama dengan elemen <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>

HTML5 <keygen> Element

Tujuan dari elemen <keygen> adalah untuk menyediakan cara aman untuk otentikasi pengguna.

Tag <keygen> menentukan bidang key generator-pair dalam formulir.

Bila formulir dikirimkan, dua tombol yang dihasilkan, satu publik dan satu pribadi. Kunci pribadi disimpan secara lokal, dan kunci publik dikirim ke server. Kunci publik dapat digunakan untuk menghasilkan sertifikat klien untuk mengotentikasi pengguna di masa depan.
<!DOCTYPE html>
<html>
<body>
<form action=”demo_keygen.asp” method=”get”>
Username: <input type=”text” name=”usr_name” />
Encryption: <keygen name=”security” />
<input type=”submit” />
</form>
</body>
</html>
Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.

HTML5 <output> Element

Html5 elemen <output> digunakan untuk merepresentasikan hasil dari perhitungan :
<!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>
Read More

HTML5: Tag mark, Tag meter, Tag nav

22.26    No comments

Tag <mark> digunakan apabila kita ingin menandai suatu teks. Browser yang support tag <mark> adalah Internet Explorer 9 Firefox, Opera, Chrome, dan Safari.
Contoh Kode :
<!DOCTYPE html>
<html>
<body>
<p>Jangan lupa mempersiapkan <mark>rapat pemasaran</mark> today.</p>
</body>
</html>

Tag <meter> mendefinisikan pengukuran skalar dalam rentang diketahui, atau nilai pecahan. Ini juga dikenal sebagai sebuah alat ukur. Contoh: penggunaan Disk, relevansi hasil query, dll. Sayangnya, hanya browser Opera dan Chrome saja yang support tag <meter>. Sebagai catatan tag <meter> tidak boleh digunakan untuk menunjukkan kemajuan (seperti pada progress bar). Untuk progress bar, gunakan tag <progress>.
Contoh Kode :
<!DOCTYPE html>
<html>
<body>
<meter value=”2″ min=”0″ max=”10″>2 dari 10</meter><br />
<meter value=”0.6″>60%</meter>
</body>
</html>

Tag <nav> mendefinisikan bagian dari link navigasi.  Tidak semua link dari sebuah dokumen harus dalam elemen <nav>. Unsur <nav> dimaksudkan hanya untuk blok utama link navigasi.
Contoh Kode :
<!DOCTYPE html>
<html>
<body>

<nav>
<a href=”/html/”>HTML</a> |
<a href=”/html5/”>HTML5</a> |
<a href=”/css/”>CSS</a> |
<a href=”/css3/”>CSS3</a> |
<a href=”/js/”>JavaScript</a>
</nav>

</body>
</html>
Read More

HTML5 Audio

22.25    No comments


Pada html5 mendefinisikan elemen baru yang memungkinkan untuk embed sebuah file audio di browser menggunakan tag <audio> .
Sebagai contoh tag untuk audio adalah :
?
1
2
3
4
5
<audio controls="controls">
 
<source src="http://domain.com/nama_file_musik.ogg" type="audio/ogg" />
 
</audio>
Source code lengkapnya adalah:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
<html>
 
<head>
 
<title>Audio Tag</title>
 
</head>
 
<body>
 
<audio controls="controls">
 
<source src="http://domain.com/nama_file_musik.ogg" type="audio/ogg" />
 
</audio>
 
</body>
 
</html>
Seperti pada HTML5 video. HTML5 audio ini ada tambahan atribut control yaitu play, pause dan volume. Kita harus insert text diantara tag <audio> dan </audio> untuk browser yang tidak support elemen <audio>. Elemen <audio> mengijinkan banyak elemen <source>. Elemen <source> ini dapat menghubungkan kedalam beberapa file audio.
Saat ini ada 3 file format audio yang support untuk elemen <audio> yaitu MP3, Wav, and Ogg:
BrowserMP3WavOgg
Internet Explorer 9YesNoNo
Firefox 4NoYesYes
Google Chrome6YesYesYes
Apple SafariYesYesNo
Opera 10.6NoYesYes
Read More
Langganan: Postingan (Atom)