Garis Horizontal atau garis datar biasanya dibuat untuk memisahkan antara judul dengan deskripsi, postingan 1 dengan postingan 2, 3 dan seterusnya, memisahkan paragraf dengan paragraf yang berbeda topik dan lain-lain.
- Dengan panjang/lebar yang berbeda-beda,
- Bisa disimpan sejajar di sebelah kiri, tengah, atau kanan,
- Dengan ketebalan berbeda (atau ukuran),
- Dengan warna yang berbeda,
- Garis bentuk padat atau putus-putus, dan lain-lain
Berikut adalah beberapa contoh kode HTML untuk garis horizontal dengan Tag dasar <hr>
Jika hanya menulis kode Tag : <hr>
Hasilnya seperti garis berikut :
2. Atribut tambahan untuk Tag <hr>
Kode untuk garis horizontal dengan atribut tambahan adalah
<Hr align = “center” color = “green” size = “2” width = “80%”>
- align harus ditambahkan pada kode jika lebar garis horizontal kurang dari lebar teks. Untuk atribut align adalah: left (kiri), center (tengah) atau right (kanan).
- width harus ditambahkan ke kode jika Kita menginginkan garis horizontal dengan lebar kurang dari lebar teks. Untuk atribut ini dapat dinyatakan dalam piksel (misalnya 300px – Anda dapat melewati “px” setelah nomornya) atau dalam persentase (misalnya 50%).
- color harus ditambahkan ke kode jika Kita menginginkan garis horizontal berwarna. Untuk atribut ini dapat dinyatakan sebagai nama warna (mis. red, green, blue, orange, purple dan lain-lain).
- size harus ditambahkan ke kode jika Kita menginginkan garis horizontal yang lebih tebal. Nilai untuk atribut ini adalah 1, 2, 3, dll.
Catatan : Tag <hr> sama dengan <hr align = “center” size = “2” width = “100%”> dan di kebanyakan browser, hasil visual adalah garis horizontal dyang berwarna. Untuk size garis yang lebih besar, biasanya terlihat seperti bingkai persegi panjang, namun begitu Anda menambahkan atribut warna, warnanya akan terlihat.
Contoh 1
kode :
<hr align=”right” color=”orange” size=”3″ width=”500″>
Hasilnya seperti garis berikut :
Contoh 2
kode :
<hr align=”center” color=”#ff1100″ size=”5″ width=”60%”>
Hasilnya seperti garis berikut :
Contoh 3
kode :
<hr size=”5″>
Hasilnya seperti garis berikut :
Contoh 4
kode :
<hr size=”5″ color=”#999999″>
Hasilnya seperti garis berikut :
Contoh 5
kode :
<hr color=”green” width=”45%”>
Hasilnya seperti garis berikut :
Menambahkan Baris Horisontal dengan Tag HTML <div>
Garis horisontal dapat ditata dengan menambahkan properti CSS yang sesuai, namun yang telah saya uji tidak menghasilkan hasil yang saya harapkan di kelima browser (IE9, Mozilla Firefox 12.0, Chrome, Opera 11.62 dan Safari 5.1.5 ), Terutama saat saya ingin memasukkan garis horizontal putus-putus.
Contoh 1 : Full Garis Lebar Horizontal
kode dashed (putus-putus) :
<div style=”border-top: 2px dashed #DB1200; margin-top: 1em; padding-top: 1em;”> </div>
Hasilnya seperti garis berikut :
Berikut Alternatif Kode Jenis Garis :
dotted : Putus-putus kecil /burik dengan tebal garis 2px
solid : Garis padat dengan tebal garis 2px
double : Garis ganda dengan tebal garis 6px
groove : Alur dengan tebal garis 6px
ridge : punggungan dengan tebal garis 6px
Contoh 2 : Garis Horizontal Kiri
Kode :
<div style=”border-top: 2px dashed #0B5394; margin-top: 1em; padding-top: 1em; width: 400px“> </div>
Hasilnya seperti garis berikut :
Contoh 3 : Garis Horizontal Tengah
Kode :
<div align=”center”>
<div style=”border-top: 2px dashed #38761D; margin-top: 1em; padding-top: 1em; width: 400px“> </div>
</div>
Hasilnya seperti garis berikut :
Contoh 4 : Garis Horizontal Kanan
Kode :
<div align=”center”>
<div style=”border-top: 2px dashed #C27BA0; margin-top: 1em; padding-top: 1em; width: 400px“> </div>
</div>
Hasilnya seperti garis berikut :
keterangan :
- 2px = Tebal garis
- dashed (putus-putus) = Jenis garis
- #DB1200 = Kode Warna garis
- width : lebar yang dikehendaki
