Belajar HTML - Cara Menambahkan Gambar di Halaman Web

Home » HTML

Halo teman-teman,

Setelah sebelumnya kita belajar tentang cara membuat link di HTML, sekarang kita lanjut ke elemen lain yang nggak kalah penting dan seru, yaitu gambar.

Menambahkan gambar ke halaman web bisa bikin tampilan jadi lebih menarik dan informatif. Tapi biar tampil maksimal, kita perlu tahu cara yang benar untuk menuliskannya.

Dasar Menampilkan Gambar: Tag `<img>` dan Atribut `src`

Untuk menampilkan gambar di HTML, kita pakai tag <img>. Tag ini termasuk tag kosong, artinya tidak punya tag penutup.

Contoh paling sederhana:

<img src="gambar.jpg">

<img> adalah tag untuk gambar
src (source) adalah alamat file gambar yang ingin ditampilkan

Menambahkan Teks Alternatif: Atribut `alt`

Atribut alt berfungsi untuk memberi teks alternatif jika gambar gagal dimuat. Ini juga penting untuk aksesibilitas (misalnya untuk pembaca layar).

<img src="kucing.jpg" alt="Foto kucing lucu">

Kalau gambar tidak bisa dimuat karena koneksi lambat atau kesalahan file, teks alt inilah yang akan muncul.

Menentukan Ukuran Gambar

Ada dua cara umum untuk mengatur ukuran gambar:

Menggunakan atribut width dan height

<img src="logo.png" width="200" height="100">

Menggunakan atribut style untuk styling CSS langsung

<img src="logo.png" style="width:200px; height:100px;">

Disarankan untuk selalu menentukan ukuran gambar agar halaman tidak “loncat-loncat” saat loading.

Lokasi Gambar (Path)

Jika gambar berada di folder yang sama dengan file HTML:

<img src="foto.jpg">

Jika gambar berada di subfolder, misalnya folder images:

<img src="images/foto.jpg">

Jika gambar diambil dari situs lain (URL lengkap):

<img src="https://example.com/foto.jpg">

Menjadikan Gambar Sebagai Link

Kamu juga bisa menjadikan gambar sebagai link dengan cara membungkus tag <img> dalam tag <a>.

<a href="https://unibsi.blogspot.com">
  <img src="banner.jpg" alt="Kunjungi Blog">
</a>

Gambar Transparan dan GIF

HTML mendukung gambar berformat PNG (transparan) dan juga GIF (gambar bergerak).

<img src="animasi.gif" alt="Animasi lucu">

Gunakan gambar bergerak dengan bijak, ya! Jangan terlalu banyak supaya halaman nggak berat.

Dengan memahami tag <img> dan atribut-atribut pentingnya, kamu sekarang bisa mulai menambahkan gambar ke halaman HTML-mu dengan cara yang rapi dan efektif.

Kalau kamu punya pertanyaan soal gambar di HTML, langsung aja tulis di komentar. Kita bahas bareng!

Di materi selanjutnya, kita akan belajar membuat tabel di HTML—cara menampilkan data dalam format baris dan kolom yang terstruktur. Sampai ketemu di tutorial berikutnya!