Halo sob, piye kabare hari ini? Semoga sehat sentosa ya!
Postingan sebelumnya, kita sudah belajar membuat Tabel di postingan HTML: Membuat Tabel hingga memodiifikasinya di HTML: Modifikasi Tabel.
Kali ini, kita akan coba menampilkan gambar menggunakan HTML.
🐹 : “Keren kan? Heheheh..”
Untuk gambar, kita butuh tag <img/>
Silahkan buat file baru dengan nama 📄menampilkan-gambar.html dan juga buatkan struktur dasar HTML nya!
<!DOCTYPE html>
<html>
<head>
<title>Latihan Menampilkan Gambar</title>
</head>
<body>
</body>
</html>
Jika sudah, tulis kode untuk menampilkan gambar:
<img src=""/>
Silahkan buka filenya!
🐶 : “Loh.. kok ga muncul apa-apa?”
🦁 : “Ya.. HTML gatau, file gambar mana yang kau panggil..”
Untuk itu, silahkan cari sebuah gambar, kemudian taruh didalam folder projek kita.
Jika ingin menggunakan file yang sama seperti saya, silahkan download disini.
Sekarang file kita sudah siap!
Taruh nama file gambar tadi didalam nilai attribute src
<img src="filesaya.png"/>
Silahkan simpan dan refresh halaman!
🦁 : “Udah muncul kan?”
Memanggil File dari folder lain
Ini adalah cara yang umum dilakukan, agar nantinya tidak berceceran antara file lain.
Okeh.. Buka folder projek kita, kemudian buat folder baru dengan nama gambar
Setelah itu, pindahkan gambar tadi ke dalamnya.
Nah, coba refresh lagi halamannya.
🐼 : “Gambarnya ilang!!”
HTML mencari file tersebut namun tidak ketemu. Itu terjadi karena kita sudah memindahkannya di folder lain.
Nah, untuk mengakses/memanggilnya, kita harus menambahkan nama folder sebagai nilai dari attribute src seperti ini:
<img src="gambar/filesaya.png"/>
🦁 : “Bisa kan?”
Contoh menggunakan file gambar yang saya taruh:
Penjelasan Singkat
Kita bedah sedikit tentang kode kita yang ini:
<img src="gambar/filesaya.png"/>
img: Tag untuk menampilkan gambarsrc: Attribute untuk memanggil file (Source/Sumber)gambar: Folderfilesaya.png: Nama file (berupa sebuah gambar)
Kalo diubah dalam bahasa sehari-hari, mungkin bunyi-nya seperti ini:
“HTML, tolong tampilkan gambar (img) di folder gambar yang didalamnya (/) ada file dengan nama filesaya.png”.
Silahkan berkomentar bila ada yang kurang dimengerti. Sampai bertemu di postingan selanjutnya!