Beranda
html

Menambahkan Gambar HTML

Ngode Yuk Published by Ngode Yuk
Panduan Lengkap Menggunakan Gambar dalam HTML

Panduan Lengkap Menggunakan Gambar dalam HTML

Gambar adalah elemen penting dalam desain web yang menambah nilai visual dan informasi pada halaman. Dalam HTML, gambar ditampilkan menggunakan tag <img>, yang berfungsi sebagai tempat penampung untuk gambar yang ditautkan.

Tag <img> dan Atributnya

Tag <img> adalah elemen kosong yang tidak memerlukan tag penutup. Tag ini memiliki dua atribut utama:

  • src: Menentukan URL atau path menuju gambar yang akan ditampilkan.
  • alt: Menyediakan teks alternatif yang ditampilkan jika gambar tidak dapat dimuat atau diakses oleh pembaca layar.

Contoh penggunaan:

        <img src="gambar.jpg" alt="Deskripsi gambar">

Atribut src

Atribut src (source) menentukan lokasi gambar yang ingin ditampilkan. Pastikan path yang diberikan benar agar gambar dapat dimuat dengan benar. Jika path salah atau gambar tidak ditemukan, browser akan menampilkan ikon rusak dan teks alternatif dari atribut alt.

Atribut alt

Atribut alt (alternative text) memberikan deskripsi singkat tentang gambar. Ini penting untuk aksesibilitas, terutama bagi pengguna dengan keterbatasan penglihatan yang menggunakan pembaca layar. Selain itu, teks alternatif ditampilkan jika gambar gagal dimuat.

Menentukan Ukuran Gambar

Anda dapat mengatur lebar dan tinggi gambar menggunakan atribut width dan height. Nilai dapat ditentukan dalam piksel atau persentase. 

        <img src="gambar.jpg" alt="Deskripsi gambar" width="500" height="300">

Menentukan ukuran gambar membantu browser mengalokasikan ruang yang tepat sebelum gambar dimuat, mencegah perubahan tata letak yang tiba-tiba.

Gambar sebagai Tautan

Gambar dapat berfungsi sebagai tautan dengan membungkus tag <img> di dalam tag <a>. 

        <a href="https://www.contoh.com">
    <img src="gambar.jpg" alt="Deskripsi gambar">
</a>

Dalam contoh ini, mengklik gambar akan mengarahkan pengguna ke https://www.contoh.com.

Gambar Responsif

Untuk membuat gambar responsif yang menyesuaikan dengan ukuran layar perangkat, gunakan CSS dengan menetapkan lebar gambar ke 100% dan tinggi otomatis. 

        img {
    width: 100%;
    height: auto;
}

Pendekatan ini memastikan gambar skala dengan proporsi yang benar sesuai dengan ukuran elemen induknya.

Menambahkan Gambar Latar Belakang

Selain menggunakan tag <img>, Anda dapat menambahkan gambar sebagai latar belakang elemen menggunakan CSS. 

        <style>
    div {
        background-image: url('gambar.jpg');
        background-size: cover;
    }
</style>

<div>
    Konten di atas gambar latar belakang
</div>

Dalam contoh ini, gambar digunakan sebagai latar belakang elemen <div>, dan properti background-size: cover; memastikan gambar menutupi seluruh area elemen.

Elemen <picture> untuk Gambar Responsif

Elemen <picture> memberikan fleksibilitas dalam menampilkan gambar yang berbeda berdasarkan perangkat atau ukuran layar. Ini berguna untuk desain responsif. 

        <picture>
    <source media="(min-width: 800px)" srcset="gambar-besar.jpg">
    <source media="(min-width: 400px)" srcset="gambar-sedang.jpg">
    <img src="gambar-kecil.jpg" alt="Deskripsi gambar">
</picture>

Browser akan memilih gambar yang sesuai berdasarkan kondisi media yang ditentukan.

Kesimpulan

Memahami cara kerja dan penggunaan gambar dalam HTML adalah keterampilan penting dalam pengembangan web. Dengan menggunakan tag <img> dan atributnya dengan benar, serta memanfaatkan CSS dan elemen <picture>, Anda dapat memastikan gambar ditampilkan dengan optimal di berbagai perangkat dan kondisi.

Posting Komentar