Cara membuat garis di html css

Question

Sangat mudah untuk menambahkan garis horizontal menggunakan HTML atau CSS, tetapi mungkin tidak berfungsi seperti yang Anda pikirkan.

Table of Contents Show

Garis Bawah HTML Menggunakan Elemen HR
love2dev.com
1. Border-Style
2. Border-Width
3. Border-Color
5. Border-radius
Bagaimana cara membuat garis horizontal di HTML?
Apa itu border pada HTML?
Tag hr untuk apa?
Apa perintah HTML untuk membuat tabel?

Garis horizontal adalah cara untuk memisahkan konten dan dapat dilakukan dengan menggunakan elemen HTML HR atau aturan batas CSS.

Hari ini saya akan menunjukkan cara menggunakan elemen HTML U untuk menambahkan makna semantik ke garis bawah dan CSS untuk mendandaninya. Anda juga akan belajar bagaimana menggunakan CSS saja untuk menambahkan garis bawah ke teks dan konten.

HTML memiliki tag hr untuk mendeklarasikan jeda tematik untuk konten. Dalam spesifikasi HTML yang lebih lama, tag HR hanyalah aturan horizontal dan tidak memberikan makna semantik seperti sekarang. Hari ini tidak memberikan jeda yang terlihat, tetapi harus ditata menggunakan CSS. Ini memberi lebih banyak kontrol kepada desainer untuk membuat tag HR sesuai dengan tema situs.

Garis Bawah HTML Menggunakan Elemen HR
Warna Garis Horisontal HTML, Ukuran, dan Gaya Lainnya dengan CSS
Bersenang-senang Menerapkan Gaya ke Garis Horizontal
Mengubah Elemen SDM
Ringkasan

Garis Bawah HTML Menggunakan Elemen HR

Sejak awal HTML, atau setidaknya sejauh yang saya ingat, elemen U telah menjadi cara cepat dan kotor untuk menyisipkan garis horizontal atau aturan horizontal ke halaman web. Elemen U sangat bagus karena dapat digunakan untuk skenario berikut:

Istirahat Tematik
Semantik
Persepsi Visual yang Lebih Baik
Tidak ada Tag Penutup

Sederhana untuk menambahkan garis horizontal di markup Anda, cukup tambahkan:

. Peramban menggambar garis di seluruh lebar penampung, yang dapat berupa seluruh isi atau elemen turunan.

#html

love2dev.com

Garis horizontal dapat dibuat dalam HTML atau CSS. Mereka adalah cara untuk memecah konten secara alami dan mudah diterapkan. Anda dapat menambahkan baris dengan berbagai cara.

Membuat Garis Tepi dengan CSS merupakan salah satu teknik yang sering digunakan untuk mempercantik tampilan web. Property CSS yang paling umum digunakan yaitu properti 'border', namun Anda juga bisa menggunakan properti lain seperti border-style, border-color, border-radius, dsb.

Daftar isi

1. Border-Style
2. Border-Width
3. Border-Color
4. Border
5. Border-radius

1. Border-Style

property border-style merupakan property CSS yang digunakan untuk memberi garis tepi dengan style sesuai dengan value yang dipilih. Berikut ini beberapa value atau nilai dari property border-style :

No	Value	Deskripsi
1	dashed	garis tepi dengan style putus-putus
2	dotted	garis tepi dengan style bertitik
3	double	garis tepi dengan style ganda
4	groove	garis tepi dengan style groove, Efeknya akan terlihat tergantung dari warna border.
5	hidden	garis tepi dengan gaya tersembunyi
6	inset	garis tepi dengan style inset 3D, Efeknya akan terlihat tergantung dari warna border.
7	none	tidak menentukan garis tepi
8	outset	garis tepi dengan gaya outset(batas awal 3D). Efeknya akan terlihat tergantung dari warna border.
9	ridge	garis tepi dengan style bergerigi(3D). Efeknya akan terlihat tergantung dari warna border.
10	solid	garis tepi dengan style solid

Setelah Anda mengetahui beberapa value yang tersedia untuk properti border-style, selanjutnya siapkan text editor seperti notepad, sublime, dsb kemudian tulis ulang atau copy paste script kode dibawah ini dan jalankan pada web browser :

<!DOCTYPE html>
<html>

    <head>
        <title> Contoh Border-Style </title>
        <style>
            .solid{
                border-style: solid;
            }
            .dashed{
                border-style: dashed;
            }
        </style>
    </head>
    
    <body>
        <h2 class="solid"> Garis tepi dengan style solid </h2>
        <h2 class="dashed"> Garis tepi dengan style putus-putus </h2>
    </body>
    
</html>

Jika Kode Script diatas tidak ada Error, Berikut Screenshot dari contoh kode diatas jika ditampilkan pada halaman web :

Gambar 1

2. Border-Width

Property border-width merupakan property CSS yang digunakan untuk menentukan lebar pada garis tepi. Penggunaan properti tersebut tidak akan berfungsi jika tidak ditulis bersamaan dengan properti border-style. berikut ini value dari properti tersebut :

No	Value	Deskripsi
1	px, em, cm, dll	menentukan lebar border berdasarkan ukuran. misal 1px, 0.3125em, 0.5cm, dsb
2	thin	menentukan lebar border dengan ukuran Tipis.
3	medium	menentukan lebar border dengan ukuran Sedang.
4	thick	menentukan lebar border dengan ukuran Tebal.

Untuk menentukan lebar border sesuai dengan yang diinginkan, Anda bisa menggunakan value berdasarkan ukuran seperti px, em, dsb. berikut ini contoh script kode menggunakan border-width dengan value ukuran px dan em :

<!DOCTYPE html>
<html>

    <head>
        <title> Contoh Border-Width </title>
        <style>
            .px{
                border-style: solid;
                border-width: 10px;
            }
            .em{
                border-style: dashed;
                border-width: 0.3125em;
            }
        </style>
    </head>
    
    <body>
        <h2 class="px"> Garis tepi dengan lebar 10px dan style solid </h2>
        <h2 class="em"> Garis tepi dengan lebar 0.3125em dan style putus-putus </h2>
    </body>
    
</html>

Jika Kode Script diatas tidak ada Error, Berikut Screenshot dari contoh kode diatas jika ditampilkan pada halaman web :

Gambar 2

3. Border-Color

Property border-color merupakan property CSS yang digunakan untuk memberi warna pada garis tepi. sama halnya dengan border-width, border-color ditulis bersamaan dengan border-style. Properti ini mempunyai beberapa Nilai antara lain: color, RGBA, HEX, HSLA, dsb.

No	Jenis Value	Value
1	color	red, blue, black, olive, teal, navy, lime, dsb
2	Hexadecimal	#FF0000, #00FF00, #0000FF, #000000, dsb
3	red-green-blue 'rgb()'	rgba(255,0,0), rgba(0%,50%,100%), rgba(0,0,255), dsb
4	red-green-blue-alpha 'rgba()'	rgba(255,0,0,1), rgba(0%,100%,50%,1), rgba(0,0,255,0.5), dsb
5	Hue-saturation-lightness 'hsl()'	hsl(360,100%,50%), hsl(240,75%,50%), dsb
6	Hue-saturation-lightness-alpha 'hsla()'	hsla(360,100%,50%,0.1), dsb

Untuk memilih warna dari garis tepi bagi yang baru belajar, saya sarankan untuk menggunakan jenis value 'color' dengan nilai seperti red, blue, black, dsb, dikarenakan akan lebih mudah diingat. berikut contoh sript kodenya :

<!DOCTYPE html>
<html>

    <head>
        <title> Contoh Border-Color </title>
        <style>
            .color{
                border-style: solid;
                border-width: 1px;
                border-color: blue;
            }
            .rgba{
                border-style: dashed;
                border-width: 2px;
                border-color: rgba(0,255,0,1);
            }
            .hex{
                border-style: double;
                border-width: 3px;
                border-color: #FF0000;
            }
        </style>
    </head>
    
    <body>
        <h2 class="color"> Garis tepi dengan warna biru dan style solid </h2>
        <h2 class="rgba"> Garis tepi dengan warna rgba(hijau) dan style putus-putus </h2>
        <h2 class="hex"> Garis tepi dengan warna HEX(Merah) dan style double </h2>
    </body>
    
</html>

Jika Kode Script diatas tidak ada Error, Berikut Screenshot dari contoh kode diatas jika ditampilkan pada halaman web :

Gambar 3

4. Border

Property border merupakan property CSS yang sering digunakan dengan tujuan mempersingkat penulisan kode CSS. Anda tidak perlu menulis property border-width, border-style, dan border-color secara bersamaan, Anda hanya perlu menulis nilainya saja dari ketiga properti tersebut.

Penulisan value atau nilai dari properti border mengharuskan berisi 3 nilai, yang secara urut yaitu width, style, color. Berikut contoh script kodenya :

<!DOCTYPE html>
<html>

    <head>
        <title> Contoh Border </title>
        <style>
            h2{
                border: 2px solid red;
            }
        </style>
    </head>
    
    <body>
        <h2> Garis Tepi dengan lebar 2px, style solid, dan warna merah </h2>
    </body>
    
</html>

Berikut Hasil Screenshot dari contoh kode diatas jika ditampilkan pada halaman web browser :

Gambar 4

5. Border-radius

Properti border-radius merupakan property CSS yang bisa Anda gunakan untuk membentuk sudut bulat pada suatu elemen atau selector. Anda juga bisa menentukan ukuran pada tiap sudutnya dengan berbeda-beda. Properti tersebut memiliki value dari satu hingga empat nilai. berikut penjelasan untuk valuenya :

No	Value	Deskripsi
1	10px	(1 nilai) value yang ditentukan membentuk sudut bulat pada keempat sudut
2	5px 20px	(2 nilai) value pertama membentuk sudut bulat pada sudut atas-kiri dan bawah-kanan, value kedua pada sudut atas-kanan dan bawah-kiri.
3	5px 20px 10px	(3 nilai) value pertama membentuk sudut bulat untuk atas-kiri, value kedua untuk atas-kanan dan bawah-kiri, dan value ketiga membentuk sudut bulat pada bawah-kanan.
4	5px 10px 20px 30px	(4 nilai) value pertama membentuk sudut bulat pada atas-kiri, value kedua pada atas-kanan, value ketiga pada bawah-kanan, dan value keempat membentuk sudut bulat pada bawah-kiri

dari keempat jenis Value pada tabel diatas, jenis value dengan 1 nilai dan 4 nilai yang sering saya gunakan untuk mendesaign suatu elemen Html. berikut contoh penerapan dari dua jenis value yang sering saya gunakan :

<!DOCTYPE html>
<html>

    <head>
        <title> Contoh Border </title>
        <style>
            .satu-nilai{
                border: 2px solid red;
                border-radius: 15px;
            }
            .empat-nilai{
                border: 2px solid red;
                border-radius: 5px 10px 20px 30px;
            }
        </style>
    </head>
    
    <body>
        <h2 class="satu-nilai">
            Garis Tepi dengan radius 10px pada keempat sudut.
        </h2>
        <h2 class="empat-nilai">
            Garis Tepi dengan radius 5px pada sudut atas sebelah kiri,
            10px pada sudut atas sebelah kanan, 20px pada sudut bawah
            sebelah kanan, dan 30px pada sudut bawah sebelah kiri.
        </h2>
    </body>
    
</html>

Penjelasan dari Script kode diatas, Selector pertama yaitu class 'satu-nilai' yang berisi border-radius dengan value 15px. Artinya, secara otomatis keempat sudut/tiap sudutnya akan membentuk sudut bulat dengan ukuran 10px.

Selector kedua yaitu class 'empat-nilai' yang berisi border-radius dengan value 5px 10px 20px 30px. Artinya, pada sudut atas-kiri diatur 5px, sudut atas-kanan diatur 10px, sudut bawah-kanan diatur 20px, dan sudut bawah-kiri diatur dengan ukuran 30px. Berikut tampilan pada halaman web :

Gambar 5

Bagaimana cara membuat garis horizontal di HTML?

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

Apa itu border pada HTML?

border adalah property CSS untuk menentukan lebar, corak dan juga warna garis tepi pada elemen HTML yang paling ringkas. Dengan menggunakan property border CSS, semua sisi, baik sisi atas, kanan, bawah dan kiri menggunakan lebar, corak dan warna garis yang sama.

Tag hr untuk apa?

HTML elemen tag <hr> (horizontal rule) merupakan elemen pada HTML yang digunakan untuk membuat garis datar memanjang secara horisontal. Elemen <hr> sering digunakan saat terjadi perubahan tema bahasan pada level elemen paragraf sehingga diperlukan sebuah garis horisontal sebagai pemisah dengan bagian di bawahnya.

Apa perintah HTML untuk membuat tabel?

Memahami Elemen HTML dalam Membuat Tabel Elemen <table> digunakan untuk mendefinisikan pembuatan tabel. Elemen <tr> digunakan untuk mendefinisikan pembuatan baris pada tabel. Elemen <td> digunakan untuk membuat kolom atau sel di setiap baris pada tabel.

kode html