Cara Membuat Garis Di HTML

Cara Membuat Garis Di HTML

Pada tutorial kali ini kata akan belajar cara membuat garis di HTML. Garis ini yang nantinya akan membentang secara vertikal dan horizontal pada browser. Garis ini bisanya digunakan untuk memisahkan konten pada website supaya mudah dilihat atau terkesan lebih rapi. Langsung saja kita mulai tutorialnya seperti berikut.

Membuat Garis Horizontal Pada HTML

Untuk membuat garis horizontal pada HTML sangatlah mudah, karena sudah ada tag HTMLnya yaitu <hr>. Nama tag tersebut disebut dengan horizontal ruler. Dan berikut adalah contoh dari penggunaan tag hr tersebut.

Selanjutnya silakan tulis kode diatas dan simpan dengan nama terserah kamu, namun dengan ektensi .html. Pada contoh ini saya menyimpannya pada direktori D:\Cara Kode\Latihan\ dan disimpan dengan nama file hr.html. Sekarang silakan jalankan file yang sudah disimpan tersebut dengan cara klik dua kali pada file, atau menariknya ke browser, atau mengaksesnya melalui url path file pada browser (silakan pilih salah satu). Untuk path url file pada contoh ini karena saya menyimpannya pada directorti D:\Cara Kode\Latihan\ dan nama filenya hr.htlm maka url yang dimasukkan pada browser yaitu file:///D:/Cara Kode/Latihan/hr.html. Dan dari kode HTML diatas pada browser akan tampil seperti berikut:

Hasil Kode Membuat Garis Horizontal Pada HTML

Seperti gambar contoh diatas garis yang tampil akan berwarna hitam. Kamu juga dapat merubah warna garis tersebut dengan menggunakan atribut color, kemudian atribut tersebut memiliki nilai warna dalam bahasa inggris misalnya red, yellow, green, blue, dan sebagainya. Untuk menggunakan atribut tersebut kamu dapat melihat contoh dibawah ini:

Dari contoh kode diatas jika ditampilkan pada browser makan akan tampil seperti gambar berikut:Hasil Kode Membuat Garis Horizontal Pada HTML Dengan Warna

Membuat Garis Verikal Pada HTML

Untuk membuat garis vertikal pada HTML tidak semudah membuat garis horizontal. Caranya yaitu memerlukan kode CSS dan tag HTML DIV <div></div>. Tag div inilah yang nantinya akan dimanipulasi menggunakan CSS sehingga menghasilkan garis vertikal pada browser. Langsung saja kita lihat contoh kodenya dibawah.

Dari kode diatas maka akan tampil seperti gambar dibawah ini:

Hasil Kode Membuat Garis Vertikal Pada HTML

Penjelasan Kode:

Pada baris nomor 14 terdapat kode tag HTML div yang memiliki class garis_verikal, dari class itulah digunakan css sebagai selector. Pada baris nomor 5 – 9 terdapat sebuah kode css, kode css tersebut menggunakan selector class garis_verikal, yaitu untuk memanipulasi tag div yang memiliki class tersebut. Pada baris nomor 16 terdapat kode css border-left: 1px black solid; yang artinya memberi border disebelah kiri setebal 1px dengan warna hitam dan border tersebut berbentuk solid. Kemudian pada baris nomor 17 terdapat property height dengan value 170px (height: 170px;) yang artinya div tersebut diatur supaya memiliki tinggi 170px. Dan pada baris nomor 18 terdapat kode css width: 0px;, bearti div tersebut diatur dengan lebar 0px.

Pada contoh kode diatas border memiliki warna black, kamu juga dapat menggunakan warna lain tentunya dengan penyebutan warna dengan bahasa inggris. Contohnya red, green, yellow, dan sebagainya. Selain menggunakan warna dengan bahasa inggris kamu juga dapat menggunakan kode warna hexa color, contohnya #FF0000 untukn warna red, #FFFF00 untuk warna yellow, dan lain sebagainya. Untuk mengetahui kode hexa color kamu dapat memanfaatkan halaman web ini, dan untuk lebih jelas tentang penggunaan hexa color kamu dapat membacanya di halaman ini.

Dan pada contoh kode diatas menggunakan border dengan value solid, selain solid porperty border juga memiliki beberapa value yaitu: dotted, dashed, solid, double, groove, ridge, inset, outset, dan sebagainya. Namun jika digunakan untuk membuat garis verikal yang hasilnya terlihat berbeda yaitu solid, dotted, dama dashed.

Sekarang kita coba membuat beberapa contoh border dengan warna dan beberapa property border style. Dan berikut adalah contoh kodenya:

Dari contoh kode diatas jika dijalankan akan tampil seperti dibawah ini:

Hasil Kode Membuat Garis Vertikal Pada HTML Dengan Beberapa Border Dan Warna

Pada kode css diatas terdapat tambahan 2 property, yaitu display dengan value inline-block tujuannya supaya barisnya berjajar ke kanan. Dan padding-left 5px tujuannya supaya tiap garis memiliki jarak kiri sebesar 5px.

Demikian untuk tutorial cara membuat garis di HTML, apabila kamu memiliki pertanyaan seputar tutorial ini silakan tanyakan pada kolom komentar dibawah. Dan apabila kamu baru belajar HTML silakan kunjungi halaman seri belajar HTML dasar atau bagi kamu yang baru belajar CSS silakan kunjungi seri belajar CSS dasar, yang mungkin bisa menambah wawasan kamu seputar HTML atau CSS.


Kolom Komentar

Related Post