Horizontal Rules
| The <hr> tag, which has no closing tag in HTML and no text associated with it, creates a horizontal line on the page. Rule lines are used to visually separate sections of a web pagejust before headings, for example, or to separate body text from a list of items.
The following input shows a rule line and a list as you would write it in XHTML 1.0: Input <hr /> <h2>To Do on Friday</h2> <ul> <li>Do laundry</li> <li>Send FedEx with pictures</li> <li>Have lunch with Mollie</li> <li>Read Email</li> <li>Set up Ethernet</li> </ul> <hr /> Figure 6.6 shows how they appear in a browser. Output Figure 6.6. An example of how horizontal rules are used around a list. Attributes of the <hr> TagIn HTML 2.0, the <hr> tag is just as you see it, with no closing tag or attributes. However, HTML 3.2 introduced several attributes to the <hr> tag that give you greater control over the appearance of the line drawn by <hr>. All these attributes have been deprecated in favor of style sheets in the HTML 4.01 specification. Note Although presentation attributes such as size, width, and align are still supported in HTML 4.01, style sheets are now the recommended way to control a page's appearance. The size attribute indicates the thickness, in pixels, of the rule line. The default is 2, and this also is the smallest that you can make the rule line. Figure 6.7 shows the sample rule line thicknesses created with the following code: Input <h2>2 Pixels</h2> <hr size="2" /> <h2>4 Pixels</h2> <hr size="4" /> <h2>8 Pixels</h2> <hr size="8" /> <h2>16 Pixels</h2> <hr size="16" /> Output Figure 6.7. Examples of rule line thicknesses. The width attribute specifies the horizontal width of the rule line. You can specify the exact width of the rule in pixels. You can also specify the value as a percentage of the browser width (for example, 30% or 50%). If you set the width of a horizontal rule to a percentage, the width of the rule will change to conform to the window size if the user resizes the browser window. Figure 6.8 shows the result of the following code, which displays some sample rule line widths: Input <h2>100%</h2> <hr /> <h2>75%</h2> <hr width="75%" /> <h2>50%</h2> <hr width="50%" /> <h2>25%</h2> <hr width="25%" /> <h2>10%</h2> <hr width="10%" /> Output Figure 6.8. Examples of rule line widths. If you specify a width smaller than the actual width of the browser window, you can also specify the alignment of that rule with the align attribute, making it flush left (align="left"), flush right (align="right"), or centered (align="center"). By default, rule lines are centered. Finally, in most current browsers, the noshade attribute shown in the following example causes the browser to draw the rule line as a plain line without the three-dimensional shading, as shown in Figure 6.9.
Output Figure 6.9. Rule lines without shading. |
EAN: 2147483647
Pages: 305