Paslen.com – HTML (Hypertext Markup Language) adalah bahasa markah standar untuk membuat halaman web. Salah satu elemen yang paling umum digunakan dalam HTML adalah gambar. Untuk menampilkan gambar di halaman web, kita menggunakan tag <img> (tag image). Dalam artikel ini, kita akan membahas cara menambahkan gambar menggunakan tag <img> beserta beberapa parameter yang dapat digunakan.
Menambahkan Gambar dengan Tag Image
Untuk menampilkan gambar di halaman web menggunakan tag image, kita perlu mengikuti sintaksis berikut:
<img src="nama_file_gambar.jpg" alt="Deskripsi Gambar" width="lebar" height="tinggi">
Berikut adalah penjelasan untuk setiap parameter yang digunakan dalam tag image:
src: Parameter ini digunakan untuk menentukan lokasi atau URL gambar yang ingin ditampilkan. Ini dapat berupa URL eksternal atau path file relatif dalam proyek Anda. Misalnya, src=”gambar/logo.png” atau src=”https://www.paslen.com/gambar/logo.png”.
alt: Parameter ini adalah teks alternatif yang ditampilkan jika gambar tidak dapat dimuat. Ini membantu pengguna yang memiliki masalah dengan tampilan gambar atau menggunakan pembaca layar. Pastikan memberikan deskripsi yang relevan untuk gambar tersebut.
width (opsional): Parameter ini menentukan lebar gambar dalam piksel atau persentase lebar halaman. Anda dapat menentukan lebar absolut seperti width=”300″ atau menggunakan persentase lebar halaman seperti width=”50%”. Jika tidak diberikan, gambar akan ditampilkan dengan lebar aslinya.
height (opsional): Parameter ini menentukan tinggi gambar dalam piksel atau persentase tinggi halaman. Anda dapat menentukan tinggi absolut seperti height=”200″ atau menggunakan persentase tinggi halaman seperti height=”25%”. Jika tidak diberikan, gambar akan ditampilkan dengan tinggi aslinya.
Contoh Penggunaan Tag Image
Mari kita lihat contoh penggunaan tag image dalam kode HTML:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Gambar HTML</title>
</head>
<body>
<h1>Gambar Kucing Lucu</h1>
<img src="gambar/kucing-lucu.jpg" alt="Kucing Lucu" width="400" height="300">
<p>Ini adalah gambar kucing lucu.</p>
</body>
</html>
Dalam contoh ini, kami menampilkan gambar kucing lucu dengan menggunakan tag image. Kami menggunakan src untuk menentukan lokasi gambar di dalam folder “gambar”. Kami memberikan deskripsi alternatif dengan menggunakan alt, dan mengatur lebar dan tinggi gambar dengan parameter width dan height.
Menggunakan tag image (<img>) dalam HTML memungkinkan kita untuk menampilkan gambar di halaman web. Dengan menggunakan parameter seperti src, alt, width, dan height, kita dapat mengontrol tampilan gambar dan memberikan deskripsi yang tepat. Pastikan untuk memberikan deskripsi alternatif yang baik dengan menggunakan alt agar pengguna yang memiliki keterbatasan visual atau menggunakan pembaca layar tetap dapat memahami konten gambar.
Semoga artikel ini memberikan pemahaman yang lebih baik tentang cara menambahkan gambar menggunakan tag image dalam HTML. Selamat mencoba!
