Cara Menampilkan Gambar Pada HTML
Gambar Pada HTML - Gambar merupakan salah satu elemen penting yang kerap kali muncul pada halaman website.
Gambar berguna untuk menampilkan informasi lebih lanjut maupun sebagai pelengkap konten pada halaman website.
Untuk itu, mari kita simak cara-cara untuk menampilkan gambar pada halaman website berikut.
Menampilkan Gambar
Untuk menampilkan gambar di HTML, kita dapat menggunakan tag img (image).
Tag ini tidak memerlukan tag penutup pada penulisanya.
Agar gambar dapat ditampilkan, tag ini memerlukan atribut src yang diisi dengan alamat file gambar.
Contoh
<img src="burger.jpg">
Hasilnya
Memberikan Alternatif Teks
Pada tag img terdapat sebuah atribut alt yang memiliki fungsi khusus.
Fungsi dari atribut alt untuk memberikan alternatif teks, yang akan muncul jika gambar tersebut tidak dapat ditampilkan.
Contoh
<img src="burgere.jpg" alt="Gambar Burger">
Hasilnya
Dikarenakan salah penulisan nama file gambar, sehingga gambarnya pun tidak muncul, namun dengan adanya atribut alt, munculah sebuah teks sebagai alternatif dari gambar yang tidak muncul tersebut.
Mengubah Ukuran Gambar
Untuk mengubah ukuran pada gambar, kita dapat menggunakan atribut width dan height.
Width untuk mengatur lebarnya, dan height untuk mengatur tingginya.
Contoh
<img src="burger.jpg" width="400px" height="400px">
Hasilnya
Untuk satuanya kita bisa menggunakan px, em, rem, persen, dsb
Menambahkan Bingkai/Border Pada Gambar
Untuk menambahkan bingkai pada gambar, kita dapat menggunakan atribut border, yang diisi dengan nilai ketebalan bingkainya.
Contoh
<img src="enak.jpg" border="3">
Hasilnya
Mengatur Posisi Gambar
Untuk mengatur posisi gambar, kita dapat menggunakan atribut align, yang diisi dengan posisinya.
Terdapat beberapa jenis posisi pada atribut align, antara lain:
- left (Kiri)
- right (Kanan)
- middle (Tengah)
- dsb
Contoh
<img src="enak.jpg" align="right">
Hasilnya
Referensi
Untuk referensi, anda dapat mengunjungi link berikut yang berisi penjelasan lebih lengkap.