Horizontal RuleWhy Use a Horizontal Rule ?

Default Settings<hr> HTML Tag

Modifying HR Attributes

© Ms. Masihi 1

Horizontal Rule

A Horizontal Rule is a built-in graphic element that can be used to draw horizontal lines (rules) on your web page.

This is accomplished with the <hr> HTML Tag which is an empty element, i.e. it contains no content and only employs a start tag.

© Ms. Masihi 2

Uses of a Horizontal Rule Horizontal rules have a number of uses including

acting as dividers to graphically separate your web page into sections or to separate headings from the main page elements.

© Ms. Masihi 3

Using the <hr> tag alone without any attributes will draw a horizontal rule at the default height (2 pixels), at the default width (100% of the available horizontal space), centered on the page and - depending on the browser - with a simple two color gray groove effect (shading).

© Ms. Masihi 4

Default HR Settings

By Default, a Horizontal Rule will be drawn the full width of the page, 2 pixels in size, usually in a gray color, no coloring in the center of the line and with shading below the rule.

© Ms. Masihi 5

HR Tag Attributes – Properties Inspector

Width, Height (size), Align and Shading can be modified in the Properties Inspector.

Select the HR on the page and click in the Width or Height box and enter a new value.

© Ms. Masihi 6

You may also align the line - left, center, right.

Select the line. In the Properties Inspector click the down arrow to edit Align options.

© Ms. Masihi 7

HTML HR Tag Attributes Attributes for the <hr> Tag

can include one or more of the following in the HTML code:

<hr size="pixels" width="pixels or percentage" align="left, center or right" color="color definition"noshade>

Any of these attributes can be modified in Code View.

© Ms. Masihi 8

Horizontal Rule Colors

The only way to change the color of a horizontal rule is through adding some simple HTML code.

In the <hr> opening tag insert the attribute color=“colorname” if you know the name of the color or color=hex value (if you know the hexadecimal value of the color).

© Ms. Masihi 9

Sample Horizontal Rule colors:

<hr color=000000 > or <hr color=“ black”><hr color=FF0000 > or <hr color= “red”><hr color=CC00FF > or <hr color=“purple”><hr color=FF00CC > or <hr color=“magenta”><hr color=F18CC4 > or <hr color=“pink”><hr color=F18300 > or <hr color=“orange”><hr color=FFFF45 > or <hr color=“yellow”><hr color=85FF8C > or <hr color=“palegreen”><hr color=009400 > or <hr color=“green”><hr color=0000FF > or <hr color=“blue”><hr color=FFFFFF > or <hr color=“white”>

© Ms. Masihi 10

© Ms. Masihi 11

Change HR Size (Height)

You may also change HR height by adding the size attribute in the <hr> Tag.

<hr size="?"> where "?" is the number of pixels high you want your <hr> to be: <hr size="5"> <hr size="8"> <hr size="10"> <hr size="15"> <hr size="25">

© Ms. Masihi 12

© Ms. Masihi 13

Change HR Width

You may also change HR width by adding the width attribute in the <hr> Tag.

<hr width="?"> where "?" is the number of pixels wide you want your <hr> to be. <hr width=“100"> <hr width=“200"> <hr width=“450">

© Ms. Masihi 14

© Ms. Masihi 15

Shade or No Shade

Default HR setting is for a “cutout” appearance of the HR.

Unchecking the Shading box in the Properties Inspector will produce a 'dark' or 'filled-in' rule.

© Ms. Masihi 16

The noshade attribute can also be added to the <hr> Tag in Code View.

<hr noshade>

Any Horizontal Rule that has a color attribute will have no shading - the line will be filled with the indicated color.

© Ms. Masihi 17

Color Chart

Colors can be referenced by their hexadecimal code or specific color name.

© Ms. Masihi 18

© Ms. Masihi 19

W3 Schools has this chart on its website at the following address:

http://www.w3schools.com/html/html_colornames.asp

© Ms. Masihi 20