Sabtu, 23 Januari 2021

cara menampilkan gambar pada HTML

Pada pertemuan sebelumnya saya telah membahas tentang cara membuat tulisan miring dan tebal dengan HTML. Pada kesempatan kali ini saya akan membahas tentang cara menampilkan gambar pada HTML.


Manfaat menampilkan gambar pada HTML sangat variatif, selain untuk memperindah tampilan website, gambar akan memberikan kesan visualisasi pada tulisan di website, dimana peran gambar ini seperti menjadi pesan hidup pada sebuah tulisan. Bisa kita bayangkan jika suatu website tanpa adanya gambar, pasti akan terlihat kurang menarik dan membosankan.

Untuk menampilkan sebuah gambar, HTML menyediakan sebuah tag khusus, yaitu tag “<img>”. Tag <img> digunakan untuk menampilkan gambar dengan berbagai ekstensi, seperti jpg, png, bmp dan lain-lain.

Cara Menggunakan Tag <img>

Tag <img> memiliki banyak atribut, diantaranya src, alt, width, height, dan title. Untuk mengetahui fungsi atribut tersebut, Anda bisa melihatnya pada gambar dibawah ini:

cara menampilkan gambar pada HTML

Tabel atribut untuk tag <img> diatas adalah atribut yang paling sering di gunakan, sebenarnya masih ada beberapa tag gambar yang belum saya masukan ke tabel tersebut.

Untuk menggunakan tag <img>, siapkan terlebih dahulu sebuah gambar yang akan di tampilkan. Kemudian buat sebuah file HTML dengan nama “gambar.html“.

cara menampilkan gambar pada HTML

Pastikan gambar dan file HTML tersimpan dalam satu folder agar lebih mudah. Jika sudah siap silahkan tulis kode HTML dibawah ini dengan editor kesayangan Anda.
cara menampilkan gambar pada HTML
Dari kode HTML diatas, tag <img> terletak pada baris no. 7, yaitu <img src=”matahari.jpg” alt=”gambar matahari” title=”gambar matahari” width=”200px” height=”200px” />. Pada tag <img> tersebut terdapat beberapa atribut, yaitu src, alt, title, width dan height, yang perlu diperhatikan yaitu pada atribut src. Pastikan sesuai dengan nama gambar yang Anda gunakan, atribut src berisi nama beserta format gambar yang berada dalam satu folder dengan file gambar.html. Untuk pengisian atribut src seperti yang sudah saya jelaskan sebelumnya bisa menggunakan alamat gambar absolute atau relatif, yang intinya sama seperti saat mengisi atribut href pada tag link. Untuk format gambar bisa berupa png, jpg atau yang lainnya, bisa disesuaikan dengan file gambar yang Anda gunakan.

Pada atribut width dan height, saya menentukan ukuran gambar dengan lebar gambar 200px dan tinggi 200px. Untuk menentukan ukuran suatu gambar selain menggunakan atribut width dan height juga bisa memalui CSS. Sangat di rekomendasikan bahwa untuk menentukan ukuran suatu gambar lebih baik melalui CSS. Jika tidak terjadi kesalahan maka akan muncul tampilan seperti dibawah ini.

cara menampilkan gambar pada HTML

Dari gambar diatas kita bisa melihat bahwa penggunaan tag <img> beserta atributnya telah berhasil. Demikianlah tutorial tentang cara menampilkan gambar pada HTML. Silahkan bagikan atau share artikel ini jika dirasa ada yang membutuhkan.

  • Share Post:
related posts
about author

Seseorang yang suka belajar sesuatu yang baru, terutama tentang pemrograman web. Senang berbagi tentang pengetahuan dan belajar dari yang lain.

recent posts
categories
trending posts
SERBA KOMPUTER © 2017 - 2019, ALL RIGHTS RESERVED.