Controlling Text Blocks - HTML 4

Blocks of text are the foundation for your page. You can break those blocks to better guide readers through your content.

Block quotes
A block quote is a long quotation or excerpt from a printed source that you set apart on your page. You use the <blockquote> element to identify block quotes:

<!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”><head><meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” /><title>Famous Quotations</title></head><body><h1>An Inspiring Quote</h1><p>When I need a little inspiration to remind me of why I spend my days in the classroom, I just remember what Lee Iococca said:</p><blockquote>In a completely rational society, the best of us would be teachersand the rest of us would have to settle for something else.</blockquote></body></html>

Most Web browsers display block-quote content with a slight left indent, as shown in Figure.

Preformatted text
Ordinarily, HTML ignores white space inside documents. A browser won’t display a block element’s

  • Hard returns
  • Line breaks
  • Large white spaces

The following markup includes several hard returns, line breaks, and a lot of space characters. Figure shows that the Web browser ignores all of this.

<p>This is a paragraph with a lot of white space thrown in for fun (and as a test of course).</p>

The preformatted text element (<pre>) instructs browsers to keep all white space intact as it displays your content (like the following sample). Use the <pre> element in place of the <p> element to make the browser apply all your white space.

<!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”><head><meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” /><title>White space</title></head>

<body>
<pre>This is a paragraph
with a lot of white space
thrown in for fun (and as a test of course).
</pre>
</body>
</html>

You may want the browser to display white spaces in an HTML page where proper spacing is important, such as

  • Code samples
  • Text tables

You can nest <pre> elements inside <blockquote> elements to carefully control how the lines of quoted text appear on the page.

Line breaks
By default, browsers usually wrap text that appears in block elements, such as paragraphs, headings, and block quotes. If a text line reaches the end of a browser window, the next word automatically starts a new line. You can manually control the end of a text line with a line break (denoted by the element).

Figure : Web browsers typically indent a block quote to separate it from paragraphs.

Web browsers typically indent a block quote to separate it from paragraphs.

Figure : Use preformattedtext to force browsers to recognize white space.

Use preformatted text to force browsers to recognize white space.

Figure : Web browsers routinely ignore white space.

Web browsers routinely ignore white space.

Function
The element is the HTML equivalent of the manual line break that you use in paragraphs and other blocks of text when you’re working in a word-processing program. When a browser sees a , it ends the line there and starts the next line.

The difference between a line break and a paragraph is that a line break doesn’t use any special formatting that you can apply at the end or beginning of a paragraph, such as

  • Extra vertical space
  • First-line indenting

Formatting
The following markup formats the lines of text in a poem with line breaks. The entire poem is described as a single paragraph, and the element marks the end of each line:

<!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”><head><meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” /><title> Shakespeare in HTML</title></head>

<body>
<h1>Shakespeare’s Sonnets XVIII: Shall I compare thee to a summer’s day? </h1>
<p>
Shall I compare thee to a summer’s day?
Thou art more lovely and more temperate.
Rough winds do shake the darling buds of May,
And summer’s lease hath all too short a date.
Sometime too hot the eye of heaven shines,
And often is his gold complexion dimm’d;
And every fair from fair sometime declines,
By chance or nature’s changing course untrimm’d;
But thy eternal summer shall not fade
Nor lose possession of that fair thou ow’st;
Nor shall Death brag thou wander’st in his shade,
When in eternal lines to time thou grow’st:
So long as men can breathe or eyes can see,
So long lives this, and this gives life to thee.
</p>
</body>
</html>

Figure shows how a browser handles each line break. In this example, the poem isn’t left-indented because the <p> element replaces the <blockquote> element.

Figure : Using the element to specify where lines in block elements should break.

Using the <br /> element to specify where lines in block elements should break.

Horizontal rules
The horizontal rule element (<hr />) helps you include solid straight lines (rules) on your page.

The browser creates the rule based on the <hr /> element, so users don’t wait for a graphic to download. A horizontal rule is a good option to

  • Break your page into logical sections.
  • Separate your headers and footers from the rest of the page.

Formatting
When you include an <hr /> element on your page, like the following HTML, the browser replaces it with a line, as shown in Figure.

<!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”><head><meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” /><title>Horizontal Rules</title></head><body><p>This is a paragraph followed by a horizontal rule.</p>

<hr />

</p>This is a paragraph preceded by a horizontal rule.</p>
</body>
</html>

Figure : Use the <hr /> element to add horizontal lines to your page.

Use the <hr /> element to add horizontal lines to your page.

A horizontal rule must always sit on a line by itself; you can’t add the <hr /> element in the middle of a paragraph (or other block element) and expect the rule to just appear in the middle of the block.

Attributes
Four different attributes control the appearance of each horizontal rule:

  • width: Specifies line width either in pixels or by percentage of display area width (which we call “the page” in discussion that follows).
  • For example, a rule can be 50 pixels wide or take 75 percent of the page.

  • size: Specifies the height of the line in pixels. The default is 1 pixel.
  • align: Specifies the horizontal alignment of the rule as either left (the default), center, or right.
  • If you don’t define a width for your rule, it takes the entire width of the page. The alignment won’t make any difference.

  • noshade: Specifies a solid line with no shading.

By default, most browsers display hard rules with a shade.

These formatting attributes are deprecated in favor of using CSS.

This bit of HTML creates a horizontal rule that takes up 45 percent of the page, is 4 pixels high, aligned to the center, and has shading turned off:

<p>This is a paragraph followed by a horizontal rule.</p><hr width=”45%” size=”4” align=”center” noshade=”noshade” /><p>This is a paragraph preceded by a horizontal rule.</p>

Figure shows how the addition of these attributes can alter how a browser displays the rule.

Figure : Use the <hr /> attributes to better control how a browser displays the rule.

Use the <hr /> attributes to better control how a browser displays the rule.

Figure shows how you can use horizontal rules in the real world to highlight important content. TheLANWrights, Inc., Web site uses colored hard rules to frame a key statement on the site’s home page. The rules make the statement stand out from the rest of the page.

Figure : The LANWrights, Inc., Web site uses hard rules to draw your attention to important information on the page.

The LANWrights, Inc., Web site uses hard rules to draw your attention to important  information on the page.

CSS gives you much more control over the placement of horizontal rules; you can even fancy them up with color and shading options.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML 4 Topics