HTML HR

Category: HTML

If what is needed is to separate two different sections of a page, whether text or not, may be employed new label: <hr>. Its name comes from English Horizontal Rule (horizontal line). This label is formed by a single instruction and causes the browser to insert a horizontal line it separating the two paragraphs that were being compared. There are four attributes that allow change its appearance. These are:

 

’align’:                         Change the alignment of the line. It can take three values: "left", "center" and "right" to get left-aligned, center and right respectively.

 

’noshade’:                             'noshade' which in English means no shadow exists because some browsers graphics as Navigator or Explorer shown with horizontal lines shaded three-dimensional effect. By including this attribute eliminates this effect so that the browser will only display a black horizontal line.

 

’size’:                                      With this attribute you can control the line thickness. As the value of this attribute is must specify the desired value in pixels (screen dots).     

 

’width’:                                  This attribute lets you specify the line width. The value can be given an absolute manner, specifying the width in pixels (eg width = 100) or made relative to the width of the browser window using percentages (eg width = "90%"). It is highly recommended to use the latter system so we get an appropriate result regardless of the size each user wants to give the browser window.

 

These attributes can be used together to combine their effects. In Our example we can see the effect each one separately in Explorer along with the values used in each case.

 

<html>

<head>

<title>Horizontal Line </title>

</head>

<body>

<p>Line of width 150 and size 3 </p>

<hr width="150" size='3">

<p>Line center aligned, width=50% and noshade </p>

<hr align="center" width="50%" noshade>

<p>Line right aligned, size = 4, colour Red and having no shade </p>

<hr align="right" size="4" color="red" noshade>

</body>

</html>



Dinesh ThakurDinesh Thakur is a Columinist and designer with strong passion and founder of Computer Notes. if you have any ideas or any request please get @me on Google+
linkedin FaceBook Twitter Google Plus