Gambar adalah element penting yang ada di suatu situs web. Jika website hanya terdapat goresan pena saja, website tersebut tidak akan tampakmenarik. Para pengunjung situs web Anda pastinya akan jenuh bila tidak ada gambar di dalamnya. Dalam memasukkan gambar di website tentulah ada beberapa hal yang perlu Anda perhatikan, seperti letak atau posisi gambar. Posisi gambar yang pas menentukan situs web Anda apakah menarik atau tidak.
Daftar Isi
Cara Mengatur Posisi Gambar di HTML
Mengatur posisi gambar di HTML bekerjsama sungguh mudah. Cukup dengan menggunakan tag saja Anda telah bisa mengatur posisinya sesuai dengan cita-cita Anda. Langsung saja, silakan simak penjelasannya berikut ini.
1. Mengatur Posisi Gambar di Kanan
Untuk mengatur posisi gambar di HTML pasti sangatlah mudah. Anda tidak memerlukan suatu plugin atau script CSS apapun. Namun, jika Anda ingin mengontrol posisinya menggunakan CSS pun juga tetap bisa. Jika menggunakan CSS mungkin agak sedikit ribet. Tenang saja, Anda mampu mengatur posisinya cuma menggunakan tag saja. Langsung saja berikut ini pola script untuk mengatur posisi gambar di kanan.
Mengatur Posisi Gambar di HTML
Ini adalah acuan posisi gambar di kanan
Berdasarkan acuan script di atas, Anda hanya perlu menambahkan atribut align disertai dengan posisi yang Anda harapkan. Jika ingin berada di kanan maka tulislah right, seperti script di atas.
Gambar di bawah ini yaitu teladan hasil dari tampilan script di atas. Selamat menjajal !
2. Mengatur Posisi Gambar di Kiri
Pada dasarnya untuk mengatur posisi gambar di HTML script atau isyarat yang digunakan ialah sama adalah hanya memakai atribut align, perbedaannya hanya ada pada script posisi yang Anda kehendaki. Seperti cara yang kedua ini, untuk mengontrol posisi gambar di kiri bermakna Anda tinggal menulis left. Tulislah isyarat untuk posisi gambar dalam bahasa inggris adalah align=”left”.Contoh script nya mampu Anda lihat di bawah ini.
Mengatur Posisi Gambar di HTML
Ini adalah pola posisi gambar di kiri
Dapat Anda lihat pada script di atas, Anda hanya perlu mengganti nilai pada atribut align menjadi left. Cukup mudah kan guys. Berikut ini gambar hasil dari performa teladan script di atas. Selamat menjajal .
3. Mengatur Posisi Gambar di Tengah
Nah cara ketiga ini agak berbeda dari cara-cara sebelumnya. Untuk mengendalikan posisi gambar di tengah, Anda bisa menggunakan 3 metode. Silakan simak script untuk tata cara pertama di bawah ini.
Mengatur Posisi Gambar di HTML
Metode pertama yang bisa Anda gunakan ialah dengan memakai atribut style atau CSS. Di dalam style silakan Anda tambahkan display:block dan margin:auto. Kedua property ini harus ada semoga gambar berada di tengah. Untuk menciptakan posisi berada di kiri, Anda juga bisa memakai property ini, cuma saja pada diubah pada bagian display:block menjadi display:line.
Metode kedua ialah dengan memakai tag
Mengatur Posisi Gambar di HTML
Nah, untuk mengendalikan posisi gambar di tengah Anda bisa menciptakan tag berada di tengah-tengah tag
Mengatur Posisi Gambar di HTML
Ini pola gambar di tengah goresan pena
Script di atas menciptakan gambar berada di tengah-tengah tulisan. Berikut ini gambar dari hasil penampilan script-script di atas. Selamat mencoba!
4. Mengatur Posisi Gambar di Atas
Untuk menertibkan posisi gambar di atas Anda mampu memakai atribut align seperti cara pertama dan kedua. Berikut ini contoh script nya.
Mengatur Posisi Gambar di HTML
Ini teladan gambar di atas tulisan
Nilai yang Anda gunakan untuk menertibkan posisi gambar menjadi di atas yaitu top. Tampilan akan mirip gambar di bawah ini. Selamat mencoba!
5. Mengatur Posisi Gambar di Bawah
Dan cara kelima untuk mengatur posisi gambar berada di bawah yakni dengan menggunakan atribut align=”bottom”. Seperti teladan script di bawah ini.
Mengatur Posisi Gambar di HTML
Ini pola gambar di bawah tulisan
Sekian artikel kali ini yang membahas tentang bagaimana cara mengendalikan posisi gambar di HTML. Intinya Anda cuma perlu memakai atribut align dan dibarengi dengan nilai yang cocok dengan posisi gambar yang diinginkan. Semoga artikel ini dapat membantu dan bermanfaat bagi Anda. Terimakaisih 🙂
Sumber harus di isi