Gambar HTML


Gambar dapat meningkatkan desain dan tampilan halaman web.


Contoh

<img src="pic_anggrek.jpg" alt="Anggrek Kalimantan Barat">

Sintaks Gambar HTML

Tag <img> HTML digunakan untuk menyematkan gambar di halaman web.

Gambar tidak secara teknis dimasukkan ke dalam halaman web, gambar ditautkan ke halaman web. Tag <img> membuat ruang penahanan untuk gambar yang direferensikan.

Tag <img> kosong, hanya berisi atribut, dan tidak memiliki tag penutup.

Tag <img> memiliki dua atribut yang diperlukan:

  • src - Menentukan sumber ke gambar
  • alt - Menentukan teks alternatif untuk gambar

Sintaks: <img src="url" alt="alternatetext">


Atribut src

Atribut src yang diperlukan menentukan sumber (URL) ke gambar.

Catatan: Saat halaman web dimuat, browser pada saat itu yang mengambil gambar dari server web dan memasukkannya ke dalam halaman. Oleh karena itu, pastikan gambar benar-benar berada di tempat yang sama dalam kaitannya dengan halaman web, jika tidak, pengunjung Anda akan mendapatkan ikon tautan rusak. Ikon tautan rusak dan teks alt ditampilkan jika browser tidak dapat menemukan gambar.


Contoh

<img src="img_anggrek.jpg" alt="Bunga Anggrek">

Atribut alt

Atribut alt yang diperlukan menyediakan teks alternatif untuk gambar, jika pengguna karena alasan tertentu tidak dapat melihatnya (karena koneksi lambat, kesalahan pada atribut src, atau jika pengguna menggunakan pembaca layar).

Nilai atribut alt harus mendeskripsikan gambar.


Contoh

<img src="img_anggrek.jpg" alt="Bunga Anggrek">

Jika browser tidak dapat menemukan gambar, maka akan menampilkan nilai atribut alt.

Contoh

<img src="wrongname.gif" alt="Bunga di Chania">

Tips: Pembaca layar adalah program perangkat lunak yang membaca kode HTML, dan memungkinkan pengguna untuk "mendengarkan" konten. Pembaca layar berguna bagi mereka yang memiliki gangguan penglihatan atau ketidakmampuan belajar.


Ukuran Gambar - Width (Lebar) dan Height (Tinggi)

Anda dapat menggunakan atribut style untuk menentukan lebar (width) dan tinggi (height) gambar.


Contoh

<img src="img_boy.jpg" alt="Cowok berjaket" style="width:500px;height:700px;">

Alternatifnya, Anda dapat menggunakan atribut width dan height.

Contoh

<img src="img_girl.jpg" alt="Gadis berjaket" width="500" height="600">

Atribut width dan height selalu menentukan lebar dan tinggi gambar dalam piksel.

Catatan: Selalu tentukan lebar dan tinggi gambar. Jika lebar dan tinggi tidak ditentukan, halaman web mungkin berkedip saat gambar dimuat.


Menggunakan Width dan Height, atau Style?

Atribut width, height, dan style semuanya valid dalam HTML.

Namun, sebaiknya gunakan atribut style. Ini mencegah CSS mengubah ukuran gambar.


Contoh

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>

Gambar di Folder Lain

Jika Anda memiliki gambar Anda di sub-folder, Anda harus menyertakan nama folder di atribut src.


Contoh

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Gambar di Server/Situs Lain

Beberapa situs web menunjuk ke gambar di server lain.

Untuk mengarahkan ke gambar di server lain, Anda harus menentukan URL absolut (lengkap) di atribut src.


Contoh

<img src="https://www.ianzune.com/images/ianzune_blue.jpg" alt="ianzune.com">

Catatan: Gambar eksternal mungkin memiliki hak cipta. Jika Anda tidak mendapatkan izin untuk menggunakannya, Anda mungkin melanggar undang-undang hak cipta. Selain itu, Anda tidak dapat mengontrol gambar eksternal dan bisa tiba-tiba dihapus atau diubah.


Gambar Animasi

HTML memungkinkan GIF animasi.


Contoh

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

Gambar sebagai Link

Untuk menggunakan gambar sebagai link, letakkan tag <img> di dalam tag <a>.


Contoh

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Gambar Mengambang

Gunakan properti float CSS untuk membiarkan gambar melayang ke kanan atau ke kiri teks.


Contoh

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
Gambar akan mengambang di sebelah kanan teks.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
Gambar akan mengambang di sebelah kiri teks.</p>

Ringkasan

  • Gunakan elemen <img> HTML untuk menentukan gambar
  • Gunakan atribut src HTML untuk menentukan URL gambar
  • Gunakan atribut alt HTML untuk menentukan teks alternatif untuk gambar, jika tidak dapat ditampilkan
  • Gunakan atribut width dan height HTML atau properti width dan height CSS untuk menentukan ukuran gambar
  • Gunakan properti float CSS untuk membiarkan gambar mengambang ke kiri atau ke kanan

Sumber referensi: w3schools

Komentar

Posting Komentar