KBRN, Pontianak: Menampilkan ilustrasi gambar dalam sebuah website merupakan suatu hal yang penting. Selain dapat membuat tampilan website menjadi lebih menarik dan lebih informatif, dengan menampilkan gambar pada sebuah website juga dapat meningkatkan optimalisasi visibilitas pada mesin pencarian gambar.

Salah satu tampilan ilustrasi gambar yang menarik untuk diaplikasikan ke dalam sebuah website adalah dengan membuat gambar tersebut berada di samping text pada artikel dimana posisi text tersebut bersifat menyesuaikan dengan bentuk dan ukuran gambar, sehingga memberikan kesan yang lebih variatif dan juga efisien.

Berikut ini cara membuat ilustrasi gambar yang berada di samping text pada artikel dengan menggabungkan antara elemen HTML dan atribut CSS:

Keterangan:

• Atribut style=”float:left” digunakan untuk menentukan posisi gambar yang akan berada pada bagian kiri website.
• Atribut digunakan untuk mensejajarkan posisi kanan dan kiri teks agar memberikan kesan lebih rapi.
• Nilai margin 0 untuk jarak atas gambar, nilai margin 8 untuk jarak kanan gambar, nilai margin 4 untuk jarak bawah gambar, dan nilai margin 0 untuk memisahkan jarak antara teks dengan gambar
• Nilai width sebesar 80% digunakan untuk menentukan ukuran lebar teks dan gambar
  

Penggunaan tag bertujuan untuk mengelompokkan beberapa atribut seperti penyesuaian text, warna background dan garis, serta pengaturan ulang jarak antara teks dengan gambar. Selain itu, juga terdapat tag yang berfungsi untuk menambahkan dan mengatur posisi gambar serta mengatur jarak antara gambar teks.

Adapun hasil layout-nya akan seperti ini:

Dalam menambahkan ilustrasi gambar ke dalam website, sebaiknya menggunakan gambar yang responsive agar dapat menyesuaikan dengan berbagai macam perangkat. Selain itu, ilustrasi gambar tersebut harus relevan dengan topik artikel yang sedang dibahas agar memudahkan para pembaca dalam menyerap informasi. (Penulis: Yunata/RRI Pontianak)

Sumber:

https://buatblogspo.blogspot.com/2014/10/cara-membuat-posisi-gambar-di-samping.html

https://jadijago.com/image-seo-pengertian-dampak-dan-cara-optimasinya/