© Ms. Masihi 1

 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 HTML Tag which is an empty element, i.e. it contains no content and only employs a start tag. © Ms. Masihi 2

 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 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

 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

 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

 Attributes for the Tag can include one or more of the following in the HTML code:   Any of these attributes can be modified in Code View. © Ms. Masihi 8

 The only way to change the color of a horizontal rule is through adding some simple HTML code.  In the 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: or or or or or or or or or or or © Ms. Masihi 10

© Ms. Masihi 11

 You may also change HR height by adding the size attribute in the Tag.  where "?" is the number of pixels high you want your to be: © Ms. Masihi 12

© Ms. Masihi 13

 You may also change HR width by adding the width attribute in the Tag.  where "?" is the number of pixels wide you want your to be. © Ms. Masihi 14

© Ms. Masihi 15

 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 Tag in Code View.   Any Horizontal Rule that has a color attribute will have no shading - the line will be filled with the indicated color. © Ms. Masihi 17

 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:  © Ms. Masihi 20