Mau Tampilkan Gambar di HTML? Ini Cara Gampangnya

Kalau kamu lagi belajar HTML dan pengin tahu gimana caranya masukin gambar ke dalam halaman web, artikel ini cocok banget buat kamu. Kita bakal bahas semuanya dengan cara yang santai, pakai bahasa sehari-hari, dan tanpa ribet-ribet kode aneh. Fokusnya cuma ke bagian penting: gimana gambar bisa muncul di halaman HTML kamu. Gak perlu mikirin desain dulu, cukup pahami dasar masukin gambar dulu aja. Oh ya, artikel ini ditulis dengan gaya unik khas bloggerpedia, jadi dijamin beda dari penjelasan HTML kebanyakan di internet. Yuk, kita mulai kupas satu per satu!

Apa itu Tag Gambar di HTML?

Di HTML, gambar dimasukin ke halaman pakai tag <img>. Ini bukan tag pembuka dan penutup kayak <p> atau <h1>, tapi tag tunggal alias self-closing. Artinya, cukup tulis satu baris kode, dan gambar langsung bisa muncul. Tapi tentu aja gak asal tulis. Kamu butuh atribut yang tepat, seperti src buat nunjukin lokasi gambar, dan alt buat kasih deskripsi kalau gambarnya gagal dimuat. Contohnya kayak gini:

<img src="gambar-kucing.jpg" alt="Kucing lucu tidur" />

Intinya, tag <img> adalah cara HTML bilang, “Tolong tampilkan gambar ini di sini.” Dan semua itu cukup dalam satu baris aja. Makanya belajar gambar di HTML itu seru, karena hasilnya langsung kelihatan dan gampang diingat.

Gambar Harus Disimpan di Mana?

Salah satu hal yang bikin bingung pemula adalah gambar itu harus ditaruh di mana? Jawabannya: gambar bisa disimpan di folder yang sama dengan file HTML-nya, atau di folder lain yang masih satu struktur. Misalnya, kalau file HTML kamu ada di folder utama, dan gambar kamu taruh di folder bernama "images", maka kode HTML-nya bisa jadi begini:

<img src="images/gambar-kucing.jpg" alt="Kucing oranye imut" />

Bloggerpedia pernah membahas bahwa banyak pemula sering bingung gara-gara file gambar dan file HTML-nya nggak disimpan dalam satu tempat yang sesuai. Makanya penting banget untuk pahami cara kerja struktur folder biar gambar muncul tanpa error. Gampangnya, anggap aja kamu kasih “alamat” ke gambar itu, supaya browser tahu harus ambil dari mana.

Apa Itu Atribut Alt dan Kenapa Penting?

Alt itu singkatan dari “alternative text” alias teks alternatif. Ini berguna banget kalau gambar kamu gak bisa dimuat karena file-nya rusak, hilang, atau koneksi lemot. Nah, si alt ini akan tampil menggantikan gambar. Contohnya kayak gini:

<img src="gak-ada.jpg" alt="Gambar gagal dimuat" />

Dengan alt, pengunjung tetap bisa ngerti apa yang seharusnya ditampilkan. Ini juga bantu buat aksesibilitas—misalnya kalau ada yang pakai screen reader karena gangguan penglihatan. Bloggerpedia menyarankan untuk selalu menuliskan alt yang bermakna, jangan asal-asalan, karena ini juga bantu SEO dan kualitas halaman kamu secara keseluruhan.

Bisa Gak Ambil Gambar dari Internet?

Bisa banget! Kamu gak harus selalu pakai gambar dari komputer kamu. Kamu juga bisa ambil gambar dari internet dengan langsung kasih URL-nya ke dalam atribut src. Misalnya kayak gini:

<img src="https://example.com/kucing-lucu.jpg" alt="Kucing lucu dari internet" />

Ingat, kalau kamu pakai gambar dari internet, pastikan link-nya aktif dan gak ada larangan dari pemilik situsnya. Kadang-kadang gambar dari situs lain bisa di-“blokir” tampil di halaman kamu karena alasan keamanan. Jadi lebih aman kalau kamu simpan sendiri gambarnya di hosting kamu nanti. Tapi buat latihan, ini tetap jadi pilihan cepat. Dan menurut bloggerpedia, metode ini cocok banget buat eksperimen awal saat belajar HTML.

Bisa Masukin Gambar dari HP?

Buat kamu yang ngoding HTML dari HP, prosesnya hampir sama. Kamu tinggal pastikan gambar kamu ada di penyimpanan internal atau bisa diakses lewat link. Kalau kamu pakai aplikasi kayak Acode atau TrebEdit, biasanya kamu bisa upload gambar dulu ke folder proyek kamu, lalu tinggal panggil seperti biasa:

<img src="foto-selfie.jpg" alt="Selfie di pantai" />

Di artikel bloggerpedia sebelumnya juga sempat dibahas bahwa belajar HTML dari HP sekarang makin gampang, asalkan kamu tahu struktur file dan tahu di mana gambar kamu disimpan. Yang penting, kamu jangan lupa izinkan aplikasimu akses penyimpanan biar bisa nampilin gambar dari file lokal.

Boleh Masukin Banyak Gambar Sekaligus?

Boleh banget! Kamu tinggal tulis tag <img> berulang kali sesuai kebutuhan. HTML gak membatasi berapa banyak gambar yang bisa kamu masukin. Misalnya kamu pengin bikin galeri sederhana, bisa seperti ini:

<img src="foto1.jpg" alt="Foto 1" />
<img src="foto2.jpg" alt="Foto 2" />
<img src="foto3.jpg" alt="Foto 3" />

Nanti tampilannya akan berjejer sesuai urutan. Belum pakai style sih, jadi tampilannya polos. Tapi dari sisi fungsional, ini udah cukup buat belajar. Bloggerpedia menyarankan latihan dengan berbagai macam jenis gambar, dari ukuran kecil sampai besar, untuk lihat gimana perilaku browser saat menampilkannya.

Ukuran Gambar Bisa Diatur Gak?

Bisa banget! Kamu bisa atur ukuran gambar langsung di tag <img> pakai atribut width dan height. Misalnya kamu pengin bikin gambar jadi lebar 300 piksel:

<img src="foto-makanan.jpg" alt="Nasi goreng enak" width="300" />

Kamu bisa atur tinggi juga kalau mau, atau biarin otomatis sesuai proporsi aslinya. Tapi inget, terlalu banyak atur ukuran langsung di HTML bisa bikin kode kamu kurang fleksibel. Tapi buat belajar awal, ini cara paling gampang. Bloggerpedia biasanya pakai pendekatan ini dulu buat pemula, sebelum ngajarin CSS.

Ada Gambar yang Gak Bisa Ditampilkan?

Ya, ada beberapa alasan kenapa gambar gak muncul. Bisa karena nama file salah, ekstensi keliru (.jpeg vs .jpg), lokasi file gak sesuai, atau file-nya emang gak ada. Tips dari bloggerpedia: selalu periksa nama file dan lokasi folder. Perhatikan juga huruf besar kecil, karena di server Linux itu sensitif. Misalnya kucing.jpg dan Kucing.jpg dianggap dua file berbeda. Jadi, pastikan kamu tulis nama file dengan benar dan konsisten.

Penutup: Ngoding Gambar Itu Gampang, Asal Paham Dasarnya

Masukin gambar ke HTML itu sebenarnya gampang, asal kamu tahu tag-nya dan cara ngatur file-nya. Mulai dari tag <img>, atribut src, alt, sampai cara ambil gambar dari internet atau file lokal semuanya penting buat dipahami. Jangan takut buat coba-coba, karena semakin sering kamu praktik, makin ngerti juga caranya. Sekian artikel dari bloggerpedia yang membahas soal gambar di HTML dengan cara santai dan gak ribet. Selamat latihan dan terus semangat belajar HTML!