Monday, July 8, 2019

Memasukkan Gambar di HTML dan Panduan Mengatur Gambar di HTML Dengan Benar

Artikel kali ini kita akan membahas mengenai tag <img> tepatnya tag image yang berguna untuk memasukkan gambar di html dan php, ada beberapa point yang akan kita bahas, baik itu memasukkan gambar di html, cara mengatur ukuran gambar pada html, cara membuat posisi gambar di tengah, kiri dan kanan, cara menampilkan gambar dengan css, membuat border gambar di html mengatur jarak antar gambar di html, dan lain sebagainya.

Hal yang paling utama ialah memasukkan gambar di html


Untuk memasukkan gambar di html ada 2 cara yang sering digunakan, yaitu bisa dengan tag <img> yang dimasukkan dalam kode html langsung, atau bisa dengan menggunakan css, namun untuk memasukkan img dengan css biasa ada target image yang digunakan untuk apa, semisal background, icon dll.

Untuk memasukkan image atau gambar dengan tag <img> sebagai berikut ini

<img src="anakit.png">

Simple? Ya… “anakit.png” adalah gambar yang kebetulan saya ingin masukkan di html. Untuk lebih mempermudah, file gambar dan file html/php anda di tempatkan pada folder yang sama dalam localhost atau htdocs.

Bagaimana dengan menggunakan css untuk menampilkan gambar di html? Untuk memasukkan gambar di html menggunakan css, tentu kita harus mempalajari yang namanya link style lagi untuk menghubungkan kan html dan css, atau ada solusi lain yaitu dengan menambahkan css pada head saja.

Semisal kita ingin membuat background menggunakan image atau gambar, maka kita bisa menggunakan css background-image. Contohnya seperti berikut ini.


<style type="text/css">
body
{
background-image: img src="anakit.png";
}
</style>

Analoginya adalah sama, yaitu menggunakan tag <img> dan “src” sebagai import gambarnya.

Kemudian setelah kita tau cara memasukkan gambar di html, tentu gambar yang kita masukkan berukuran yang tidak karuan, ada yang kebesaran dan ada yang kekecilan. Nah untuk itu kita mengatur ukuran gambar pada html dengan menggunakan attribute yang mungkin tidak asing lagi buat kita, yaitu attribute width dan height. Attribute width berguna untuk mengatur ukuran lebar dari gambar atau image yang kita masukkan kedalam html, kemudian attribute height berguna untuk mengatur tinggi dari gambar yang dimasukkan. Kedua attribute ini di masukkan kedalam tag <img>. 

<img src="anakit.png" width="50" height="50">

Atau 

<img src="anakit.png" width="50%" height="50%">

Nah, didalam mengatur ukuran gambar pada html, untuk nilai attribute width dan height ada dua versi juga dalam pemberian nilai sebagai pengatur ukuran gambarnya.

Yang pertama adalah dengan menggunakan satuan pixel, bisa dituliskan 50 atau 50px, ini akan membuat gambar berukuran tetap meski lebar layar yang kita gunakan berubah-ubah, semisal dari layar desktop pindah ke layar tablet atau android, ukuran gambarnya akan sama. 

Berbeda dengan yang kedua, ini berdasarkan ukuran ruang yang disediakan untuk gambar tesebut, dan gambarnya akan mengisi sekian persen dari ruang tersebut, semisal, kamu ingin menampilkan gambar dengan ukuran setengah dari lebar layar (baik kecil atau besar), maka tinggal kamu beri saja width=”50%”, artinya gambar akan memiliki lebar yaitu 50% dari lebar layar.

Untuk lebih jelasnya, mungkin kamu perlu melakukan berapa ekperimen terhadap penggunaan pixel dan persen dalam mengatur ukuran gambar pada html.

Semisal, kamu ingin memasukkan gambar di dalam sebuah tabel dengan lebar tabel adalah 400px, kemudian kamu ingin memasukkan gambar kedalamnya dengan ukuran hamper penuh, kamu bisa saja memberikan width=”90%” dan height=”90%”. Yang berarti gambar akan ditampilkan pada tabel dengan ukuran 90% dari ukuran tabelnya, bukan dari ukuran layar laptop kita.

Ukuran gambar yang menggunakan persen cendrung lebih stabil dan responsive terhadap perubahan ukuran layar yang akan membuka halaman yang berisi gambar. Jadi, kemu bida menyesuaikan mana yang akan kamu gunakan dalam mengatur ukuran gambar pada html.

Mengatur Posisi Gambar di Tengah, Kiri dan Kanan pada HTML


Untuk mengatur posisi gambar di kiri atau juga kanan, kita menggunakan attribute yang namanya “align”,  attribute align berguna untuk mengatur posisi gambar di kiri atau kanan. Sesuai keinginan kita. Penggunaan attribute align dalam membuat gambar di tengah, kiri atau di kanan sebegai berikut ini

<img src="anakit.png" width="500px" height="500px" align="left">

atau

<img src="anakit.png" width="500px" height="500px" align="right">

Kamu bisa memilih dimana posisi gambar yang kamu masukkan dalam html, jika kamu ingin membuat posisi gambar berada pada bagian kiri, maka gunakan align=”left”, jika kamu ingin posisi gambar dikanan, gunakan align=”right”.

Mengatur Posisi Gambar Ditengah pada HTML


Posisi gambar di tengah? Biasanya untuk mengatur posisi ditengah, nilainya adalah “center”, namun pada attribute align tidak tersedia nilai “center” untuk di gunakan.

Lalu bagaimana membuat posisi gambar di tengah? Untuk membuat gambar posisi di tengah, kita menggunakan tag <center>, dimana tag <img> kita sisipkan antara pembuka dan penutup dari tag <center>, perhatikan contoh berikut ini.

<center><img src="anakit.png" width="500px" height="500px"></center>


Jadi untuk mengatur posisi gambar ditengah terpisah dengan cara mengatur gambar di kanan atau dikiri pada html.

Memberi Border Pada Gambar di HTML


Pemberian border pada gambar memang sangat jarang digunakan, namun selera orang pasti berbeda-beda. Border sejatinya adalah garis pinggir pada sekeliling baik itu gambar, table, dan lainnya.

Untuk memberikan border pada gambar,, tentunya menggunakan attribute “border”. Jika kita tidak menambahkan attribute ini, secara default gambar yang kita masukkan kedalam html memiliki border dengan nilai 0. Berikut ini saya contoh kan panambahan attribute border pada gambar di html.

<center><img src="anakit.png" width="500px" height="500px" border="2"></center>

Angka 2 adalah ukuran tebal garis pinggirnya, semakin besar nilainya, maka semakin tebal juga garisnya. Untuk mengatur warna dari border, kamu bisa merubahnya melalui css. Contohnya sebagai berikut ini


<html>
<head>
 <title></title>

 <style type="text/css">
  img{
   border-color: red; 
   border-radius: 10px;
  }
 </style>
</head>
<body>
<center><img src="anakit.png" width="500px" height="500px" border="2"></center>
</body>
</html>

Border-radius untuk mengatur ketajaman sudutnya, semisal dengan code css tersebut, maka contoh hasilya seperti berikut ini

cara memasukkan gambar di html dan script memasukkan gambar di html
Gambar memberikan border pada gambar


Garis merah adalah bordernya dengan ukuran border setebal “2”, kemudian yang saya maksud adalah ketajaman sudutnya adalah seperti yang ditandai dengan kotak hitam pada gambar diatas, sehingga sudutnya lebih enak untuk dipandang.


Mengatur Jarak Antar Gambar di HTML


Kemudian kita membahas tentang yang namanya margin, atau batas sisi yang berguna untuk mengatur jarak antar gambar di html apabila yang ingin dimasukkan pada html memiliki gambar lebih dari 2 dan berdempetan isitilah kunonya. Contohnya seperti berikut ini


<!DOCTYPE html>
<html>
<head>
 <title></title>

 <style type="text/css">
  img{
   border-color: red; 
   border-radius: 10px;
  }
 </style>
</head>
<body>
<center>
 <img src="anakit.png" width="100px" height="100px" border="2">
 <img src="anakit.png" width="100px" height="100px" border="2">
 <img src="anakit.png" width="100px" height="100px" border="2">
 <img src="anakit.png" width="100px" height="100px" border="2">
<br>
 <img src="anakit.png" width="100px" height="100px" border="2">
 <img src="anakit.png" width="100px" height="100px" border="2">
 <img src="anakit.png" width="100px" height="100px" border="2">
 <img src="anakit.png" width="100px" height="100px" border="2">
<br>
 <img src="anakit.png" width="100px" height="100px" border="2">
 <img src="anakit.png" width="100px" height="100px" border="2">
 <img src="anakit.png" width="100px" height="100px" border="2">
 <img src="anakit.png" width="100px" height="100px" border="2">
</center>
</body>
</html>
Maka hasilnya seperti berikut ini

mengatur jarak gambar di html dan mengatur posisi gambar di html
Mengatur jarak antar gambar di html


Nah, mungkin kamu ingin ada jarak yang lebih dari itu agar tidak terlalu berdempetan antara gambar satu dengan gambar yang lainnya. Untuk mengatur jarak antar gambar, seperti yang saya sampaikan tadi yaitu penggunaan margin. Margin ini diatur didalam css pilihannya sesuai dengan kamunya, mau member jarak keatas, bawah, kiri, kanan atau langsung otomatis kesemua arah, perhatikan gambar berikut ini




Gambar Memberikan Margin pada gambar di html

Ada beberapa pilihan yang bisa kamu pilih, untuk mengatur otomatis jarak keatas, kiri, kanan dan bawah, kamu pilih saja “margin” namun kalau kea rah tertentu, ya pilih saja apakah margin-top, margin-left dan seterusnya.

berikut ini saya contohkan penggunaan margin untuk mangtur jarak antar gambar di html ke segala arah



 <style type="text/css">
  img{
   border-color: red; 
   border-radius: 10px;
   margin: 10px;
  }
 </style>.

Maka hasilnya akan terlihat seperti gambar berikut ini

mengatur jarak antar gambar di html dan mengatur posisi gambar di html dengan css
Efek pemberian margin pada gambar di html

Bisa kamu lihat sudah ada jarak antar gambar, dan jaraknya juga rapi dan sama. 

Demikianlah pembahasan kita kali ini tentang bagaimana cara memasukkan gambar di html, memasukkan gambar dengan css, mengatur ukuran gambar di html, mengatur posisi gambar ditengah, kiri dan kanan, mengatur border gambar di html dan mengatur jarak antara gambar di html.


EmoticonEmoticon