home account info subscribe login search My ITKnowledge FAQ/help site map contact us


 
Brief Full
 Advanced
      Search
 Search Tips
To access the contents, click the chapter and section titles.

HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

Bookmark It

Search this book:
 
Previous Table of Contents Next



Figure 6.13 Example HTML document illustrating use of the DIV element.

<HTML><HEAD><TITLE>Example of DIV</TITLE></HEAD>
<BODY>
<DIV ALIGN=“left”>
   <H1>A Left-Aligned Heading</H1>
   <P>A left-aligned paragraph....If you actually read this
      example you will realize that that the author is a
      raving idiot.
    ... more paragraph text ...
   </P>
   <DIV ALIGN=“right”>
      <H2>A right-aligned heading</H2>
      <BLOCKQUOTE>
      <P>A paragraph inside a block quotation -- the entire
         quotation is right-aligned. Note, however, that this
         is a formatting issue, and not a political statement
         on the part of the author.</P>
      </BLOCKQUOTE>
   </DIV>
   <P>Another left-aligned paragraph. Again, this is not a
      political statement.<BR>
      ...
   </P>
</DIV>
<HR NOSHADE>
<DIV ALIGN=“right”>
<I>Another Incredible HTML Example!</I>
</DIV>
</BODY></HTML>


Figure 6.14  Rendering of the document listed in Figure 6.13 by the NetManage WebSurfer 5 browser.

COLOR=“#rrggbb” or “color” (optional; Internet Explorer only) Specifies the desired color for the horizontal rule, either as an RGB color code or as a color name. If COLOR is specified, then the rule takes on this color uniformly and is not shaded.
NOSHADE (optional) By default, browsers usually render an HR as a shaded, chiseled bar drawn across the page. The attribute NOSHADE (which takes no value) indicates that the bar should be rendered in a solid color (usually black), with no shading.
SIZE=“number” (optional) Specifies, in pixels, the vertical thickness of the horizontal rule. The default is 2 pixels.
WIDTH=“number,” real%” (optional) Specifies the horizontal width of the HR element. The form WIDTH=“number” specifies the absolute width in pixels (note that the displayed result will depend on the screen resolution of the display), while WIDTH=“real%” specifies the width as a percentage of the possible full width of a horizontal rule (e.g., WIDTH=“80%”). Note that percentage width is determined relative to the maximum allowed width, which depends on the location of the HR. For example, inside a BLOCKQUOTE or TD (table cell), the full width of an HR (WIDTH=“100%”) is limited by the width of the parent blockquote region, or the width of the parent table cell, respectively.

A style sheet can specify the alignment, size, and width of an HR: Thus the attributes ALIGN, SIZE, and WIDTH are marked as deprecated and should be avoided when possible.

P Element: Paragraphs

Usage: <P> ... (</P>)
Can Contain: characters, character highlighting, A, APPLET, BASEFONT, BR, BUTTON, IFRAME, IMG, INPUT, LABEL, MAP, OBJECT, SCRIPT, SELECT, TEXTAREA
Can Be Inside: ADDRESS, BLOCKQUOTE, BODY, CENTER, DD, DIV, FIELDSET, FORM, LI, NOFRAMES, NOSCRIPT, TD, TH, APPLET, BUTTON, IFRAME, OBJECT
Attributes: CLASS, DIR, ID, LANG, STYLE, TITLE, standard event handlers, ALIGN

P marks a paragraph block: <P> marks the start of a paragraph and ends any previous paragraph. This is different from BR, which represents a simple line break, possibly within a paragraph. A paragraph should be thought of as a logical block of text, similar to BLOCKQUOTE, ADDRESS, or Hn heading, whereas a BR is simply a “character” that causes a line break.

Typically, a paragraph is rendered with extra vertical space separating it from the previous and subsequent blocks of text. In some cases, the first line is indented.

For historical reasons, an end tag </P> is not required. Instead, the end of a paragraph is implied by the start of another paragraph or by the start of another element marking a block of text. However, an end tag definitively marks the paragraph end, and this is the recommended form.

P supports the standard “generic” and “event-handler” attributes described earlier in this chapter. Note that the event handlers are only partially supported by Internet Explorer 4 and are not supported by Netscape Navigator 4.

P can also take the optional ALIGN attribute to specify text alignment. The allowed values are “center,” “left,” “right,” or “justify,” which call for the indicated text alignment within the paragraph. Note that the “justify” alignment option (to justify the text between the left and right margins) is not widely supported.

HTML 4 recommends using a style sheet to specify text alignment within P elements.

Creating Extra Vertical Spacing

If you wish to leave extra vertical space, you should use a paragraph containing multiple <BR> tags—for example:

... text
<P> <BR><BR><BR>
<H2>Heading, with lots of space above it</H2>

You should not use empty paragraphs to add vertical spacing, as in:

....text
<P><P><P>
<H2> And another thing of Interest </H2>


NOTE: </p> Can Introduce Extra Vertical Space

Some browsers introduce extra vertical spacing after a paragraph ending with a </P>. For example, the markup

..... some text
<HR>

and

 ... some text </P>
<HR>

will be rendered differently: In the second example, there is extra space between the text and the HR. With Netscape Navigator 3/4 and Internet Explorer 3/4, this occurs when paragraphs are followed by ADDRESS, HR, CENTER, DIV, and TABLE elements. Internet Explorer 3 also leaves extra space in front of list elements, but Internet Explorer 4 does not.


Formally, a paragraph cannot be empty, so this is illegal. Most browsers will tolerate this, but their interpretations will vary—some will leave extra spaces, while most (Internet Explorer 3/4 and Netscape Navigator 3/4) ignore the extra <P> tags completely. The latter is formally the recommended behavior.

PRE Element: Preformatted Text

Usage: <PRE> ... </PRE>
Can Contain: characters, ABBR, B, BDO, CITE, CODE, DFN, EM, I, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, TT, U; VAR,

A, BR, BUTTON, IFRAME, INPUT, LABEL, MAP, SCRIPT, SELECT, TEXTAREA
Can Be Inside: BLOCKQUOTE, BODY, CENTER, DD, DIV, FIELDSET, FORM, LI, NOFRAMES, NOSCRIPT, TD, TH,

APPLET, BUTTON, IFRAME, OBJECT
Attributes: CLASS, DIR, ID, LANG, STYLE, TITLE, standard event handlers,

(COLS, WRAP: Netscape Navigator only)


Previous Table of Contents Next


Products |  Contact Us |  About Us |  Privacy  |  Ad Info  |  Home

Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc.
All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.