Belajar HTML Dasar : Menampilkan Gambar Pada HTML #11

 

Menampilkan gambar pada HTML termasuk yang bisa dibilang terpenting dalam membuat website atau membuat aplikasi berbasis web. bayangkan apa jadinya jika website tanpa gambar, Maka akan terasa sangat membosankan. Oleh karena itu teknik menampilkan gambar pada HTML termasuk kedalam teknik yang perlu bahkan wajib.

HTML Menyediakan sebuah tag khusus untuk menampilkan gambar atau image. tag HTML yang berfungsi untuk menampilkan gambar adalah tag <img>. tag <img> digunakan untuk menampilkan gambar atau image dengan berbagai ektensi, bisa itu jpg, png, gif, bmp, ico, dan lain-lain.

Cara Menampilkan Gambar Pada HTML

Untuk menampilkan gambar dengan HTML, anda bisa menggunakan tag <img>. Kemudian masukan atribut "src=" pada tag <img>. atribut src berguna untuk menghubungkan dengan file gambar, jadi atribut src ini digunakan untuk pemanggilan lokasi dan nama file gambar. Jika file gambar terletak satu folder dengan file html yang bertugas untuk menampilkan gambar ini maka kita bisa langsung memasukan nama file gambar yang ingin ditampilkan tersebut pada atribut src ini. tetapi jika file gambar berada pada folder berbeda dengan file html yang menampilkan gambar maka anda bisa menambahkan nama folder nya seperti misalnya "namafolder/filegambar". dan jika file gambar berada berada diluar folder file html yang menampilkan gambar maka anda bisa menambahkan perintah "../".

Perhatikan contoh berikut untuk cara menampilkan gambar dengan HTML. disini saya sudah menyediakan sebuah file gambar yang berektensi ,jpg

Perhatikan letak gambar diatas saya memiliki file gambar dengan nama Mazkran. Maka berikut ini cara menampilkan gambar pada HTML

Maka hasilnya saat dijalankan dibrowser

Anda juga bisa menentukan ukuran gambar yang akan tampil dengan menambahkan atribut height="" Untuk mengukur tinggi gambar, dan atribut width="" Untuk menentukan lebar gambar.

Berbagi :