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
gambargambar 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>
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 saya. Kode HTML dari link ini adalah:
<A
HREF="mailto:muthohir@stekom.ac.id">email saya</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:
muthohir@stekom.ac.id"><IMG SRC="email.gif"></A>
Tidak ada komentar:
Posting Komentar