Sabtu, 13 Juli 2013

Tutorial Dasar-dasar PHP 6 — Menggunakan PHP dan Form HTML

Menggunakan PHP bersama dengan Form HTML merupakan salah satu kekuatan terbesar dalam pemrograman PHP. Kita akan coba pelajari di tutorial PHP kali ini.
BTW, terima  kasih atas tanggapan dari pengunjung mengenai  situs ini melalui e-mail kami (prothelord [ath} yahoo [dot] co [dot] id). Semoga apa yang sudah disampaikan pada kami akan makin menambah kualitas situs ini.
OK deh Prothelors (maksudnya anda), kita lanjutkan tutorial kita dengan melihat bagaimana caranya untuk menggabungkan form HTML dengan kode PHP.
Dalam contoh-contoh kita sampai saat ini, kita sudah berhasil mengisi variabel dan menggunakannya dalam satu kode yang sama.
Kayaknya hal ini agak kurang bermanfaat ya? Emang sih. Lha gimana nggak, daripada repot-repot masukin nilai yang kita inginkan, dilanjutkan dengan menampilkan apa yang kita inginkan melalui variabel kita tadi, kan mendingan langsung aja tuh nampilin apa yang kita iningkan tanpa menggunakan variabel, lebih singkat, cepat dan mudah. Jadi, gimana dong?
Tenang ….. di tutorial inilah anda akan melihat kekuatan variabel yang sesungguhnya.
Nah, sekarang ayo kita coba sesuatu yang lebih menarik, dan bisa menunjukkan kegunaan variabel kita tercinta dalam sebuah program.
Baiklah, tanpa membuang waktu lagi, sekarang saatnya untuk membuat sebuah halaman web yang akan kita gunakan untuk menginput nama kita dan nama orang yang kita sukai dan kemudian menampilkannya secara bersamaan di halaman lain.
Apa …… halaman lain? Ya, di halaman lain, ini yang membedakan dengan kode-kode kita sebelumnya, untuk itulah, mohon konsentrasi di bagian ini, karena ini sangat penting bagi perkembangan PHP anda di masa datang. Pahami betul bagaimana cara kita mengirimkan variabel kita dari satu halaman ke halaman yang lain yach…
Sebelum membuatnya, bayangkan kembali skenario ini. Anda membuat sebuah halaman website di mana pengunjung bisa mengisi nama mereka dan nama kekasih mereka dalam sebuah form dan kemudian menampilkan kembali nama-nama tersebut di halaman web lainnya.
Untuk melakukan hal itu, kita perlu membuat 2 buah file PHP.
File pertama adalah sebuah form HTML untuk mengumpulkan input dari user, mengisikan input tersebut ke dalam variabel dan kemudian mengirimkannya ke file kedua yang bertugas menampilkan kembali isi variabel tersebut ditambah dengan beberapa hal sederhana lainnya. Maaf kalau cara penyampaiannya payah ya, tapi saya berharap paling enggak bisa tetap fun deh buat Prothelors dalam mempelajari PHP.
Pertama-tama, kita buat dulu halaman form HTMLnya, halaman ini adalah halaman HTML biasa dengan tag FORM di dalamnya. Sesudah ini kita akan buat sebuah halaman lain (PHP) untuk memproses apa yang diinputkan dari halaman form HTML kita ini. Kita namai dengan form_saya.html
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<title>Form Saya</title>
</head>

<body>
<form action="hasil_form_saya.php" method=post>

Nama saya adalah:
<br> <input type="text" name="NamaAnda">

<p> Nama orang yang saya sukai:
<br> <input type="text" name="NamaDia">
<p>

<input type="submit" name="submit" value="Cocokkan!">
</form>

</body>
</html>

Ini adalah sebuah form HTML biasa tapi mengandung beberapa hal penting yang perlu Prothelors semua pahami. Bagian-bagian pentingnya adalah:
Baris 7: HTML membaca action=”hasil_form_saya.php” yang menunjukkan pada browser file PHP mana yang akan memproses hasil form kita. Implikasinya, beberapa saat lagi anda harus membuat sebuah file yang bernama hasil_form_saya.php yang merupakan mesin kecil yang bertugas untuk menampilkan hasil input di form kita. (Jangan khawatir, kita akan membahas method=post belakangan).
Baris 10: input type=”text” menentukan jenis elemen form apa yang kita inginkan,dalam kasus kita ini adalah sebuah inputan teks atau text box (kita juga bisa mendefinisikannya sebagai radio button, check box, dll); name=”NamaAnda” artinya adalah bahwa apapun yang kita ketikkan ke dalam text box kita tadi akan mengisi sebuah variabel yang bernama “NamaAnda”. Inilah yang menghubungkan antara form dan variabel – setiap field dalam sebuah form dapat digunakan untuk mengisi variabel untuk kemudian kita gunakan sesuka kita (asik ya?).
Baris 13: di baris ini, kita memiliki sebuah teks input yang akan kita gunakan untuk mengisi variabel lain yang kita beri nama “NamaDia” yang merupakan nama orang yang kita sukai.
Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.
Baris 16, 17: Kode ini membuat sebuah tombol submit dengan tulisan “Cocokkan!” (maksudnya adalah coba cocokkan nama anda dengan nama orang yang anda sukai).
Dan berakhirlah form kita. Nah, tugas form kita itu adalah mengumpulkan informasi nama anda dan nama orang yang anda sukai (tentu saja saat praktek, anda harus memasukkan nama-nama tersebut ke dalam form) dan mengisikannya ke dalam variabel masing-masing.
Ok, form HTML beres. Setelah itu ngapain ya?
Berikutnya tentu saja adalah membawa dan menampilkan variabel yang sudah terisi dengan nama-nama tersebut dalam bentuk yang berbeda di …… ya, di halaman lain.
Masih inget kan, bahwa pada baris 7 kode HTML di atas, kita memberitahu form kita agar menuju atau mengeksekusi file hasil_form_saya.php begitu kita klik tombol submit (yang bertuliskan Cocokkan! itu). Berikut ini kira-kira isi file hasil_form_saya.php:
?
1
2
3
4
5
6
7
8
9
10
<html>
<head>
<title>Sayang Sekali!</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>Kayaknya <?php print $NamaAnda; ?>
<p>gak bakalan bisa jadian sama
<b> <?php print $NamaDia; ?> deh!?! </b>
<p>Cobalah berusaha lebih keras ya…siapa tahu ada kesempatan.
</body>
</html>

Gimana? Sekarang udah ngerti kan bagaimana caranya form kita mengirimkan sebuah variabel dari form kita itu ke sebuah file PHP?
Cat: File hasil_form_saya.php di atas hanya bisa berjalan jika setting register global php server kamu on. Kalau kebetulan settingnya off, maka kamu harus tambah baris setelah tag body (di antara baris 4 dan 5) seperti ini:
?
1
2
3
4
<?php
$NamaAnda=$_POST['NamaAnda'];
$NamaDia=$_POST['NamaDia'];
?>
Perhatikan bahwa pada file hasil_form_saya.php kita sebuah variabel dipanggil dengan menambahkan tanda $ ($NamaAnda) di depan variabel yang kita definisikan pada file HTML form_saya.html sebelumnya (NamaAnda).
Get vs Post
Kita sudah menggunakan metode “Post” untuk mengirimkan data form dengan cara yang berbeda menggunakan metode lain yaitu “Get”. Ingat, ini merupakan bagian dari form kita di mana tertulis <form action=”hasil_form_saya.php” method=post>.
Perbedaan antara kedua metode ini adalah bahwa metode post secara transparan mengirimkan semua informasi yang sudah dikumpulkan oleh halaman form kita, sedangkan metode Get akan mengirimkan semua informasi itu sebagai bagian dari URL (dalam contoh form kita tadi, akan seperti ini:
http://localhost/hasil_form_saya.php?NamaAnda=panjul&NamaDia=cinta&submit=Cocokkan!
Perhatikan bagaimana informasi yang sudah dimasukkan user mengenai namanya dan nama orang yang disukainya ditambahkan pada URL? Ini akan sangat membantu nanti jika anda sudah mempelajari cara pengiriman variabel antar halaman lebih lanjut).
Pengen belajar sambil praktek? klik di sini.
Baiklah untuk bagian ini kita akhiri dulu ya, dan akan kita lanjutkan lagi ke bagian 7 yang akan membahas mengenai senjata tambahan sebuah variabel, yaitu tutorial Array PHP.

Terima kasih atas kunjungannya dan kembalilah lagi jika kamu sudah sempat untuk mempelajari lebih lanjut mengenai PHP ini. Jangan lupa untuk mendaftar sebagai anggota, sehingga kamu akan bisa mendapat berbagai informasi penting dari saya. Kamu juga bisa belajar HTML lebih jauh untuk meningkatkan pengetahuan kamu tentang tag-tagnya.

Dasar-dasar PHP 5 — Variabel yang Flexible


Kita lanjutin belajar PHP nya yuk. Seperti yang sudah pernah saya sebutkan di tutorial pengenalan PHP bagian pertama, bahwa salah satu kemudahan menggunakan PHP adalah variabelnya itu lho! Sangat flexibel.
Bagi yang sudah pernah belajar bahasa pemrograman sebelumnya, tentu tahu bahwa kita harus mendeklarasikan variabel yang akan kita gunakan dalam program kita di awal . Deklarasi meliputi nama variabel, jenisnya, panjangnya, global atau lokal, dll yang bikin pusiiiing.
Nah, kalau di PHP, kita tidak perlu mendeklarasikan variabel kita di awal program, perlu variabel, tinggal pakai. Gitu.
Dalam bagian ini kita akan mempelajari mengapa kita perlu variabel, dan bagaimana cara menggunakannya di PHP. Percaya deh, gampang banget.
Baiklah, jika anda perhatikan, sampai saat ini, apa yang sudah kita lakukan hanyalah membuat PHP mencetak teks baik hasil output fungsi (akan kita bahas lebih detil nanti) serta menggunakan perintah echo dan print.
Apakah itu sudah cukup menjadikan kita sebagai programmer? Walah, ya belum. Untuk itu, mari sekarang kita masuk lebih dalam lagi dengan mencoba mengenal variabel.Variabel ini merupakan salah satu materi penting yang wajib anda pelajari dalam PHP, jadi…. perhatikan baik-baik ya.
Pengen belajar sambil praktek? klik di sini.
Agar mudah memahaminya, coba bayangkan sebuah variabel sebagai sebuah wadah. Nah, berbeda dengan wadah yang biasa kita gunakan, variabel ini akan digunakan untuk menampung satu atau beberapa nilai (bagi yang udah jago, skip aja nih paragraf). Dengan kata lain, variabel ini adalah tempat yang digunakan oleh PHP untuk menyimpan informasi dan meneruskannya ke berbagai tempat.
Variabel ini bisa diteruskan ke dokumen lain, fungsi dan sebagainya.
Untuk memberikan gambaran lebih jelas, saya coba gunakan pendekatan yang mudah-mudahan lebih baik. Anda yang pernah belajar matematika tentu pernah mengingat variabel dalam persamaan kan? Anda tentu masih bisa mengingat persamaan sederhana ini  “ x+3=7”.
Dalam persamaan tersebut, x adalah variabel, dan dengan sangat mudah, Anda  bisa mengetahui bahwa isi variabel x adalah nilai 4.
Persis sama…variabel dalam PHP kira-kira berfungsi seperti itu, menampung sebuah nilai, dengan sedikit penambahan kemampuan yaitu variabel dalam PHP dapat kita gunakan lagi dalam file atau fungsi lain. Jangan khawatir, anda akan merasa lebih jelas setelah mempelajari contoh yang akan saya sampaikan di bawah nanti.
Alasan mengapa variabel begitu penting dalam PHP adalah karena pada saat Anda membuat halaman web dinamis (halaman yang dapat merespon input dari user) maka anda akan bergantung pada data yang dikirimkan antara halaman web. Pada saat itulah Anda harus menggunakan variabel. Variabel merupakan mekanisme utama dalam pengiriman data seperti ini.
Kayaknya sih, cara paling mudah untuk menerangkan cara kerja variabel dalam PHP adalah dengan menunjukkan aksi mereka dalam contoh ya? Namun sebelum itu, perlu diingat ada 3 hal yang dapat anda lakukan dengan variabel:
Menyimpan nilai dengan memberi nilai pada mereka. Kadang disebut juga dengan istilah inisialisasi variabel;
Mengubah nilai dalam variabel, tentu saja jika sudah di isi sebelumnya;
Mengakses variabel (artinya anda bisa membaca nilai dari variabel itu dan melakukan hal yang diperlukan terhadap mereka)
Baiklah, setelah anda mengetahui tentang apa saja yang bisa anda lakukan dengan variabel, mari kita pelajari lebih dalam dengan menggunakan contoh.
Pertama, anda perlu mengetahui bahwa variabel dalam PHP dimulai dengan tanda dolar (“$”). Dalam kode di bawah ini , kita akan mengisi variabel, menggunakannya, kemudian mengupdate isinya untuk kemudian digunakan lagi. Nilai yang ada dalam variabel dapat diubah kapanpun kita mau.
Mari kita perhatikan script pendek berikut ini. Jangan khawatir, Saya akan coba jelaskan secara detil apa yang terjadi pada masing-masing baris.
?
1
2
3
4
5
6
7
<?php
$isi_variabel = "Ini isi awal variabel!";
print ("Menampilkan isi variabel awal : $isi_variabel");
print ("<p>");
$isi_variabel = "Ini isi Variabel setelah diupdate!";
print ("Isi variabel setelah diupdate : $isi_variabel");
?>
Hasil dari kode tersebut adalah sebagai berikut:

Menampilkan isi variabel awal : Ini isi awal variabel!
Isi variabel setelah diupdate : Ini isi Variabel setelah diupdate!

Penjelasan kode tersebut adalah sebagai berikut.
Pada baris kedua, saya memutuskan untuk membuat variabel yang bernama “isi_variabel”. Ingat, semua variabel dimulai dengan tanda dolar, sehingga variabel saya tadi ditulis menjadi “$isi_variabel”. Berikut ini adalah penjelasan rinci mengenai apa yang dikerjakan masing-masing baris.
Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.
Baris 1 memberitahu browser bahwa : “Kode PHP mulai di sini”.
Baris 2 buat variabel $isi_variabel sekaligus mengisinya dengan nilai awal berupa kalimat “Ini isi awal variabel!”.
Baris 3 tampilkan kalimat pengantar untuk variabel $isi_variabel dan sekaligus menampilkan nilai dari $isi_variabel
Baris 4 membuat tag <p> dalam HTML untuk membuat paragraf baru.
Baris 5 Mengupdate isi variabel $isi_variabel dan mengisinya dengan kalimat “Ini isi Variabel setelah diupdate!”.
Baris 6 tampilkan kalimat pengantara kedua dan nilai untuk isi variabel $isi_variabel yang baru.
Baris 7 ngasih tahu si Browser bahwa kode PHP sudah berakhir.
Ok, sekarang Anda seharusnya sudah bisa melihat bahwa variabel $isi_variabel digunakan sebagai semacam wadah yang dapat menampung nilai yang bermacam-macam (Kita juga bisa mengisi berbagai jenis variabel ke dalam variabel yang sama, misalnya setelah kita isi dengan variabel numerik, langsung bisa kita update isinya menjadi varaibel karakter. Hal ini umumnya tidak bisa dilakukan bahasa pemrograman lain). Kita baru saja mengisi variabel dan memanggil isinya dalam sebuah skrip yang sama, namun kekuatan PHP yang masih tersembunyi adalah bahwa kita dapat mengisi variabel kita di suatu halaman web, misalnya sebuah form isian yang harus diisi pelanggan kita dan kemudian menggunakan variabel tersebut kemudian di halaman web lain.
Sintaks untuk mengeset variabel adalah dengan:
* Mendefinisikannya dengan tanda = ($isi_variabel=”Ini isi awal variabel!”);
* Menggunakan tanda kutip jika megisinya dengan string atau huruf (“Ini isi awal variabel!”; angka tidak memerlukan tanda kutip);
* Akhiri setiap baris dengan titik koma.
Kemudian anda dapat memanggilnya dengan mengacu pada nama variabel ($isi_variabel pada baris 3 dan 6 – perhatikan bahwa saat memanggil variabel kita tidak menggunakan tanda kutip).
Pengen belajar sambil praktek? klik di sini.
Penamaan Variabel
Anda dapat menamai sebuah variabel dengan nama apapun selama mengikuti aturan berikut ini:
* Dimulai dengan huruf;
* Terdiri dari huruf, angka dan karakter garis bawah (karakter _ seperti dalam $isi_variabel”);
* Bukan merupakan kata kunci PHP (misalnya print).
Hati-hati: nama variabel adalah case sensitif (sehingga variabel $prothelon akan berbeda dengan $PROthelon).
Sebagai tips, anda sebaiknya membuat nama variabel yang memiliki arti tertentu sehingga anda lebih mudah memahaminya seandainya beberapa tahun kemudian terpaksa harus membaca kode tersebut.
Dalam contoh-contoh kita tadi, kita mengisi variabel dengan teks alias string. Variabel juga dapat menampung nilai berupa angka dan lainnya (obyek, array, booleans).
Catatan akhir: Satu hal yang biasanya menjadi pertanyaan adalah penggunaan tanda kutip. Kita bisa menggunakan tanda kutip tunggal maupun ganda untuk mengisi teks, misalnya:
?
1
print ("Saya berada di situs Prothelon!");
Baris ini akan mencetak teks

Saya berasa di situs Prothelon.

Jika anda ingin agar tanda kutip yang kita sayangi itu ikut tampil, anda harus menambahkan karakter “\” di depannya yang memberitahukan PHP bahwa tanda kutip sesudahnya bukan merupakan bagian dari kode, melainkan bagian dari kalimat. Cara ini dikenal dengan istilah escape characters. Dengan demikian, jika anda ingin menampilkan tulisan “Saya berada di situs Prothelon!” (lengkap dengan tanda kutipnya juga), kode anda akan seperti ini:
?
1
print (" \"Saya berada di situs Prothelon!\"" );

Gitu.

Baiklah, cukup sampai di sini dulu yach. Sampai ketemu di bagian selanjutnya.

Kamis, 11 Juli 2013

Belajar HTML5 Canvas



Dalam tutorial belajar HTML5 kali ini kita akan membahas tentang html5 canvas. Canvas merupakan salah satu dari banyak feature di html5. Dengan canvas kita bisa melakukan drawing / menggambar sebuah object pada halaman web tanpa menggunakan image, pada canvas kita juga membuat sebuah animasi tanpa menggunakan bantuan third party aplikasi seperti flash.
Elemen canvas html5 ini bisa menggambar grafik dengan cepat melalui scripting (biasanya menggunakan javascript). Kanvas memiliki beberapa metode untuk path gambar, kotak, lingkaran, karakter, dan menambah gambar.
Browser yang support untuk html5 canvas ini adalah internet explorer 9, firefox, oprea, chrome dan safari. Canvas dispesifikasikan dengan elemen <canvas> sebagai berikut:
<canvas id=”myCanvas” width=”200″ height=”100″></canvas>
Elemen <canvas> tidak memiliki kemampuan menggambar sendiri. Semua gambar harus dilakukan di dalam JavaScript. Mari kit alihat sebuah contoh sederhana berikut ini.
Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
</p>
&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;body&gt;

&lt;canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"&gt;

Your browser does not support the canvas element.

&lt;/canvas&gt;

&lt;script type="text/javascript"&gt;

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

&lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;
Hasilnya : Yup, sebuah kotak berwarna merah.
Kita akan membahas script HTML5 tersebut secara detil pada tulisan berikutnya, plus….manambahkan bunga pada kotak tersebut.

Belajar Drag Drop pada HTML5



HTML5 selanjutnya adalah membahas tentang drag and drop. Drag dan drop adalah bagian dari html5 yang standard dan merupakan feature yang biasa digunakan, ketika anda “grab” suatu obyek dan menggesernya ke lokasi yang berbeda. Nah, di html5 semua elemen dapat di drag and drop. Browser yang support drag and drop adalah mozila firefox, internet explorer 9, google chrome dan safari 5.
Berikut ini adalah contoh sederhana dari drag and drop :
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript">

function allowDrop(ev)

{

ev.preventDefault();

}

  

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);

}

  

function drop(ev)

{

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

ev.preventDefault();

}

</script>

</head>

<body>

  

<div id="div1" ondrop="drop(event)"

ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true"

ondragstart="drag(event)" width="336" height="69" />

  

</body>

</html>

Pada contoh diatas mungkin tampak sedikit rumit, tapi mari kita check ke bagian yang berbeda dari drag and drop event.
Pertama-tama untuk membuat obyek bisa di drag, atur atribut drag menjadi “true”

<img draggable=”true” />

Kemudian, tentukan apa yang harus terjadi ketika elemen diseret. Dalam contoh di atas, atribut ondragstart panggilan fungsi, drag (event), yang menentukan data apa yang akan diseret.

Para dataTransfer.setData () metode menetapkan tipe data dan nilai data diseret:

function drag(ev)
{
ev.dataTransfer.setData(“Text”,ev.target.id);
}

pada kasus ini type datanya adalah “text” dan nilai dari id elemen drag adalah “drag1”
Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.
Event ondragover menentukan dimana data diseret dapat diletakkan. Secara default, data / unsur tidak dapat dijatuhkan kedalam unsur lainnya. Untuk memungkinkanya, kita harus mencegah penanganan default dari elemen.

Hal ini dilakukan dengan memanggil event.preventDefault () metode untuk acara ondragover:

event.preventDefault()

Ketika data yang di drag, dijatuhkan (drop) terjadi penurunan. Dalam contoh diatas atribut ondrop memanggil sebuah fungsi drop(event) :

function drop(ev)
{
var data=ev.dataTransfer.getData(“Text”);
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}

Penjelasannya adalah :
  • Mendapatkan obyek yang di drag / diseret dengan metode dataTransfer.getData(“Text”) Metode ini akan mengembalikan setiap data yang ditetapkan untuk jenis yang sama dalam setData () metode
  • Data yang diseret adalah id dari elemen diseret (“drag1″)
  • Tambahkan elemen diseret ke elemen penurunan
  • Call preventDefault () untuk mencegah penanganan default browser dari data(standar terbuka sebagai link pada drop)

Belajar HTML5 Audio



Setelah membahas tentang elemen video pada html5, termasuk DOM videonya, sekarang kita akan membahas html5 audio. Sebenarnya, sampai sekarang tidak standar dalam memutar file audio pada browser. Akhirnya sekarang ini banyak file audio yang diputar menggunakan plugin seperti flash dll. Bahkan, berbeda browser berbeda pula plugin-nya.
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:
Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.
Browser
MP3
Wav
Ogg
Internet Explorer 9
Yes
No
No
Firefox 4
No
Yes
Yes
Google Chrome6
Yes
Yes
Yes
Apple Safari
Yes
Yes
No
Opera 10.6
No
Yes
Yes