Elemen tingkat blok dalam dokumen HTML (mis. Halaman web) muncul secara berurutan. Untuk mengubah urutan agar halaman tampak lebih menarik atau untuk meningkatkan kegunaannya Anda harus membungkus blok, termasuk gambar, sehingga teks halaman tersebut mengalir di sekitarnya.
Dalam istilah web, efek ini dikenal sebagai "mengambang" gambar. Gaya ini dicapai dengan properti CSS untuk "float." Properti ini memungkinkan teks mengalir di sekitar gambar rata kiri ke sisi kanannya. Atau di sekitar gambar rata kanan ke sisi kiri.
Mulai dengan HTML
Hal pertama yang perlu Anda lakukan adalah menggunakan beberapa HTML. Untuk contoh kami, kami akan menulis paragraf teks dan menambahkan gambar di awal paragraf (sebelum teks, tetapi setelah pembukaan
menandai). Berikut adalah tampilan markup HTML:
Teks paragraf ada di sini. Dalam contoh ini, kami memiliki gambar foto kepala, jadi teks ini kemungkinan besar tentang orang yang menjadi sasaran gambar kepala.
Secara default, halaman web kami akan ditampilkan dengan gambar di atas teks, karena gambar adalah elemen tingkat blok dalam HTML. Ini berarti bahwa peramban menampilkan jeda baris sebelum dan sesudah elemen gambar secara default. Kami akan mengubah tampilan default ini dengan beralih ke CSS. Namun, pertama, kami akan menambahkan nilai kelas ke elemen gambar kami. Kelas itu akan bertindak sebagai "hook" yang akan kita gunakan dalam CSS kita nanti.
Teks paragraf ada di sini. Dalam contoh ini, kami memiliki gambar foto kepala, jadi teks ini kemungkinan besar tentang orang yang menjadi sasaran gambar kepala.
Perhatikan bahwa kelas "kiri" ini sama sekali tidak memiliki apa-apa. Bagi kami untuk mencapai gaya yang kami inginkan, kami perlu menggunakan CSS berikutnya.
Gaya CSS
Dengan HTML kami di tempat (termasuk atribut kelas kami dari "kiri") sekarang kita dapat beralih ke CSS. Kami akan menambahkan aturan ke stylesheet kami yang akan mengapung gambar itu dan juga menambahkan sedikit padding di sampingnya sehingga teks yang pada akhirnya akan membungkus gambar tidak terlalu menonjol. Berikut ini CSS yang mungkin Anda tulis:
.left { float: kiri; padding: 0 20px 20px 0;}
Gaya ini mengapung gambar itu ke kiri dan menambahkan sedikit padding (menggunakan beberapa singkatan CSS) ke kanan dan bawah gambar. Jika Anda meninjau halaman yang berisi HTML ini di browser, gambar sekarang akan sejajar ke kiri dan teks paragraf akan muncul di sebelah kanannya dengan jumlah spasi yang tepat di antara keduanya. Perhatikan nilai kelas "kiri" yang kami gunakan sewenang-wenang. Kita bisa menyebutnya apa saja karena istilah "kiri" tidak melakukan apa-apa. Apa pun istilah yang Anda gunakan harus memiliki atribut kelas dalam HTML yang bekerja dengan gaya CSS aktual yang menentukan perubahan visual yang ingin Anda buat. Pendekatan ini memberikan elemen gambar atribut kelas dan kemudian menggunakan gaya CSS umum yang mengapung elemen hanya satu cara Anda dapat mencapai tampilan "gambar rata kiri" ini. Anda juga dapat mengambil nilai kelas dari gambar dan gaya dengan CSS dengan menulis pemilih yang lebih spesifik. Sebagai contoh, mari kita lihat contoh di mana gambar itu berada di dalam pembagian dengan nilai kelas "konten utama". Untuk mengatur gaya gambar ini, Anda bisa menulis CSS ini: .main-content img { float: kiri; padding: 0 20px 20px 0;}
Dalam skenario ini, gambar kita akan disejajarkan ke kiri, dengan teks mengambang di sekitarnya seperti sebelumnya, tetapi kita tidak perlu menambahkan nilai kelas ekstra ke markup kami. Melakukan hal ini dalam skala dapat membantu membuat file HTML yang lebih kecil, yang akan lebih mudah dikelola dan juga dapat membantu meningkatkan kinerja. Akhirnya, Anda bahkan dapat menambahkan style langsung ke markup HTML Anda, seperti ini:
Metode ini disebut "gaya sebaris." Tidak disarankan karena menggabungkan gaya elemen dengan markup strukturalnya. Praktik terbaik web menentukan bahwa gaya dan struktur halaman harus tetap terpisah. Segregasi ini sangat membantu ketika halaman Anda perlu mengubah tata letaknya dan mencari ukuran layar dan perangkat yang berbeda dengan situs web yang responsif. Memiliki gaya halaman yang terjalin dalam HTML akan membuatnya jauh lebih sulit untuk membuat kueri media yang akan menyesuaikan tampilan situs Anda jika diperlukan untuk layar yang berbeda. Cara Alternatif untuk Mencapai Gaya Ini
Teks paragraf ada di sini. Dalam contoh ini, kami memiliki gambar foto kepala, jadi teks ini kemungkinan besar tentang orang yang menjadi sasaran gambar kepala. Hindari Gaya Inline
Teks paragraf ada di sini. Dalam contoh ini, kami memiliki gambar foto kepala, jadi teks ini kemungkinan besar tentang orang yang menjadi sasaran gambar kepala.
