Bab 3 Menempatkan gambar
Sebuah gambar dapat berbicara lebih banyak daripada seribu kata ,
begitu kata orang . Sejauh ini , homepage Anda hanya berisi teks
belaka , tanpa gambar . Alangkah bijaksananya bila Anda sekarang
mulai menempatkan gambar ke homepage anda. dokumen anda tidak akan
terlalu 'membosankan' seperti sekarang.
World Wide Web sendiri telah berkembang demikian pesatnya sebagai
sistem pendistribusian informasi , lebih banyak disebabkan oleh
kemampuanya untuk membawa informasi dalam beragam media , yang
kemudian populer dengan istilah 'multimedia' , pembuat dokumen web
dapat mempergunakan HTML untuk menyajikan informasi gambar di dalam
dokumen dengan mudah.
Teoritis World Wide Web mendukung semua format data grafik digital yang
dipergunakan secara luas saat ini. Meskipun demikian, jumlah jenis format
file grafik yang didukung sebagai standar World Wide Web dibatasi dalam
jenis-jenis yang memang populer dan handal.
Format Gambar
Format gambar yang terkenal adalah gif dan jpg . Keduanya banyak
sekali dipergunakan dalam dokumen - dokumen HTML sehingga sering
disebut sebagai format standar untuk grafik. Semua jenis program browser
yang ada saat ini dijamin dapat langsung menampilkan gif tanpa bantuan
program eksternal. Format JPG. di lain pihak tidak didukung oleh semua
program browser , namun pada umumnya semua program browser
akhir telah dapat menampilkan format grafik ini. Netscape Navigator dan
Microsoft Internet Explorer semuanya dapat menampilkan GIF dan JPG tanpa
masalah.
Adapun perbedaan-perbedaan antara kedua format file grafik tersebut dapat
dijelaskan secara singkat oleh tabel di bawah ini;
Perbedaan GIF JPG
tipe gambar bitmap bitmap
banyak warna yang 256 warna 16,7 juta warna
bisa ditampilkan
kompresi LZW JPEG
dibuat oleh Compuserve, Inc Joint Photographic
Experts Group
<tabel perbedaan JPG dan GIF>
Format file mana yang sebaiknya Anda pergunakan ? Pertanyaan tersebut
barangkali dapat dijawab oleh perbandingan keuntungan dan kelemahan
antara JPG dan GIF berikut.
*GIF sangat luas dipergunakan, proses dekompresinya ( proses pemekaran
file dari bentuk 'padat' menjadi bentuk yang dapat dibaca ) cepat, dan
dapat dibuat menjadi animasi sederhana.
*JPG memiliki faktor kompresi ( perbandingan antara ukuran file asli
dengan ukuran file setelah melalui proses kompresi) yang tinggi sehingga
ukuran file dapat ditekan menjadi jauh lebih kecil, sehingga, dalam
giliranya, mempercepat proses transfer dari server ke client/browser.
JPG juga mendukung " true color " , yaitu kemampuan menampilkan
gambar sampai 16,7 juta warna (24-bit) sehingga cocok untuk menyimpan
gambar dengan kualitas fotografi.
*GIF hanya memiliki palet warna yang terbatas, sehingga harus
mempergunakan dithering (membuat warna dengan pola-pola titik di atas
warna lain) untuk menampilkan warna di luar palet 256 warna. Selain itu,
ukuran file gif lebih besar daripada JPG sehingga memperlambat proses
transfer dari server ke browser
* JPEG di lain pihak membutuhkan waktu yang lebih panjang dalam proses
dekompresinya. sehingga gambar membutuhkan waktu yang lebih lama
sebelum dapat dimunculkan di layar. JPG juga mempergunakan teknis
kompresi yang bersifat mengurangi kualitas gambar bilamana di set pada
tingkat kompresi yang tinggi.
Secara umum Anda sebaiknya mempergunakan GIF bila anda tidak
berencana menaruh terlalu banyak gambar di dalam dokumen Anda. JPG baik
dipergunakan bila anda berkeinginan untuk meletakkan gambar berupa foto
yang memiliki lebih dari 256 warna.
Untuk menciptakan gambar, Anda dapat mempergunakan program-program
aplikaasi grafis yang saat ini banyak beredar, misalnya Adobe Photoshop,
CoreIDRAW dan lain-lain. untuk gambar-gambar yang berupa foto, anda
dapat mempergunakan alat scanner, yang berfungsi mengubah gambar/foto
menjadi file grafik digital.
Sayangnya kebanyakan dari kita memang tidak berbakat menjadi seniman
grafis, apalagi mempergunakan komputer. Apabila anda termasuk orang yang
tidak pandai menggambar, di Internet sebenarnya terdapat demikian banyak
sumber daya yang sekiranya dapat anda manfaatkan. Gambar-gambar yang
telah siap pakai dapat anda cari di berbagai web site.Silakan lihat bab xx
untuk daftar site-site yang membawa materi-materi menarik dan dapat
menolong anda menciptakan gambar untuk homepage anda.
Menempatkan Gambar Anda
Baiklah, mari kita mulai mempelajari cara menempatkan gambar pada
dokumen web.
Tentukan dahulu gambar apa yang hendak anda letakkan di dokumen anda.
untuk keperluar percobaan saja, Anda dapat membuat file gambar seperti
contoh di gambar 3.3. Gambar ini akan kita pergunakan sebagai pengganti
tulisan judul utama dokumen anda.
Contoh seperti gambar 3.3. dapat dibuat dengan program aplikasi grafis apa
saja yang anda kuasai. Simpanlah file gambar tersebut dalam format GIF.
Untuk mudahnya, namailah file gambar anda dengan JUDUL.GIF.
Informasi lebih jauh tentang cara membuat gambar adalah di luar cakupan
buku ini, Anda dipersilahkan mencari acuan dari buku-buku lain yang
berkaitan dengan penggunaan program-program aplikasi grafis ( Adobe
Photoshop atau CoreIDRAW bukanlah pilihan yang jelek untuk membuat
gambar dengan komputer).
HTML menyediakan suatu mekanisme sederhana untuk memadukan file
gambar dengan dokumen Web anda. Instruksi <IMG> adalah sebuah open
tag, yang artinya tidak memerlukan tanda penutup. Adapun cara penulisan
perintah <IMG> adalah sebagai berikut;
<IMG SRC="/URL/nama_file">
Instruksi<IMG>selalu diikuti dengan atribut SRC (dari source=sumber)
yang menunjukkan lokasi dan nama file grafik yang ingin kita tampilkan.
URL (universal resource locator) adalah alamat absolut dari file grafik
tersebut,misalnya http://www.diosoft.com. Alamat absolut ini dapat mengacu
ke sembarang tempat di Internet, baik itu di web server yang sama atau
berlainan. Ingat, pergunakanlah tanda petik".
Sekarang bukalah text editor anda dan suntinglah dokumen HTML yang
telah anda buat dalam bab sebelumnya. Sisipkan baris seperti di bawah ini
untuk memasukkan file gambar anda ke dalam dokumen. Kita anggap nama
file gambar anda adalah JUDUL.GIF.
Perintah yang dipakai untuk menampilkan file JUDUL.GIF menjadi;
<IMG SRC="judul.gif">
Lihatlah contoh gambar 3.4. Setelah itu simpan file HTML anda ke disk.
Bukalah program browser anda, kemudian pilih FILE dan OPEN FILE
masukkan nama file HTML anda, dan tekan ENTER.
Bilamana anda melihat gambar anda, berarti semua beres. Namun ada
kemungkinan anda tidak melihat gambar yang diinginkan. Hal ini lebih
mungkin disebabkan karena file gambar tidak berada di lokasi yang sama
dengan file dokumen HTML anda. Pindahkanlah file gambar anda ke
dalam direktori yang sama dengan dokumen HTML terlebih dahulu.
Anda dapat pula meletakkan gambar anda di dalam container tag
<CENTER> seperti yang kita pelajari pada Bab 2 sehingga gambar akan
ditampilkan tepat di tengah - tengah halaman dokumen anda.
Jangan lupa mengakhiri perintah dengan tag <CENTER>.
Nah. Anda telah berhasil memasukkan gambar ke dalam dokumen anda.
Sekarang cobalah membuat file gambar lain, yang berformat JPG.
Mungkin akan menarik bila anda meletakkan foto diri anda pada homepage
anda. Anda dapat memasukkan foto-foto atau gambar - gambar kegemaran
anda dengan alat scanner. Lakukanlah percobaan dengan bermacam-macam
file gambar dengan format yang berbeda-beda.
Program browser, ada pula yang tidak dapat menampilkan gambar yang telah
kita letakkan di dalam dokumen HTML. Sebagai misal program browser
WWW berbasis-teks Lynx yang bekerja di bawah sistem operasi UNIX, sama
sekali tidak dapat menampilkan gambar (!). Ada pula kalanya suatu program
browser tidak dapat membaca format file grafik tertentu yang kita
kehendaki.
Perlu anda ketahui bahwa pengguna yang mempergunakan browser tanpa
gambar macam itu di internet masih cukup banyak, dan mereka tidak akan
pernah dapat melihat gambar yang anda pampangkan di homepage anda.
Karena tujuan anda membuat homepage adalah agar homepage anda
tersebut dilihat oleh orang, maka alangkah baiknya bila kita memberitahu
para pengguna browser tanpa-gambar itu bahwa homepage anda memiliki
para pengguna browser tanpa - gambar itu bahwa homepage anda memiliki
gambar yang, dengan sangat menyesal, tidak dapat ditampilkan kepada
mereka.
Untuk itulah pernyataan ALT (dari alternative) disediakan. ALT akan
menampilkan serangkaian teks di tempat suatu gambar seharusnya muncul.
Teks yang ditampilkan dapat berupa seperti misalnya "maaf, browser Anda
tidak dapat menampilkan gambar" atau "file ini tidak dapat ditampilkan".
Tidak jarang pula seorang pengguna WWW sengaja menon - aktifkan
kemampuan browsernya untuk menampilkan gambar dari suatu site web
dengan alasan kecepatan ( banyak yang merasa gambar di WWW
hanyalah membuang-buang waktu dan tidak terlalu berguna sehingga harus
disingkirkan). Untuk melayani orang-orang macam ini, teks ALT anda
dapat juga berisi informasi mengenai gambar yang ingin anda tampilkan,
misalnya "ini adalah foto saya". Informasi yang berguna lain misalnya nama
file, ukuran dan tanggal pembuatanya. Menampilkan teks ALT memang
tidaklah suatu yang sangat penting, namun merupakan sebuah kebiasaan
yang baik.
Atribut tambahan untuk instruksi <IMG> adalah ALIGN. Atribut ini
mengendalikan letak (alignment) teks yang berada di baris yang sama dengan
grafik terhadap sisi vertikal gambar. Atribut ALIGN ditulis dengan cara
sebagai berikut;
Pernyataan TOP setelah ALIGN memerintahkan browser untuk meluruskan
teks dengan bagian paling atas gambar. Anda dapat pula mengganti TOP
dengan MIDDLE atau BOTTOM, dengan MIDDLE untuk meluruskan teks
dengan tengah-tengah gambar, dan BOTTOM untuk meluruskan teks dengan
bagian bawah gambar.
Gambar juga dapat ditempatkan di pinggir kiri maupun kanan dari halaman
dokumen web kita. Perintahnya adalah ALIGN=LEFT dan ALIGN=RIGHT.
Atribut Gambar
Ketika suatu dokumen Web sedang diambil dari server oleh sebuah browser,
browser harus menunggu sampai file gambar telah tiba, dan kemudian
menghitung ukuranya sebelum browser dapat menampilkan keseluruhan
dokumen. Ini memperlambat waktu akses.
Netscapelah yang pertamakali memperkenalkan atribut instruksi <IMG>
non - standar yang dipergunakan untuk menghindari waktu tunggu yang
diakibatkan oleh proses diatas. Sebelum file grafiknya sendiri dikirimkan,
informasi mengenai ukuran gambar dapat dikirimkan ke browser Netscape
agar kalkulasi dapat dilakukan segera. Ini dilakukan dengan cara
menambahkan atribut WIDTH dan HEIGHT.
Perlu diingat bahwa WIDTH dan HEIGHT tidak mengubah ukuran
sebenarnya dari gambar, dan juga tidak mengubah ukuran file gambar. Jadi
memperkecil ukuran dengan WIDTH dan HEIGHT tidak akan
mempercepat proses pemunculanya.
Atribut lainya adalah VSPACE dan HSPACE , yang menentukan jarak di
atas dan di bawah (VSPACE) atau di kiri dan di kanan (HSPACE) dari
sebuah gambar. Penggunaanya misalnya seperti contoh di bawah ini ;
<IMG SRC="gambar.jpg" HSPACE=20>
Ini memberi jarak sebesar 20 pixel antara gambar dengan teks. HSPACE
dan VSPACE ini bermanfaat untuk mencegah gambar agar tidak
"menempel" pada teks.
Atribut yang terakhir adalah BORDER. BORDER memungkinkan penulis
dokumen web untuk menentukan garis pinggir di sekitar gambar. Bila
BORDER di set sama dengan ) , garis pinggir akan dihilangkan dari
dokumen . Perintahnya menjadi <IMG SRC=nama_file BORDER=n> , di
mana n adalah nilai ketebalan garis pinggir dalam pixel .
<IMG SRC="gambar.jpg" BORDER=0>
Garis pinggir di sekitar suatu gambar biasanya diperlukan untuk menandai
bahwa gambar tersebut merupakan link ke dokumen lain (untuk informasi
lebih jelas mengenai link. lihat bab berikutnya).
Format GIF89A
Ada format gambar GIF khusus yang memungkinkan kita membuat gambar
dengan latar belakang yang transparan (tembus pandang) Berbeda dengan
format GIF yang biasa, format GIF ini (dikenal dengan format GIF89A) dapat
diletakkan di atas gambar lain tanpa menutupinya, membuat gambar GIF ini
seolah "melayang" di atas latar belakang.
Semua format file gambar dapat saja diubah menjadi format GIF 89A. Ada
banyak program aplikasi grafik yang dapat melakukan pengubahan/konversi
ini, antara lain Corel PhotoPaint, Paintshop Pro, Adobe Photoshop dan
sebagainya.
Intinya, kita memilih satu warna dari warna yang ada pada gambar yang kita
buat sebagai warna "transparan". Dalam contoh gambar anjing di atas, kita
memilih warna putih sebagai warna "transparan", dan hasilnya semua warna
putih dalam gambar akan dianggap "lenyap".
Dalam Bab ini anda telah mempelajari cara memasang gambar pada dokumen
HTML. Bab berikutnya akan mempelajari cara membuat hypertext link. Bacalah
terus.
(kembali ke katalog)
|