Gambar Img

Dalam HTML, Anda dapat menggunakan tag <img> untuk menampilkan gambar di halaman web Anda. Berikut adalah cara menggunakannya:

Menambahkan Gambar dari Sumber Eksternal

Anda dapat menggunakan URL gambar untuk menampilkan gambar dari sumber eksternal, seperti berikut:
<img src="URL_GAMBAR_ANDA" alt="Deskripsi Gambar">
  • src: Ini adalah atribut yang harus Anda isi dengan URL gambar yang ingin Anda tampilkan.
  • alt: Ini adalah atribut yang berisi deskripsi alternatif untuk gambar. Ini penting untuk aksesibilitas dan akan muncul jika gambar gagal dimuat.

Menambahkan Gambar Lokal

Jika Anda memiliki gambar yang tersimpan di komputer Anda, Anda dapat menggunakan path lokal seperti ini:

<img src="nama_gambar.jpg" alt="Deskripsi Gambar">
  • src: Isi atribut ini dengan nama file gambar yang ada di direktori yang sama dengan file HTML Anda.

Menentukan Ukuran Gambar

Anda dapat mengatur ukuran gambar dengan atribut width dan height, seperti ini:

<img src="URL_GAMBAR_ANDA" alt="Deskripsi Gambar" width="300" height="200">

Menambahkan Teks pada Gambar

Anda dapat menambahkan teks pada gambar menggunakan elemen <figcaption>, seperti berikut:

<figure>
 <img src="URL_GAMBAR_ANDA" alt="Deskripsi Gambar">
 <figcaption>Teks Deskripsi</figcaption>
</figure>

Responsive Images:

Untuk membuat gambar responsif (menyesuaikan dengan ukuran layar), Anda dapat menggunakan atribut width dengan persentase, seperti ini:

<img src="URL_GAMBAR_ANDA" alt="Deskripsi Gambar" width="100%">

Itulah beberapa cara umum untuk menggunakan tag <img> dalam HTML untuk menampilkan gambar di halaman web Anda. Anda dapat menggabungkan berbagai atribut dan teknik ini sesuai kebutuhan Anda.

Semoga tutorial ini membantu Anda dalam penggunaan tag gambar dalam HTML!
PREVIOUS
NEXT