Menampilkan gambar pada HTML termasuk hal penting 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 hal yang wajib dipelajari.
HTML menyediakan sebuah tag yang khusus untuk menampilkan gambar atau image. Tag HTML yang berfungsu untuk menampilkan gambar adalah tag "<img>". Tag <img> digunakan 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 anda bisa menggunakan tag <img>. Kemudian masukkan atribut "src=" pada tag <img>. Tag 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 memasukkan nama file gambar yang ingin ditampilkan 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 foldernya seperti misalnya "nama_folder/file_gambar".
Perhatikan contoh source code berikut ini
 |
Jika dibuka di browser hasilnya seperti ini
hasil gambar yang ditampilkan akan menyesuaikan ukuran gambar sesuai aslinya. Pada HTML kita bisa menentukan ukuran gambar yang akan ditampilkan dengan menambahkan atribut height="" untuk mengatur tinggi gambar dan atribut width="" untuk menentukan lebar yang tampil.
jika kita masukkan height dan width maka ukurannya akan mengikuti yang diinginkan.
Tetapi cara ini sangat tidak direkomendasikan karena anda harus memberikan atribut height dan width pada semua gambar yang akan ditampilkan. Jadi cara untuk mengatur ukuran gambar yang benar adalah dengan menambahkan class atau id pada tag <img> dan kemudian mengatur tinggi dan lebarnya menggunakan CSS. Untuk penulisannya bisa seperti ini atau menuliskannya di file lain yang nanti akan dipanggil dengan link.
Untuk source CSS bisa dilihat pada bagian yang berwarna abu-abu. Jika kita buka di browser maka tampilan gambarnta akan sama dengan hasil di code sebelumnya.
0 Komentar