Perlu kode untuk membungkus teks di sekitar gambar? Biasanya ketika Anda membuat halaman HTML , semuanya mengalir secara linier, artinya satu blok langsung demi satu. Semua posting saya sebelumnya adalah contohnya, yaitu teks, lalu gambar, lalu teks, dll.

Terkadang Anda mungkin ingin menyertakan teks di sebelah gambar, bukan 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 alih-alih 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 yang responsif.

Bungkus Teks di Sekitar Gambar menggunakan HTML

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagital. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc di lorem egestas non imperdiet enim congue.

Agar teks terbungkus di sepanjang sisi kanan gambar, Anda harus menyelaraskan gambar ke kiri:

<img src="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 menjadi "kanan".

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagital. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc di lorem egestas non imperdiet enim congue.

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

Itu dia! Cukup^(Pretty) 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 gaya CSS berikut:^(CSS)

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

Kode di atas menggunakan elemen CSS MARGIN^{(MARGIN CSS)} untuk menambahkan 10 piksel spasi putih di sisi kanan gambar. Karena kita telah menyelaraskan gambar ke kiri, kita ingin menambahkan spasi putih ke kanan.

Pada dasarnya, keempat angka tersebut mewakili TOP RIGHT BOTTOM LEFT . Jadi jika Anda ingin menambahkan spasi putih ke gambar rata kanan, Anda akan melakukan ini:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

Jadi cukup mudah 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 yang lebih halus atas pemosisian elemen dan bekerja lebih baik dengan standar pengkodean modern.

<img src="IMAGE URL" alt="A photo" class="left" />

Meskipun saya memasukkan CSS langsung ke dalam tag gambar dalam contoh HTML , Anda juga tidak boleh melakukannya lagi. Sebagai gantinya, Anda harus memiliki file terpisah yang disebut stylesheet yang menampung semua kode CSS Anda.^(CSS)

Di tag IMG , Anda cukup menetapkan kelas ke tag dan memberinya nama. Dalam contoh saya, saya menamai class left . 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 10px padding 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. ^(IMG)Ini juga lebih mudah untuk dikelola dan Anda dapat menggunakan lebih banyak properti CSS untuk menyesuaikan tampilan di halaman web Anda. Jika Anda memiliki pertanyaan, jangan ragu untuk berkomentar. Menikmati!

HTML Code to Wrap Text Around Image

Need the code to wraр text arоund an image? Normally when you create аn HTML page, everything flоws lіnearly, meaning one block directly after another. All of my рrevious posts are an example of this, i.e. text, then picture, then text, etc.

Sometimes you may want to include text next to an image instead of below it. This is called wrapping text around the image. It’s actually fairly easy to wrap text using HTML. Note that you don’t have to use CSS in order to wrap text.

However, these days the W3C recommends using CSS instead of HTML for these kinds of tasks. I’ll mention both methods below, but if you can, it’s better to use CSS since it’s more adaptable to responsive website designs.

Wrap Text Around Image using HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

In order to have the text wrap along the right side of the image, you have to align the picture to the left:

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

If you want the text to appear on the left and the image to appear at the far right, just change the align parameter to “right”.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

That’s it! Pretty easy right? The only time you would want to use CSS is if you want to add margins to the pictures, so that there is some space between the text and the image.

You can add margins to a picture by using the following CSS styling code:

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

The above code uses the MARGIN CSS element to add 10 pixels of whitespace on the right side of the image. Since we have aligned the image left, we want to add the whitespace to the right.

Basically, the four numbers represent TOP RIGHT BOTTOM LEFT. So if you want to add the white space to a right-aligned image, you would do this:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

So it’s fairly simple to use HTML to perform this task, but once again, it may not work well for responsive sites.

Wrap Text Around Image using CSS

The better way to wrap text around an image is to use CSS. It’s gives you more fine grain control over the positioning of the elements and works better with modern coding standards.

<img src="IMAGE URL" alt="A photo" class="left" />

Even though I included CSS directly into the image tag in the HTML example, you really should never do that anymore either. Instead, you should have a separate file called a stylesheet that holds all of your CSS code.

In the IMG tag, you simply assign a class to the tag and give it a name. In my example, I named the class left. In my stylesheet, all I have to do is add the following code:

.left {
 float: left;
 padding: 0 10px 0 0;}

As you can see, I added 10px of padding to the right side of the left-aligned image. I also used the float property to move the image out of the normal flow of the document and put it to the left side of the parent container.

As you can see, it’s much cleaner than adding all that code to the IMG tag itself. It’s also easier to manage and you can use a lot more CSS properties to customize the look on your webpage. If you have any questions, feel free to comment. Enjoy!

Related posts

• Cara Memindai Kode QR di iPhone dan Android

• Cara Mencetak Pesan Teks Dari Android

• Simpan Daftar Proses yang Berjalan ke File Teks di Windows

• Cara Mengunduh File dan Melihat Kode dari GitHub

• Cari Di Dalam Beberapa File Teks Sekaligus

• Cara Menonaktifkan Tombol Windows

• Cara Membuka File Gambar EPS di Windows

• Matikan Kontrol Akun Pengguna (UAC) untuk Aplikasi Tertentu

• Cara Membuat Tim di Microsoft Teams

• Resensi Buku - Panduan How-To Geek untuk Windows 8

• Convert Text ke HTML or XHTML dengan MarkdownPad untuk Windows PC

• Ekstrak Teks dari File PDF dan Gambar

• Cara Mengunduh Pemasang Google Chrome Offline (Mandiri)

• Cara Membuat Kode QR

• Cara Menjaga PC Windows Anda Tetap Hidup Tanpa Menyentuh Mouse

• Cara Membuka File HTML di Google Chrome

• Cara Pin Text and Image ke Clipboard History di Windows 10

• Cara Membuat Komputer Anda Membaca Teks dengan Keras

• Cara Melengkung Teks Di Photoshop

• Redirect Output dari Windows Command Line ke File Teks