hr Creating Horizontal Rules

<hr> Creating Horizontal Rules

Another handy element to arrange text is the <hr> horizontal rule element. This element just causes the browser to draw a horizontal line to separate or group elements vertically. It's supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1. Here are the attributes of this elementnote that it includes a few attributes that have been deprecated:

  • align Deprecated (you're supposed to use styles now instead). Sets the alignment of the rule to left , center (the default), or right . To set this attribute, you must also set the width attribute. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.)

  • class Gives the style class of the element. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

  • id Refers to the element; set this attribute to a unique identifier. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

  • noshade Deprecated. Displays the rule with a two-dimensional, not three-dimensional (the default), appearance. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.)

  • size Deprecated. Sets the vertical size of the horizontal rule in pixels. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.)

  • style Set to an inline style to specify how the browser should display the element. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

  • title Contains the title of the element (which might be displayed in ToolTips). (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

  • width Deprecated. Sets the horizontal width of the rule. You can set this attribute to a pixel measurement or a percentage of the display area. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.)

  • xml:lang Specifies the base language for the element when the document is interpreted as an XML document. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

Here are the XHTML events supported by this element: onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , and onkeyup .

It's easy to break up your text with horizontal rules using the <hr> element. This can be very useful in longer documents, and it organizes your document visually into sections. This element is empty and just instructs the browser to insert a horizontal rule.

As with many style attributes in HTML 4.0, the <hr> element's align , width , noshade , and size attributes are all deprecated. However, they're still in the XHTML 1.0 Transitional or Frameset DTDs. Here's an example that displays a few horizontal rules of varying width and alignment:

Listing ch16_12.html
 <?xml version="1.0"?> <!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>             Using the &lt;hr&gt; Element         </title>     </head>     <body>         <center>             <h1>                 Using the &lt;hr&gt; Element             </h1>         </center>  This is &lt;hr /&gt;:   <hr />   <br />   This is &lt;hr align="left" width="60%" /&gt;:   <hr align="left" width="60%" />   <br />   This is &lt;hr align="center" width="60%" /&gt;:   <hr align="center" width="60%" />   <br />   This is &lt;hr align="right" width="60%" /&gt;:   <hr align="right" width="60%" />  <br />     </body> </html> 

You can see the results of this XHTML in Figure 16-10, which shows a number of ways to configure horizontal rules. Here's another note: When you set the align attribute, you must also set the width attribute.

Figure 16-10. Displaying horizontal rules in Netscape Navigator.

graphics/16fig10.gif



Real World XML
Real World XML (2nd Edition)
ISBN: 0735712867
EAN: 2147483647
Year: 2005
Pages: 440
Authors: Steve Holzner

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net