Bagaimana cara membuat garis horizontal di html?

Misalnya, jika atribut width diisi dengan nilai numerik "50%", berarti panjang garis yang akan dibuat memiliki lebar "50%" atau setengah dari lebar layar komputer atau smartphone layar. Kemudian jika Anda memasukkan atribut align dengan nilai "left" berarti garis akan diposisikan dengan rata kiri

Table of Contents Show

Cara Membuat Garis Vertikal di HTML
Cara Membuat Garis Horizontal di HTML
Bagaimana Anda membuat garis horizontal dalam HTML?
Bagaimana garis horizontal terlihat?
Apa itu SDM dalam HTML?
Apa perintah HTML untuk membuat tabel?

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 “

” . Tag “

” digunakan untuk mem buat garis horizontal . Selain itu kalian juga dapat melakukan beberapa trick untuk membuat sebuah garis dengan memanfaatkan scribt CSS.

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 “

” 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>

Hasil

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 “

” yang membungkus tag “

” 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>

Hasil

Cara Membuat Garis Horizontal di HTML

Cara yang pertama yang dapat kita lakukan untuk membuat sebuah garis horizontal di HTML adalah dengan menambahkan tag “

” pada scribt html kita. Cara tersebut merupakan cara paling mudah yang dapat kita lakukan untuk membuat sebuah garis di HTML. Dengan menambahkan tag “

” 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>

Hasil

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 “

” 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>

Hasil

Sekian artikel dari saya kali ini tentang Cara Membuat Garis Vertikal di HTML dan Cara Membuat Garis Horizontal di HTML jangan lupa baca artikel saya yang lain

Bagaimana Anda membuat garis horizontal dalam HTML?

Membuat Garis Horizontal di HTML Dalam bahasa pemrograman Membuat HTML a garis horizontal cukup sederhana. Karena Anda hanya perlu memasukkan satu tag HTML dan hanya itu garis horizontal . Tag tersebut adalah tag horizontal .

Bagaimana garis horizontal terlihat?

Garis mendatar terletak mendatar jadi garis mendatar biasa disebut garis mendatar. Garis horizontal ini memiliki posisi mendatar saat berhadapan dengan permukaan bumi.