HTML atau Hypertext Markup Language adalah bahasa markah yang digunakan untuk membuat halaman web. Salah satu elemen yang penting dalam pembuatan halaman web adalah gambar. Dalam artikel ini, kita akan membahas bagaimana cara menampilkan gambar menggunakan HTML.

Menampilkan gambar di HTML cukup mudah. Berikut ini adalah langkah-langkah untuk menampilkan gambar di HTML.


  1. Membuat Tag Gambar Untuk menampilkan gambar di HTML, pertama-tama kita harus menambahkan tag <img> di mana tag ini akan menunjukkan bahwa kita akan menambahkan gambar ke dalam halaman web. Tag <img> memiliki dua atribut penting yang harus kita isi yaitu src dan alt. src akan menunjukkan alamat atau lokasi file gambar, sedangkan alt adalah teks alternatif yang akan ditampilkan jika gambar tidak bisa ditampilkan. Contohnya seperti berikut ini:
php
<img src="gambar.jpg" alt="Gambar contoh">
  1. Menambahkan Lokasi Gambar Setelah membuat tag <img>, selanjutnya kita harus menambahkan lokasi atau alamat file gambar. Ada beberapa cara untuk menambahkan lokasi gambar, di antaranya:
  • Menggunakan URL: Jika gambar disimpan di internet, kita bisa menggunakan URL atau alamat web untuk mengambil gambar. Contohnya seperti berikut ini:
css
<img src="https://example.com/gambar.jpg" alt="Gambar contoh">
  • Menggunakan Path Relatif: Jika gambar disimpan di dalam folder atau direktori yang sama dengan file HTML, kita bisa menggunakan path relatif untuk mengambil gambar. Contohnya seperti berikut ini:
php
<img src="gambar.jpg" alt="Gambar contoh">
  • Menggunakan Path Absolut: Jika gambar disimpan di luar folder atau direktori yang sama dengan file HTML, kita bisa menggunakan path absolut untuk mengambil gambar. Contohnya seperti berikut ini:
php
<img src="/gambar.jpg" alt="Gambar contoh">
  1. Menambahkan Attribute pada Tag Gambar Selain src dan alt, tag <img> juga bisa ditambahkan atribut lain seperti width, height, dan style. Atribut width dan height akan menunjukkan lebar dan tinggi gambar, sedangkan atribut style akan menunjukkan style atau tampilan gambar. Contohnya seperti berikut ini:
css
<img src="gambar.jpg" alt="Gambar contoh" width="500" height="300" style="border: 1px solid #ddd;">

Dalam contoh di atas, gambar akan ditampilkan dengan lebar 500 piksel, tinggi 300 piksel, dan diberi bingkai dengan warna abu-abu.

Demikianlah cara menampilkan gambar menggunakan HTML beserta contoh dan penjelasannya. Semoga artikel ini dapat membantu Anda dalam menampilkan gambar di halaman web Anda.