Setelah sebelumnya kita membahas form, kali ini adalah cara membuat garis horizontal di html. Fungsi garis horizontal ini biasanya di gunakan untuk memisahkan halaman atau pemisah topik pada sebuah tulisan di html, untuk dapat membuat garis horizontal ini digunakan tag <hr>.
Mengenal Tag HR
Kepanjangan dari HR adalah horizontal rule, yaitu sebuah garis lurus yang terbentuk secara horizontal, tag ini termasuk single tag, atau tag tunggal, dimana tidak ada tag penutup setelahnya, berikut ini beberapa atribut tag <hr> yang bisa di gunakan.
| Atribut | Nilai | Keterangan |
|---|---|---|
| align | left, center, right | Untuk menentukan posisi garis. |
| size | pixels | Untuk menentukan ukuran garis. |
| width | pixels, % | Untuk menentukan lebar garis. |
Cara Membuat Garis Horizontal
Contoh berikut ini adalah cara sederhana untuk membuat garis horizontal tanpa, silahkan buka text editor anda lalu ketikan kode di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Garis Horizontal</title>
</head>
<body>
<h1>Contoh Garis Horizontal</h1>
<hr />
</body>
</html>Code language: HTML, XML (xml)Dari kode di atas maka akan menampilkan seperti gambar di bawah ini.
Menentukan Ukuran Garis Horizontal
Dari contoh awal diatas hanya sebuah garis lurus sederhana saja, berikut ini cara memperbesar ukuran garis horizontal menggunakan atribut size, perlu di ingat bahwa untuk menentukan ukuran dengan atribut size di tag hr ini menggunakan satuan pixel (px), contohnya seperti di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Garis Horizontal</title>
</head>
<body>
<h1>Contoh Garis Horizontal</h1>
<hr size="10px">
</body>
</html>Code language: HTML, XML (xml)Dan akan tampil seperti gambar di bawah ini.
Menentukan Panjang Garis Horizontal
Pada dasarnya secara bawaan tag <hr> akan memberikan garis dengan panjang 100%, tetapi tenang saja kita masih bisa menentukan sendiri lebar garis dalam tag <hr> yaitu menggunakan atribut width, untuk menentukan satuan panjang width pada tag <hr> ada dua tipe, yaitu pixel (px) dan persen (%), misanya penulis memberikan nilai 50% contohnya seperti di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Garis Horizontal</title>
</head>
<body>
<h1>Contoh Garis Horizontal</h1>
<hr size="10px" width="50%">
</body>
</html>Code language: HTML, XML (xml)Maka akan menampilkan seperti gambar di bawah ini.
Menentukan Posisi Garis
Selain ukuran dan lebar garis horizontal, secara bawaan tag <hr> memberikan posisi tengah untuk menentukan posisi baris di halaman html, kita masih bisa menentukan posisi garis tersebut dengan memberikan nilai pada atribut align, contohnya seperti dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Garis Horizontal</title>
</head>
<body>
<h1>Contoh Garis Horizontal</h1>
<hr size="10px" width="50%" align="left">
</body>
</html>Code language: HTML, XML (xml)Dari kode diatas terlihat bahwa atribut align memberikan posisi kiri, ada tiga tipe posisi dalam atribut ini yaitu left, center, dan right, silahkan di sesuaikan, contoh kode di atas kurang lebih seperti gambar di bawah ini.
Sebenarnya banyak sekali kegunaan tag <hr> misalnya untuk pemisah topik pada sebuah artikel di html, atau garis pembatas apa saja yang mungkin bisa di gunakan sesuai kebutuhannya, semoga tulisan di atas bermanfaat untuk pembaca sekalian.
