Perlu kode untuk membungkus teks di sekitar gambar? Biasanya ketika Anda membuat halaman HTML, semuanya mengalir secara linear, yang berarti satu blok langsung setelah yang lain. Semua posting saya sebelumnya adalah contoh ini, yaitu teks, lalu gambar, lalu teks, dll.
Terkadang Anda mungkin ingin memasukkan teks di samping gambar, bukan di bawahnya. Ini disebut membungkus teks di sekitar gambar. Sebenarnya cukup mudah untuk membungkus teks menggunakan HTML. Perhatikan bahwa Anda tidak perlu menggunakan CSS untuk membungkus teks.
Namun, hari-hari ini W3C merekomendasikan menggunakan CSS, bukan HTML untuk jenis tugas 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 yang responsif.
Membungkus Teks Sekitar Gambar menggunakan HTML
Lorem ipsum dolor duduk amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis montir parturient, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Gunakan tombol ini di dalam lorem egestas non imperdiet enim congue.
Untuk membungkus teks di sepanjang sisi kanan gambar, Anda harus menyejajarkan gambar ke kiri:
<img itemprop="image" data-original="IMAGE URL" align="left" /><p>Your text goes here.</p>
Jika Anda ingin teks muncul di sebelah kiri dan gambar muncul di paling kanan, cukup ubah parameter align ke "kanan".
2
Lorem ipsum dolor duduk amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis montir parturient, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Untuk mengatasi masalah ini, Anda akan menemukan kata-kata yang lebih baik.
<img itemprop="image" data-original="IMAGE URL" align="right" /><p>Your text goes here.</p>
Itu saja! Sangat mudah bukan? Satu-satunya waktu Anda ingin menggunakan CSS adalah jika Anda ingin menambahkan margin pada gambar, sehingga ada ruang di antara teks dan gambar.
Anda dapat menambahkan margin ke gambar dengan menggunakan berikut kode styling CSS:
<img itemprop="image" data-original=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>
Kode di atas menggunakan elemen MARGIN CSS untuk menambahkan 10 piksel spasi di sisi kanan gambar. Karena kita telah menyejajarkan gambar yang tersisa, kita ingin menambahkan spasi di sebelah kanan.
Pada dasarnya, empat angka mewakili BAWAH TINGGI KANAN KIRI. Jadi jika Anda ingin menambahkan ruang putih ke gambar rata kanan, Anda akan melakukan ini:
<img itemprop="image" data-original=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>
Jadi cukup mudah untuk menggunakan HTML untuk melakukan tugas ini, tetapi sekali lagi, itu mungkin tidak berfungsi dengan baik untuk situs responsif.
Membungkus Teks Sekitar Gambar menggunakan CSS
Cara yang lebih baik untuk membungkus teks di sekitar gambar adalah dengan menggunakan CSS. Ini memberi Anda kendali butir yang lebih baik atas penempatan elemen dan bekerja lebih baik dengan standar pengkodean modern.
<img itemprop="image" data-original="IMAGE URL" alt="A photo" class="lazy left" />
Meskipun saya memasukkan CSS langsung ke dalam tag gambar dalam contoh HTML Anda juga seharusnya tidak pernah melakukan itu lagi. Sebagai gantinya, Anda harus memiliki file terpisah yang disebut stylesheet yang menyimpan semua kode CSS Anda.
Dalam tag IMG, Anda cukup menetapkan kelas ke tag dan memberinya nama. Dalam contoh saya, saya beri nama kelas kiri. Dalam stylesheet saya, yang harus saya lakukan adalah menambahkan kode berikut:
.left {
float: left;
padding: 0 10px 0 0;}
Seperti yang Anda lihat, saya menambahkan 10px padding ke sisi kanan gambar rata kiri . Saya juga menggunakan properti float untuk memindahkan gambar keluar dari aliran normal dokumen dan meletakkannya ke sisi kiri wadah induk.
Seperti yang Anda lihat, itu jauh lebih bersih daripada menambahkan semua kode itu ke tag IMG itu sendiri. Ini juga lebih mudah dikelola dan Anda dapat menggunakan lebih banyak properti CSS untuk menyesuaikan tampilan di halaman web Anda. Jika Anda memiliki pertanyaan, jangan ragu untuk berkomentar. Selamat menikmati!