Gambar atau Image adalah hal yang sangat penting dalam tampilan website. Gambar dapat digunakan untuk mempercantik halaman web. Selain itu gambar juga dapat digunakan untuk lebih memperjelas sebuah informasi. Di tutorial ini akan dibahas bagaimana menampilkan gambar di halaman website dengan HTML.
Menampilkan Gambar Dengan HTML
Untuk menampilkan gambar di halaman web dengan HTML, kalian dapat menggunakan tag <img>. Format penulisan tag image adalah sebagai berikut:
1 |
<img src="url_gambar" nama_atribut="nilai_atribut"/> |
Tag <img> tidak memiliki tag penutup, namun berisi atribut-atribut untuk memanggil gambar dan memberikan format standar pada gambar.
Cara Penggunaan Tag <img>
Untuk belajar menggunakan Tag <img>, silahkan ketik beberapa baris kode HTML berikut ini dan amati hasil yang ditampilkan.
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title>Menampilkan Gambar/Image di Halaman Web dengan HTML</title> </head> <body> <h3>Gambar Ikan Bawal</h3> <img src="images/ikan_bawal.jpg" alt="Ikan Bawal" /> </body> </html> |
Silahkan jalankan file HTML image kalian dan jika gambar tidak tampil dan menampilkan teks “Ikan Bawal”, kalian tidak perlu panik, silahkan lakukan langkah-langkah berikut ini:
- Pastikan url gambar sudah menuju ke alamat gambar di penyimpanan kalian. Perhatikan atribut src=”images/ikan_bawal.jpg”, atribut tersebut bermaksud menentukan sumber gambar yang akan ditampilkan berada pada folder images dan file gambar dengan nama ikan_bawal.jpg. Sehingga, kalian harus memiliki folder images dan file ikan_bawal.jpg di folder project latihan atau folder web kalian.
- Pastikan ekstensi file gambar sudah benar seperti .jpg, .png atau .gif.
Jika 2 langkah di atas sudah benar silahkan reload kembali halaman browser kalian dan insyaallah Gambar akan tampil seperti pada contoh berikut ini.
Mengatur Lebar dan Tinggi Gambar di HTML
Secara default html akan menampilkan gambar dalam ukuran aslinya. Kalian dapat mengatur lebar dan tinggi gambar sesuai kebutuhan menggunakan atribut width dan height. Kalian dapat menentukan lebar dan tinggi gambar dalam ukuran pixel (px) atau persentase (%) dari ukuran sebenarnya.
Contoh Mengatur Lebar dan Tinggi Gambar di HTML
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title>Menampilkan Gambar/Image di Halaman Web dengan HTML</title> </head> <body> <h3>Gambar Ikan Bawal</h3> <img src="images/ikan_bawal.jpg" alt="Ikan Bawal" width="200px" height="120px" /> </body> </html> |
Hasil dari penambahan atribut width dan height pada kode HTML di atas, lihat pada gambar di bawah ini.
Memberikan Border/Garis Tepi Gambar dengan HTML
Secara default, gambar akan memiliki perbatasan di sekitarnya, kalian dapat menentukan ketebalan perbatasan dalam ukuran pixel menggunakan atribut border.
Contoh Cara Memberikan Border pada Gambar di HTML
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title>Menampilkan Gambar/Image di Halaman Web dengan HTML</title> </head> <body> <h3>Gambar Ikan Bawal</h3> <img src="images/ikan_bawal.jpg" alt="Ikan Bawal" width="200px" height="120px" border="3" /> </body> </html> |
Hasil penambahan border pada gambar dengan menambah atribut border=”3″ terlihat pada gambar di bawah ini.
Demikian tutorial bagaimana cara menampilkan gambar di website dengan HTML Image. Semoga bermanfaat.