1. © Ms. Masihi 1

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

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

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

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

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

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

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

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

10.  Sample Horizontal Rule colors: or or or or or or or or or or or © Ms. Masihi 10

11. © Ms. Masihi 11

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

13. © Ms. Masihi 13

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

15. © Ms. Masihi 15

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

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

18.  Colors can be referenced by their hexadecimal code or specific color name. © Ms. Masihi 18

19. © Ms. Masihi 19

20.  W3 Schools has this chart on its website at the following address:  http://www.w3schools.com/html/html_colornames.asp © Ms. Masihi 20