Cara Menambah Gambar dalam HTML - HTML (Hypertext Markup Language) adalah bahasa markup yang digunakan untuk membuat halaman web.
Dalam HTML, gambar merupakan salah satu komponen penting yang bisa mempercantik dan menambah informasi pada halaman web.
Banyak cara yang bisa dilakukan untuk menambah gambar dalam HTML, mulai dari menambahkan gambar melalui tag <img> hingga menggunakan CSS untuk mengatur posisi dan ukuran gambar.
Dalam artikel ini, akan dibahas tuntas cara menambah gambar dalam HTML dengan mudah dan jelas, sehingga bisa membantu pemula dalam memahami bagaimana menambah gambar pada halaman web mereka.
Cara Menambah Gambar dalam HTML
Untuk menambahkan gambar dalam HTML, kita dapat menggunakan tag <img>. Tag ini digunakan untuk menampilkan gambar di halaman web.
Berikut adalah contoh penggunaan tag <img> :
Di mana "src" adalah atribut yang digunakan untuk menentukan lokasi gambar, dan "alt" adalah atribut yang digunakan untuk memberikan deskripsi gambar.
Contoh penggunaan tag <img> :
Anda juga dapat menentukan ukuran gambar dengan menambahkan atribut "width" dan "height" pada tag <img>.
Jika anda menggunakan gambar dari internet, anda harus memasukkan url gambar yang benar, sebagai contoh :
Itu adalah cara sederhana untuk menambahkan gambar di HTML, semoga membantu.
Berbagai Attribut Tag <img>
Selain atribut "src" dan "alt" yang telah disebutkan sebelumnya, tag <img> juga memiliki beberapa atribut lain yang dapat digunakan untuk menyesuaikan tampilan gambar.
Berikut adalah beberapa atribut yang sering digunakan:
"width" dan "height" : digunakan untuk menentukan ukuran gambar dalam pixel.
"style" : digunakan untuk menentukan gaya CSS yang akan diterapkan pada gambar.
"class" : digunakan untuk menentukan kelas CSS yang akan diterapkan pada gambar.
"id" : digunakan untuk menentukan ID unik dari gambar, yang dapat digunakan untuk mengidentifikasi gambar dengan JavaScript atau CSS.
"usemap" : digunakan untuk menentukan map area yang digunakan pada gambar.
"ismap" : digunakan untuk menentukan bahwa gambar merupakan image map yang akan diterjemahkan oleh server.
Baca juga : HTML input type=”file” Attribute
Element Picture pada HTML 5
HTML5 menambahkan elemen <picture> yang dapat digunakan untuk menampilkan gambar yang sesuai dengan resolusi perangkat atau jenis gambar.
Elemen ini memungkinkan Anda untuk menentukan beberapa sumber gambar yang akan digunakan untuk satu elemen gambar, sehingga browser dapat memilih yang sesuai dengan kondisi yang ditentukan.
<source srcset="small.jpg" media="(max-width: 400px)">
<source srcset="medium.jpg" media="(max-width: 800px)">
<source srcset="large.jpg">
<img src="medium.jpg" alt="Gambar bunga">
</picture>
Sebagai contoh diatas, browser akan menampilkan gambar "small.jpg" jika lebar perangkat kurang dari 400px, "medium.jpg" jika lebar perangkat kurang dari 800px, dan "large.jpg" jika tidak ada kondisi yang sesuai.
Penggunaan Image Maps
Image map digunakan untuk membuat area klikable pada gambar. Anda dapat menentukan area yang akan diklik dan mengarahkan pengguna ke halaman web yang berbeda dengan menambahkan atribut "usemap" pada tag <img> dan menentukan map area dengan menggunakan tag <map> dan <area>.
<map name="map1">
<area shape="rect" coords="0,0,100,100" href="link1.html">
<area shape="circle" coords="150,150,50" href="link2.html">
</map>
Di mana "shape" adalah atribut yang digunakan untuk menentukan bentuk area, "coords" digunakan untuk menentukan koordinat area, dan "href" digunakan untuk menentukan link yang akan dibuka ketika area diklik.
Anda juga dapat menambahkan atribut "alt" pada tag <area> untuk memberikan deskripsi teks pada area yang akan ditampilkan ketika area tidak dapat diklik.
Selain itu, Anda juga dapat menambahkan gaya CSS pada area image map dengan menambahkan class atau id pada tag <area>.
Itu adalah beberapa atribut yang sering digunakan dengan tag <img> serta cara menggunakan elemen <picture> dan image map pada HTML. Semoga membantu dalam pembuatan halaman web Anda.
