Tutorial HTML #7 - Cara Menampilkan Gambar di HTML dengan Benar

Assalamualaikum sobat blogger semua! Di tutorial sebelumnya, halaman web kita udah mulai interaktif karena kita udah belajar cara memasang link tautan. Tapi, rasanya pasti ngebosenin banget kan kalau website kita cuma berisi teks polosan doang?

Nah, biar halaman web atau blog yang kalian bikin kelihatan makin menarik, estetik, dan profesional, hari ini kita akan belajar bagaimana cara memasukkan komponen visual, yaitu Menampilkan Gambar di HTML menggunakan tag <img>. Yuk, langsung kita bahas kodenya!

Mengenal Atribut Tag <img>

Berbeda dengan tag heading atau paragraf yang berpasangan, tag <img> adalah sebuah Tag Tunggal (Self-Closing Tag). Artinya, tag ini gak butuh tag penutup seperti </img>.

Agar gambar bisa muncul, ada dua atribut wajib yang harus lu sertakan di dalam tag ini:

src (Source): Berisi alamat URL atau jalur (path) tempat file gambar tersebut disimpan.
alt (Alternative Text): Deskripsi teks singkat tentang gambar tersebut. Ini penting banget buat SEO Google (biar gambar lu bisa dicari di Google Images) dan membantu penyandang disabilitas tunanetra mengetahui isi gambar lewat aplikasi pembaca layar.

🛠️ Studi Kasus: Menampilkan Gambar Lokal dan Gambar Online

Dalam prakteknya, kita bisa menampilkan gambar yang disimpan di laptop sendiri (lokal) atau mengambil gambar langsung dari internet (online URL).

Silakan siapkan satu file gambar di laptop kalian bebas apa saja (beri nama foto-profil.png), lalu simpan gambar tersebut dalam satu folder yang sama dengan file kodingan latihan-gambar.html kalian. Jika sudah, ketikkan kode di bawah ini:

Kode Studi Kasus:

<h3>Profil Digital Creator</h3>

<!-- 1. Contoh Memanggil Gambar Lokal (Satu Folder) -->
<p>Ini contoh mengambil gambar dari folder laptop:</p>
<img src="foto-profil.png" alt="Foto Profil Fikri Ramdani" width="150" height="150" />

<hr/>

<!-- 2. Contoh Memanggil Gambar Online lewat URL Internet -->
<p>Ini contoh mengambil gambar langsung dari server internet:</p>
<img src="https://picsum.photos/300/200" alt="Gambar Pemandangan Estetik" />

Hasil Output di Browser:

Profil Digital Creator

Ini contoh mengambil gambar dari folder laptop:

[Foto Profil 150x150]

Ini contoh mengambil gambar langsung dari server internet:

⚠️ Penyakit Pemula: Kenapa Gambar Gua Gak Muncul?

Kalau nanti pas lu buka di browser gambarnya pecah atau cuma muncul teks alt-nya doang, jangan panik, bro! Itu biasanya disebabkan karena salah satu dari 3 hal ini:

Salah Ketik Nama / Ekstensi File: Ingat, kode HTML itu sensitif. File gambar lu namanya foto.JPG (huruf besar) tapi lu panggil di kode src="foto.jpg" (huruf kecil). Itu otomatis bikin gambar gagal meluncur.
Beda Folder: Jika file gambar lu ditaruh di dalam sub-folder bernama images, maka cara panggilnya wajib menyertakan nama foldernya, contoh: src="images/foto-profil.png".
Atribut width dan height kegedean: Selalu atur ukuran gambar lu secara proporsional lewat atribut width (lebar) atau height (tinggi) agar halaman web gak berantakan dan berat saat dibuka.

Kesimpulan

Menampilkan elemen visual di HTML itu kuncinya ada pada tag tunggal <img>, keakuratan jalur file pada atribut src, serta pengisian teks alt yang ramah SEO Google. Dengan menguasai materi ini, lu udah bisa bikin artikel web lu jadi jauh interaktif dan gak ngebosenin buat dibaca.

Sampai di sini dulu tutorial kali ini. Silakan coba cari gambar andalan lu, masukin ke folder project, dan panggil kodenya di laptop masing-masing. Kalau gambarnya masih "ngambek" gak mau muncul, langsung tumpahin keluhan kalian di Kolom Komentar bawah ya!

Sampai jumpa di tutorial selanjutnya!

✏️ Struktur Udah Komplit, Yuk Mainin Gaya Teks!

Judul punya, paragraf aman, list beres, link aktif, dan gambar pun udah tampil estetik. Nah, sekarang gimana caranya bikin tulisan di dalam artikel kita bisa tebal, miring, atau disorot warna stabilo biar pembaca makin fokus ke poin intinya?

Lanjut ke Tutorial #8: Text Formatting HTML →