Cara Menampilkan Gambar di HTML

Pada pengembangan web, menampilkan gambar di halaman HTML adalah salah satu hal dasar yang sangat penting. Gambar memberikan visualisasi yang membuat konten lebih menarik dan mudah dipahami. Dalam HTML, ada tag khusus yang dirancang untuk menampilkan gambar, yaitu tag <img>.

Artikel ini admin analiswinter.com akan membahas cara menampilkan gambar di HTML secara efektif.

Cara Menampilkan Gambar di HTML

1. Menggunakan Tag <img>

Tag <img> adalah tag HTML yang digunakan untuk menampilkan gambar di halaman web. Tag ini tidak memiliki penutup (self-closing tag) dan membutuhkan atribut-atribut tertentu untuk berfungsi dengan baik.

Contoh Dasar Tag <img>:

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

Penjelasan:

• src (source): Merupakan atribut utama untuk menampilkan gambar. Di sini, kalian harus menempatkan URL atau path (lokasi) gambar yang ingin ditampilkan.
• alt (alternative text): Memberikan deskripsi gambar jika tidak dapat ditampilkan. Teks ini juga membantu dalam SEO dan aksesibilitas bagi pengguna dengan gangguan penglihatan.

2. Menampilkan Gambar dari Folder Lokal

Jika gambar berada di folder yang sama dengan file HTML, Kalian dapat menggunakan nama file sebagai sumber gambar.

Contoh:

<img src="gambar.jpg" alt="Gambar dari Folder Lokal">

Jika gambar berada di subfolder, sertakan nama foldernya dalam path.

Contoh:

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

3. Menampilkan Gambar dari URL

Kalian juga dapat menampilkan gambar yang berada di situs lain dengan memasukkan URL lengkapnya di atribut src.

Contoh:

<img src="https://www.contoh.com/gambar.jpg" alt="Gambar dari URL">

Catatan: Pastikan kalian memiliki izin untuk menampilkan gambar dari situs eksternal, atau gunakan gambar yang bebas hak cipta.

4. Mengatur Ukuran Gambar

Kalian dapat mengatur ukuran gambar menggunakan atribut width dan height pada tag <img>.

Contoh:

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

Ini akan menampilkan gambar dengan lebar 300 piksel dan tinggi 200 piksel.

5. Menambahkan Gaya CSS pada Gambar

Selain mengatur ukuran gambar dengan atribut, kalian juga bisa menggunakan CSS untuk gaya lebih lanjut. Misalnya, mengatur lebar gambar agar responsif dan dapat menyesuaikan ukuran layar.

Contoh:

<img src="gambar.jpg" alt="Gambar Responsif" style="width: 100%; max-width: 500px;">

Kode di atas membuat gambar memiliki lebar maksimum 500 piksel tetapi juga dapat mengecil sesuai ukuran layar (responsif).

6. Menampilkan Gambar sebagai Latar Belakang (Background Image)

Selain <img>, kalian juga dapat menampilkan gambar sebagai latar belakang elemen HTML menggunakan CSS.

Contoh:

<div style="background-image: url('gambar.jpg'); width: 500px; height: 300px;">
    Ini adalah elemen dengan gambar latar belakang.
</div>

Tabel Ringkasan Atribut <img>

Kesimpulan

Menampilkan gambar di HTML sangat mudah dengan menggunakan tag <img>. Pastikan untuk selalu menyertakan atribut alt untuk aksesibilitas yang lebih baik. Selain itu, gambar bisa ditata lebih lanjut menggunakan CSS untuk penampilan yang lebih menarik dan responsif. Dengan mengikuti langkah-langkah ini, kalian bisa menampilkan gambar di halaman web kalian dengan mudah dan efektif.