Embed Size (px)
Citation preview
Nama : WIDIANTI
NIM : 3093311049
Prodi : Manajemen Informatika
Tugas Sistem Informasi Berbasis Web
Membuat Artikel tentang CSS3, HTML5, Jquery
1. CSS3
a. CSS3 Border
<!DOCTYPE html>
<html>
<head>
<title>
Latihan
</title>
<link href="css/induk.css" rel="stylesheet" type="text/css">
<style type="text/css">
#wrapper {
background-color: #03C;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="menu">
<?php
//include'menu.php';
?>
</div>
<div id="main">
<?php
//include'main.php';
?>
</div>
<div id="footer">
<?php
//include'footer.php';
?>
</div>
</div>
</body>
</html>
@charset "utf-8";
#wrapper {
font-family: verdana;
font-size: 14px;
color: #3C241A;
background-color: #990;
height: 500px;
width: 1000px;
border-radius: 30px 0px 30px 30px;
-moz-border-radius: 30px;
margin:auto;
}
Tampilan hasil browser:
b. Syntax CSS3 Border dan Background
#wrapper {
background-color: #03F;
height: 500px;
width: 1000px;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-top-style: groove;
border-right-style: groove;
border-bottom-style: groove;
border-left-style: groove;
}
Tampilan hasil browser:
c. Syntax CSS3 background-image
#wrapper #header {
background-color: #FFF;
background-image: url(image/indonesia_flag__independence_by_mikzack.jpg);
height: 150px;
width: 1000px;
}
Tampilan hasil browser:
d. Syntax CSS3 background-border
#wrapper #header {
background-color: #C00;
height: 150px;
width: 1000px;
border-top-style: inset;
border-right-style: inset;
border-bottom-style: inset;
border-left-style: inset;
list-style-type: lower-alpha;
e. Menggunakan-moz-border-radius di Mozilla (Firefox)
#wrapper {
background-color: #03F;
height: 75px;
width: 150px;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-top-style: groove;
border-right-style: groove;
border-bottom-style: groove;
border-left-style: groove;
-moz-border-radius: 1em;
-moz-radius-topright: 2em; -moz-border-radius-topleft: 2em;
-moz-border-radius: 2em 0;
-moz-border-radius: 3em 1em;
}
Tampilan hasil browser:
f. -moz-transform: miring ()
#wrapper {
background-color: #03F;
height: 75px;
width: 150px;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-top-style: groove;
border-right-style: groove;
border-bottom-style: groove;
border-left-style: groove;
-moz-border-radius: 36px / 12px; border-radius: 36px / 12px;
-moz-border-radius-topright: 50px 30px; -moz-border-radius-bottomright: 50px 30px;
-moz-border-radius: 36px 50px 50px 36px / 12px 30px 30px 12px border-radius: 36px 50px
50px 36px / 12px 30px 30px 12px
}
Tampilan hasil browser:
2. Menambahkan Library jQuery untuk Halaman Anda
Perpustakaan jQuery disimpan sebagai file JavaScript tunggal, yang berisi semua metode
jQuery.
Hal ini dapat ditambahkan ke halaman web dengan mark-up berikut:
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
Please note that the <script> tag should be inside the page's <head> section.
Example
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Cara menggunakan :
1. Pertama, pastikan Anda menggunakan yang valid DOCTYPE
Hal ini diperlukan untuk FancyBox untuk melihat dan berfungsi dengan benar.
2. Sertakan nessesary file JS
JQuery loading dari CDN ( Content Delivery Network ) direkomendasikan
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script
type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
Opsional - transisi Tambahkan sebagai jQuery secara default hanya mendukung "swing" dan
"linear"
<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>
Opsional - Aktifkan "mouse-wheel" untuk menavigasi item itu melalui galeri
<script type="text/javascript" src="/fancybox/jquery.mousewheel-
3.0.4.pack.js"></script>
3. Tambahkan FancyBox file CSS
Jangan lupa untuk mengubah path gambar latar belakang jika file CSS tidak dalam
direktori yang sama. Juga, periksa path src untuk AlphaImageLoader karena mereka
relatif terhadap dokumen HTML, sedangkan CSS biasa gambar latar belakang yang
relatif terhadap dokumen CSS ( read more ).
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css"
media="screen" />
4. Buat elemen link (href> <a)
Gambar
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg"
alt=""/></a>
Inline konten
<a id="inline" href="#data">This shows content of element who has id="data"</a>
<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur
adipiscing elit.</div></div>
Iframe
<a href="http://www.example?iframe">This goes to iframe</a> or <a class="iframe"
href="http://www.example">This goes to iframe</a>
Ajax
<a href="http://www.example/data.php">This takes content using ajax</a>
Opsional - Gunakan atribut judul untuk jangkar jika Anda ingin menampilkan keterangan
Catatan - Anda mungkin ingin mengatur hideOnContentClick ke false jika Anda
menampilkan konten iframed atau inline dan itu juga mencakup elemen dapat diklik
(misalnya - bermain tombol untuk film, link ke halaman lain)
5. Api Plugin menggunakan selektor jQuery
Jika Anda tidak akrab dengan jQuery, silahkan, membaca tutorial ini untuk pemula
Contoh- contoh:
$(document).ready(function() { /* This is basic - uses default settings */
$("a#single_image").fancybox(); /* Using custom settings */ $("a#inline").fancybox({
'hideOnContentClick': true }); /* Apply fancybox to multiple items */
$("a.group").fancybox({ 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'speedIn' :
600, 'speedOut' : 200, 'overlayShow' : false }); });
Catatan - ini ID dimaksudkan untuk contoh TUNGGAL. Jika Anda ingin menggunakan
script yang sama untuk semua gambar Anda / elemen kemudian menggunakan kelas sebagai
gantinya.
Catatan - Galeri diciptakan dari unsur-unsur yang memiliki sama "rel" tag, contoh:
/* HTML */ <a class="grouped_elements" rel="group1"
href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""/></a> <a
class="grouped_elements" rel="group1" href="image_big_2.jpg"><img
src="image_small_2.jpg" alt=""/></a> <a class="grouped_elements" rel="group2"
href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""/></a> <a
class="grouped_elements" rel="group2" href="image_big_4.jpg"><img
src="image_small_4.jpg" alt=""/></a> /* This will create two galleries */
$("a.grouped_elements").fancybox();
3. HTML5
HTML5 Video
Pengenalan
Tag video adalah salah satu fitur HTML5 yang mendapat banyak perhatian.
Sering disajikan sebagai alternatif untuk flash di media, tag video sebenarnya lebih
dari itu. Meskipun baru-baru ini bergabung dengan sisa tag HTML mana-mana,
kemampuan dan dukungan di seluruh browser telah meningkat pada kecepatan yang
menakjubkan. Seperti yang akan Anda lihat di tutorial ini keunggulan utamanya
adalah integrasi alam dengan lapisan lainnya dari stack pengembangan web seperti
CSS dan JavaScript serta tag HTML lainnya.
Tutorial ini akan memberikan pemahaman dasar dari tag video dan juga
menunjukkan berbagai contoh integrasi yang berbeda dengan fitur HTML5 lain,
seperti <canvas>.
1. Markup yang
Untuk membuat video kerja HTML di situs Anda, baris berikut harus memadai.
<video>
<source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
</ Video>
Potongan ini menggunakan tag <source> yang memungkinkan Anda
memasukkan berbagai format sebagai jenis fallback dalam kasus pengguna browser
tidak mendukung salah satunya. Lebih lanjut tentang ini di bagian selanjutnya.
Anda juga dapat menggunakan format video tunggal yang membuat sintaks
yang sangat mirip dengan tag gambar. Sintaks ini akan menjadi yang paling
digunakan dalam waktu dekat bila semua browser mendukung satu format video yang
umum.
<video src="movie.webm"> </ video>
Untuk saat ini, kita akan berfokus pada kasus yang pertama yang saat ini lebih
umum. Yang paling penting untuk diingat adalah untuk memastikan server Anda
melayani file video dengan tipe MIME yang benar dalam Content-Type header. Jika
tidak, video mungkin tidak bekerja dengan baik, bahkan jika mereka bekerja pada
salinan lokal dari situs Anda. Dalam httpd.conf Apache itu cukup dengan
menambahkan baris ini:
AddType video / ogg. Ogv
AddType video/mp4. Mp4
AddType video / WebM. WebM
Jika aplikasi Anda sedang dilayani dalam aplikasi Google App Engine maka
Anda akan perlu menambahkan sesuatu seperti berikut ini untuk app.yaml (satu untuk
setiap format):
- Url: / (* \ ogv..)
static_files: videos_folder / \ 1
mime_type: audio / ogg
upload: videos_folder / (.. * \ ogv)
Dalam rangka meningkatkan kinerja sisi klien sangat penting untuk tidak lupa
untuk menentukan jenis atribut dalam tag sumber ketika berhadapan dengan berbagai
format. Dengan cara ini, browser dapat memutuskan format dapat didownload dan
dimainkan. Dengan kata lain, tidak akan men-download yang tidak bisa bermain
dalam rangka meningkatkan kinerja situs.
2. Video Format
Pikirkan format video sebagai sebuah file zip yang berisi stream video
dikodekan dan stream audio. Ketiga format Anda harus peduli untuk web adalah
(WebM, mp4 dan ogv):
Mp4 =. H.264 AAC +
.ogg / .ogv = Theora + Vorbis
WebM =. VP8 + Vorbis
Kecepatan evolusi tag video benar-benar menggembirakan. Hanya setahun
yang lalu browser hanya yang mendukung tag video dalam versi stabil adalah Safari.
Sekarang, semua browser modern mendukung video HTML5, termasuk IE9
mendatang. Sedangkan untuk codec, Firefox, Chrome dan Opera telah sepakat untuk
menyertakan dukungan untuk. WebM sebagai format video umum melalui Proyek
WebM . Internet Explorer akan mendukungnya juga jika codec terinstal di komputer
(kita berharap mereka tidak membuat persyaratan di masa depan).
Catatan: Pada saat penulisan, Safari tidak mendukung format WebM..
Di sini Anda dapat melihat bagaimana browser Anda hanya dapat membuat satu atau
dua dari tiga format yang telah disebutkan (Anda harus merasa beruntung jika Anda
melihat mereka bertiga!):
Pada saat menulis ini (Agustus 2010) ini adalah potongan yang memiliki kombinasi
paling aman format sehingga Anda dapat yakin video Anda ditampilkan di semua
browser:
<video>
<source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
Tag video tidak didukung. Download Video <a href="movie.webm"> sini </ a>.
<video>
Catatan: Karena bug di iPad Anda akan perlu untuk memasukkan mp4 sebagai
pilihan pertama jika Anda ingin video yang akan dimuat di perangkat itu.. Begitulah,
sampai bug tersebut telah diperbaiki.
Seperti yang saya sebutkan sebelumnya, hampir semua vendor browser setuju untuk
mendukung format video yang umum. Jadi, dalam waktu kurang dari satu tahun dari
sekarang, di sini adalah kode yang kemungkinan besar akan digunakan di web:
<video>
<source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
Tag video tidak didukung. Download Video <a href="movie.webm"> sini </ a>.
<video>
Salah satu perhatian utama tentang menggunakan format mp4. Adalah bahwa video
codec nya (h.264) bukan merupakan codec terbuka dan lisensi bahwa sebuah
perusahaan harus membayar untuk menggunakannya sangat kompleks untuk
dipahami. Ada informasi lebih lanjut tentang format ini dalam bab ini Video .
Satu masalah dengan format mp4. Adalah bahwa jenis atribut harus lebih spesifik
daripada format lain tergantung pada profil yang digunakan untuk mengkodekan
video. Meskipun yang paling umum adalah "avc1.42E01E, mp4a.40.2", Anda ganda
harus memeriksa ini daftar profil untuk memastikan.
Meskipun Microsoft mengumumkan dukungan dari tag video, serta elemen HTML5
lain, dalam IE versi mendatang (yaitu IE9), pengguna migrasi yang tingkat ke versi
lebih baru, lebih rendah dari browser utama lainnya. Oleh karena itu bagian berikut:
3. Apa yang terjadi dengan versi IE saat yang tidak mendukung tag video?
Ada dua plugin yang dapat digunakan sebagai solusi yang mungkin:
Chrome Frame
Keuntungan dari menggunakan Plugin Chrome Frame adalah bahwa, setelah itu
diinstal, Internet Explorer akan memiliki dukungan untuk HTML terbaru, JavaScript
dan CSS standar fitur yang versi IE tidak mendukung. Plugin ini memiliki manfaat
tambahan bagi para pengembang web, yang adalah bahwa hal itu memungkinkan
mereka untuk kode aplikasi dengan fitur web modern tanpa meninggalkan pengguna
IE di belakang. Bayangkan jumlah waktu yang web developer menghemat tanpa harus
hack kode dan workarounds untuk IE.
Flash fallback
Anda juga dapat menggunakan flash sebagai kasus fallback. Tergantung pada format
video Anda, Anda mungkin perlu encode lagi ke format yang kompatibel untuk flash
player. Kabar baiknya adalah bahwa Adobe telah berkomitmen untuk mendukung
format WebM di flash player mereka meskipun jadwal waktu masih belum jelas.
Kelemahan terbesar dari solusi ini dibandingkan dengan plugin Chrome Frame adalah
bahwa Anda akan mendapatkan flash player sebagai versi rusak dari apa yang pernah
UI kustom atau fitur-fitur Anda telah membangun untuk tag video Anda.
4. Encode Video Anda
Jika Anda perlu untuk mengkodekan video yang ada ke format yang telah
disebutkan pada bagian sebelumnya dapat Anda gunakan Miro Converter baik untuk
Windows dan Mac untuk dengan mudah mendapatkan format yang Anda butuhkan.
Program ini tidak memungkinkan Anda untuk tweak pengaturan banyak tapi datang
dengan output yang paling umum untuk web, termasuk tiga format yang kita gunakan
dalam tutorial ini. Di bawah tenda, software ini sebenarnya adalah wrapper untuk
ffmpeg dan ffmpeg2theora yang dapat Anda gunakan di Windows, Mac dan Linux
dari baris perintah dan menentukan parameter lebih. Baca lebih lanjut tentang alat ini
di divintohtml5.org .
5. Bagian Fun
Seperti yang kami katakan dalam pendahuluan keuntungan utama dari tag
video menjadi anggota keluarga HTML5, adalah integrasi dengan lapisan lainnya dari
stack pengembangan web. Dalam contoh berikut kami akan memberikan Anda
gambaran apa yang mungkin harus dilakukan dengan itu.
5.1. Video + HTML lain
Semua atribut HTML umum sekarang dapat digunakan dalam pemutar video.
Misalnya, dalam snippet berikut kita menggunakan tabindex untuk membuat pemain
keyboard diakses. Ada atribut baru yang dapat digunakan pada tag video yang juga
umum untuk tag audio seperti loop dan autoplay, keduanya Cukup jelas. Poster
atribut menunjukkan apa gambar akan ditampilkan sementara video pada awalnya
loading dan akhirnya, kontrol digunakan untuk menunjukkan bahwa alih-alih
membangun kontrol kustom kami, kami ingin agar browser untuk membuat yang
secara otomatis untuk kita. Ada juga atribut preload bisa kita gunakan untuk
mendownload video di latar belakang segera setelah beban halaman, bahkan jika
belum mulai bermain.
<video poster="star.png" autoplay lingkaran mengontrol tabindex="0">
<source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
</ Video>
Tingkat penuh integrasi tag video sebagai elemen browser asli deprecates beberapa
masalah Anda mungkin telah dimiliki di masa lalu dengan pemain pihak ketiga
tertanam seperti drop-down menu dan iframe overlay pada pemutar atau perilaku tata
letak aneh ketika elemen HTML lain di sekitarnya video secara dinamis ukurannya.
Sejak video tidak diperlakukan sebagai benda asing tertanam, ada beberapa manfaat
lain yang mempengaruhi pengalaman pengguna. Misalnya, bahkan jika fokusnya
adalah pada pemain itu sendiri tindakan seperti bergulir halaman atau stroke tombol
keyboard akan benar-benar fungsional.
Catatan: Jika Anda mencoba untuk menulis dokumen poliglot untuk menjaga sintaks
XHTML dalam konteks HTML5 maka atribut dalam kode Anda akan terlihat seperti
ini:
<video poster="star.png" autoplay="autoplay" loop="loop" controls="controls"
tabindex="0">
<source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
</ Video>
5.2. Video + JS
Tag video dilengkapi dengan satu set atribut dan metode yang memungkinkan Anda
memiliki kontrol baik video Anda dari kode JS anda. Anda dapat melihat mereka
secara real time dalam contoh berikut .
Sebagaimana elemen HTML lain Anda dapat melampirkan acara umum untuk tag
video seperti acara-acara drag, peristiwa mouse, peristiwa fokus, dll Tapi elemen
video datang dengan sekelompok event baru untuk mendeteksi (dan kontrol) ketika
video diputar, berhenti atau selesai. Sejak loading sumber daya video dapat memiliki
peringatan banyak ada banyak peristiwa untuk memiliki kontrol baik dari proses
loading, baik di tingkat jaringan (loadstart, kemajuan, menunda, membatalkan,
kesalahan, dikosongkan, terhenti) dan di tingkat buffering ( loadedmetadata ,
loadeddata , menunggu, bermain, canplay, canplaythrough).
Pada tingkat yang paling sederhana Anda dapat melampirkan acara canplay untuk
mulai melakukan hal-hal dengan video.
video.addEventListener ('canplay', function (e) {
this.volume = 0,4;
this.currentTime = 10;
this.play ();
}, False);
Ada kontrol pemutar beberapa kustom yang tersedia di internet sekarang. Dalam
contoh berikut kita menggunakan beberapa elemen untuk mengontrol dua video
secara bersamaan dan juga meniru efek maju cepat dengan atribut playbackRate.
Gunakan slider untuk mengaktifkan volume antara video.
5.3. Video + CSS
Seperti bisa Anda tebak, tag video dapat ditata menggunakan CSS tradisional
(misalnya perbatasan, opacity, dll) karena merupakan warga negara kelas satu di
DOM. Tapi yang keren adalah bahwa Anda juga dapat gaya itu dengan CSS3 properti
terbaru seperti refleksi, masker, gradien, transformasi, transisi dan animasi.
Melayanglah di atas video berikutnya untuk melihat beberapa dari mereka dalam
tindakan.
# Video-css.enhanced {
border: 1px solid putih;
-Moz-box-shadow: 0px 0px 4px # ffffff; / * FF3.5 + * /
-Webkit-box-shadow: 5px 44px 28px # 333; / * Saf3.0 +, Chrome * /
box-shadow: 0px 0px 4px # ffffff; / * Opera 10,5, IE 9,0 * /
-Moz-transform: menerjemahkan (0, 10px); / * FF3.5 + * /
-O-transform: menerjemahkan (0, 10px); / * Opera 10,5 * /
-Webkit-transform: menerjemahkan (0, 10px); / * Saf3.1 +, Chrome * /
}
5.4. Video + kanvas
Canvas adalah satu lagi elemen HTML5 dengan banyak kemungkinan bila digunakan
bersama dengan tag video.
Dalam contoh berikut kita mengambil keuntungan dari dua fitur dari elemen
<canvas> untuk impor dan ekspor gambar. Yang pertama adalah metode drawImage
yang memungkinkan Anda mengimpor gambar dari tiga sumber berbeda: elemen
gambar, elemen lain kanvas dan elemen <video>! Ini berarti bahwa setiap kali kita
menjalankan metode ini, frame dalam video akan diimpor dan diberikan ke dalam
kanvas.
Fitur kedua dari tag <canvas> kami gunakan adalah metode toDataURL yang
memungkinkan Anda ekspor isi kanvas untuk sebuah gambar. Klik bermain di video
berikut untuk melihat bagaimana gambar dibuat dari video setiap 1,5 detik. Kanvas
kita gunakan untuk impor / ekspor sebenarnya tersembunyi.
Anda dapat melihat dalam kode berikut bagaimana kita hanya menciptakan interval
yang berjalan setiap 1,5 detik dengan metode drawImage yang mengambil elemen
video sebagai sumber.
video_dom.addEventListener ('bermain', function () {
video_dom.width = canvas_draw.width = video_dom.offsetWidth;
video_dom.height = canvas_draw.height = video_dom.offsetHeight;
var ctx_draw = canvas_draw.getContext ('2 d ');
draw_interval = setInterval (function () {
/ / Mengimpor gambar dari video
ctx_draw.drawImage (video_dom, 0, 0, video_dom.width, video_dom.height);
/ / Ekspor gambar dari kanvas
var img = new Image ();
img.src = canvas_draw.toDataURL ('image / png');
img.width = 40;
frames.appendChild (img);
}, 1500)
}, False);
Dalam contoh berikut kita akan selangkah lagi lebih lanjut. Jika Anda meningkatkan
frekuensi di mana Anda mengimpor dan membuat gambar dari video Anda benar-
benar dapat menandingi kecepatan frame video yang sama di kanvas. Ini
memungkinkan Anda segala macam transformasi mewah di kanvas seperti jika Anda
melakukannya dalam video.
Di sebelah kiri Anda dapat melihat bermain video asli. Di tengah ada kanvas kita
gunakan untuk mengimpor gambar setiap 33 milidetik. Di sisi kanan ada kanvas
kedua yang akan "menderita" semua transformasi pada saat yang sama mengimpor
gambar dari kanvas pertama. Satu-satunya alasan kita menggunakan dua kanvas ini
karena kinerja yang jauh lebih baik daripada menggunakan satu pun yang mengimpor
gambar dan transformasi pada saat yang sama.
HTML5 contoh tag audio, Penggunaan tag audio di HTML5.
.
Pendahuluan:
Pada bagian ini, Anda akan melihat penggunaan dan pelaksanaan tag audio di
HTML5. Tag <audio> digunakan untuk menambahkan audio di halaman web atau
halaman HTML. Ketika tag audio yang tidak digunakan, browser meminta plugin
atau script untuk memutar audio atau musik. Ini adalah tag berpasangan.
Kehadiran Konten dalam tag audio akan ditampilkan hanya jika browser tidak
mendukung.
Atribut tag audio:
Atribut digunakan untuk memberikan informasi lebih ke browser tentang tag. Ada
atribut berikut pada tag audio:
1 - autoplay
2 - autobuffer
3 - mengatur
4 - loop
5 - preload
6 - src
Deklarasi Sintaks:
Deklarasi sintaks tag audio di HTML5.
<audio src="URL"> </ audio>
Deklarasi audio case_ tidak sensitif.
Contoh <audio> di HTML5:
Kode:
AudioTag.html
<DOCTYPE html>
<html>
<head>
<title> Tag Audio </ title>
</ Head>
<body>
<p> Contoh tag audio dalam HTML5 </ b>. </ p>
<audio src="a1.mp3" controls="controls">
Browser tidak mendukung tag audio.
</ Audio>
</ Body>
</ Html>
Output:
