Kode HTML untuk Membungkus Teks Di Sekitar Gambar

Kode HTML untuk Membungkus Teks Di Sekitar Gambar

Kode HTML untuk Membungkus Teks Di Sekitar Gambar.

 Kode HTML untuk Membungkus Teks Di Sekitar Gambar



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.

Daftar isi


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


clipart pc clipart pc


Lorem ipsum dolor sit amet, conectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagitalis. 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.


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

<img src="URL GAMBAR" align="left" /><p>Teks Anda ada di sini.</p>


Jika Anda ingin teks muncul di sebelah kiri dan gambar muncul di paling kanan, cukup ubah parameter align menjadi "kanan".


clipart pc clipart pc


Lorem ipsum dolor sit amet, conectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagitalis. 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="URL GAMBAR" align="kanan" /><p>Teks Anda ada di sini.</p>


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 gaya CSS berikut:

<img src="URL GAMBAR" align="kiri" style="margin: 0px 10px 0px 0px;” /><p>Teks Anda ada di sini.</p>


Kode di atas menggunakan elemen CSS MARGIN 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 KANAN ATAS KIRI BAWAH. Jadi jika Anda ingin menambahkan ruang putih ke gambar rata kanan, Anda akan melakukan ini:

<img src="URL GAMBAR" align="kanan" style="margin: 0px 0px 0px 10px;” /><p>Teks Anda ada di sini.</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="URL GAMBAR" alt="Foto" class="kiri" />


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.


Di tag IMG, Anda cukup menetapkan kelas ke tag dan memberinya nama. Dalam contoh saya, saya menamai kelas kiri. Di stylesheet saya, yang harus saya lakukan adalah menambahkan kode berikut:

.kiri {

 mengapung: kiri;

 pengisi: 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. 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!

Anda dapat menambahkan margin ke gambar dengan menggunakan kode gaya CSS berikut:

<img src="URL GAMBAR" align="kiri" style="margin: 0px 10px 0px 0px;” /><p>Teks Anda ada di sini.</p>


Kode di atas menggunakan elemen CSS MARGIN 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 KANAN ATAS KIRI BAWAH. Jadi jika Anda ingin menambahkan ruang putih ke gambar rata kanan, Anda akan melakukan ini:

<img src="URL GAMBAR" align="kanan" style="margin: 0px 0px 0px 10px;” /><p>Teks Anda ada di sini.</p>


Jadi cukup mudah menggunakan HTML untuk melakukan tugas ini, tetapi sekali lagi, ini mungkin tidak bekerja 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 elemen pemosisian dan bekerja lebih baik dengan standar pengkodean modern.

<img src="URL GAMBAR" alt="Foto" class="kiri" />


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


Di tag IMG, Anda cukup menetapkan kelas ke tag dan memberinya nama. Dalam contoh saya, saya menamai kelas kiri. Di stylesheet saya, yang harus saya lakukan adalah menambahkan kode berikut:

.kiri {

 di: kiri;

 pengisi: 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 di halaman web Anda. Jika Anda memiliki pertanyaan, jangan ragu untuk berkomentar. menikmati!


Sekian artikel tentang Kode HTML untuk Membungkus Teks Di Sekitar Gambar. Baca juga artikel mengenai 4 Kompresor dan Pengoptimal Gambar Online Hebat yang mungkin perlu Sobat ketahui.

Lebih baru Lebih lama