BELAJAR MEMBUAT WEBSITE Part 6

MENYISIPKAN GAMBAR (IMAGE)

Untuk menyisipkan gambar ke dalam sebuah halaman HTML, mula-mula kita harus menyediakan terlebih dahulu file gambar yang dibutuhkan. File gambar ini biasanya berekstensi GIF, JPG atau BMP. Bila file gambar itu telah tersedia, dan kita mengetahui nama dan letak (lokasi) file gambar itu, barulah kita bisa menyisipkannya ke dalam halaman web kita dengan menggunakan tag <IMG SRC="file_gambar">.
Misalnya, kita mempunyai sebuah halaman web seperti ini:

Sisipkanlah gambar di bawah ini: Mudah, bukan?

Kita ingin menyisipkan sebuah gambar yang file gambarnya bernama email.gif diantara kedua kalimat di atas. Bukalah source kode halaman HTML tersebut sehingga tampak seperti ini:

<P>Sisipkanlah gambar di bawah ini: <P>Mudah, bukan?

Sisipkan satu tag paragraf lagi diantara kedua paragraf di atas, kemudian tuliskan tag penyisip gambar <IMG SRC="file_gambar"> sehingga menjadi seperti ini:

<P>Sisipkanlah gambar di bawah ini: <P><IMG SRC="email.gif"> <P>Mudah, bukan?

Simpan (Save) source code tersebut kemudian buka dengan browser maka tampaklah seperti ini:

Sisipkanlah gambar di bawah ini: Mudah, bukan?

Untuk contoh di atas, file email.gif dan file halaman yang disisipi gambar itu harus terletak dalam folder yang sama. Bila terletak dalam folder lain, maka harus dituliskan lokasinya. Misalnya:
<IMG SRC="images/email.gif"> bila file gambar itu terletak dalam folder bernama images, dimana folder images itu letaknya di bawah (di dalam) folder yang ditempati oleh halaman HTML yang disisipi gambar.
<IMG SRC="../email.gif"> bila file gambar itu terletak satu tingkat di atas (di luar) folder yang ditempati oleh halaman HTML yang disisipi gambar.
ATRIBUT-ATRIBUT GAMBAR
Setelah kita mengetahui cara menyisipkan gambar, sekarang kita akan mempelajari atribut apa saja yang bisa disertakan dalam tag <IMG SRC> untuk menghasilkan sejumlah efek tertentu. Atribut pertama yang bisa kita tambahkan ke dalam tag gambar adalah BORDER. Sesuai dengan namanya, atribut ini digunakan untuk memberi efek bingkai pada gambar. Bukalah file HTML di atas tadi. Kemudian sisipkanlah atribut border dalam tag gambar sehingga menjadi:

<P>Sisipkanlah gambar di bawah ini: <P><IMG SRC="email.gif" BORDER="3"> <P>Mudah, bukan?

Anda boleh mengganti angka 3 dengan angka yang lebih kecil atau lebih besar untuk menghasilkan ukuran border yang lebih kecil atau lebih besar pula. Save lalu tampilkan dalam browser, maka hasilnya seperti ini:

Sisipkanlah gambar di bawah ini: Mudah, bukan?

Atribut selanjutnya yang bisa anda sisipkan adalah atribut ALT. Dengan atribut ini kita bisa menyiapkan teks pengganti gambar bila suatu waktu gambar - karena satu dan lain hal - tidak bisa ditampilkan. Misalnya user menggunakan browser versi lama (yang belum bisa menampilkan gambar) atau browser yang dimatikan fungsi penampil gambarnya (untuk mempercepat proses loading). Dengan adanya atribut ALT ini, tampilan gambar dapat digantikan dengan teks yang kita masukkan di dalamnya. Contoh:

<P>Sisipkanlah gambar di bawah ini: <P><IMG SRC="email.gif" ALT="tombol email"> <P>Mudah, bukan?

Bila suatu ketika, gambar tidak bisa ditampilkan maka akan tampak seperti ini:

Sisipkanlah gambar di bawah ini: Mudah, bukan?

Atribut image berikutnya yang akan kita pelajari adalah atribut ukuran gambar yaitu WIDTH (lebar) dan HEIGHT (tinggi). Tanpa menggunakan atribut ini, browser akan menampilkan gambar sesuai dengan ukuran asli dari file gambar yang bersangkutan. Kita bisa mengatur ukuran tampilan gambar dalam browser lebih kecil ataupun lebih besar dari ukuran aslinya dengan menggunakan atribut WIDTH dan HEIGHT tersebut.  
Kita masih mengambil contoh gambar email.gif di atas. Ukuran gambar yang sebenarnya dari file GIF ini adalah 132x37 pixel (ukuran suatu gambar  bisa kita ketahui dengan menggunakan program penampil gambar seperti ACDSee, IrfanView, dsb.). Kita akan mencoba menampilkan gambar itu lebih kecil misalnya menjadi 99x25 pixel dan lebih besar misalnya menjadi 165x47 pixel. Untuk itu, editlah kode HTML-nya sebagai berikut: 

<P>Sisipkanlah gambar di bawah ini: <P><IMG SRC="email.gif"> <IMG SRC="email.gif" WIDTH=99 HEIGHT=25> <IMG SRC="email.gif" WIDTH=165 HEIGHT=47> <P>Mudah, bukan?

Ingin tahu hasilnya setelah ditampilkan dalam browser?

Sisipkanlah gambar di bawah ini: Mudah, bukan?

Selain menggunakan satuan pixel, kita pun bisa mengatur ukuran tampilan gambar dalam browser dengan satuan persen. Umumnya, satuan persen ini digunakan untuk mengatur lebar (WIDTH) gambar, bukan tinggi gambar. Sebab mengatur tinggi gambar dengan satuan persen akan menghasilkan tampilan yang tidak konsisten karena akan bergantung pada lebar jendela browser serta setting resolusi monitor. Oleh karena itu jika anda mengatur lebar gambar dengan satuan persen, atribut HEIGHT tidak perlu diatur lagi karena ukuran pixelnya secara otomatis diskala dengan ukuran yang benar. Misalnya: 
<IMG SRC="file_gambar" WIDTH=50%>. 
Ukuran gambar yang ditampilkan oleh browser akan mengikuti ukuran jendela browser relatif terhadap setting resolusi monitor. Jika monitor diset pada resolusi 800x600 pixel dan jendela browser dibuat maksimum, maka gambar akan ditampilkan dengan pada ukuran sekitar 400x300 pixel, yakni 50% dari ukuran jendela browser, bukan 50% dari ukuran gambar. Penggunaan satuan persen untuk pengaturan ukuran tampilan gambar ini, sering digunakan untuk gambar-gambar besar dan tampilannya ingin kita sesuaikan dengan ukuran jendela browser dan resolusi monitor. 
Apakah atribut WIDTH dan HEIGHT ini semata-mata digunakan untuk pengubahan ukuran tampilan gambar? Ternyata tidak. Atribut ini juga berfungsi untuk mempercepat tampilnya halaman web (loading). Karena dengan adanya kedua atribut ini, secara teknis memerintahkan browser untuk menyediakan tempat seukuran itu sebelum gambarnya sendiri selesai di-load. Jadi bila kita ingin menampilkan sebuah gambar sama dengan ukuran aslinya, alangkah baiknya bila atribut WIDTH dan HEIGHT ini tetap dituliskan dengan angka yang sama dengan lebar dan tinggi yang sebenarnya dari gambar tersebut.
MENGGUNAKAN GAMBAR SEBAGAI BACKGROUND
Pada pelajaran-pelajaran yang terdahulu, kita sudah mempelajari cara menggunakan warna sebagai latar belakang halaman web. Sekarang kita akan mempelajari cara menggunakan gambar sebagai latar belakang. Untuk warna, kita menggunakan atribut BGCOLOR="warna", sedangkan untuk gambar, kita menggunakan atribut BACKGROUND="file_gambar". Kedua atribut ini disisipkan dalam tag BODY. Sangat mudah, bukan? Misalnya kita ingin memanfaatkan gambar email.gif tadi sebagai latarbelakang halaman web maka cukup dengan menyisipkan atribut tersebut ke dalam tag BODY seperti di bawah ini:

<HTML><HEAD><TITLE>Latarbelakang Gambar</TITLE> <BODY BACKGROUND="email.gif"> <H1><FONT COLOR="yellow">Maaf, ini hanya contoh, jadi tulisannya tidak serasi dengan latarbelakangnya</FONT></H1> </BODY></HTML>

Bila dibuka dalam browser akan tampak seperti ini:

Maaf, ini hanya contoh, jadi tulisannya tidak serasi dengan latarbelakangnya

Bagaimana cara mendapatkan file-file image untuk dijadikan background? Mudah saja. Misalnya anda tertarik dengan background halaman web ini yang berlatarbelakang garis kotak-kotak abu-abu. Klik kanan pada sebarang tempat yang tampak background kotak-kotak itu maka akan muncul pop-up menu. Salah satu menu di dalamnya pasti bertuliskan Save Background As.... Pilih (klik) menu ini maka muncullah kotak dialog Save Picture. Di situ anda bisa memilih tempat (folder) dimana file image itu ingin anda simpan (misalnya di folder tempat halaman-halaman web anda). Anda pun bisa mengubah nama dari file image itu. Setelah itu klik tombol Save.
MENGGUNAKAN GAMBAR SEBAGAI LINK
Masih ada satu lagi fungsi gambar. Gambar juga dapat digunakan sebagai link. Pada prinsipnya untuk membuat link gambar sama saja dengan membuat link teks. Kita tinggal mengganti teks yang bertindak sebagai link itu dengan tag penyisipan gambar (IMG SRC). Misalnya kita punya link seperti ini: email kami. Kode HTML dari link ini adalah: 

<A HREF="mailto:adifitrah@maktoob.com">email kami</A>

Untuk membuat link gambar, kita tinggal mengganti tulisan email kami dengan tag penyisip gambar yaitu <IMG SRC="email.gif">. Sehingga lengkapnya tertulis:

<A HREF="mailto:adifitrah@maktoob.com"><IMG SRC="email.gif"></A>

Inilah gambar yang sudah dijadikan link:

Cobalah klik gambar tersebut untuk mengetesnya!

Posted in: TIPS DAN TRIK