HTML Image

Untuk menampilkan gambar (image) pada html kita dapat menggunakan tag <img>.
Sintaks yang digunakan:

<img src="url" alt="teks deskripsi"> 

Tag ini termasuk salah satu empty tag, yaitu tag yang hanya memuat atribut dan tanpa end tag.
Atribut scr merupakan url atau lokasi tempat file gambar, sementara alt merupakan teks yang dapat diisi dengan deskripsi yang mewakili gambar tersebut.

Atribut alt berfungsi saat lokasi gambar tidak dapat ditemukan atau gagal dimuat, maka nilai yang ada di atribut ini yang akan ditampilkan. Atribut alt juga bisa digunakan untuk screen reader, yaitu fasilitas untuk mengubah teks menjadi suara yang biasa digunakan oleh pengguna tuna netra.
Contoh: file sample2.png sebenarnya tidak ada
<img src="sample.png" alt="Contoh Gambar" />
<img src="sample2.png" alt="Contoh Gambar" />

Ukuran Gambar
Ukuran gambar dapat diatur dengan atribut width dan height. Selain itu juga dapat diatur dengan style css.
<img src="sample.png" alt="Contoh Gambar" style="width:120px;height:120px">
<img src="sample.png" alt="Contoh Gambar" width="120" height="120">

Jadi kira-kira buat nentuin ukuran lebih baik pakai atribut width height atau style?
Sebenarnya dua-dua nya support dan valid sampai HTML5. Tapi untuk lebih aman kita bisa menggunakan style untuk mencegah ukuran gambar terubah oleh ukuran default css.

Lokasi Sumber Gambar
Seperti yang sudah dibahas sebelum nya sumber gambar ditulis pada atribut src. Untuk penulisan sumber gambar yang berada dalam satu folder dengan file html, kita tinggal menuliskan nama file gambar tersebut.
<img src="sample.png" alt="Contoh Gambar" />

Untuk gambar yang berasal dari folder di bawah lokasi file html (sub folder), kita perlu menambahkan nama folder.
<img src="images/sample.png" alt="Contoh Gambar" />

Dan untuk gambar yang berasal dari luar folder atau diatas folder tempat file html berada kita bisa menggunakan dua titik seperti contoh berikut.
<img src="../sample.png" alt="Contoh Gambar" />

Kita juga bisa menampilkan gambar dari situs/server lain dengan menambahkan url gambar tersebut.
<img src="http://cctvarea.com/images/network.png" alt="IP Camera" />

Mengatur Posisi Gambar terhadap Teks
Mungkin kita pernah melihat posisi gambar di sebelah kanan atau kiri teks. Untuk membuatnya dalam sebuah halaman web, kita bisa menggunakan properti float dalam atribut style.
Posisi gambar sebelah kiri:
<p>
  <img src="img.jpg" alt="sawah" style="float:left;width:60px;height:60px"/>
  Contoh sebuah paragraf dengan gambar yang ditampilkan di sebelah kiri text.
</p> 

Posisi gambar sebelah kanan:
<p>
  <img src="img.jpg" alt="sawah" style="float:right;width:60px;height:60px"/>
  Contoh sebuah paragraf dengan gambar yang ditampilkan di sebelah kiri text.
</p>

Menggunakan Gambar sebagai Tombol Link
Tidak jarang website yang menggunakan gambar sebagai tombol link. Caranya yaitu dengan meletakan gambar diatara tag link <a> seperti contoh berikut:

<a href="index.html">
  <img src="home.png" alt="Home" style="width:42px;height:42px;border:0">
</a>

Click here if you like this article.