Cara Membuat Garis di Postingan Blog dengan HTML.

Selain dengan gambar, untuk membuat sebuah postingan terlihat lebih menarik dan rapi adalah dengan menambahkan sebuah garis pembatas. Untuk membuat sebuah garis sederhana, kita bisa menggunakan tag <hr/>. Namun dalam pengaplikasiannya, sebuah garis yang dibuat dengan menggunakan HTML memiliki beberapa atribut tambahan, seperti ini :

1. Atribut color : untuk memberikan warna pada garis.

Script :

<hr color="blue" />

Hasil :

---

Keterangan :

Kata berwarna oranye dapat diganti dengan warna lain, seperti black, green, red, atau nilai warna dalam hexadecimal seperti #000000 untuk hitam, #FFFFFF untuk putih, dll.

2. Atribut size : untuk mengatur ukuran tebal garis.

Script :

atas : <hr size="5px" />

bawah : <hr size="20px" />

Hasil :

---

---

Keterangan :

Kata berwarna oranye dapat diganti dengan angka lain. Semakin besar angka, maka semakin besar pula ukuran garis.

3. Atribut width : untuk mengatur panjang garis.

Script :

atas : <hr width="100%" />

bawah : <hr width="25%" /> 

Hasil :

---

---

Keterangan :

Kata berwarna oranye dapat diganti dengan persentase yang lain. Semakin kecil persentasenya, maka semakin kecil pula panjang garisnya.

4. Atribut align : untuk mengatur posisi garis di kanan, kiri atau tengah. 

Keterangan :

Untuk atribut align, baru dapat terlihat bila kita menggabungkannya dengan atribut width. Karena secara default, panjang garis akan selalu 100% dan hasil align tidak akan terlihat.

Script :

atas : <hr width="50%" align="left"; />

tengah : <hr width="50%" align="center"; />

bawah : <hr width="50%" align="right"; /> 

Hasil :

---

---

---

5. Atribut border-style : untuk mengubah tampilan garis.

Script :

atas : <hr style="border-style:solid" />

tengah : <hr style="border-style:dotted" />

bawah : <hr style="border-style:double" /> 

Hasil :

---

---

---

Selain itu, kita juga bisa menggabungkan keseluruhan atribut di atas sesuai kebutuhan. Misalnya kita akan membuat sebuah garis putus-putus dengan panjang 50%, berwarna merah dan berada di kanan. Maka scriptnya adalah sebagai berikut :

<hr align="right" style="border-color:red; border-style: dotted;" width="50%" />

Hasilnya adalah sebagai berikut :

---

Sekian tutorial kali ini. Semoga bermanfaat...

----------------

Catatan : Bila gambar ada yang tidak muncul, video tidak dapat diplay atau tutorial sudah tidak relevan, mohon beri komentar pada kolom di bagian bawah postingan ini. Terima kasih.