Memasukkan Gambar Ke Dalam Web Menggunakan HTML

Memasukkan Gambar Ke Dalam Web Menggunakan HTML

Mungkin bagi anda yang masih baru dengan HTML masih bingung bagaimana cara memasukkan gambar ke dalam web yang sudah anda buat. Padahal caranya sangatlah mudah. Hanya dengan menggunakan tag <img> saja. Langsung saja kalau begitu.

-----------------mulai kode html----------------------

<img src="gambar.jpg" width="100" height="50" alt="gambar pemandangan" hspace="2" vspace="3">

-----------------akhir kode html----------------------

Keterangan:

++ tag <img> dapat diisi beberapa atribut. Yang wajib ada adalah atribut 'src' sedangkan atribut lain adalah atribut pelengkap saja. Masih banyak atribut lain yang bisa digunakan pada tag 'img', tapi saya hanya akan menjelaskan yang ada di contoh saja.

1. Atribut 'src' diatas diisi dengan url lengkap lokasi gambar yang ingin anda masukkan. Misal folder web anda bernama 'web_saya', di dalamnya terdapat file 'index.html' dimana file 'index.html' tersebut ingin anda masukkan gambar. Gambar yang ingin anda gunakan juga berada pada folder yang sama. Misal nama gambar anda adalah 'gambar1.jpg'. Jadi nilai atribut 'src' itu menjadi gambar1.jpg

Kode nya seperti ini:

-----------------mulai kode html----------------------

<img src="gambar1.jpg">

-----------------akhir kode html----------------------

Jika lokasi gambar tidak sama dengan file HTML yang ingin disisipkan gambar bagaimana? Misal didalam folder 'web_saya' anda membuat folder lagi dengan nama 'picture' dan gambarnya (gambar2.gif) anda letakkan di folder tersebut. Maka ubah nilai atribut src menjadi picture/gambar2.gif

Kode nya seperti ini:

-----------------mulai kode html----------------------

<img src="picture/gambar2.gif">

-----------------akhir kode html----------------------

Jika gambar nya ada di situs lain kode nya seperti ini:

-----------------mulai kode html----------------------

<img src="http://www.situslain.com/gambar2.gif">

-----------------akhir kode html----------------------

2. Atribut 'width' untuk menentukan lebar gambar. Diisi dengan angka positif. Atribut ini tidak harus ada.
3. Atribut 'height' untuk menentukan tinggi gambar. Diisi dengan angka positif. Atribut ini tidak harus ada.
4. Atribut 'alt' untuk menuliskan teks jika gambar tidak bisa ditampilkan. Atribut ini tidak harus ada.
5. Atribut 'hspace' untuk mengatur jarak kiri dan kanan gambar dengan objek lain. Diisi dengan angka positif. Atribut ini tidak harus ada.
6. Atribut 'vspace' untuk mengatur jarak atas dan bawah gambar dengan objek lain. Diisi dengan angka positif. Atribut ini tidak harus ada.

Oke sekian untuk artikel ini kali ini, tolong komen ya kalau udah baca artikel ini.