Cara Membungkus Teks di Sekitar Gambar

Lihatlah halaman web mana pun dan Anda akan melihat kombinasi konten teks dan citra. Kedua elemen ini merupakan unsur penting dalam kesuksesan sebuah situs web. Konten teks adalah apa yang akan dibaca oleh pengunjung situs dan apa yang akan digunakan oleh mesin pencari sebagai bagian dari algoritma peringkat mereka. Gambar akan menambahkan minat visual ke situs dan membantu menonjolkan konten teks.

Menambahkan teks dan gambar ke situs web itu mudah. Teks ditambahkan dengan tag HTML standar seperti paragraf, judul, dan daftar, sementara gambar ditempatkan pada halaman dengan elemen . Setelah Anda menambahkan gambar ke halaman web Anda, Anda mungkin ingin memiliki aliran teks di sebelah gambar, daripada menyelaraskan di bawahnya (yang merupakan cara default gambar yang ditambahkan ke kode HTML akan ditampilkan di browser). Secara teknis, ada dua cara Anda dapat mencapai tampilan ini, baik dengan menggunakan CSS (disarankan) atau dengan menambahkan instruksi visual langsung ke HTML (tidak disarankan, karena Anda ingin mempertahankan pemisahan gaya dan struktur untuk situs web Anda).

Menggunakan CSS

Cara yang benar untuk mengubah cara tata letak teks dan gambar halaman dan bagaimana gaya visual mereka muncul di browser adalah dengan CSS . Ingat saja, karena kita berbicara tentang perubahan visual pada halaman (membuat teks mengalir di sekitar gambar), ini berarti itu adalah domain Cascading Style Sheets.

1. Pertama, tambahkan gambar Anda ke halaman web Anda. Ingat untuk mengecualikan karakteristik visual apa pun (seperti nilai lebar dan tinggi) dari HTML itu. Ini penting, terutama untuk situs web responsif di mana ukuran gambar akan bervariasi berdasarkan browser. Perangkat lunak tertentu, seperti Adobe Dreamweaver, akan menambahkan informasi lebar dan tinggi ke gambar yang disisipkan dengan alat itu, jadi pastikan untuk menghapus informasi ini dari kode HTML! Namun, pastikan untuk menyertakan teks alt yang sesuai . Berikut ini contoh bagaimana kode HTML Anda terlihat:
2. Untuk tujuan styling, Anda juga dapat menambahkan kelas ke suatu gambar. Nilai kelas ini adalah apa yang akan kita gunakan dalam file CSS kami. Perhatikan bahwa nilai yang kami gunakan di sini adalah sewenang-wenang, meskipun, untuk gaya khusus ini, kami cenderung menggunakan nilai "kiri" atau "kanan", bergantung pada cara mana kami ingin gambar kami diselaraskan. Kami menemukan sintaks yang sederhana untuk bekerja dengan baik dan mudah bagi orang lain yang mungkin harus mengelola situs di masa depan untuk memahami, tetapi Anda dapat memberikan nilai kelas ini yang Anda inginkan.
   2. Dengan sendirinya, nilai kelas ini tidak akan melakukan apa-apa. Gambar tidak secara otomatis akan disejajarkan dengan sisi kiri teks. Untuk ini, kita sekarang perlu beralih ke file CSS kami.

1. Di stylesheet Anda, kini Anda dapat menambahkan gaya berikut:
   1. .left {
   2. float: kiri;
   3. padding: 0 20px 20px 0;
   4. }
   5. Apa yang Anda lakukan di sini adalah menggunakan properti "float" CSS , yang akan menarik gambar dari aliran dokumen normal (cara gambar biasanya akan ditampilkan, dengan teks disejajarkan di bawahnya) dan akan meluruskannya ke sisi kiri wadahnya . Teks yang muncul setelahnya di markup HTML dengan sekarang membungkusnya. Kami juga menambahkan beberapa nilai padding sehingga teks ini tidak akan tetapi langsung terhadap gambar. Sebaliknya, itu akan memiliki beberapa jarak yang bagus yang akan menarik secara visual dalam desain halaman. Dalam singkatan CSS untuk padding, kami menambahkan 0 nilai ke sisi atas dan kiri gambar, dan 20 piksel ke kiri dan bawah. Ingat, Anda perlu menambahkan beberapa padding sisi kanan gambar rata kiri. Gambar rata kanan (yang akan kita lihat sebentar lagi) akan memiliki padding yang diterapkan ke sisi kirinya.
2. Jika Anda melihat halaman web Anda di browser, Anda sekarang harus melihat bahwa gambar Anda sejajar dengan sisi kiri halaman dan teks dengan baik membungkus di sekitarnya. Cara lain untuk mengatakan ini adalah bahwa gambar itu "melayang ke kiri".

1. Jika Anda ingin mengubah gambar ini untuk disejajarkan ke kanan (seperti pada contoh foto yang menyertai artikel ini), itu akan sederhana. Pertama, Anda harus memastikan bahwa, selain gaya yang baru saja kami tambahkan ke CSS kami untuk nilai kelas "kiri", kami juga memiliki satu untuk perataan kanan. Akan terlihat seperti ini:
   1. .right {
   2. float: benar;
   3. padding: 0 0 20px 20px;
   4. }
   5. Anda dapat melihat bahwa ini hampir identik dengan CSS pertama yang kami tulis. Satu-satunya perbedaan adalah nilai yang kami gunakan untuk properti "float" dan nilai padding yang kami gunakan (menambahkan beberapa ke sisi kiri gambar kami, bukan kanan).
2. Akhirnya, Anda akan mengubah nilai kelas gambar dari "kiri" menjadi "kanan" di HTML Anda:
3. Lihat halaman Anda di browser sekarang dan gambar Anda harus sejajar ke kanan dengan teks tertata rapi di sekitarnya. Kami cenderung menambahkan kedua gaya ini, "kiri" dan "kanan" ke semua stylesheet kami sehingga kami dapat menggunakan gaya visual ini sesuai kebutuhan saat kami membuat halaman web. Kedua gaya ini menjadi fitur yang bagus dan dapat digunakan kembali yang dapat kita gunakan kapan pun kita perlu menata gambar dengan pembungkus teks di sekitarnya.

Menggunakan HTML Alih-alih CSS (dan Mengapa Anda Tidak Harus Melakukan Ini)

Meskipun dimungkinkan untuk membungkus teks di sekitar gambar dengan HTML, standar web menentukan bahwa CSS (dan langkah-langkah yang disajikan di atas) adalah cara untuk pergi sehingga kita dapat mempertahankan pemisahan struktur (HTML) dan gaya (CSS). Ini sangat penting ketika Anda mempertimbangkan bahwa, untuk beberapa perangkat dan tata letak, teks itu mungkin tidak perlu mengalir di sekitar gambar. Untuk layar yang lebih kecil, tata letak situs web yang responsif mungkin mengharuskan teks benar-benar sejajar di bawah gambar dan bahwa gambar membentang lebar penuh layar. Ini mudah dilakukan dengan kueri media jika gaya Anda terpisah dari markup HTML Anda. Dalam dunia multi-perangkat saat ini, di mana gambar dan teks akan muncul secara berbeda untuk pengunjung yang berbeda dan pada layar yang berbeda, pemisahan ini sangat penting untuk kesuksesan jangka panjang dan pengelolaan halaman web.