Kamis, 10 Maret 2016

Assalamuaikum wr.wb
   
Untuk memasukkan suara pada html bisa menggunakan tag <audio>.  Format suara yang  telah  didukung  hingga  saat  ini  adalah  MP3,  Ogg  dan  WAV.
Jenis file audio untuk dukungan pada web browser bisa dilihat pada tabel berikut ini.

 










MIME untuk format audio

MIME (Multipurpose Internet Mail Extension) digunakan untuk mekanisme untuk  mengirim berbagai informasi seperti text, aplikasi, gambar, suara, video, dan lain  sebagainya agar browser tidak salah menterjemahkan konten yg diterima. Berikut adalah tipe mime untuk format audio.










 Atribut tag <audio> </audio>

Atribut yang digunakan pada tag <audio> </audio> adalah sebagai berikut 















Dan dibawah ini adalah contoh coding HTML yang bisa memainkan audio secara otomatis namun tidak terlihat media kontrol dari audio :
  
 
 
 
 
 


 <html>
<head>
<title>cek suara</title>
</head>
<body>
<audio autoplay>
<source src="Maroon5 - payphone.mp3" type="audio/mp3">
</audio>
</body>
</html>


 Dan juga ini contoh sebuah coding html, halaman web yang bisa memainkan audio secara
otomatis DAN MUSIK NYA BER ULANG OTOMATIS namun tidak terlihat media kontrol dari audio.


<html>
<head>
<title>cek suara</title>
</head>
<body>
<audio autoplay loop>
<source src="Maroon5 - payphone.mp3" type="audio/mp3">
</audio>
</body>
</html>


Inilah  materi penyajian audio di HTML yang dapat saya informasikan kepada para pengunjung blog .

jika ada kesalahan mohon maaf .

 Wassalamualaikum wr.wb :)
 
Diposting oleh di Tidak ada komentar:

Kamis, 03 Maret 2016

Menambahkan Gambar di HTML

Assalamualikum Wr.Wb
Kali ini saya akan menjelaskan bagaimana coding Menyajikan Format Tampilan Gambar. Karena suatu halaman web akan terlihat kaku, terkesan formal, dan sedikit menjemukan bila tidak disertai dengan gambar.
1. Menggabung Gambar dan Teks
Jika kita ingin menggabungkan atau menyisipkan gambar di dalam suatu teks atau paragraf tertentu, terdapat pilihan posisi gambar yang harus diperhatikan:

Secara vertikal:
·         Teks bisa berada sejajar dengan bagian atas gambar
·         Teks bisa berada sejajar dengan bagian tengah gambar
·         Teks bisa berada sejajar dengan bagian bawah gambar
Secara horizontal:
·         Gambar bisa berada di bagian kiri teks/paragraph
·         Gambar bisa berada di bagian kanan teks/paragraf

 Untuk posisi gambar yang dilihat dari arah vertikal dapat ditentukan dengan mengisi nilai TOP, MIDDLE, atau BOTTOM ke dalam atribut ALIGN yang terdapat pada tag <img>.

Contoh Coding Menampilkan Gambar Pada Website :

  1. <html>
  2. <head>
  3. <title>Gambar</title>
  4. </head>
  5. <body>
  6. <b>Menggabungkan Gambar dan Teks, posisi terhadap teks secara vertikal</b>
  7. <p><img src="C:\u.jpg" align=TOP width=70>Komputer 1 (menggunakan align=TOP)</img></p>
  8. <p><img src="C:\u.jpg" align=middle width=70>Komputer 2(menggunakan align=MIDDLE)</img></p>
  9. <p><img src="C:\u.jpg" align=bottom width=70>Komputer 3 (menggunakan align=BOTTOM)</img></p>
  10. </body>
  11. </html>
Dan Hasilnya dapat dilihat seperti dibawah ini.












Adapun untuk posisi gambar yang dilihat dari arah horisontal ditentukan atributnya dengan mengisi nilai LEFT dan RIGHT kedalam ALIGN pada tag <img>. Dengan mengisi atribut tersebut dengan nilai LEFT maka gambar akan berada di sebelah kiri teks. Sebaliknya, jika diisi RIGHT akan menyebabkan posisi gambar akan berada di sebelah kanan teks.

Contoh Coding Menampilkan Gambar Pada Website Untuk Left/Right:



  1. <html>
  2. <head>
  3. <title>Gambar</title>
  4. </head>
  5. <body>
  6. <B>Menggabungkan Gambar dan Teks, posisi terhadap teks secara vertikal</B>
  7. <p><img src="C:\u.jpg" align=Left width=50>Komputer 1 (menggunakan align=LEFT)</img></p>
  8. <p><img src="C:\u.jpg" align=Right width=50>Komputer 2(menggunakan align=RIGHT)</img></p>
  9. </body>
  10. </html>


Dan Hasilnya dapat dilihat seperti dibawah ini.
















2. Memberi Keterangan Pada Gambar
Agar lebih terkesan informatif, anda dapat memberikan keterangan yang relevan dan seperlunya (tidak berlebihan) terhadap gambar yang anda tampilkan pada halaman web. Keterangan ini akan muncul dalam bentuk tooltip ( sesaat, hanya beberapa detik) pada saat penunjung mengarahkan kursor (penjujuk mouse) ke atas gambar.
Untuk membuat keterangan semacam ini, kita dapat menggunakan atribut TITLE maupun ALT pada tag <img>.

Contoh Coding Menampilkan Keterangan Gambar Pada Website

  1. <html>
  2. <head>
  3. <title>Gambar</title>
  4. </head>
  5. <body>
  6. <h1>Menyajikan Format Gambar Dengan Keterangan</h1>
  7.  <img src="E:\komputer.jpg"title="Komputer" width=500 align=center>
  8. </body>
  9. </html>

Dan Hasilnya dapat dilihat seperti dibawah ini.








Semoga Bermanfaat
Diposting oleh di Tidak ada komentar:
Langganan: Komentar (Atom)