Haikal PG - XI RPL 1 - PWPB Sesi 7

Assalamualaikum Warahmatullahi Wabarokatuh

Kembali lagi dengan saya, disini saya akan membahas kembali tag-tag pada HTML. Pada HTML juga kita bisa menambahkan seperti audio, video, flash dengan tag yang akan saya bahas kali ini. Kita langsung saja mulai tutorialnya :

Menambahkan Audio
Di HTML kita bisa menambakan audio dengan tag <audio> </audio>. Seperti pada tag img kita juga harus memsukkan sumber lagu dengan attribut src="lagu.mp3". Ada juga attribut untuk memulai musik secara otomatis yaitu autoplay, Attribut untuk controls untuk menampilkan sebuah control spesifik audio, Attribut loop ini untuk mengulang lagu jika lagu sudah selesai.
Berikut tampilannya jika di jalankan di browser :

Tag audio html

Codenya :

<!DOCTYPE html>
<html>
<head>
 <title>Haikal Putra Gustiansyah XI RPL 1 Audio</title>
</head>
<body>
 <audio src="chopin.mp3" loop controls></audio>
</body>
</html>

Menambahkan Video

Selain menambahkan audio kita juga bisa menambahkan video dengan tag <video> </video> dan jangan lupa masukkan sumber video dengan src="". Attribut nya hampir sama dengan audio ada controls, loop, autoplay ,dll. Kita juga bisa memasang thumbnail dengan tag poster="(source image)". Tampilan jika dijalankan di browser :

Tag video html

Codenya :

<!DOCTYPE html>
<html>
<head>
 <title>Haikal Putra Gustiansyah XI RPL 1 Video</title>
</head>
<body>
 <video src="gg.mp4" controls loop autoplay poster="sad.png"></video>
</body>
</html>

Menambahkan Flash

Menambahkan tampilan flash dengan tag <embed> dan jangan lupa masukkan source nya seperti ini <embed src="flash.swf">
Codenya :

PRAKTIKUM

Kali ini kita coba mendesain sebuah tabel dan didalamnnya ada multimedia seperti audio, video dan juga biodata kita. Kita analisis dulu tampilannya :

Tampilannya

Hasil analisis dari tabel diatas kita membutuhkan tag audio,video,h1,tabel dan attribut didalamnya.
Langsung saja ini Code nya :

<!DOCTYPE html>
<html>
<head>
 <title>Haikal Putra Gustiansyah</title>
</head>
<body>
  <table border="0" bgcolor="lime" align="center" width="80%"  cellpadding="">
<tr>
    <td colspan="3" height="30" align="center"><h1>
Welcome To My Biodata</h1>
</td>
   </tr>
<tr>
    <td colspan="3" height="30" bgcolor="cyan">Welcome to my site</td>
   </tr>
<tr>
    <td rowspan="4" height="500" valign="bottom" width="300"><img src="NAMA.png" alt="Foto Biodata" height="500" width="300"></td>
    <td width="190">Name </td>
    <td>Haikal Putra Gustiansyah</td>
   </tr>
<tr>
    <td>Birth </td>
    <td>09 Agustus 2003</td>
   </tr>
<tr>
    <td height="50">Lagu </td>
    <td><audio src="lagu/chopin.mp3" controls  /></td>
   </tr>
<tr>
    <td>Check My Video  </td>
    <td bgcolor="grey"><video src="vidio/gg.mp4" controls poster="nama.png" height="80%" width="100%"  /></td>
   </tr>
</table>
<p align="right">
<em>Writen by Haikal PG XI RPL 1</em></p>
</body>
</html>

Sekian saja pada pertemuan kali ini, Wassalamualaikum Warahmatullahi Wabarokatuh.

Pemrograman Web Dan Perangkat Bergerak

Cari Blog Ini

Haikal PG - XI RPL 1 - PWPB Sesi 7

Komentar

Posting Komentar

Postingan populer dari blog ini

Haikal PG - XI RPL 1 - PWPB Sesi 9

Haikal PG - XI RPL 1 - PWPB Sesi 38

Haikal PG - XI RPL 1 - PWPB Sesi 19