Pemrograman HTML: Image

Memasang gambar pada suatu web akan memberikan nilai tersendiri dan akan memperjelas apa yang akan disampaikan dalam web.

Pemasangan gambar (image) tentunya akan menambahkan nilai artistik tersendiri dan membuat konsentrasi pengguna web akan terarah pada gambar. Hal ini menjadi satu hal yang perlu disadari dalam pegembangan web, karena bisa dikatakan gambar yang terpasang akan mewakili deskripsi yang ada. Dengan melihat gambar, user akan lebih cepat melihat maksud suatu web walaupun belum membaca secara detail diskripsi gambar tersebut.

Tag dasar yang digunakan untuk memasang gambar adalah <img src="alamat_gambar">. Alamat gambar merupakan lokasi tempat penyimpanan image, bisa dituliskan secara singkat maupun secara lengkap. Beberapa kemungkinan pemasangan gambar dari beberapa lokasi antara lain:

1. Gambar berada satu folder dengan halaman web.
   Contoh:
   Dengan kode yang digunakan yaitu:
   <img src="link.jpg">.
   Untuk memasang image dengan cara ini merupakan cara yang termudah karena kita tidak perlu untuk memilih folder dimana image disimpan.
2. Image dan halaman web berbeda folder.
   Maksudnya adalah antara folder yang berisi halaman web dengan folder yang berisi gambar ditempatkan terpisah. Jika memasang gambar dalam model ini kita hanyalah perlu untuk menambahkan nama folder tempat menyimpan gambar dengan menggunakan tanda pemisah antara folder dengan file berupa tanda slash (/). Contoh penulisan:
   <img src="images/mailcon.jpg">
3. Memasang gambar dari alamat web lain.
   Jika kita akan memasangkan gambar dari web lain, yang perlu diketahui adalah alamat image tersebut berada dimana, jika sudah diketahui tinggal masukkan alamat tersebut pada src. Contoh:
   
   <img src="http://photos-h.ak.fbcdn.net/hphotos-ak-snc3/hs072.snc3/13940_1153104348897_1266315045_30385017_8139843_n.jpg">

Image Properties

Dalam pemasangan image, selain kita bisa menampilkan apa adanya seperti contoh, kita juga bisa melakukan beberapa setingan yang akan membuat tampilan image lebih nyaman dilihat. Setingan-setingan tersebut antara lain:

1. alt="deskripsi", berfungsi untuk menuliskan deskripsi gambar, jika gambar mengalami kegagalan load, maka deskripsi akan ditampilkan. Pada penulisan kode XHTML, tag alt ini wajib disertakan.
2. align="posisi align", tag ini digunakan untuk mengatur posisi gambar/image terhadap text. Posisi align yang ada yaitu:
   

   Tag	Keterangan.
   absbottom	Baris pertama setelah image berada disamping gambar bagian bawah.
   absmiddle	Baris pertama setelah image berada disamping gambar bagian tengah.
   baseline	Hasil sama dengan absbottom.
   bottom	Hasil sama dengan absbottom.
   left	Text akan berada disebelah kanan gambar.
   middle	Hasil sama dengan absmiddle.
   right	Text akan berada disebelah kiri gambar.
   texttop	Baris pertama setelah image akan berada pada posisi atas, baris berikutnya berada dibawah image.
   top	Hasil sama dengan texttop.

3. border="value", digunakan untuk memberikan garis tepi pada image, nilai yang dimasukkan berupa angka.
4. height="value", jika gambar tidak diinginkan dalam ukuran yang sebenarnya, maka ukuran gambar bisa dirubah, height digunakan untuk merubah tinggi. Value bisa diisikan dengan angka atau dengan memasukkan nilai dalam persen dari ukuran gambar.
5. width="value", memiliki funsi sama dengan height, hanya width untuk menentukan lebar. Catatan penggunaan widht dan height secara bersamaan akan menentukan ukuran gambar seperti pada value, namun jika digunakan salah satu maka akan berfungsi seperti penggunaan skala.

Image sebagai simbol link

Gambar selain bisa digunakan sebagai alat mempercantik halaman, juga bisa digunakan untuk memasang alamat link ke suatu alamat tertentu. Dengan meletakkan tag gambar diantara tag link, bentuk umum.
<a href="alamat_tujuan_link"><img src="alamat_image"></a>

catatan: penggunaan tag img pada mode XHTML harus disertai atribut alt dan diakhiri dengan tanda slash (/) contoh: <img src="alamat_image" alt="deskripsi" />