Cara Menampilkan Image Pada HTML (tag < img > )

Ilmuit.id – pada saat sembuat sebuah web, kita perlu memperhatikan tampilan dari web kita supaya terlihat lebih menarik. Untuk itu kita dapat menampilkan gambar atau foto pada halaman web kita. Dengan begitu web kita akan terlihat lebih cantik dan enak untuk dilihat. Jadi, pada kesempatan kali ini kita akan membahas mengenai, bagaimana cara untuk menampilkan sebuah image (gambar / foto) pada halamn web.

Cara Menampilkan Image Pada HTML

Image pada HTML <img>

Untuk menampilkan suatu image pada suatu halaman web, kita membutuhkan tag <img> pada HTML. Tag <img> merupakan elemen kosong yang mana, tidak perlu untuk menutupnya (</img>). Supaya lebih jelas, perhatian contoh berikut ini.

Sebelum mencoba kode di atas, anda harus menyiapkan sebuah gambar yang tempatnya sama dengan tempat dimana anda menyimpan file HTML anda. 

Pada contoh di atas, saya masih menggunakan folder yang saya buat pada awal pembahasan kita (nama foldernya : BELAJAR HTML), di dalam folder tersebut ada file html saya (nama filenya : index.html) dan juga sebuah gambar dengan nama : koala.jpg. 

Seperti yang saya katakan sebelumnya, tag <img> merupakan elemen kosong yang mana tidak menggunakan penutup. Pada contoh di atas anda juga dapat menemukan atribut src, alt, style. 

Dua dari Ketiga atribut tersebut telah kita pelajari pada pembahasan – pembahasan sebelumnya. 

Baca Juga : Cara membuat Link pada HTML (tag a)

Sama seperti pada saat membuat link, tag <a> mempunyai atribut src yang berfungsi sebagai tempat untuk menampung alamat “halaman” yang ingin kita tuju, pada tag <img> src berfungsi sebagai penghubung antara halaman kita dengan tempat gambar berada. 

Jadi, secara teknis gambar tidak dimasukan kedalam halaman web, tetapi gambar-lah yang ditautkan (di hibungkan) dengan halaman web. Tag <img> membuat ruang penahanan untuk gambar yang di referensikan.

Oleh sebab itu, selalu perhatikan penulisan alamat tempat gambar berada, dan jangan lupa juga untuk menuliskan ektensinya (jpg, png, gif, dll). Jika suatu saat anda menuliskan alamat gambar yang salah, pada saat itulah atribut alt berguna.

Pada tag <img> atribut alt berguna untuk memberitahukan informasi tentang gambar jika suatu masalah terjadi pada saat browser memuat gambar yang akan di tampilkan pada halaman web.

Masalah yang terjadi biasanya kesalahan pada penulisan pada nilai atribut src, dan bisa juga akibat koneksi jaringan internet yang lambat. Supaya lebih jelas perhatikan contoh berikut.

Seperti yang anda lihat pada gambar di atas, teks “gambar koala” merupakan nilai dari atribut alt. 

Atribut alt di atas muncul karena kesalahan penulisan pada nilai atribut src (saya sengaja menuliskan alamat yang salah untuk memperlihatkan fungsi atribut alt). 

Dengan ada-nya atribut alt, akan sangat membantu user saat memiliki masalah saat pada saat browser mereka mengalami masalah pada saat memuat gambar. 

Baca Juga : Cara Membuat List Item Pada HTML

Ukuran gambar pada HTML (width dan height)

Dalam menentukan ukuran gambar yang akan kita tampillkan pada halaman web terdapat dua cara, yaitu dengan menggunakan aribut width (menentukan lebar gambar) dan atribut height (menentukan tinggi gambar) 

Dan cara lain-nya adalah dengan menggunakan inline css (sama seperti pada saat kita menggunakan atribut style), supaya lebih jelas perhatikan contoh berikut ini.

Pertama-tama abaikan kode yang tidak anda mengerti pada kode di atas, anda hanya perlu fokus pada tag <img> serta atribut yang digunakan untuk menentukan ukuran gambar. 

Pada tag <img> pertama di baris 14, saya menentukan ukuran dari gambar-nya menggunakan inline css (menggunakan atribut style, sama saja). 

Kemudian pada tag <img> ke dua saya menentukan ukuran dari gambar-nya menggunakan atribut width dan height. Anda dapat melihat perbedaan-nya pada saat saya menjalankan kode tersebut pada browser saya. 

Gambar yang ukuran-nya di tentukan menggunakan inline css berukuran tetap sesuai dengan yang saya tentukan pada text editor (width = 200px, height = 200px). 

Namur gambar yang ukuran-nya ditentukan menggunakan atribut width dan height tidak mempertahankan ukuran-nya. Penyebab dari hal tersebut adalah, karena ada internal css (cara menambakan css pada HTML menggunakan tag <style>) pada baris ke 6 sampai baris 10. 

Dengan menambahkan internal css pada HTML yang mana css di khususkan dalam mengubah tampilan web, atribut width dan height yang telah kita tambahkan pada tag <img> (di baris 15) akan tertimpa oleh css tersebut, 

Sehingga width (lebar) dari gambar, akan mengikuti internal css yaitu : “width: 100%” (baris ke 8). width 100% artinya lebar dari gambar 100% terhadap pembungkus (parent) dari tag <img> . 

Saya menggunakan istilah pembungkus supaya anda dapat memahaminya. Pembungkus dari tag <img> yaitu tag <body> yang mana mencangkup seluruh lebar browser anda.

Hal yang terjadi pada tag <img> ke dua, tidak terjadi pada tag <img> yang pertama sebab, tag <img> yang pertama menggunakan inline css dalam menentukan ukuran-nya. Inline css memiliki prioritas lebih tinggi dari pada internal css, 

Sehingga style (ukuran gambar) yang di gunakan akan mengikuti ukuran yang telah kita tentukan pada inline css. Jadi, di sarankan untuk menggunakan css dalam menentukan ukuran dari gambar (baik inline, internal, maupun eksternal css).

Menambahkan Gambar Yang Berada di Dalam Sebuah Folder

Jika anda ingin menambahan gambar yang berada di dalam sebuah folder, anda harus menuliskan juga nama folder tersebut sebagai nilai pada atribut src. Supaya lebih jelas, perhatikan contoh berikut.

Dengan menggunakan nama folder seperti pada gambar di atas, 

Anda dapat mennambahkan gambar yang berada di dalam sebuah folder pada folder yang sama dengan file HTML anda (pada contoh saya, folder gambar saya(folder bernama : gambar) dan index.html berada pada folder : BELAJAR HTML). 

Anda juga dapat menambahkan gambar yang berada pada sebuah folder di luar folder tempat file HTML anda berada, perhatikan kode berikut.

Seperti yang anda lihat pada kode di atas, untuk menambahkan sebuah gambar yang berada 1 folder di luar folder tempat file HTML berada (pada contoh di atas, folder gambar berada di luar folder : BELAJAR HTML) kita menambahkan slash “/” sebelum nama folder tempat gambar (tulips.jpg) berada. 

Baca Juga : Cara Membuat Judul dan Paragraf di HTML ( tag h1 dan tag p )

Menambahkan Gambar Yang Berada Pada Sebuah Website

Anda juga dapat menambahkan sebuah gambar yang berada pada sebuah halaman website. Gambar yang berada pada website tersebut di simpan pada sebuah server. 

Seperti yang kita bahas pada pembahasan di atas, kita tidak benar - benar menambahkan gambar pada sebuah halaman web, melainkan gambar ditautkan pada halaman web.

Pada contoh di atas, saya menautkan gambar yang saya ambil dari halamn web 

https://jenmulligandesign.com/30-awesome-websites-totally-free-stock-photos/ . 

Tetapi alamat yang kita butuhkan untuk mengambil gambar dari web lain, bukan alamat website tersebut melainkan alamat dari gambar yang ada pada halaman website tersebutt. 

Jadi untuk mengambil gambar pada halaman web tadi, anda cukup klik kanan pada gambar yang anda inginkan, kemudian pilih opsi “open image in new tab”. Setelah itu ambil url gambar tersebut 

untuk digunakan sebagai nilai dari src pada tag <img> (pada contoh di atas, alamat dari gambar-nya adalah : https://jenmulligandesign.com/wp-content/uploads/2017/04/pexels-beach-tropical-scene-free-stock-photo.jpg ).

Menambahkan Gambar Animasi Pada HTML

Image Source  : giphy.com

Selain gambar biasa, kita juga dapat menambahkan gambar animasi pada halaman web. Pada contoh di atas saya menambahkan gambar animasi (capatin.gif) dengan cara sama seperti pada saat menambahkan gambar biasa, hanya saja kali ini memiliki ekstensi “gif”. 

Gambar Sebagai Link Pada HTML

Sebenanya saya telah membahas ini pada artikel sebelum-nya. Jadi, kali ini saya akan memberi contoh sekilas mengenai cara membuat supaya sebuah gambar berfungsi sebagai link, perhatikan kode berikut.

Untuk membuat sebuah gambar supaya dapat menjadi sebuah link, kita harus membungkusnya meggunakan tag <a> (anchor). Pada kode di atas nilai dari atribut src pada tag <a> yaitu : 

https://www.ilmuit.id/2020/11/cara-membuat-link-pada-html-tag-a.html yang mana merupakan alamat yang akan kita tuju setelah kita mengklik gambar tersebut. 

Di dalam tag <a> terdapat tag <img > dengan nilai atribut src yaitu : “koala.jpg” yang mana merupakan alamat gambar yang kita gunakan sebagai tempat kita menaruh sebuah link, seakan – akan gambar tersebut sebuah link. 

Gambar Melayang (Image Float)

Untuk membuat sebuah gambar dapat melayang anda memerlukan css, perhatikan contoh berikut.

Kode pada contoh di atas terlihat panjang karena saya membuat sebuah paragraf yang sedikit panjang.

Tapi yang perlu anda perhatikan hanyalah tag <img> yang berapa di dalam tag <p>. pada tag <img> tersebut saya menambahkan inline css seperti berikut (style=”width: 50px; height: 50px; float: left”). 

Anda pasti mengerti arti dari kode css tersebut. Tapi ada yang baru yaitu “float: left”, arti dari kode ini adalah float (mengambang) ke left (kiri),

Jadi gambar koala pada contoh di atas akan mengambang ke kiri. Begitu juga dengan paragraf di bawah-nya, tetapi gambar pada paragraf di bawah mengambang ke kanan, 

karena saya membuat-nya melayang ke kanan (float: right).

Sekian pembahasan kita mengenai cara menampilkan gambar pada halaman web dengan menggunakan tag <img>, artikel ini mungkin sedikit berantakan tetapi saya berharap semoga isi artikel ini dapat bermanfaat untuk anda. Mohon maaf jika ada salah penulisan maupun salah pengertian, sampai jumpa pada pembahasan berikutnya. - ilmuit.id

Refrence : https://www.w3schools.com

Writer : Riski Rahmat H