Perlu kode untuk membungkus teks di sekitar gambar? Biasanya ketika Anda membuat halaman HTML, semuanya mengalir secara linear, yang berarti satu blok secara langsung setelah yang lain. Semua posting saya sebelumnya adalah contoh dari ini, yaitu teks, lalu gambar, lalu teks, dll.
Terkadang Anda mungkin ingin memasukkan teks di sebelah gambar alih-alih di bawahnya. Ini disebut membungkus teks di sekitar gambar. Sebenarnya cukup mudah untuk membungkus teks menggunakan HTML. Perhatikan bahwa Anda tidak harus menggunakan CSS untuk membungkus teks.
Namun, akhir-akhir ini W3C merekomendasikan penggunaan CSS daripada HTML untuk tugas-tugas semacam ini. Saya akan menyebutkan kedua metode di bawah ini, tetapi jika Anda bisa, lebih baik menggunakan CSS karena lebih mudah beradaptasi dengan desain situs web responsif.
Bungkus Teks di Sekitar Gambar menggunakan HTML
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Baca lebih lanjut dengan kata lain, ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Dengan bantuan sosial dan keselamatan di sebelah ibu hamil, Anda harus mencarinya. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Gunakan tombol khusus untuk semua yang tidak tertanggal.
Untuk membuat bungkus teks di sepanjang sisi kanan gambar, Anda harus menyelaraskan gambar ke kiri:
Teks Anda ada di sini.
Jika Anda ingin teks muncul di sebelah kiri dan gambar muncul di paling kanan, ubah saja parameter align ke “kanan”.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Baca lebih lanjut dengan kata lain, ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Dengan bantuan sosial dan keselamatan di sebelah ibu hamil, Anda harus mencarinya. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Gunakan tombol khusus untuk semua yang tidak tertanggal.
Teks Anda ada di sini.
Itu dia! Cukup mudah bukan? Satu-satunya waktu Anda ingin menggunakan CSS adalah jika Anda ingin menambahkan margin ke gambar, sehingga ada beberapa ruang antara teks dan gambar.
Anda dapat menambahkan margin ke gambar dengan menggunakan kode styling CSS berikut:
Teks Anda ada di sini.
Kode di atas menggunakan elemen MARGIN CSS untuk menambahkan 10 piksel spasi di sisi kanan gambar. Karena kami telah menyelaraskan gambar ke kiri, kami ingin menambahkan spasi putih ke kanan.
Pada dasarnya, keempat angka tersebut mewakili KIRI BOTTOM TOP RIGHT. Jadi jika Anda ingin menambahkan ruang putih ke gambar rata kanan, Anda akan melakukan ini:
Teks Anda ada di sini.
Jadi cukup sederhana untuk menggunakan HTML untuk melakukan tugas ini, tetapi sekali lagi, ini mungkin tidak berfungsi dengan baik untuk situs yang responsif.
Bungkus Teks di Sekitar Gambar menggunakan CSS
Cara yang lebih baik untuk membungkus teks di sekitar gambar adalah dengan menggunakan CSS. Ini memberi Anda kontrol butir lebih baik atas penentuan posisi elemen dan bekerja lebih baik dengan standar pengkodean modern.
Meskipun saya memasukkan CSS secara langsung ke dalam tag gambar dalam contoh HTML, Anda juga seharusnya tidak pernah melakukannya lagi. Sebagai gantinya, Anda harus memiliki file terpisah yang disebut stylesheet yang menampung semua kode CSS Anda.
Di tag IMG, Anda cukup menetapkan kelas untuk tag dan memberinya nama. Dalam contoh saya, saya beri nama kiri kelas. Di stylesheet saya, yang harus saya lakukan adalah menambahkan kode berikut:
.left {float: left; padding: 0 10px 0 0;} Seperti yang Anda lihat, saya menambahkan padding 10px ke sisi kanan gambar rata kiri. Saya juga menggunakan properti float untuk memindahkan gambar dari aliran normal dokumen dan meletakkannya di sisi kiri wadah induk.
Seperti yang Anda lihat, ini jauh lebih bersih daripada menambahkan semua kode itu ke tag IMG itu sendiri. Ini juga lebih mudah untuk dikelola dan Anda dapat menggunakan lebih banyak properti CSS untuk menyesuaikan tampilan pada halaman web Anda. Jika Anda memiliki pertanyaan, jangan ragu untuk berkomentar. Nikmati!
