Membuat Tampilan Web

A.   PENDAHULUAN

Kali ini saya akan membahas mengenai Format Tampilan Gambar. Suatu halaman web akan terlihat kaku, terkesan formal, dan sedikit menjemukan bila tidak disertai dengan gambar. Kita bias lihat saat ini, halaman web yang ada di internet, hamper semuanya memasukkan unsur gambar, animasi, bahkan audio dan video untuk menarik dan membuat tercengang para pengunjungnya.

1.        Pengertian

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 gambar yang akan ditampilkan ke dalam halaman web.

2.       Latar Belakang dan Batasan Permasalahan

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, makan 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 ), yang merupakan singkatan dari Portable Network graphics.

Menggabung Gambar dan Teks

Jika kita ingin menggabungkan ataumenyisipkan 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 horisontal:

·         Gambar bisa berada di bagian kiri teks/paragraf

·         Gambar bisa berada di bagian kanan teks/paragraf

Untuk posisi gambar yangdilihat 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>. Dengan mengisi atribut tersebut dengan nilai LEFT maka gambar akan berada di sebelah kiri teks. Sebaliknya, jika diisi RIGHT akan menyeabkan posisi gambar akan berada di sebelah kanan teks.

Memperkecil dan Memperbesar Ukuran Gambar 

Gambar yang ditampilkan pada dokumen HTML terkadang tidak memiliki ukuran gambar yang sama dengan ukuran sebenarnya. 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. Perhatikan contoh berikut ini.

<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” />

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

                          <img src=”namafile” title=”keterangan”/>

                    Format Tampilan Audio

                          Untuk memasukkan suara pada html bisa menggunakan tag <audio>.     
                          Format suara yang telah didukung hingga saat ini adalah MP3, Ogg dan 
                          WAP. File-file Audio yang didukung HTML5 adalah MP3,WAV, dan OGG.

                          Tidak semua tipe file audio tersebut didukung oleh browser.

v                                                          OGG merupakan format audio yang didukung oleh Mozilla firefox, opera,   
                               dan google chrome.

v   
                               MP3 merupakan format audio yang didukung oleh Google Chrome dan   
                               safari.

v   
                               WAV merupakan format audio yang didukung oleh Mozilla Firefox dan 
                               Opera.

  
                   Menyajikan audio dalam tampilan web

                         File  audio seperti mp3 dapat dilantunkan melalui tag<audio> < /audio>.     
                         Berikut adalah format lengkap untuk memainkan musik ke dalam aplikasi 
                         web.

<html> <head> <title>cek suara</title> </head> <body> <audio controls> <source src="house.mp3" type="audio/mp3"> <source src="house.ogg" type="audio/ogg"> </audio> </body> </html>

Ketika mencoba listing program diatas , file audio ditempatkan dalam satu folder yang sama dengan file *.htm dan nama file audio nya disesuaikan dengan file audio yang anda gunakan. Untuk listing program di atas menggunakan file audio bernama "house.mp3" dan "house.ogg".

Bila listing program diatas dijalankan akan menghasilkan tampilan audio di browser . Tekan tombol play untuk memulai menjalan audionya.

Atribut yang digunakan pada tag <audio> </audio> dapat juga menggunakan atribut autoplay, loop dan controls. Detail atribut pada audio adalah sebagai berikut :

Atribut	Sintaks	Keterangan
autoplay	<audio autoplay=”autoplay”>	memulai audio secara otomatis pada web terbuka
controls	<audio controls = "controls" >	menampilkan kontrol seperti volume, audio, dan juga tombol untuk memulai/pause
loop	<audio loop="loop">	mengulang audio kembali setelah pemutaran awal selesa
muted	<audio muted =”muted” >	mematikan suara
Preload	<audio preload=”preload”>	memuat ulang audio ketika halaman dimuat ulang
src	<audio> Source Src=”/usr/home/damay/house.ogg”	Value dari src  adalah file audio tersebut berserta lokasi filenya bisa juga mengarahkan suatu
	</audio>	alamat url/web audio tertentu

Berikut adalah listing program audio yang telah diberi atribut control, autoplay serta loop  . Ketika listing program tersebut dijalankan maka audio akan berjalan secara otomatis tanpa harus ditekan tombol play .

<html> <head> <title>cek suara</title> </head> <body> <audio controls = "controls" autoplay="autoplay" loop="loop" > <source src="house.mp3" type="audio/mp3"> <source src="house.ogg" type="audio/ogg"> </audio> </body> </html>

Bila listing program diatas dijalankan akan menghasilkan tampilan audio di browser . Audio akan mulai diperdengarkan tanpa harus menekan tombol play. Audio akan terus dimainkan kembali ketika audio sudah habis waktunya karena pada atribut audio di set “loop”.

B.   ALAT DAN BAHAN

1. Laptop
2. File Items 
3. Notepad
 

H.  REFERENSI

-

sekian dari saya wassalamu'alaikum wr. wb.