untuk menampilkan image pada html, tag yang digunakan adalah tag <img>. Tag <img> hanya membutuhkan atribut saja dan tidak memerlukan tag penutup </img>. format gambar/image adalah jpg, png, dan gif. Atribut yang harus ada adalah atribut src dan alt.
Atribut src adalah source dimana letak gambar atau image yang akan ditampilkan,
maka penulisan tagnya seperti berikut:
Atribut alt
Atribute alt adalah text alternatif yang akan muncul jika gambar tidak bisa ditampilkan dikarenakan koneksi internet yang lemot atau kesalahan pada penulisan source url pada atribut src.
Atribut Width and Height
jika kita tidak mengatur ukuran tinggi dan lebar gambar. maka gambar akan ditampilkan sesuai ukuran sebenarnya (ukuran 100%). untuk mengatur ukuran sesuai keinginan kita. Gunakan atribut width dan height.
<img src="url" alt="text_atribut">Atribut src
Atribut src adalah source dimana letak gambar atau image yang akan ditampilkan,
- jika file gambar/image berada satu directory/folder dengan file html. lihat gambar dibawah.
maka penulisan tagnya seperti berikut:
<img src="file_gambar.png">
- jika file gambar ada di dalam subfolder. lihat gambar dibawah.
maka penulisan tagnya seperti berikut:
<img src="images/file_gambar.png">
- jika file gambar ada di dalam folder lain. lihat gambar dibawah.
maka penulisan tagnya seperti berikut:
<img src="../images/file_gambar.png">
Atribut alt
Atribute alt adalah text alternatif yang akan muncul jika gambar tidak bisa ditampilkan dikarenakan koneksi internet yang lemot atau kesalahan pada penulisan source url pada atribut src.
Atribut Width and Height
jika kita tidak mengatur ukuran tinggi dan lebar gambar. maka gambar akan ditampilkan sesuai ukuran sebenarnya (ukuran 100%). untuk mengatur ukuran sesuai keinginan kita. Gunakan atribut width dan height.
<img src="url" alt="text_atribut" width="150px" height="150px">
* px = pixellalu bagaimana jika source gambar ada di server lain. kita bisa menuliskan alamat penyimpanan gambar tersebut
Thanks for reading menampilkan gambar pada html
Wahh mantap mas, buatin tutorial blogger juga, hehe :)
ReplyDeleteJangan lupa mampir ke Gerobakode Blogspot blog yang membahas solusi dari masalah komputer pada umumnya.
Mohon kritik dan saran, terimakasih :)
Casino | Review by Casino Guru
ReplyDeleteRead Casino Guru's review of 파라오 슬롯 Casino Guru, its players complaints and 업소 추천 other factors. Get free play, bonus codes 셉인소 and promotions. Rating: 2.7 · 먹튀 랭크 Review by Casino Guru 스포츠토토 하는법