Kita buka kembali source code kita dari pelajaran sebelumnya. Sebelumnya kita telah membuat dua buah list, yaitu Daftar Buah dan Daftar Binatang Peliharaan yang telah kita atur dengan warna-warna yang menarik.

Sekarang kita tambahkan sebuah horizontal rule di sebelum judul Daftar Binatang Peliharaan. Kita buka kembali souce code HTML dan kita cari judulnya. Di atas judul tersebut kita tambahkan tag HR.

Kita simpan dan refresh browser. Sekarang kita sudah mendapatkan satu buah garis yang membatasi kedua Daftar.

Garis ini diatur menggunakan CSS Default bawaan dari browser. Apabila kita ingin tau apa saja nilai dari CSS Default tersebut, maka kita bisa melakukan search dengan kata kunci CSS Default Browser. Kita bisa memilih link dari w3schools.com.

Jadi disini kita bisa melihat bahwa walaupun kita tidak mengatur properti dan nilai dari CSS, secara default browser akan memberikan nilai-nilai tertentu pada CSS-nya. Sebagai contoh kita lihat di bagian paling atas, tag anchor secara default akan memberikan garis bawah pada tulisan linknya, yang diatur melalui properti text-decoration : underline.

Kita coba search nilai default CSS untuk horizontal rule. Disini kita bisa melihat bahwa secara default sudah banyak nilai CSS yang diberikan kepada horizontal rule.

Yang pertama adalah display dengan nilai block, sehingga tag HR akan ditaruh di dalam satu baris khusus. Sama seperti tag div dan paragraf.

Kemudian ada pengaturan nilai margin akan memberikan jarak antara tag hr dan tag lainnya. Disini yang diberikan nilai adalah margin-top dan margin-bottom, sehingga akan memberikan jarak di bagian atas dan bawah dari tag hr ke tag lainnya.

Selanjutnya ada properti border-style dengan nilai inset. Apakah yang dimaksud dengan inset? Kita bisa melakukan search google dengan kata kunci css border-style. Dan kita lihat lagi referensi dari w3schools.com. Disini kita bisa lihat ya berbagai macam nilai border-style yang didukung oleh CSS. Untuk nilai inset berarti browser akan menampilkan border dengan efek embos, sehingga bentuknya akan seperti kotak 3 dimensi. Sekarang saya kembali ke tampilan HTML dan saya zoom in. Dan disini kita bisa melihat bahwa HR kita sebenarnya adalah kotak kosong yang menggunakan border inset. Margin top akan memberikan jarak antara HR dengan tulisan lemon. Sedangkan margin-bottom memberikan jarak antara HR dengan tulisan Daftar Binatang Peliharaan.

Sekarang kita akan belajar mengenai cara mengubah CSS horizontal rule. Kita buka kode css kita dan kita tambahkan hr dan kurung kurawal. Ada beberapa properti menarik yang dapat kita pelajari disini. Yang pertama adalah properti width yang dapat kita atur untuk menentukan lebar dari horizontal rule. Kita coba tambahkan properti width, dan kita beri nilai 100 pixel. Satuan pixel kita tuliskan dengan kode px.

Kita refresh browser dan bisa kita lihat bahwa sekarang lebar dari horizontal rule kita adalah 100 pixel. Lebar ini adalah sama, walaupun kita melakukan zoom in atau zoom out browser. Ataupun kita memperbesar ataupun memperkecil ukuran browser.

Pengaturan width menggunakan pixel ini dapat menyebabkan design dari situs kita menjadi aneh pada saat layar berukuran besar atau berukuran kecil, karena ukuran horizontal rulenya tetap sama sehingga menyebabkan kurang proporsional. Oleh karena itu kita bisa menggunakan satuan alternatif untuk memberikan nilai width, yaitu dengan menggunakan persentase. Kita ubah nilai properti width misalnya menjadi 20%.

Kita simpan dan refresh browser. Sekarang ukuran dari horizontal rule akan selalu 20% dari ukuran layar. Bisa kita lihat efeknya pada saat kita memperbesar ataupun memperkecil layar, ukuran horizontal rule akan mengikuti ukuran layar secara proporsional.

Nah, kita sudah mempelajari mengenai properti width yang mengatur lebar hr. Apakah ada properti yang mengatur tinggi hr? Tentu ada donk. Nama propertinya adalah height. Kita coba tambahkan properti height dan kita beri nilai 20 pixel.

Kita simpan dan refresh browser. Sekarang horizontal rule kita setinggi 20 pixel. Namun hasilnya lebih mirip kotak kosong daripada baris pembatas ya. Dan kabar buruknya lagi, horizontal rule ini termasuk void element, sehingga kita tidak bisa memberikan konten untuk tag HR. Jadi disini properti height tidak ada gunanya ya. Kita hapus properti height dari kode kita.

Selanjutnya, yang menarik untuk kita coba lagi disini adalah properti border-width. Dengan menggunakan properti ini, kita bisa mengatur berapa besar garis pada elemen HR. Misalkan kita beri nilai 10 pixel.

Kita simpan dan refreh browser. Sekarang garis pembatas kita sudah menjadi ukuran besar. Dan kita bisa melihat dengan lebih jelas bahwa sebenarnya garis pembatas ini adalah kotak tanpa isi.

Kita bisa mengubah jenis garis yang digunakan untuk membentuk kotak kita, dengan menggunakan properti border-style. Kita bisa melihat kembali referensi dari w3schools.com untuk melihat nilai apa saja yang bisa kita isikan ke properti border-style.

Sebagai contoh, kita tambahkan border-style dengan nilai double. Kita simpan dan refresh browser.

Contoh lain, kita bisa menggunakan border-style dotted agar browser menggunakan lingkaran sebagai garis pembatas kita. Kita coba lihat hasilnya. Kurang begitu bagus ya, karena border default dari horizontal rule bersifat kotak, yaitu ada di sisi atas, bawah dan kiri kanan. Agar bentuknya bisa lebih menarik, kita mesti mengatur agar border yang digunakan hanya dari satu sisi saja, yaitu dari sisi atas.

Bagaimana cara mengubahnya? Pertama, kita atur terlebih dahulu agar border-style di semua sisi menjadi kosong. Jadi untuk properti border-style kita isikan dengan nilai none. Apabila kita simpan dan refresh browser. Maka hasilnya tag HR tidak kelihatan apa-apa.

Selanjutnya kita tambahkan satu properti lagi untuk mengatur border style tapi hanya di sisi atas saja. Kita bisa menggunakan properti border-top-style. Dan kita beri nilai dotted. Sekarang kita simpan dan refresh browser. Maka sekarang horizontal rule kita terbuat dari lingkaran-lingkaran.

Perhatikan lagi kode CSS kita. Pada saat ini kita menggunakan 2 baris kode CSS yaitu border-style dan border-top-style. Kedua baris kode ini dapat kita gabung menjadi satu. Bagaimana caranya? Nah, sebagai referensi, kita bisa membuka panduan dari MDN. Pertama kita search Google terlebih dahulu dengan kata kunci css border-style mdn. Disini kita bisa melihat bahwa border-style dapat diisikan dengan satu hingga empat nilai.

Apabila kita mengisikan hanya satu nilai, maka nilai yang sama akan diaplikasikan ke keempat sisi. Sedangkan kalau kita mengisikan dua nilai, maka nilai pertama akan diaplikasikan ke sisi atas dan bawah, sedangkan nilai kedua akan diaplikasikan ke sisi kiri dan kanan. Kita coba lihat kembali ke kode kita. Kita hapus border-top-style. Lalu nilai border-style kita ubah menjadi dotted dan none. Artinya sisi atas dan bawah akan menggunakan nilai dotted. Sedangkan sisi kiri dan kanan akan menggunakan none.

Kita simpan dan lihat hasilnya di browser. Sekarang horizontal rule kita akan diisikan dengan lingkaran ganda ya. Satu lingkaran adalah border bagian atas, sedangkan lingkaran satunya lagi adalah border bagian bawah.

Kita lihat lagi panduan dari MDN. Apabila kita mengisikan border-style dengan 3 nilai, maka nilai pertama akan diaplikasikan ke sisi atas. Nilai kedua akan diaplikasikan ke sisi kiri dan kanan. Sedangkan nilai ketiga adalah untuk sisi bawah. Kita ubah kembali nilai border-style di kode kita menjadi dotted none none. Artinya sisi atas akan menggunakan dotted. Sisi kiri dan kanan akan menggunakan none. Dan sisi bawah akan menggunakan none.

Kita refresh dan lihat hasilnya di browser. Sekarang tampilan horizontal rule sudah sama persis dengan kode kita sebelumnya. Namun sebelumnya kita menggunakan 2 baris kode css, sedangkan sekarang cukup dengan 1 baris saja.

Kita lihat kembali panduan MDN. Apabila kita mengisikan border-style dengan 4 nilai, maka nilai-nilai tersebut akan diaplikasikan ke sisi atas, kanan, bawah dan kiri. Jadi kalau kita lihat arahnya dimulai dari atas dan berlawanan dengan arah jaruh jam. Apabila nilai border-style di kode kita diubah menjadi dotted none none none, maka hasilnya akan sama seperti sekarang ya. Namun cara pemakaian border-style untuk contoh kasus kita akan lebih tepat menggunakan 3 nilai.

Selanjutnya, kita juga bisa memberikan warna untuk Horizontal Rule kita. Seperti biasa kita menggunakan properti color. Biasanya untuk situs dengan warna latar belakang putih, horizontal rulenya akan lebih menarik apabila menggunakan warna abu-abu. Sebagai contoh kita tambahkan properti color dengan nilai gray.

Kita simpan dan refresh browser. Warna lingkaran pada horizontal rule kita telah berubah menjadi abu-abu.

Kita juga bisa menerapkan apa yang telah kita pelajari pada video sebelum ini untuk memberikan warna pada horizontal rule. Bisa menggunakan keyword, RGB ataupun kode hexadesimal. Sebagai contoh saya ubah warna lingkaran menjadi HotPink. Dan hasilnya menjadi seperti ini.

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.