Belajar HTML Part 12: Memasukan Gambar Di HTML

Cara Memasukan Gambar Di HTML

Selamat datang di artikel belajar HTML dasar untuk pemula bagian 12 yaitu cara memasukan gambar di HTML. Pada bagian ini kamu akan belajar menuliskan kode HTML untuk memasukan sebuah gambar kedalam website.
Menampilkan gambar di html merupakan salah satu hal yang paling penting ketika kamu membuat sebuah website ataupun aplikasi web. Dimana adanya gambar akan menciptakan tampilan yang menarik bagi orang yang melihatnya.
Tidak hanya membuat tampilan website menjadi menarik, gambar yang kamu masukan juga akan menjadi sebuah data.

Misalkan kamu membuat sebuah aplikasi web tentang penjualan, tentunya kamu memerlukan sebuah gambar agar pengguna dapat mengetahui bentuk dari produk yang kamu tawarkan.

Dari sini dapat disimpulkan bahwa gambar merupakan bagian terpenting atau wajib yang harus dimasukan ke dalam website, karena akan sangat membosankan jika melihat sebuah website hanya berisi tulisan saja.

Cara Memasukan Gambar di HTML

Untuk menampilkan gambar di HTML, kamu memerlukan tag <img> yang dapat menampilkan gambar dengan berbagai format seperti jpg, png, ataupun gif sekalipun.

Penulisan syntax untuk memasukan gambar di HTML sangatlah sederhana, berikut adalah contohnya.

<img> adalah tag pembuka untuk gambar, src adalah atribut untuk memberitahu dimana letak sumber gambar yang ingin ditampilkan, sedangkan url adalah lokasi gambar.

Menampilkan Gambar Dari Folder di HTML 

Sudah dijelaskan sebelumnya bahwa url adalah lokasi gambar yang akan kita tampilkan. Kalo kamu mau menampilkan gambar dari folder di HTML, berikut adalah contohnya.

1. Pastikan file kodingan dan folder gambar berada disatu tempat yang sama


2. Kamu tuliskan lokasi gambar pada syntax htmlnya.

gambar/perempuan/gambar_perempuan.jpg adalah lokasi gambar pada folder yang saya gunakan.

Merubah Ukuran Gambar di HTML

Dari syntak diatas, kamu sudah dapat menampilkan gambar di HTML. Tapi gambar yang ditampilkan ukurannya sesuai dengan gambar yang kamu masukan dan tidak bisa dirubah.
Untuk merubah ukurannya, kamu perlu menambahkan atribut Width dan Height. Berikut adalah contohnya.

Contoh syntax diatas menggunakan gambar 1 dengan lebar 500 dan tinggi 600 sedangkan gambar 2 dengan lebar 300 dan tinggi 300.

Berhasil Memasukan Gambar di HTML

Menambahkan Atribut alt Pada Gambar

Atribut alt digunakan untuk menambahkan deskripsi pada gambar apabila gambar nantinya tidak terload atau tidak muncul.
Jadi, atribut alt berperan untuk menjelaskan gambar yang tidak muncul tersebut dengan menggunakan teks. Berikut adalah contohnya.

Syntax <img src=”gambar_perempuan.jpg” akan menampilkan gambar, syntak dengan tambahan atribut alt ini alt=”ini adalah gambar perempuan cantik” akan menampilkan teks alternatif, syntax dengan atribut width dan height ini width=”500″ height=”600″> akan mengatur ukuran gambar.
Pada tahap ini kamu sudah berhasil memasukan gambar di HTML untuk keperluan website kamu. Syntax gambar bisa berdiri sendiri dan bisa juga ditambahkan dengan atribut pendukung lainnya seperti yang sudah dicontohkan.

Leave a Reply