Menampilkan Gambar pada HTML

HTML memungkinkan Anda untuk menampilkan gambar di halaman web menggunakan tag <img>. Tag ini adalah elemen self-closing, yang berarti tidak memerlukan tag penutup. Anda hanya perlu memberikan beberapa atribut penting untuk mendefinisikan gambar yang akan ditampilkan.

1. Tag <img>

Tag <img> digunakan untuk menyisipkan gambar di halaman web. Tag ini memiliki dua atribut utama:

• src: Atribut ini menentukan sumber gambar (URL atau path ke file gambar).
• alt: Atribut ini memberikan teks alternatif yang akan ditampilkan jika gambar gagal dimuat, atau jika pengguna menggunakan pembaca layar.

Struktur dasar tag <img>:

<img src="path/to/image.jpg" alt="Deskripsi Gambar">

2. Contoh Menampilkan Gambar

Berikut adalah contoh penggunaan tag <img> untuk menampilkan gambar:

<img src="gambar.jpg" alt="Gambar Pemandangan">

• src="gambar.jpg": Menunjukkan bahwa gambar yang akan ditampilkan adalah file gambar.jpg yang berada di lokasi yang sama dengan halaman HTML.
• alt="Gambar Pemandangan": Memberikan deskripsi alternatif untuk gambar, yang akan ditampilkan jika gambar tidak bisa dimuat.

3. Menentukan Lokasi Gambar

Gambar bisa disimpan di folder yang sama dengan file HTML atau di folder yang berbeda. Berikut adalah beberapa cara untuk menyertakan gambar dalam HTML:

Gambar di Folder yang Sama dengan HTML

Jika gambar disimpan di folder yang sama dengan file HTML, cukup gunakan nama file gambar:

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

Gambar di Subfolder

Jika gambar disimpan di subfolder, tambahkan nama folder sebelum nama file gambar:

<img src="images/gambar.jpg" alt="Deskripsi Gambar">

Gambar dari URL (gambar eksternal)

Jika gambar diambil dari situs web lain, Anda bisa menggunakan URL gambar tersebut:

<img src="https://www.example.com/images/gambar.jpg" alt="Gambar Eksternal">

4. Ukuran Gambar

Anda dapat mengubah ukuran gambar menggunakan atribut width dan height. Nilai ini bisa berupa angka dalam piksel atau persentase.

Contoh menggunakan atribut width dan height:

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

Mengatur ukuran gambar menggunakan CSS:

Selain atribut width dan height, Anda juga bisa mengatur ukuran gambar menggunakan CSS untuk kontrol lebih lanjut:

<style>
    img {
        width: 50%; /* Gambar akan menempati 50% lebar kontainer */
        height: auto; /* Tinggi disesuaikan secara otomatis untuk menjaga rasio gambar */
    }
</style>

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

5. Menambahkan Gambar sebagai Background dengan CSS

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

Contoh menggunakan gambar sebagai background:

<style>
    body {
        background-image: url('gambar.jpg');
        background-size: cover; /* Menyesuaikan gambar dengan ukuran layar */
        background-position: center; /* Menempatkan gambar di tengah */
    }
</style>

6. Menggunakan Gambar dalam Link

Anda dapat menggunakan gambar sebagai tautan (link). Berikut adalah cara untuk membuat gambar yang dapat diklik:

<a href="https://www.example.com">
    <img src="gambar.jpg" alt="Gambar Tautan">
</a>

Di atas, gambar akan menjadi link yang mengarah ke https://www.example.com ketika diklik.

7. Gambar yang Responsif

Untuk memastikan gambar tampil dengan baik di berbagai ukuran layar, Anda bisa menggunakan CSS untuk membuat gambar menjadi responsif.

Contoh membuat gambar responsif:

<style>
    img {
        max-width: 100%; /* Gambar tidak akan lebih lebar dari kontainer */
        height: auto; /* Tinggi disesuaikan otomatis */
    }
</style>

<img src="gambar.jpg" alt="Gambar Responsif">

Dengan CSS di atas, gambar akan menyesuaikan lebar layar dan tetap mempertahankan rasio tinggi-lebar yang benar.

Menampilkan gambar di HTML sangat mudah menggunakan tag <img>. Anda cukup menentukan sumber gambar dengan atribut src dan memberi deskripsi gambar dengan atribut alt. Anda juga dapat menyesuaikan ukuran gambar, menggunakan gambar sebagai latar belakang, membuat gambar responsif, dan bahkan menjadikannya tautan yang dapat diklik. Ini memberikan banyak fleksibilitas dalam desain web.