Menyisipkan Gambar Kedalam Webpage
Selain teks, halaman web juga dapat memuat gambar/image. Terdapat beberapa jenis format gambar yang dapat digunakan pada halaman web, antara lain :
- GIF (Grafical Interchange Format) (.gif)
- JPEG (Joint Photographic Expert Image) (.jpg)
- PNG( Portable Network Graphic) (.png)
- BMP (Bitmap) (.bmp)
Untuk menyisipkan suatu gambar dalam halaman web dapat dilakukan dengan menggunakan tag <IMG>. Tag tersebut memiliki elemen tambahan sebagai berikut :
| Atribut | Nilai | Keterangan |
|---|---|---|
| src | URL gambar | Diisi dengan alamat yang menunjuk pada sumber file gambar |
| alt | teks | Menentukan tulisan yang akan ditampilkan (biasanya ditempatkan antara tanda petik). Apabila browser tidak dapat menampilkan gambar untuk alasan tertentu |
| align | Center | Justify | Left | ight | Baseline | Top | Bottom | Middle | Top, bottom, middle digunakan untuk menentukan posisi image terhadap teks Left, Right, Center untuk menentukan posisi image pada dokumen |
| width | angka | Digunakan untuk menentukan ukuran lebar gambar |
| height | angka | Digunakan untuk menentukan ukuran tinggi gambar |
| border | angka | Digunakan untuk memberikan bingkai pada gambar |
Terdapat dua cara untuk memuat gambar dalam web dengan menggunakan tag <IMG> :
- Penggunaan Absolute path, biasanya gambar diletakkan pada folder yang sama dengan halaman web, sehingga cukup dipanggil nama filenya saja, atau dapat berupa alamat dari suatu website
Contoh:
<img src="http://www.arijulianto.com/images/logo.png">
<img src="logo.png"> - Penggunaan relative path, yaitu file gambar disimpan pada folder yang terpisah dengan folder halaman webnya
Contoh:
<img src="/images/logo.png">
<img src="../images/logo.png">
Penggunaan gambar dapat diletakkan dibagian mana saja dari suatu dokumen web, yang harus dilakukan hanya memanggil tag <IMG> dimana gambar tersebut akan dimunculkan. Berikut ini adalah contoh penggunaan gambar pada suatu halaman web dengan atribut yang dimilikinya.
Mari kita mulai dengan menyisipkan sebuah gambar. Kita juga harus menyebutkan sumber (nama dan tempat) serta ukurannya.
<IMG SRC="laptop.jpg" WIDTH="300" HEIGHT="265">
Perlu saya tekankan bahwa sumber tersebut tidak hanya menerangkan gambar apa yang kita maksud, tetapi juga menyatakan di mana letaknya. Gambar di atas, "laptop.jpg", menyatakan bahwa browser akan mencari gambar dengan nama laptop.jpg di folder (atau direktori) yang sama dengan dokumen html itu sendiri.
Atribut IMG yang juga perlu anda perhatikan adalah ALT.... ALT adalah teks pengganti gambar jika pengunjung anda memakai browser yang (apapun alasannya) tidak menampilkan gambar. Seseorang mungkin menggunakan browser yang hanya bisa menampilkan teks, barangkali dia mematikan fungsi tampilan gambar supaya lebih cepat atau bisa juga dia menggunakan screen reader (browser yang membacakan isi web page). Dalam kasus ini, atribut ALT bisa sangat penting bagi mereka.
Baiklah, coba lihat titik merah kecil ini => 
Titik merah ini berukuran 1x1. Sangat kecil memang, tapi lihat apa yang bisa saya lakukan dengan itu....
<P ALIGN="center"><IMG SRC="dot.png" WIDTH=500 HEIGHT=1>
<P ALIGN="center"><IMG SRC="dot.png" WIDTH=500 HEIGHT=2>
<P ALIGN="center"><IMG SRC="dot.png" WIDTH=500 HEIGHT=8>
<P ALIGN="center"><IMG SRC="dot.png" WIDTH=2 HEIGHT=200>
Bagaimana?? menarik bukan?? sebuah titik kecil berukuran 1 pixel bisa berubah-ubah menyesuaikan dengan dimensi yang kita minta...
Yah... sampai sekarang dulu deh pembahasan kita kali ini, udah malem banget nih... ngantuk banget saya, oke deh materi tentang pengolahan image akan kita bahas lagi nanti secara lebih mendalam.