Cara Menyisipkan Gambar Dan Cara Mengganti Gambar Mengikuti Tombol - Part 1 (HTML)
Niguru.com | Rabu, 27 Jan 2021 | Untuk pemilik website yang ingin mempercantik tampilan website dengan gambar-gambar yang dinamis dan informatif bisa mencoba cara berikut ini sebagai alternatif.
Pada posting kali ini Niguru.com akan menjelaskan mengenai cara menyisipkan gambar pada website, sekaligus cara mengakali gambar dengan Javascript agar dapat berganti gambar mengikuti tombol yang ditekan oleh pengunjung website.
Niguru.com akan memulai dengan script HTML untuk menyisipkan gambar. Sintaks untuk menyisipkan gambar adalah:
<img src="file_gambar">
Contoh gambar dengan nama file "cat.jpg" dengan ukuran 640 pixel bujur sangkar:
Contoh script:
<h1>Belajar Menyisipkan Gambar</h1>
<img src="cat.jpg">
Simpan dengan nama cat.html (boleh disimpan dengan nama lain):
Buka file cat.html pada browser. Hasilnya:
Gunakan sintaks berikut ini untuk mengatur ukuran gambar:
<img src=" file_gambar " style="width: lebar; height: tinggi">
Niguru.com menggunakan untuk memodifikasi program HTML sebelumnya:
<h1>Belajar Menyisipkan Gambar</h1>
<img src="cat.jpg" style="width: 380px; height: 380px">
Simpan dengan nama cat02.html (boleh disimpan dengan nama lain):
Buka file cat02.html pada browser. Hasilnya:
Siapkan gambar dengan ukuran yang sama dengan gambar pertama (dalam contoh = 640px bujur sangkar), dan catat nama file gambar tersebut untuk dituliskan dalam script, misal: cat.jpg, rabbit.jpg, dan dog.jpg:
<h1>Belajar Menyisipkan Gambar</h1>
<img src="cat.jpg" style="width: 380px; height: 380px">
<img src="rabbit.jpg" style="width: 380px; height: 380px">
<img src="dog.jpg" style="width: 380px; height: 380px">
Simpan dengan nama cat03.html (boleh disimpan dengan nama lain):
Buka file cat03.html pada browser. Hasilnya:
Demikianlah penjelasan mengenai cara untuk menyisipkan gambar pada website.
Selamat mencoba .. Have a nice day :-)
Posting Komentar untuk "Cara Menyisipkan Gambar Dan Cara Mengganti Gambar Mengikuti Tombol - Part 1 (HTML)"