Menampilkan Gambar, Audio, dan Video pada Halaman Web

A.      Judul

Menyisipkan Gambar, Audio, Video dan Gambar dalam Map Ke dalam Halaman Web

B.      Pendahuluan

Seperti yang kita rasakan kalua suatu web jika hanya tulisan saja isinya pasti akan menjenuhkan bukan? Nah karena itu saya inin memberikan informasi tentang memberikan gambar, audio, dan video pada halaman web HTML. Penasaran mari kita lihat informasinya.

1.       Pengertian

Menyisipkan atau memberikan suatu tampilan ke dalam suatu tempat untuk menyempurnakan tempat yang disisipkan tersebut.

2.       Latar Belakang dan Batasan Permasalahan

Ingin memberikan informasi mengenai cara menampilkan halaman web yang menarik.

3.       Maksud dan Tujuan

Membuat halaman web yang dapat terlihat indah, rapi menarik para pembaca agar mau melihat halaman web yang kita buat.

4.       Hasil yang diharapkan

Dapat menampilkan gambar, audio dan video ke dalam halaman web sehingga akan tampil dan menarik.

C.      Alat dan Bahan

1)      Laptop

2)      Aplikasi Notepad

3)      Ebook

D.      Jangka Waktu Pelaksnaan Kegiatan

4 Jam

E.       Proses Tahap Pekerjaan

ð  Mempelajari eBook tetang materi ini

ð  Mempraktekkan

ð  Membandingkan hasil

ð  Mendokumentasikan

F.       Hasil yang didapatkan

a.       Memasukkan Gambar ke dalam Halaman Web

Cara yang diperlukan untuk memasukkan atau menambahkan gambar ke dalam suatu halaman web sangatlah mudah. HTML telah menyediakan tag khusus untuk keperluan ini, yaitu <img>. Tag ini merupakan tag tunggal atau tidak memiliki pasangan. Atribut terpenting dari tag <img> adalah SRC (source atau sumber), yang berisi file yang akan ditampilkan ke dalam halaman web.

Bentuk umum penggunaan tag <img> adalah :

<img src=”namafile”>

Jika file yang akan ditampilkan berada di  direktori lain, atau bahkan berada di situs web lain, maka perlu menyebutkan juga lokasi dari file tersebut.

Contoh :

<img src= “../image/komputer.jpg”>

Atau

<img src=http://www.abcde.com/image/kamera.jpg/>

Format gambar yang sering digunakan dalam halaman web adalah GIF (.gif ) dan JPEG (.jpg atau . jpeg ). GIF adalah singkatan dari Graphics Interface Format sedangkan JPEG, adalah singkatan dari Joint Photographic Expert Group. Selain kedua format tersebut, saaat ini juga sudah mulai banyak digunakan gambar dengan format PNG (.png ), yanag merupakan singkatan dari Portable Network graphics.

1.       Menggabungkan Gambar dan Teks

Secara vertical :

·         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/paragraf

·         Gambar bisa berada di bagian kanan teks/paragraph

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>.

Adapun untuk posisi gambar yang dilihat dari arah horisontal ditentukribut an dengan mengisi nilai LEFT dan RIGHT kedalam ALIGN pada tag <img>.

2.       Memperkecil dan Memperbesar Ukuran Gambar

Untuk menghasilkan gambar dengan kualitas yang mirip aslinya, penentuan ukuran juga menjadi hal yang penting untuk diperhatikan. Maka dari itu perbandinganya harus sesuai dengan ukuran asli dari gambar tersebut.

Untuk menentukan ukuran gambar, kita perlu mengisi atribut HEIGHT berfungsi untuk menetukan tinggi gambar dan WIDTH untuk menetukan lebar gambar.

Contoh :  <img src=”images/komputer.jpg” />

Kode diatas akan menampilkan gambar dari file komputer.jpg yang berada dalam direktori images sesuai dengan ukuran asli (misal 500X375 pixel).

Untuk memperkecil gambar tersebut, kita tinggal memperkecil nilai-nilai tersebut,

misalnya   <img src=images/komputer.jpg” width=320” height=”230” />

3.       Memberikan Keterangan pada Gambar

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 :  <img src=”namafile” title=”keterangan”/>

<html> <head>  <title>Gambar</title> </head> <body>  <p>Latihan Menambahkan Gambar GIF, JPG, dan PNG</h2> <p>Menampilkan gambar dalam format GIF:</p> <img src=”images/komputer.gif”/> <p>Menampilkan gambar dalam format JPG:</p> <img src=”images/komputer.jpg”/> <p>Menampilkan gambar dalam format PNG:</p> <img src=”images/komputer.png”/> </body> </html>

ü  Simpan file dengan nama gambar.html dan tempatkan ke dalam direktori kerja

ü  Buka file tersebut melalui web browser

Contoh yang saya buat :

 

 Hasilnya :

Pada contoh di atas saya meletakkan file gambar dan file HTML saya dalam satu folder, agar lebih mempermudahkan dalam pencarian, dan pengolahan HTML

Untuk gambar yang memiliki keterangan saat kita menggeser kursor akan

muncul keterangan yang saya coba seperti ini :

                                    

                                    Hasilnya :

                                    

Gambar di atas juga sudah saya perkecil agar muat.

b.       Menyajikan Audio ke dalam Tampilan Web

c.       Menyajikan animasi dan video ke dalam Tampilan Web

d.       Format tampilan Gambar dengan Map

G.      Temuan Permasalahan

H.      Kesimpulan

I.         Referensi