Selasa, 09-Agu-2022

Gambar pada HTML

0 BYAdmin

Halaman website tentunya tidak akan menarik jika di dalamnya tidak terdapat gambar. Dan gambar pun yang membuat visitor/user betah berlama-lama di satu halaman tersebut. Oleh karena itu perlu bagi kita untuk mempelajari bagaimana cara memasukkan gambar ke dalam halaman website / halaman html

Memasukkan Gambar

Anda bisa memasukan gambar ke dalam html menggunakan tag <img> Berikut adalah contoh formatnya.

  

tag <img> merupakan tag yang tidak memerlukan tag penutup. Alamat gambar bisa di isi dengan nama direktori dan nama filenya, juga di isi dengan url lengkap seperti misalnya http://namawebsite.com/direktori/namagambar.jpg

Contoh Penggunaannya

Siapkan gambar bernama gambarsaya.jpg atau gambar apapun sesuai keinginan anda, lalu taruh difolder yang sama dengan file html anda

 

ganti nama file pada bagian src sesuai dengan nama file Anda, lalu lihat hasilnya di browser.

Seperti Contoh

  Contoh Gambar

See the Pen Gambar pada HTML by Ilmuwebsite (@ilmuwebsite) on CodePen.

 

Contoh hasilnya akan seperti ini nantinya :

 

Jika gambar muncul maka Anda melakukannya dengan benar, namun jika belum, coba cek nama file yang ditulis apakah benar apa tidak, atau mungkin anda belum menaruh gambarnya di folder yang sama.

Mengatur Lokasi Gambar

Jika sebelumnya kita sudah mencoba menggunakan gambar yang ada di folder yang sama, bagaimana jika gambarnya berada di folder yang berbeda?

Sebagai contoh, siapkan folder bernama "images" yang letaknya sama dengan file html anda, lalu masukkan gambar yang ingin ditampilkan kedalam folder tersebut. Lalu kita menuliskan alamat gambarnya seperti ini.

  Contoh Gambar

Contoh diatas html akan memanggil file "gambarsaya.png" yang berada di folder "images" yang berada satu level dengan lokasi file html anda.

Mengatur Tinggi dan Lebar

Kita bisa mengatur tinggi dan lebar menggunakan atribut <width> untuk mengatur lebar dan <height> untuk mengatur tinggi sebuah gambar yang diukur menggunakan satuan px atau pixel.

Contoh

  Contoh Gambar

Contoh diatas akan menampilkan gambar berukuran tinggi 200 pixel dan lebar 400 pixel.