Cara membuat garis horizontal di HTML (tag hr)
Cara membuat garis horizontal di HTML (tag hr)
Hai apa kabar? Semoga baik baik saja. Kali ini saya akan membuat artikel yang membahas tentang bagaimana cara membuat sebuah atau beberapa garis horizontal pada web dengan bahasa pemrograman HTML.Garis horizontal pada sebuah website digunakan sebagai pemisah halaman atau topik pada sebuah tulisan di HTML. Dalam artian garis horizontal berguna untuk pemberian batas antara naskah sebelumnya dengan naskah setelah garis horizontal memiliki topik yang berbeda.
Pengenalan tag HR
HR singkatan dari horizontal rule yang artinya sebuah garis lurus terbentuk secara horizontal atau mendatar. Dalam pembuatan tagpenulisannya <hr>.Tag horizontal ini memiliki 3 atribut untuk mengatur variasi pembuatannya. Yakni atribut align untuk menentukan posisi. Dan atribut size untuk menentukan ukuran garis. Dan atribut width untuk menentukan lebar garis.
Cara membuat garis horizontal
Berikut adalah contoh sederhana bagaiman cara membuat garis horizontal di HTML tanpa menggunakan ketiga atribut diatas. Jika sobat juga ingin mencoba silahkan buka text editor atau aplikasi notepad sobat dan ketikkan kode dibawah ini :Baca juga : cara membuat tulisan tebal, miring, bergaris bawah di html (tag b,i,u)
<!DOCTYPE html>
<html>
<head>
<title> Membuat garis horizontal line </title>
</head>
<body>
Atas
<hr>
Bawah
</body>
</html>
<html>
<head>
<title> Membuat garis horizontal line </title>
</head>
<body>
Atas
<hr>
Bawah
</body>
</html>
Simpan kode diatas dengan format.html dan jalankan dengan klik dua kali, maka hasilnya seperti gambar dibawah ini :
 |
Menentukan ukuran garis horizontal
Jika contoh diatas hanya membuat garis secara outo saja tanpan menentukan berapa ukuran garis tersebut. Dibawah ini adalah contoh cara membuat garis dengan cara menentukan ukuran garis yang diinginkan. Yakni dengan menggunakan atribut size. Untuk menggunakan atribut size ini menggunakan satuan pixel(px) seperti contog sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title> Menentukan ukuran garis hr </title>
</head>
<body>
Atas
<hr size=’10px’>
Bawah
</body>
</html>
<html>
<head>
<title> Menentukan ukuran garis hr </title>
</head>
<body>
Atas
<hr size=’10px’>
Bawah
</body>
</html>
Jika dijalankan maka hasilnya seperti gambar dibawah ini :
Menentukan panjang garis horizontal
Pada dasarnya html akan memberikan sebuah garis horizontal sevcara otomatis jika kita tidak menentukan panjang garis tersebut adalah berukuran 100%. untuk menentukan panjang garis horizontal atribut width memiliki 2 tipe yaitu pixel (px) dan persen (%). contohnya sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title> Menentukan panjang garis hr </title>
</head>
<body>
Atas
<hr size=’10px’ width=’60%’>
Bawah
<hr size='10px' width=’10px’>
</body>
</html>
<html>
<head>
<title> Menentukan panjang garis hr </title>
</head>
<body>
Atas
<hr size=’10px’ width=’60%’>
Bawah
<hr size='10px' width=’10px’>
</body>
</html>
Jika dijalankan maka hasilnya seperti berikut :
Menentukan posisi garis horizontal
Untuk menentukan posisi sebuah garis horizontal, seperti contoh gambar diatas html secara otomatis memberikan posisi pada tengah suatu halaman. Maka dari itu cara menentukan posisi garis hr ini dengan memberikan atribut align. Perhatikan contoh berikut :
<!DOCTYPE html>
<html>
<head>
<title> Menentukan posisi garis hr </title>
</head>
<body>
Atas
<hr size=’10px’ width=’60%’ align=’left’>
Bawah
</body>
</html>
<html>
<head>
<title> Menentukan posisi garis hr </title>
</head>
<body>
Atas
<hr size=’10px’ width=’60%’ align=’left’>
Bawah
</body>
</html>
Jika dijalankan maka akan menampilkan seperti gambar berikut :
Menentukan warna garis horizontal
Oh ya sebagai tambahan garis horizontal juga bisa diberi warna sesuai yang kita inginkan. Dengan menggunakan atribut color kita bisa mengubah warna garis lurus sesuai dengan yang dinginkan tergantung nilai dari atribut tersebut. Misalnya saya akan membuat garis dengan warna merah seperti berikut :
<!DOCTYPE html>
<html>
<head>
<title> Menentukan warna garis hr </title>
</head>
<body>
Atas
<hr size=’10px’ width=’60%’ align=’left’ color=’red’ >
Bawah
</body>
</html>
<html>
<head>
<title> Menentukan warna garis hr </title>
</head>
<body>
Atas
<hr size=’10px’ width=’60%’ align=’left’ color=’red’ >
Bawah
</body>
</html>
Jika dijalankan maka hasilnya seperti berikut :
Baiklah sobat itulah artikel yang membahas tentang cara membuat garis horizontal di html. Jika artikel ini bermanfaat jangan lupa share keteman yang membutuhkan. Selanjutnya saya akan membahas cara menambahkan gambar di HTML (tag img).
0 Response to "Cara membuat garis horizontal di HTML (tag hr)"
Post a Comment