Cara Menampilkan Gambar di HTML

Gambar adalah unsur penting dalam desain web yang dapat meningkatkan tampilan dan pengalaman pengguna suatu halaman web. HTML (Hypertext Markup Language) menyediakan tag khusus, yaitu tag <img>, yang memungkinkan pengembang web untuk menyisipkan dan menampilkan gambar di halaman web. Dalam artikel ini, kami akan memberikan panduan lengkap tentang cara menggunakan gambar dalam HTML untuk pengembang web.

1. Menggunakan Tag <img>

Tag <img> adalah tag HTML yang digunakan untuk menampilkan gambar di halaman web. Berikut adalah sintaks dasar penggunaan tag <img>:

<img src="nama_file_gambar.png" alt="Deskripsi Gambar">

src: atribut ini digunakan untuk menentukan sumber (URL atau nama file) dari gambar yang akan ditampilkan. Contohnya bisa berupa URL gambar dari internet atau nama file gambar yang sudah diunggah ke server.

alt: atribut ini digunakan untuk memberikan deskripsi alternatif untuk gambar. Deskripsi ini akan ditampilkan ketika gambar tidak dapat dimuat, dan juga dapat dibaca oleh perangkat bantu untuk aksesibilitas.

Contoh penggunaan tag <img>:

<img src="gambar.jpg" alt="Gambar pemandangan alam">

2. Menentukan Ukuran Gambar

Anda juga dapat menentukan ukuran gambar dengan menggunakan atribut width dan height pada tag <img>. Atribut width digunakan untuk menentukan lebar gambar dalam piksel, sedangkan atribut height digunakan untuk menentukan tinggi gambar dalam piksel.

<img src="gambar.jpg" alt="Gambar pemandangan alam" width="300" height="200">

Namun, perlu diingat bahwa menentukan ukuran gambar dengan atribut width dan height dapat merubah aspek rasio gambar dan mengakibatkan gambar terlihat terdistorsi. Oleh karena itu, sebaiknya gunakan ukuran gambar yang sebenarnya atau gunakan CSS untuk mengatur ukuran gambar.

3. Menggunakan Gambar Responsif

Untuk membuat gambar responsif yang dapat beradaptasi dengan berbagai ukuran layar perangkat, Anda dapat menggunakan teknik CSS seperti max-width: 100% pada gambar. 

Berikut contoh penggunaannya:

<style>

    .gambar-responsif {

        max-width: 100%;

        height: auto;

    }

</style>

<img src="gambar.jpg" alt="Gambar pemandangan alam" class="gambar-responsif">

Dengan menggunakan class .gambar-responsif pada tag <img>, gambar akan menyesuaikan lebar maksimum yang tersedia di dalam elemen yang mengandung gambar, dan tetap menjaga aspek rasio gambar.

4. Menambahkan Link pada Gambar

Anda juga dapat menambahkan link pada gambar, sehingga ketika pengguna mengklik gambar, mereka akan diarahkan ke halaman atau URL tertentu. Untuk melakukannya, cukup tambahkan atribut href pada tag <a> (tag untuk link) dan letakkan tag <img> di dalam tag <a>.

Berikut contoh penggunaannya:

<a href="https://nayantaka31.blogspot.com">

    <img src="nayantaka31.png" alt="HTML tutorial" style="width:42px;height:42px;">

</a>

5. Membuat Gambar Mengambang

Gunakan properti CSS floatuntuk membiarkan gambar melayang ke kanan atau ke kiri teks.

Berikut contoh penggunaannya:

<p>

    <img src="nayantaka.png" alt="Smiley face"

style="float:right;width:42px;height:42px;">

    The image will float to the right of the text.

</p>

   

<p>

    <img src="nayantaka.png" alt="Smiley face"

style="float:left;width:42px;height:42px;">

    The image will float to the left of the text.

</p>