Lebak Cyber Tips dan Trik Komputer
Menampilkan Gambar di HTML
Lebakcyber.net – Menampilkan gambar di HTML. Pada kesempatan belajar HTML kali ini kita akan mempelajari tentang bagimana cara menampilkan gambar pada halaman HTML yang kita buat.
Menampilkan gambar bisa menjadi salah satu bagian paling penting saat membuat sebuah website, bisa dibayangkan bagaimana membosankannya seandainya sebuah website tanpa adanya gambar atau foto.
Oleh sebab itu, mengetahui bagaimana cara menampilkan gambar pada halaman HTML merupakan salah satu cara yang harus diketahui.
Untuk menampilkan gambar atau foto, HTML sudah menyediakan sebuah tag khusus yang dapat digunakan. Tag pada HTML yang digunakan untuk menampilkan gambar adalah tag <img>. Tag <img> tersebut dapat digunakan untuk menampilkan gambar dengan berbagai macam ekstensi seperti JPEG, JPG, PNG, GIF, ICO, BMP dan juga lain sebagainya.
Agar dapat menampilkan gambar pada halaman HTML kita bisa menggunakan tag <img> yang diikuti dengan atribut “src=” didalam tag <img> tersebut. Atribut “src=” dapat digunakan untuk memanggil lokasi dimana gambar atau foto tersebut disimpan
Kalau file gambar ada didalam satu folder dengan file HTML yang kita buat, maka kita dapat langsung memasukan nama dari file gambar yang ingin dimasukan tersebut didalam atribut src.
Namun kalau file gambar berada didalam folder yang berbeda dengan file HTML yang dibuat, maka kita bisa menambahkan nama foldernya, misalnya seperti “nama_folder/nama_gambar”.
Jika file gambar berada di luar folder dari file HTML yang kita buat untuk menampilkan gambar tersebut, maka kita harus menambahkan perintah “../” yang artinya kita keluar satu folder dari folder dimana file HTML yang kita buat tersebut berada.
Berikut ini adalah contoh perintah untuk menampilkan gambar di HTML :
<!DOCTYPE html> <html> <head> <title>Menampilkan gambar di HTML - Lebak Cyber</title> </head> <body> <h3>Contoh menampilkan gambar di HTML</h3> <img src="lebakcyber.png"> </body> </html>
Dengan perintah tersebut nanti gambar yang kita panggil dengan menggunakan tag <img> akan ditampilkan pada saat file HTML yang kita buat dibuka melalui browser.
Selain itu kita juga dapat menambahkan atribut height=”” dan juga widht=”” yang dapat digunakan untuk mengatur tinggi dan lebar dari gambar yang nantinya ingin ditampilkan, contohnya seperti berikut ini :
<!DOCTYPE html> <html> <head> <title>Menampilkan gambar di HTML - Lebak Cyber</title> </head> <body> <h3>Contoh menampilkan gambar di HTML</h3> <img src="lebakcyber.png" height="300px" width="500px;" > </body> </html>
Oke jadi seperti itulah bagaimana cara menampilkan gambar pada file HTML agar nantinya website yang kita buat bisa terlihat lebih menarik dimata pengunjung.
Jadi sampai disini dulu pembahasan kita mengenai bagaimana cara menampilkan gambar pada HTML, semoga tutorial sederhana ini dapat bermanfaat dan sampai jumpa di tutorial belajar HTML lainnya.
