Bagaimana Cara Menampilkan Gambar dengan HTML?

Pernah ngerasa bosen baca website yang isinya cuma teks doang? Nah, gambar itu penting banget buat bikin website atau blog kamu jadi lebih hidup, menarik, dan nggak bikin mata cepat capek.

Di dunia HTML, cara nampilin gambar itu ternyata gampang banget lho. Kamu nggak perlu ngetik kode yang rumit dan panjang-panjang. Yuk, kita pelajari bareng-bareng cara simpelnya!

Persiapan Belajar

Sebelum kita mulai mencoba, ada dua hal kecil yang perlu kamu siapkan di komputermu:

• Sebuah file gambar bebas (bisa format .jpg, .png, atau .webp). Biar gampang belajarnya, taruh file gambar ini di dalam satu folder yang sama dengan file HTML kamu.
• Aplikasi text editor seperti Notepad (Windows) atau Visual Studio Code buat nulis kodenya.

Langkah-Langkah Menampilkan Gambar di HTML

Untuk memunculkan gambar, HTML punya sebuah tag khusus yaitu tag <img> (singkatan dari image). Uniknya, tag ini adalah tag tunggal yang artinya nggak butuh tag penutup. Berikut cara menggunakannya:

1. Tulis Tag Dasar: Mulailah dengan mengetikkan <img> di dalam kodemu. Tapi, kode ini saja belum cukup karena sistem belum tahu gambar mana yang mau dipanggil.
2. Tambahkan Atribut Sumber (src): Kamu wajib memasukkan atribut src (source) untuk ngasih tahu lokasi atau nama file gambarmu. Contohnya jadi seperti ini: <img src="nama-gambar.jpg">.
3. Pasang Teks Alternatif (alt): Tambahkan juga atribut alt buat jaga-jaga kalau gambarmu gagal dimuat atau koneksi internet sedang lambat. Teks ini akan muncul menggantikan gambar yang error. Contoh: <img src="nama-gambar.jpg" alt="Foto Pemandangan Alam">.

Nah, kalau digabungkan, kode lengkapnya bakal terlihat seperti ini: <img src="kucing-lucu.jpg" alt="Gambar kucing sedang tidur">. Sangat mudah, kan?

Tips Tambahan Saat Menampilkan Gambar

Kalau gambar yang muncul di layarmu ternyata kegedean atau malah kekecilan, kamu bisa langsung ngatur ukurannya lewat HTML lho! Caranya cukup tambahkan atribut width untuk mengatur lebar dan height untuk mengatur tinggi. Contoh penulisannya: <img src="gambar.jpg" alt="Deskripsi" width="300" height="200">.

Penutup

Itulah cara dasar menampilkan gambar di HTML. Cukup andalkan tag <img> lalu lengkapi dengan atribut src dan alt, website kamu sudah bisa memajang gambar-gambar keren pilihanmu.

Semoga artikel ini bermanfaat dan bikin kamu makin asyik belajar dasar-dasar pembuatan website. Untuk melihat karya saya yang lain dan mengenal saya lebih dekat, silakan klik di sini.

FAQ (Pertanyaan yang Sering Diajukan)

1. Kenapa gambar saya tidak muncul dan malah keluar ikon kertas robek?

Masalah ini biasanya terjadi karena penulisan nama file di dalam atribut "src" salah ketik, atau lokasi folder gambarnya tidak sesuai dengan yang ada di kode. Pastikan ejaan nama dan ekstensi file (seperti .jpg atau .png) sudah benar-benar sama.

2. Apakah saya bisa menampilkan gambar langsung dari website lain?

Bisa banget! Daripada menggunakan nama file gambar dari komputermu, kamu bisa langsung memasukkan alamat link (URL) gambar dari internet ke dalam atribut "src". Tapi perlu diingat, kalau gambar aslinya dihapus oleh pemilik website tersebut, gambar di webmu juga bakal ikut hilang.

3. Apakah atribut "alt" itu wajib selalu diisi?

Walaupun tanpa atribut "alt" gambarmu tetap bisa muncul, tapi atribut ini sangat disarankan untuk selalu dipakai. Selain bagus untuk nilai SEO di mata Google, teks ini juga sangat membantu tunanetra yang menggunakan alat pembaca layar (screen reader) untuk mengetahui apa isi gambar tersebut.