Belajar HTML Dasar #9 - Menampilkan Gambar Pada HTML

Menampilkan Gambar Pada HTML

Menampilkan gambar pada html termasuk yang bisa di bilang 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 ke dalam teknik yang perlu bahkan wajib. pada tutorial cara menampilkan gambar pada html ini akan di jelaskan tentang cara menampilkan gambar pada halaman website menggunakan HTML.

HTML menyediakan sebuah tag yang khusus untuk menampilkan gambar atau image. tag HTML yang berfungsi untuk menampilkan gambar adalah tag ”<img>“. Tag <img> di gunakan untuk menampilkan gambar atau image dengan berbagai ekstensi, bisa itu jpg, png, gif, bmp, ico dan lain-lain.

Cara Menampilkan Gambar Pada HTML, Untuk menampilkan gambar dengan HTML kita bisa menggunakan tag. kemudian masukkan atribut “src=” pada tag <img>. Atribut src berguna untuk menghubungkan dengan file gambar, jadi atribut src ini di gunakan 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 memasukkan nama file gambar yang ingin di tampilkan tersebut pada atribut src ini. Tetapi jika file gambar berada pada folder yang berbeda dengan file html yang menampilkan gambar maka anda bisa menambahkan nama folder nya seperti misalnya “nama_folder/filegambar” dan jika file gambar berada di luar folder file html yang menampilkan gambar maka anda bisa menambahkan perintah “../”. 

Perhatikan contoh berikut untuk cara menampilkan gambar dengan HTML. di sini saya sudah menyediakan sebuah file gambar yang berekstensi .png

Perhatikan letak gambar di atas. Saya memiliki file gambar dengan nama logo2.png dan file html dengan nama Belajar HTML Dasar.html. Maka berikut ini cara menampilkan gambar dengan html. :

Hasil Outputnya :

Mungkin cukup sampai disini dulu mengenai pembahasan mengenai membuat hyperlink dan list pada HTML, untuk selanjutnya kita akan belajar mengenai membuat form pada HTML. Semoga sampai disini teman-teman bisa mengikutinya dengan baik, kalo ada yang mau ditanyakan bisa tinggalkan komentar di bawah ini iya teman-teman nanti akan saya jawab satu-satu ko pertanyannya.

Sekian dan terimakasih...