Belajar 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 ini di gunakan untuk menampilkan gambar atau image dengan berbagai ekstensi, bisa itu png, jpg, gif, ico, bmp, dan sebagainya.

Cara Menampilkan Gambar Pada HTML

Untuk menampilkan gambar dengan HTML, kalian bisa menggunakan tag <img>, kemudian masukkan attribut ( src= ) pada tag <img>. Attribut src berguna untuk menghubungkan dengan file gambar, jadi attribut src ini di gunakan untuk memanggil lokasi dan nama file gambar. Jika file gambar terletak di satu folder dengan file HTML yang bertugas untuk menampilkan gambar ini maka kalian bisa langsung memasukkan nama file gambar yang ingin di tampilkan pada attribut src ini. Tetapi jika file gambar berada pada folder yang berbeda dengan file html yang menampilkan gambar maka kalian bisa menambahkan nama foldernya seperti misalnya ( namafolder/gambar.jpg ) dan jika file gambar berada di luar folder file HTML kalian cukup menambahkan ( ../ ).

Coba kalian perhatikan contoh yang telah saya buat, untuk menampilkan gambar dengan HTML. disini saya sudah menyediakan sebuah file gambar yang ber extension .png yang akan di tampilkan di latihan9.html :

Coba Perhatikan letak gambar di atas. Saya memiliki file gambar dengan nama ruangankoding.png. Jika sudah di perhatikan, berikut ini cara menampilkan gambar dengan HTML.

latihan9.html :

Coba kalian contohkan langsung ke computer / laptop kalian, dan jangan lupa simpan gambar di dalam folder yang sama, jika berbeda itu ada dua macam cara di dalam folder atau di luar folder, jika di dalam folder terdapat folder gambar lagi maka kalian harus menambahkan nama folder tersebut, dan jika gambar berada di luar directory folder maka kalian menambahkan ( ../directory/gambar.png ) nah demikian lah tutorial Belajar HTML Dasar Part 11 yang saya tuliskan, selanjutnya kita akan sambung ke tutorial Belajar HTML Dasar Part 12