Cara Membuat Garis Vertikal di HTML – #Tutorial HTML
Hai kembali lagi di blog saya kodekreasi.com , di tutorial kali ini kita akan belajar tentang cara membuat garis vertikal di html. Garis memanglah sering digunakan dalam sebuah website . Garis biasanya sering digunakan sebagai pembatas antara komponen yang satu dengan komponen lainya pada sebuah website ,selain itu garis biasanya juga sering digunakan untuk mempercantik tampilan halaman website. Menambahkan sebuah garis pada HTML memanglah relatif mudah , ada beberapa alternatif cara yang dapat kita gunakan untuk menambahkan sebuah garis pada HTML diantaranya yang paling mudah adalah dengan menggunakan tag “<hr>” . Tag “<hr>” digunakan untuk mem buat garis horizontal . Selain itu kalian juga dapat melakukan beberapa trick untuk membuat sebuah garis dengan memanfaatkan scribt CSS.
Baca Juga : Cara Mengatur Spasi HTML
Namun , bagaimana jika garis yang akan kita tambahkan pada html adalah garis vertikal ? tentu tidak bisa hanya dengan menambahkan tag “<hr>” pada scribt HTML kita bukan. Ok ,kali ini kodekreasi akan memberikan trick cara membuat garis di html yang dapat kalian jadikan sebagai referensi .
Cara Membuat Garis Vertikal di HTML
Cara pertama yang dapat kita lakukan untuk membuat sebuah garis vertikal adalah dengan menggunakan scribt css. Membuat garis dengan CSS dapat dilakukan dengan menambahkan sebuah tag “<div>” pada HTML yang kemudian kita atur border nya pada scribt css , untuk membuat nya menjadi vertikal kita perlu mengatur tinggi (height) serta lebarnya (width) . Untuk tingginya sesuaikan dengan kebutuhan kalian sedangkan untuk lebarnya buat menjadi 0 agar garis tidak ke arah horizontal. Berikut adalah scribt programnya:
<!DOCTYPE html>
<html>
<head>
<style>
.verikal_center{
/*mengatur border bagian kiri tag div */
border-left: 6px solid black;
/* mengatur tinggi tag div*/
height: 200px;
/*mengatur lebar tag div*/
width : 2px;
}
</style>
<title>Membuat Garis Vertikal Pada HTML</title>
</head>
<body>
<!--pemanggilan kelas css pada html -->
<div class="verikal_center"></div>
</body>
</html>
Hasilnya :
Cara yang ke dua adalah dengan menggunakan flexbox, Flexbox sering digunakan untuk membuat tampilan website yang modern dikarenakan kemudahanya dalam penggunaan. Untuk membuat garis vertikal menggunakan flexbox dapat dilakukan dengan mengatur display menjadi flex pada tag “<div>” yang membungkus tag “<hr>” sepertii pada scribt berikut ini:.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Garis Vertikal Pada HTML</title>
<style>
.vertical{
/*mengatur display pembungkus tag hr*/
display: flex;
}
.hr{
/*mengatur tinggi minimal garis*/
min-height: 100%;
/*mengatur tinggi maksimal garis*/
max-height: 100vh;
/*mengatur margin garis*/
margin: 0;
}
</style>
</head>
<body>
<!-- pemanggilan kelas css pada pembungkus tag hr -->
<div class="vertical">
<p>konten pertama</p>
<!-- membuat garis -->
<hr />
<p>kontent kedua</p>
</div>
</body>
</html>
Hasilnya :
Cara Membuat Garis Horizontal di HTML
Cara yang pertama yang dapat kita lakukan untuk membuat sebuah garis horizontal di HTML adalah dengan menambahkan tag “<hr>” pada scribt html kita. Cara tersebut merupakan cara paling mudah yang dapat kita lakukan untuk membuat sebuah garis di HTML. Dengan menambahkan tag “<hr>” maka akan didapati sebuah garis horizontal , berikut adalah contoh penggunaanya :
<!DOCTYPE html>
<html>
<head>
<title> Cara Membuat Garis Horizontal di HTML </title>
</head>
<body>
<div>
<p>konten pertama</p>
<!-- membuat garis -->
<hr />
<p>kontent kedua</p>
</div>
</body>
</html>
Hasilnya:
Cara kedua yang dapat kita lakukan untuk membuat sebuah garis horizontal adalah dengan cara Membuat garis dengan CSS . Membuat garis horizontal dengan menggunakan css dapat dilakukan dengan cara menambahkan sebuah tag “<div>” yang telah kita atur garis tepi bagian bawah atau atasnya dengan menggunakan scribt css , berikut adalah contohnya :
<!DOCTYPE html>
<html>
<head>
<style>
.horizontal_center{
/*mengatur border bagian atas tag div */
border-top: 6px solid black;
/* mengatur tinggi tag div*/
height: 2px;
/*mengatur lebar tag div*/
width : 400px;
}
</style>
<title> Buat Garis Horizontal di HTML </title>
</head>
<body>
<!--pemanggilan kelas css pada html -->
<p>konten 1 </p>
<div class="horizontal_center"></div
<p>konten 2 </p>
</body>
</html>
Hasilnya :
Sekian artikel dari saya kali ini tentang Cara Membuat Garis Vertikal di HTML serta Cara Membuat Garis Horizontal di HTML jangan lupa baca artikel saya yang lain.