Kita mulai dengan source code kosong. Saya sudah menyediakan 2 buah file, yaitu wrap.html dan wrap.css. Pertama kita isikan file HTML terlebih dahulu.

Kita tambahkan HTML Boilerplate. Lalu kita beri judul Text Wrapping. Pertama kita tambahkan ke tag title terlebih dahulu. Lalu kita tambahkan tag h1 di dalam tag body.

Selanjutnya kita buat div dengan nama kelas container. Kita pindahkan tag h1 tadi ke dalam div. Lalu kita tambahkan div baru dengan nama kelas wrap. Di dalam tag div wrap, kita tambahkan tag img dengan source logo.png. Lalu attribute alt kita isikan dengan Logo. Dan setelah itu kita tambahkan tag p dengan konten lorem.

Kita simpan dan lihat hasilnya di browser. Ini adalah tampilan HTML-nya tanpa style. Saya sudah menyiapkan gambar logo.png yang berada di folder yang sama dengan source code. Kita akan melakukan teknik text wrapping ya. Artinya posisi teks lorem ipsum akan kita pindahkan menjadi di samping kanan dari gambar logo Skysen.

Kita akan mengatur style dari halaman ini. Pertama kita tambahkan dahulu link dan kita arahkan hrefnya ke wrap.css. Lalu kita buka kode CSS kita. Kita tambahkan dahulu kelas container. Kita beri width 500 pixel. Dan kita tambahkan margin auto agar posisinya berada di tengah browser.

Selanjutnya kita atur kelas wrap. Kita berikan border dengan nilai 1px solid gray. Agar ada kotak yang mengelilingi tag div wrap. Setelah itu kita tambahkan padding dengan nilai 10px agar ada jarak diantara kotak dengan konten.

Nah, untuk membuat agar teks lorem ipsum mengelilingi gambar logo, kita bisa menggunakan properti yang kita pelajari pada video sebelumnya, yaitu properti float dengan nilai left. Kita tambahkan selector baru yaitu .wrap spasi img, artinya elemen img yang berada di dalam kelas wrap. Lalu kita tambahkan properti float:left.

Kita simpan dan refresh browser. Dan sekarang teks Lorem Ipsum pun sudah mengelilingi gambar logo. Perhatikan pada 2 baris terakhir, berhubung tinggi gambar logo kita hanya setara dengan 6 baris paragraf, maka pada baris ketujuh dan seterusnya paragraf akan mengisi bagian bawah dari gambar logo. Teknik ini dinamakan Text Wrapping.

Pada contoh disini, text wrapping berhasil ditampilkan dengan benar ya. Hal ini disebabkan karena tinggi dari konten paragraf lebih besar daripada tinggi gambar. Namun bagaimana jika konten paragrafnya sedikit? Sebagai contoh, saya hapus konten lorem ipsum menjadi tinggal satu kalimat saja.

Kita simpan dan refresh browser. Sekarang kita bisa melihat bahwa border pada tag div wrap hanya separuh dari gambar logo? Mengapa hal ini bisa terjadi? Kita sudah belajar pada video sebelumnya, bahwa pada saat kita mengubah suatu elemen menjadi float, maka elemen tersebut akan dikeluarkan dari flow dokumen. Berhubung elemen img sudah keluar dari flow, maka browser hanya menghitung tinggi tag div wrap dari konten paragraf saja. Bisa diperhatikan pada browser ya. Jadi tinggi kotak disini hanya dihitung dari tinggi paragrafnya saja.

Bagaimana cara memperbaiki hal ini? Nah, setelah kita menggunakan properti float, pada bagian akhirnya kita dianjurkan untuk membuat properti clear untuk menghapus float-nya. Caranya? Pertama kita lihat kembali kode HTML kita. Bagian akhir dari penggunaan float kita adalah setelah tag penutup paragraf. Setelah itu kita tambahkan sebuah div dan kita beri nama kelasnya clear. Div ini kita biarkan kosong tanpa konten.

Lalu kita buka kembali kode CSS kita dan tambahkan selector kelas clear. Kita bisa memberikan 4 nilai untuk clear, yaitu left untuk kiri, right untuk kanan, none untuk tidak ada dan both untuk keduanya. Berhubung float pada elemen image menggunakan nilai left, maka clear disini kita isi dengan nilai left juga. Kita simpan dan refresh browser. Dan sekarang tinggi kotaknya sudah benar.

Sekarang perhatikan kalau nilai float pada image saya ubah menjadi right. Maka tinggi kotak kembali menjadi salah. Mengapa? Karena nilai dari clear kita adalah left atau kiri, sedangkan float kita berada di kanan. Oleh karena itu, lebih baik kita menggunakan nilai both ya. Jadi kita udah tidak usah pusing float-nya ada di kiri atau kanan. Keduanya langsung kita clear.

Nah, dalam perkembangannya, ternyata cara clear seperti ini tidak disukai ya. Mengapa? Karena kita harus menambahkan tag div kosong di setiap akhir float. Div ini dianggap mengganggu kode HTML kita. Oleh karena itu, programmer menciptakan teknik baru dimana kita bisa melakukan clear tanpa perlu menambah div, yang dikenal dengan nama clearfix.

Bagaimana caranya? Kita hapus tag div clear kita. Lalu kita menuju ke div dengan kelas wrap. Kita tambahkan kelas baru dengan nama cf, singkatan dari clearfix. Kita buka kembali kode CSS. Kita ubah selector kelar clear menjadi kelas cf. Ingat bahwa clear harus kita tambahkan di bagian akhir penggunaan float. Untuk menuju ke bagian akhir, kita bisa menggunakan pseudo element after. Jadi kita tambahkan titik dua sebanyak 2 kali, dan kita ketikkan kata kuncinya after.

Kita simpan dan refresh browser. Ternyata masih belum bisa ya. Setelah properti clear, kita masih perlu menambahkan lagi properti content dengan nilai string kosong. Dan setelah itu kita tambahkan properti display dengan nilai table. Kita simpan dan refresh browser. Dan sekarang tinggi kotaknya sudah benar.

Kelas cf ini kita sebut dengan teknik clearfix. Untuk dokumentasi lebih lengkapnya kita bisa melakukan search google dengan kata kunci clearfix. Dan kita bisa melihat referensi dari situs w3schools.com. Disini ada contohnya kelas clearfix, yang isinya sama dengan source code kita ya.

Selanjutnya untuk latihan kita pada video ini. Pertama saya kembalikan dahulu teks Lorem pada paragraf menjadi panjang. Dan tag div wrap ini akan saya copy menjadi 6 buah. Nah, cara agar kita bisa meng-copy seluruh isi tag div wrap ini dengan benar, ada triknya ya. Pertama kita arahkan kursor mouse ke tag pembuka div. Lalu kita geser mouse ke kiri, hingga di samping nomor baris. Akan muncul anak panah. Kita klik. Dan sekarang tag div disingkat menjadi 2 baris saja. Jadi kita tinggal pilih kedua baris ini dan tekan tombol Ctrl+C. Kemudian kita paste sebanyak 5 kali. Setelah itu jangan lupa source code awalnya dibuka kembali.

Tugas kita kali ini adalah dengan mengubah kode CSS-nya saja, maka kita akan mendapatkan hasil seperti ini. Perhatikan nilai float pada gambar logo akan berpindah kiri kanan kiri kanan. Lalu warna background color-nya kita ubah menjadi lightblue. Ujung kotak menjadi sedikit melingkar. Dan ada tambahan jarak antara tag div wrap yang satu dengan yang berikutnya.

Bagi yang ingin download source code awal dari latihan ini, bisa melihat deskripsi pada video. Saya akan memberikan linknya. Pause terlebih dahulu video ini dan coba kerjakan dahulu di komputer masing-masing. Nanti kita akan kembali lagi untuk membahas solusi latihan ini bersama-sama.

Oke, sekarang kita akan membahas solusi dari soal latihan kita. Kita kerjakan bagian paling sulitnya terlebih dahulu. Kita ingin mengubah kelas wrap dengan urutan ganjil menjadi float sebelah kiri, sedangkan kelas wrap dengan urutan genap menjadi float sebelah kanan. Caranya? Kita lihat kembali ke kode CSS kita, bagian selector kelas wrap img yang mengatur properti float. Untuk memilih kelas wrap dengan urutan ganjil, kita bisa menambahkan pseudo class nth-of-type dengan nilai parameter odd. Perhatikan bahwa urutan genap/ganjil-nya kita hitung dari kelas wrap-nya ya, bukan dari elemen imagenya. Untuk kelas wrap dengan urutan ganjil, maka nilai floatnya adalah left. Kita simpan dan refresh browser.

Selanjutnya kita tinggal copy selector ini, dan mengubah parameternya menjadi genap atau even. Lalu nilai properti float kita ganti menjadi right.

Oke, bagian paling susah dari latihan ini sudah kelar. Selanjutnya kita tinggal mengatur dari kelas wrap saja. Untuk memberikan warna kita tinggal tambahkan background-color: lightblue. Setelah itu untuk memberikan jarak antar div, kita tinggal menambahkan margin-bottom, misalkan kita isi dengan nilai 20px. Dan untuk memberikan efek lingkaran pada kotak border, kita bisa menggunakan properti border radius: 40px. Dan soal latihan kita pun sudah selesai.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.