Memahami Fungsi tag hr pada HTML - Hallo sahabat Kodenyekrip, Pada Artikel yang anda baca kali ini dengan judul Memahami Fungsi tag hr pada HTML, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel HTML, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : Memahami Fungsi tag hr pada HTML
link : Memahami Fungsi tag hr pada HTML
Memahami Fungsi tag hr pada HTML
Untuk membuat garis horizontal pada html, maka kita akan menggunakan tag <hr>.
Namun sebenarnya fungsi dari tag <hr> pada HTML5 bukanlah sebagai garis horizontal, namun sebagai thematic break. Maksud dari thematic break semacam pemisah antara satu paragraf dengan paragraf lain, dimana akan terbuat garis horizontal juga.
Contoh Horizontal Line
<!DOCTYPE html>
<html>
<head>
<title>Thematic Break</title>
</head>
<body>
Baris Pertama
<hr>
Baris Kedua
<hr>
Baris Ketiga
<hr>
</body>
</html>Outputnya ditunjukkan oleh Gambar.1:
Contoh Horizontal line color
Pada contoh ini kita akan membuat horizontal line dengan menggunakan atribut "color". Walaupun atribut ini sebenarnya sudah obselete pada HTML5, namun masih berjalan dengan sempurna pada berbagai macam browser.
<!DOCTYPE html>
<html>
<head>
<title>Thematic Break</title>
</head>
<body>
Baris Pertama
<hr color="red">
Baris Kedua
<hr color="green">
Baris Ketiga
<hr color ="blue">
</body>
</html>Outputnya ditunjukkan oleh Gambar.2:
Contoh Horizontal Line Size
Dalam contoh ini kita akan akan menambah atribut size untuk horizontal line yang kita buat. Fungsi dari atribut size tersebut untuk membuat ketebalan dari horizontal line. Atribut ini juga sudah obselete pada html5, namun lagi-lagi masih bisa berjalan sempurna pada semua browse
<!DOCTYPE html>
<html>
<head>
<title>Thematic Break</title>
</head>
<body>
Baris Pertama
<hr size="10px" color="red">
Baris Kedua
<hr size="20px" color="green">
Baris Ketiga
<hr color ="blue">
</body>
</html>Outputnya ditunjukkan oleh Gambar.3:
Pengaturan tag <hr> dengan CSS
Ada baiknya pengaturan atribut yang sudah obselete pada HTML5, kita atur pada sisi css (cascade style sheet). Hal ini untuk mengantisipasi jika browser nantinya tidak mengsupport lagi pemakaian attribut dari tag <hr> yang sudah obselete.
Berikut ini contoh pengaturan css untuk tag <hr>
<!DOCTYPE html>
<html>
<head>
<title>Thematic Break</title>
<style>
hr.brs1 {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
background-color: red;
border-top-color: red;
border-right-color: red;
border-bottom-color: red;
border-left-color: red;
}
hr.brs2 {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
background-color: green;
border-top-color: green;
border-right-color: green;
border-bottom-color: green;
border-left-color: green;
}
hr.brs3 {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
background-color: blue;
border-top-color: blue;
border-right-color: blue;
border-bottom-color: blue;
border-left-color: blue;
}
</style>
</head>
<body>
Baris Pertama
<hr class="brs1">
Baris Kedua
<hr class="brs2">
Baris Ketiga
<hr class="brs3">
</body>
</html>Outpunya ditunjukkan oleh Gambar.4:
Jika kita perhatikan output pada Gambar.4 akan menghasilkan Output yang sama pada Gambar.2.
Jadi kesimpulannya untuk menggantikan atribut color dan lain-lain, kita dapat lakukan disisi css-nya.
Untuk menghasilkan ouput seperti Gambar.3 yang memiliki ketebalan pada horizontal line-nya, kita dapat gunakan kode height pada sisi css seperti contoh berikut:
hr.brs1 {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
background-color: red;
border-top-color: red;
border-right-color: red;
border-bottom-color: red;
border-left-color: red;
height:10px;
}Demikianlah Artikel Memahami Fungsi tag hr pada HTML
Sekianlah artikel Memahami Fungsi tag hr pada HTML kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Memahami Fungsi tag hr pada HTML dengan alamat link https://kodenyekrip.blogspot.com/2016/11/memahami-fungsi-tag-hr-pada-html.html
