A horizontal line, or horizontal rule as it is named in HTML, is one of the easiest tags to use. You can insert the <hr /> tag anywhere in your document to insert a horizontal line that extends across the space available. Take a look at the following sample HTML. It shows three <hr> tags: two used as a section break between text and the other used inside a table cell. Figure 5.5 shows how they appear in the browser. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Horizontal Lines</title> <style type="text/css"> td {text-align=center} </style> </head> <body> <p>This is a horizontal line.</p> <hr /> <p>This is another horizontal line.</p> <hr /> <table width="50%" rules=cols> <tr> <td>This is also a<hr />horizontal line.</td> <td>There is <br />no line on this<br />side of the table.</td> </tr> </table> </body> </html> Figure 5.5. The <hr /> tag inserts a horizontal line that stretches across the available horizontal space.Adding Style to Horizontal LinesAs with other HTML tags, you can use style sheet properties to design your own horizontal rules. You can set the height, width, and color of the line to match the design of your Web page. The following HTML sample shows two different styles attached to the <hr /> tag. If I use the HR.red style, I see a red line that takes up 50% of the horizontal space. If I use the hr.purple style, I see a purple line that is 4 pixels high and takes up 75% of the horizontal space. <style type="text/css"> hr.red {color:red; width:50%} hr.purple {color:purple; height:4; width:75%} </style> I've used both of those styles in the following sample HTML. Figure 5.6 shows you how those examples look in the browser. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Horizontal Lines</title> <style type="text/css"> td {text-align=center} hr.red {color:red; width:50%} hr.purple {color:purple; height:4; width:75%} </style> </head> <body> <p>This is a plain horizontal line.</p> <hr /> <p>This is a purple horizontal line.</p> <hr /> <table width="50%" rules=cols> <tr> <td>This is a red <hr />horizontal line.</td> <td>There is <br />no line on this<br /> side of the table.</td> </tr> </table> </body> </html> Figure 5.6. Applying styles to the <hr /> tag changes the appearance of the horizontal line.Margin StylesStyle sheets give you another important advantage: You can specify the margins of almost any HTML element. The margins can be defined in pt, in, cm, or px sizes. body {margin-left: 100px; margin-right: 100px; margin-top: 50px} You can set the margin-left, margin-right, and margin-top properties individually or combine them into one property called margin that applies the sizes to the top, right, and left margins. body {margin: 100px 100px 50px} The sample CSS document from Microsoft's CSS Gallery (which you looked at earlier) also specifies margins for the text elements. Try it on your documents. <style type="text/css"> body {background: coral } .subhead { color: black; font-size: 28px; margin-top: 12px; margin-left: 20px; line-height: 32px; font-family: Impact, Arial Black, Arial, Helvetica, sans-serif} </style> Tip
Table 5.4 lists the HTML tags that were discussed in this lesson.
In this lesson, you've learned:
|