Home / HTML / Cara Menampilkan Gambar di HTML Menggunakan Tag img (Panduan Lengkap untuk Pemula)

Cara Menampilkan Gambar di HTML Menggunakan Tag img (Panduan Lengkap untuk Pemula)

shares

Dalam dunia pengembangan website, gambar merupakan elemen penting yang membuat tampilan halaman web menjadi lebih menarik dan informatif. Tanpa gambar, sebuah halaman website biasanya terlihat monoton dan kurang menarik bagi pengunjung.

Dalam HTML, kita dapat menampilkan gambar menggunakan tag <img>. Tag ini memungkinkan kita menambahkan berbagai jenis gambar seperti JPG, PNG, GIF, atau bahkan SVG ke dalam halaman website.

Jika Anda masih baru belajar HTML, sebaiknya pahami terlebih dahulu konsep dasar HTML pada artikel berikut: memahami apa itu HTML dan fungsinya. Dengan memahami dasar HTML, Anda akan lebih mudah mengerti bagaimana gambar ditampilkan pada halaman web.

Apa Itu Tag img dalam HTML

Tag <img> adalah elemen HTML yang digunakan untuk menampilkan gambar pada halaman website. Berbeda dengan beberapa tag HTML lain, tag ini tidak memiliki tag penutup karena termasuk dalam kategori empty element.

ilustrasi cara menampilkan gambar

Struktur dasar penggunaan tag ini sangat sederhana: 


<img src="gambar.jpg" alt="Deskripsi gambar">

Tag ini menggunakan atribut utama seperti src untuk menentukan lokasi gambar dan alt untuk memberikan deskripsi gambar.

Jika Anda ingin memahami lebih dalam tentang elemen HTML, Anda dapat membaca artikel: panduan lengkap belajar elemen HTML.

Atribut Penting pada Tag img

Agar gambar dapat tampil dengan benar, terdapat beberapa atribut penting yang harus dipahami saat menggunakan tag <img>.

1. Atribut src

Atribut src digunakan untuk menentukan sumber atau lokasi file gambar. 


<img src="gambar.jpg">

Lokasi gambar dapat berupa file lokal maupun URL dari internet.

2. Atribut alt

Atribut alt digunakan untuk memberikan teks alternatif jika gambar tidak dapat ditampilkan. 


<img src="logo.png" alt="Logo Website">

Selain membantu pengguna memahami gambar, atribut ini juga penting untuk SEO dan aksesibilitas website.

3. Atribut width dan height

Atribut ini digunakan untuk mengatur ukuran gambar. 


<img src="gambar.jpg" width="300" height="200">

Namun dalam praktik modern, ukuran gambar biasanya diatur menggunakan CSS. Jika Anda ingin mempelajari cara mempercantik tampilan website menggunakan CSS, Anda dapat membaca artikel: cara menggunakan CSS untuk mempercantik tampilan website.

Cara Menampilkan Gambar di HTML

Untuk menampilkan gambar di HTML, Anda hanya perlu menambahkan tag <img> di dalam dokumen HTML. 


<!DOCTYPE html>
<html>
<head>
<title>Contoh Gambar</title>
</head>

<body>

<h2>Contoh Menampilkan Gambar</h2>

<img src="pemandangan.jpg" alt="Gambar pemandangan">

</body>
</html>

Jika Anda belum mengetahui bagaimana cara membuat dokumen HTML dari awal, silakan pelajari panduan berikut: cara membuat dokumen HTML untuk pemula.

[Tempat gambar ilustrasi]

Menampilkan Gambar dari Folder yang Sama

Jika file gambar berada pada folder yang sama dengan file HTML, Anda cukup menuliskan nama file gambarnya saja. 


<img src="foto.jpg" alt="Foto profil">

Menampilkan Gambar dari Folder Berbeda

Jika gambar berada di dalam folder lain, maka Anda perlu menambahkan nama folder tersebut. 


<img src="images/foto.jpg" alt="Foto profil">

Menampilkan Gambar dari Internet

Selain dari file lokal, Anda juga dapat menampilkan gambar dari URL internet. 


<img src="https://example.com/gambar.jpg" alt="Contoh gambar dari internet">

Menggabungkan Gambar dengan Elemen HTML Lain

Dalam pengembangan website, gambar sering digunakan bersama elemen lain seperti teks, daftar, atau tabel.

Sebagai contoh, Anda dapat menampilkan gambar bersama daftar HTML. Pelajari lebih lanjut pada artikel berikut: cara membuat daftar dengan HTML.

Selain itu, gambar juga sering digunakan dalam tabel HTML untuk membuat tampilan data lebih menarik. Anda dapat membaca panduan berikut: cara membuat tabel pada HTML.

Kesalahan yang Sering Terjadi Saat Menampilkan Gambar

1. Path gambar salah

Kesalahan paling umum adalah lokasi file gambar yang tidak sesuai dengan struktur folder.

2. Nama file tidak sesuai

HTML sangat sensitif terhadap penulisan nama file, termasuk huruf besar dan kecil.

3. Lupa menambahkan atribut alt

Banyak pemula yang mengabaikan atribut ini, padahal sangat penting untuk SEO dan aksesibilitas.

Jika Anda sering mengalami kesalahan dalam kode HTML, Anda dapat mempelajari cara memperbaikinya di artikel berikut: cara memperbaiki kesalahan pada HTML.

Tips Penting Menggunakan Gambar di Website

  • Gunakan ukuran gambar yang tidak terlalu besar agar website tetap cepat.
  • Tambahkan atribut alt untuk meningkatkan SEO.
  • Gunakan format gambar yang tepat seperti JPG atau PNG.
  • Kompres gambar sebelum digunakan di website.

Jika Anda ingin membuat website yang tampil baik di berbagai perangkat seperti smartphone dan tablet, Anda dapat membaca panduan berikut: cara membuat website responsif.

Kesimpulan

Tag <img> merupakan salah satu elemen penting dalam HTML yang digunakan untuk menampilkan gambar pada halaman website. Dengan memahami cara menggunakan tag ini, Anda dapat membuat tampilan website menjadi lebih menarik dan informatif.

Dalam artikel ini kita telah mempelajari:

  • Pengertian tag img
  • Atribut penting pada tag img
  • Cara menampilkan gambar di HTML
  • Kesalahan umum yang sering terjadi
  • Tips menggunakan gambar pada website

Jika Anda ingin mempelajari HTML lebih dalam, Anda dapat membaca panduan lengkap berikut: panduan lengkap belajar tag dasar HTML.

Referensi

Flanagan, D. (2023). JavaScript: The Definitive Guide. O'Reilly Media.

Mozilla Developer Network. (2024). HTML Image Element.

Duckett, J. (2022). HTML and CSS: Design and Build Websites. Wiley.

Related Posts