[Belajar HTML] Cara Menampilkan Gambar Pada HTML

[Belajar HTML] Cara Menampilkan Gambar Pada HTML - Pada artikel sebelumnya kita mempelajari bagaimana cara membuat form login pada HTML. Kali ini, kita akan belajar bagaimana menampilkan sebuah gambar pada website. Gambar merupakan salah satu hal penting yang harus ada pada website, sebuah website yang berisi hanya tulisan dan tanpa gambar pasti akan terlihat membosankan.

Perpaduan gambar yang bagus dengan tampilan desain website yang baik akan menjadikan sebuah website enak untuk dipandang dan tidak membosankan. HTML sendiri sudah menyediakan tag yang berfungsi untuk menampilkan gambar.Tag yang dimaksud adalah <img>, dengan tag tersebut kita dapat menampilkan gambar dengan berbagai format (jpg, png, dll).

Persiapkan terlebih dahulu gambar yang akan ditampilkan, kemudian bisa juga menambahkan folder baru khusus gambar. Dalam tag img nantinya akan menggunakan atribut src="", atribut tersebut berfungsi untuk menghubungkan dengan file gambar.


Perlu diketahui, jika gambar berada dalam folder maka tag yang digunakan seperti ini <img src="namafolder/gambar.jpg"> apabila dalam satu folder cukup dengan tag <img src="gambar.jpg"> dan apabila diluar folder bisa menambahkan dengan (../) contohnya seperti ini <img src="../gambar.jpg">.

Siapkan gambar dan beri nama gambar.png, kemudian simpan file HTML dibawah ini dalam satu folder yang sama dengan gambar.

Baca Juga : Mengenal Link Dalam HTML.

Contoh source code lengkapnya seperti berikut :

Maka hasilnya akan menjadi seperti ini :