Pada HTML tidak hanya menampilkan text, tetapi juga dapat menampilkan gambar pada halaman web.

Pembahasan kali ini adalah mengenai cara menambahkan gambar pada halaman HTML dan juga membuat link melalui gambar.

Pembahasan kali ini meliputi:

Sintaks Image HTML

Untuk menampilkan gambar pada HTML dapat menggunakan perintah tag <img>. Berbeda dengan tag HTML lainnya yang penulisannya dengan <opening tag> dan diakhiri dengan </closing tag>.

Penulisan tag <img> tidak memerlukan closing tag (tag penutup).

Tag <img> digunakan untuk menambahkan gambar yang juga dapat ditambahkan atribut src dan alt.

Atribut src digunakan untuk mendefinisikan alamat url tujuan dari gambar.

Format penulisan : <img src="url gambar">

Contoh : <img src="/images/icon-html.png">

Hasilnya seperti dibawah ini.

Atribut alt digunakan untuk menambahkan teks alternatif pada image / gambar.

Format penulisan : <img src="url gambar" alt="text">

Contoh : <img src="/images/icon-html.png" alt="Belajar HTML">

Merubah Ukuran Tinggi dan Lebar Gambar

Gambar yang ditampilkan menggunakan perintah tag <img> juga dapat dirubah ukuran lebar dan tinggi gambar dengan menambahkan height dan width.

Contoh : <img src="/images/icon-html.png" alt="Belajar HTML" height="100px" width="100px>

Hasil ukuran gambar 100x100 px : Belajar HTML

Hasil ukuran gambar 50x50 px : Belajar HTML

Selain menggunakan height dan width, merubah ukuran gambar dapat juga menggunakan style.

Contoh : <img src="/images/icon-html.png" alt="Belajar HTML" style="height:125px; width:125px">

Hasilnya : Belajar HTML

Alamat URL Image

<img src="icon-html.png"> => alamat url gambar berada dalam satu folder yang sama.

<img src="/images/icon-html.png"> => alamat url gambar berada dalam folder “images”.

<img src="https://penakode.com/images/icon-html.png"> => alamat url berada pada alamat web “penakode”

Sebelumnya pernah membahas tentang cara membuat link text pada HTML, dan cara itu berlaku juga pada gambar yang dapat digunakan sebagai link menuju halaman lain.

Caranya sama yaitu dengan menggunakan tag <a href="url tujuan">gambar</a>.

Contoh :

<a href="https://penakode.com/belajar-html-dasar-menulis-html">
   <img src="/images/icon-html.png" title="Tutorial HTML">
</a>

Hasilnya :

Demikianlah cara menggunakan tag <img> untuk menampilkan gambar pada halaman HTML.

Swlanjutnya kita akan membahas tentang penggunaan format text pada HTML.

Selamat Mencoba.