Cara Menampilkan Gambar di Halaman Web

Dipublikasikan oleh Muhammad Zen pada

Pada tulisan ini kita akan membahas bagaimana cara menampilkan gambar di halaman web. Gambar adalah elemen penting dari sebuah artikel. Bahkan gambar adalah jenis data yang sangat sering disimpan dan digunakan. Contoh, gambar banyak digunakan pada alikasi toko online.

Oleh sebab itu, gambar adalah salah satu materi belajar pemrograman web yang wajib dipelajari.

Setelah mengetahui fungsi gambar. Mari kita kenalan dengan tag <img>. Tag inilah yang digunakan untuk menampikan gambar. Sedangkan atribut yang paling penting dari tag tersebut adalah src. Format dasar dari tag ini sebagai berikut:

<img src="url">

Sedikit saya akan jelaskan mengenai url. URL adalah singkatan dari Uniform Resource Locator. Dapat diartikan sebagai perujuk lokasi sumber seragam. Sumber yang dimaksud yaitu file gambar.

1. Cara Menampilkan Gambar

Tag <img> masuk ke dalam kategori block-line. Artinya tag ini punya sifat jatuh ke bawah. Maksudnya, apa pun setelah gambar akan berada di bawah.

Agar dapat menampilkan gambar url harus benar dan valid.

Oleh sebab itu mari ikuti petunjuk saya. Tempatkan file html satu forlder dengan gambarnya. Maka anda cukup menuliskan nama gambar serta formatnya di bagian url. Lihat contoh berikut.

<img src="gambar.png">

Namun jika anda ingin menampilkan gambar dari internet caranya seperti berikut.

<img src="https://1.bp.blogspot.com/-Ow0VUsjQCv0/XiMg_aS_61I/AAAAAAAABCY/OdXdDn75ZFUbg6wNvNfSdczxnC5I4FdfQCNcBGAsYHQ/s1600/kucing.jpeg" />

Jenis url cara pertama disebut relatif url sedangkan yang kedua absolut url. Materi url ini akan dibahas pada postingan tersendiri.

2. Cara Mengatur Ukuran Gambar

Untuk mengatur ukuran dari sebuah gambar. Maka atribut yang digunakan adalah width dan height.

<!--img width="value" height="value"  src="url" /-->
<img width="100px" heigth="100px" src="https://1.bp.blogspot.com/-Ow0VUsjQCv0/XiMg_aS_61I/AAAAAAAABCY/OdXdDn75ZFUbg6wNvNfSdczxnC5I4FdfQCNcBGAsYHQ/s1600/kucing.jpeg" />

Satuan yang dapat digunakan dalam ukuran gambar px atau %. Satuan tersebut juga berlaku untuk yang lain.

  • px (pixel) di gunakan untuk ukuran gambar berdasarkan pixel.
  • % di gunakan untuk ukuran gambar berdasarkan persentase ukuran original gambar.
3. Cara Membuat Gambar Rata Tengah

Terkadang, kita menginginkan gambar berada di tengah-tengah. Maka caranya menggunakan tag <center>. Walaupun sebenarnya tag center ini berfungsi juga untuk selain gambar.

<!--center><img width="value" height="value"  src="url" /><center-->
<center><img width="100px" heigth="100px" src="https://1.bp.blogspot.com/-Ow0VUsjQCv0/XiMg_aS_61I/AAAAAAAABCY/OdXdDn75ZFUbg6wNvNfSdczxnC5I4FdfQCNcBGAsYHQ/s1600/kucing.jpeg" /></center>
4. Cara Membuat Gambar Berbentuk Lingkaran

Jika ingin membuat gambar berbentuk linkaran caranya menggunakan atribut style atau css. properti css yang digunakan adalah border-radius.

<!--center><img style="border-radius: 50%" width="value" height="value"  src="url" /><center-->
<center><img style="border-radius: 50%" width="100px" heigth="100px" src="https://1.bp.blogspot.com/-Ow0VUsjQCv0/XiMg_aS_61I/AAAAAAAABCY/OdXdDn75ZFUbg6wNvNfSdczxnC5I4FdfQCNcBGAsYHQ/s1600/kucing.jpeg" /></center>

Sempurna tidaknya bentuk lingkaran dipengaruhi oleh bentuk gambar. gambar persegi menghasilkan lingkaran sempurna.

5. Cara Membuat Gambar Transparan

Jika ingin gambar sedikit blur atau transparan, maka dapat mengaturnya menggunakan css seperti contoh berikut.

<!--center><img style="opacity: 0.5;" width="value" height="value"  src="url" /><center-->
<center><img style="opacity: 0.5;" width="100px" heigth="100px" src="https://1.bp.blogspot.com/-Ow0VUsjQCv0/XiMg_aS_61I/AAAAAAAABCY/OdXdDn75ZFUbg6wNvNfSdczxnC5I4FdfQCNcBGAsYHQ/s1600/kucing.jpeg" /></center>

Untuk mempelajari materi berikutnya silahkan kunjungi menu kursus.

Kategori: HTML

0 Komentar

Tinggalkan Balasan

Avatar placeholder

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *