Menampilkan gambar di HTML bisa menggunakan tag <img>. Tag ini tidak memiliki tag penutup. Tag <img> memiliki 5 atribut, yakni:

  1. src, berfungsi untuk menentukan sumber dan nama gambar.
  2. height, berfungsi untuk mengatur tinggi gambar.
  3. width, berfungsi untuk mengatur lebar gambar.
  4. alt, berfungsi teks alternatif, jika gambar tida bisa ditampilkan.
  5. title, berfungsi menampilkan teks ketika ditunjuk oleh pointer.

Jika kita tidak menentukan tinggi dan lebar gambar, maka gambar akan tampil sesuai dengan ukuran aslinya. Jika kita mengatur keduanya, ukuran gambar menjadi tidak proporsional. Untuk itu, Anda cukup mengatur tinggi atau lebarnya saja, agar ukuran gambar terlihat proporsional.

Format gambar yang didukung adalah jpg, png, gif. Penulisannya harus lengkap dan sesuai dengan nama file gambar pada atribut src. Selain itu, file HTML dan gambar yang akan ditampilkan, harus berada pada folder yang sama.

Letak gambar dan file HTML dalam satu folder yang sama

Kurang lebih, cara menampilkan gambar di HTML seperti ini.

<html>
<head>
<title>Menampilkan Gambar</title>
</head>
<body>
<img src="ishomaldks.jpg" align="left" height="200px" width="400px" alt="Ishoma LDKS">
<img src="coaxial.png" align="left" height="200px" width="400px" alt="Kabel Coaxial">
</body>
</html>

Maka, hasilnya sebagai berikut.

Tampilan halaman web dengan gambar

Mudah, kan?? Cukup simpel sebenarnya. Namun, harus teliti, karena jika salah memasukkan nama file, atau salah letak, maka gambar tidak akan muncul.

Untuk detailnya, simak video di bawah.

Semoga bermanfaat 🙂

Anda bisa mengunjungi kami di website dengan klik di sini, atau Subscribe channel kami di sini.