Pendahuluan

Garis Horizontal digunakan untuk sebagai pemisah antar bagian dalam halaman web. Untuk membuat garis horizontal kita bisa menggunakan perintah < hr/ >.

Script Coding

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Garis Horizontal</title>
</head>
<h1>Mawar</h1>
<hr />
<img src=”mawar.jpg” hspace=”20″ vspace=”20″ align=”right” width=”300″ height=”250″ alt=”bunga mawar” />
<p>
Bunga mawar sangatlah indah. Maka sudah sepantasnyalah para wanita sangat menyukainya.
Di balik keindahan dan keharuman baunya, mawar menyimpan sesuatu hal yang dapat menyakitkan yaitu durinya.
</p>
<p>
Analogi dari bunga mawar. Seorang wanita terkadang seperti halnya bunga mawar.
Di dalam kecantikan wanita nan rupawan terkadang tersimpan duri yang tajam.
Karena itu hati-hatilah dalam memilih wanita.
</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h1>Mawar</h1>
<hr width=”80%” align=”left” size=”10″ noshade=”noshade” />
<img src=”mawar.jpg” hspace=”20″ vspace=”20″ align=”right” width=”300″ height=”250″ alt=”bunga mawar” />
<p>
Bunga mawar sangatlah indah. Maka sudah sepantasnyalah para wanita sangat menyukainya.
Di balik keindahan dan keharuman baunya, mawar menyimpan sesuatu hal yang dapat menyakitkan yaitu durinya.
</p>
<p>
Analogi dari bunga mawar. Seorang wanita terkadang seperti halnya bunga mawar.
Di dalam kecantikan wanita nan rupawan terkadang tersimpan duri yang tajam.
Karena itu hati-hatilah dalam memilih wanita.
</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
<p><a href=”index.html”> Halaman Menu </a></p>
</html>

Hasil Jadi

Kesimpulan

Kita bisa mengubah ukuran garis horizontal pada halaman HTML seperti pada contoh di atas. Garis pada gambar mawar atas tidak diatur ukurannya, sedangkan garis pada gambar mawar bawah diatur, maka setelah dilihat pada tampilan jadinya akan terlihat berbeda.