Just as the Web is made up of individual pieces—documents
or pages—those individual pieces are made up of smaller
elements themselves. Just like a textual document created
with a word processor, HTML documents comprise
paragraphs and other block elements. This chapter examines
block elements in detail.
Line Breaks As mentioned in previous chapters, HTML is very forgiving of white space—perhaps a bit too forgiving. Instead of simply reproducing the white space contained within the code, client browsers follow the rules of HTML, condensing white space and only inserting formatting via tags. For example, consider this code example: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Excerpt From Hamlet</title>
</head>
<body>
Scene I. Elsinore. A platform before the Castle.
[Francisco at his post. Enter to him Bernardo.]
Ber.
Who’s there?
Fran.
Nay, answer me: stand, and unfold yourself.
|
C 4H4A P T E R
✦✦✦✦ In This Chapter Line Breaks Nonbreaking Spaces Soft Hyphens Preserving Formatting Indents Headings Horizontal Rules Grouping with <div> ✦✦✦✦ |
|
56
Part II ✦ HTML/XHTML Authoring Fundamentals
|
Ber.
Long live the king!
Fran.
Bernardo?
Ber.
He.
Fran.
You come most carefully upon your hour.
Ber.
‘Tis now struck twelve. Get thee to bed, Francisco.
Fran.
For this relief much thanks: ‘tis bitter cold,
And I am sick at heart.
Ber.
Have you had quiet guard?
Fran.
Not a mouse stirring.
</body>
</html>
This text, when rendered by a browser, resembles that shown in Figure 4-1. Note how
the formatting has been completely changed due to the browser condensing all the
white space—only rendering one space where line breaks and multiple spaces appear.
This has advantages and disadvantages, linked to the following two points: ✦ You can format your code almost however you like without worrying about affecting the formatting in the client browser. ✦ You cannot rely upon visual formatting—using multiple spaces, tabs, and line breaks—to format your HTML documents. Instead of using plain text, you must use HTML tags to break your document into discrete paragraphs. Paragraphs In HTML, paragraphs are delimited by the paragraph tag, <p>. The paragraph tag controls the line spacing of the lines within the paragraph as well as the line spacing between paragraphs. The default spacing is single space within the paragraph, and double-space between paragraphs. Each paragraph in your document should start with an opening paragraph tag (<p>) and end with a closing paragraph tag (</p>). This ensures that each paragraph in the document has the same formatting. For an example of using paragraph tags, consider the following code and its output, shown in Figure 4-2: |
|
Chapter 4 ✦ Lines, Line Breaks, and Paragraphs
57
|
|
Figure 4-1: HTML browsers condense white space in the code to single spaces.
Figure 4-2: Paragraph tags control the spacing of lines within and between
paragraphs in a document.
|
|
58
Part II ✦ HTML/XHTML Authoring Fundamentals
|
|
Tip
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Excerpt From Black Beauty</title>
</head>
<body><p>01 My Early Home</p> <p>The first place that I can well remember was a large pleasantmeadowwithapondofclearwaterinit.Someshady trees leaned over it, and rushes and water-lilies grew at the deep end. Over the hedge on one side we looked into a plowed field, and on the other we looked over a gate at our master’s house, which stood by the roadside; at the top of the meadow was a grove of fir trees, and at the bottom a running brook overhung by a steep bank.</p> <p>While I was young I lived upon my mother’s milk, as I could not eat grass. In the daytime I ran by her side, and at night I lay down close by her. When it was hot we used to stand by the pond in the shade of the trees, and when it was cold we had a nice warm shed near the grove.</p> <p>AssoonasIwasoldenoughtoeatgrassmymotherusedto go out to work in the daytime, and come back in the evening.</p> <p>There were six young colts in the meadow besides me; they were older than I was; some were nearly as large as grown-up horses. I used to run with them, and had great fun; we used to gallop all together round and round the field as hard as we could go. Sometimes we had rather rough play, for they would frequently bite and kick as well as gallop.</p> </body> </html> It is a good idea to visually format your text within the HTML code—inserting line and paragraph breaks where you want them to appear. Doing so facilitates formatting the text with tags and identifying where tags are missing.
As with most tags, you can use styles to control the spacing used by the paragraph
tag. For example, using the following styles will cause the paragraph’s internal line
spacing to be double-spaced by increasing the line height to double its normal size:
<style type=“text/css”>
p { line-height: 200%; }
</style>
If this style is applied to the example earlier in this section, it results in the output shown in Figure 4-3.
Cross-
Reference
For more information on styles, refer to Chapters 16 and 17.
Standard paragraph formatting is left-justified, as shown in Figures 4-2 and 4-3. You
can control the justification by using a style that modifies the text-align attribute.
|
|
Chapter 4 ✦ Lines, Line Breaks, and Paragraphs
59
|
|
Figure 4-3: You can control the spacing within a paragraph by modifying the line-
height attribute of the <p> tag.
For example, to set the standard paragraph justification to center, you would use a style similar to the following: p { text-align: center; }
Manual line breaks
Occasionally, you will want to manually break a line without ending the paragraph. For example, consider the example earlier in this chapter from William Shakespeare’s Hamlet: Fran.
You come most carefully upon your hour.
Ber.
‘Tis now struck twelve. Get thee to bed, Francisco.
Fran.
For this relief much thanks: ‘tis bitter cold,
And I am sick at heart.
|
|
60
Part II ✦ HTML/XHTML Authoring Fundamentals
|
|
Since the text is from a play, it follows a particular style:
Actor-name
Dialogue
If you use a paragraph tag to cause each line break, you’ll end up with output similar
to the following:
Fran. You come most carefully upon your hour.
Ber.
‘Tis now struck twelve. Get thee to bed, Francisco.
Fran.
For this relief much thanks: ‘tis bitter cold,
And I am sick at heart.
Instead, you should use a line break tag (<br>) where you need a line break in a
paragraph. The preceding text would be coded as follows:
<p>Fran.<br />
You come most carefully upon your hour.</p>
<p>Ber.<br />
‘Tis now struck twelve. Get thee to bed, Francisco.</p>
<p>Fran.<br />
For this relief much thanks: ‘tis bitter cold,
And I am sick at heart.</p>
Note Typically, you would use several different styles of paragraph tags to delimit the
different elements. For example, when formatting a script for a play, you would
have a class for the actor and another for the dialogue. An example follows:
<p class=“actor”>Fran.</p>
<p class=“dialogue”>For this relief much thanks:
‘tis bitter cold,<br />
And I am sick at heart.</p>
That way, you could easily control (and change) the format of each element
separately.
Nonbreaking Spaces Just as you will want to break some text into discrete chunks, at other times you will want to keep text together. For example, you wouldn’t want words separated in dates (December 25, 2003), awkward phrases that include letters and numbers (24 hours), or in some company names (“International Business Machine Corporation”). |
|
Chapter 4 ✦ Lines, Line Breaks, and Paragraphs
61
|
|
Tip
Nonbreaking spaces have long been used to force formatting on the client
browser. For example, to indent a line by three spaces, HTML coders would use
something like the following:
Indented by three spaces
Before robust CSS styles, this was the only way to “space fill” text. However, now
that there are a myriad of ways to achieve this result using styles, this technique
becomes sloppy and should not be used. Instead, create an appropriate style
and use it to achieve the same results.
Suppose you were to use the phrase “12 Angry Men.” You would not want a browser
to split the “12” and “Angry” across two lines, as shown here:
A good example of this technique appears in the movie “12 Angry Men.”
In cases where you do not want the client browser to break text, you should use a non-
breaking space entity ( ) instead of a normal space. For example, when coding
the “12 Angry Men” paragraph, you would use something similar to the following code:
<p>A good example of this technique appears in the movie
“12 Angry Men.”</p>
Cross-
Reference
For more information on special characters (entities, and so on), refer to
Chapter 9.
The browser will then be forced to keep the phrase together, treating it as one
cohesive word.
Soft Hyphens
Occasionally, you will want to allow a browser to hyphenate long words to better justify a paragraph. For example, consider the following code and its resulting output in Figure 4-4: <p style=“text-align: justify;”>The morbid fear of the number 13, or
triskaidekaphobia, has plagued some important historic figures like Mark Twain
and Napoleon.</p>
In cases where you want a client browser to be able to hyphenate a word if
necessary, use the soft hyphen entity (­) to specify where a word should be
hyphenated. Using the preceding example, you can hyphenate the word
“triskaidekaphobia” with soft hyphens:
<p style=“text-align: justify;”>The morbid fear of the number 13, or
tris­kai­deka­pho­bia, has plagued some important historic
figures like Mark Twain and Napoleon.</p>
The resulting output, shown in Figure 4-5, shows how the option hyphens are used to
break the word and achieve better justification results.
|
|
62
Part II ✦ HTML/XHTML Authoring Fundamentals
|
|
Figure 4-4: Long words can cause problems with fully justified
text. Note how the first line is spread out to fill the full line width.
Figure 4-5: Optional hyphens are used when the browser needs to break a word. |
|
Chapter 4 ✦ Lines, Line Breaks, and Paragraphs
63
|
|
Preserving Formatting—The <pre> Element
Sometimes you will want the client browser to interpret your text literally, including the white space and forced formatting (line breaks, and so on). In those cases, you can use the preformatted tag (<pre>). The preformatted tag tells the client browser that the text within the tag has been preformatted and should appear exactly as it appears in the code. The tag also causes all text within to be rendered in a monospace font. For example, consider the following output from a MySQL database: mysql> select * from settings;
+---------------+-------------------+
| name | value |
+---------------+-------------------+
| newsupdate | 1069455632 |
| releaseupdate | Tue, 1/28, 8:18pm |
| status | 0 |
| feedupdate | 1069456261 |
+---------------+-------------------+
4 rows in set (0.00 sec)
If you wanted this to appear in a browser as-is, you would have to use liberal
nonbreaking spaces and line breaks, as well as specify a monospaced font, as shown
in the following code:
<p style=“font-family: courier;”>
mysql> select * from settings;<br />
+---------------+-------------------+<br />
| name
| value
|<br />
+---------------+-------------------+<br />
| newsupdate | 1069455632
|<br />
| releaseupdate | Tue, 1/28, 8:18pm |<br />
| status
| 0
|<br />
| feedupdate | 1069456261
|<br />
+---------------+-------------------+<br />
4 rows in set (0.00 sec)</p>
Not only is this a lot of work, but it also renders the code practically illegible. A
better way is to simply use the <pre> tag, as follows:
<pre>
mysql> select * from settings;
+---------------+-------------------+
| name | value |
+---------------+-------------------+
| newsupdate | 1069455632 |
|
|
64
Part II ✦ HTML/XHTML Authoring Fundamentals
|
| releaseupdate | Tues, 1/28, 8:18pm|
| rolfstatus | 0 |
| feedupdate | 1069456261 |
+---------------+-------------------+
4 rows in set (0.00 sec)
</pre>
As you can see in Figure 4-6, the browser does not attempt to format the text within the <pre> tags, and renders it in a monospace font to ensure that the formatting appears correct. Figure 4-6: The <pre> tag tells the browser that the text has been preformatted and that it should be rendered verbatim. Preformatted text is best for textual tables, or to set certain element (such as lines of code) apart from the main body of a document. Indents Occasionally, you will want to indent the first line of paragraphs in your documents. To do so, you can use the text-indent property of the paragraph tag and an applicable style. For example, if you wanted the first line of all paragraphs to be |
|
Chapter 4 ✦ Lines, Line Breaks, and Paragraphs
65
|
|
Tip
indented by half an inch, you would use a style similar to the following:
<style type=“text/css”>
p { text-indent: .5in; }
</style>
If you want to have different styles of paragraphs in your document—some indented, some not indented—define your style using classes. For example, the following code defines an indent style of the paragraph tag: <style type=“text/css”> p.indent { text-indent: .5in; } </style> You would then specify the class in any paragraph tag where you wanted the indent: <p class=“indent”>This paragraph will be
indented.</p>
An example of indenting the first line of paragraphs is shown in the following code
and its output in Figure 4-7:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>First Line Indents</title>
<style type=“text/css”>
p{ text-indent: 0.5in; }
</style>
</head><body> <p>When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature’s God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.</p> <p>We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.--That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, --That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principlesandorganizingitspowersinsuchform,astothem shall seem most likely to effect their Safety and Happiness. Prudence, indeed...</p> </body> </html> |
|
66
Part II ✦ HTML/XHTML Authoring Fundamentals
|
|
Tip
Figure 4-7: Using styles, you can control the indentation of paragraphs.
If you want to indent an entire paragraph, use the padding-left and, optionally, the padding-right attribute. These attributes add additional space to the left and right of the block element. For example, to add a half-inch indent to the left of a paragraph, you could use this style definition: <style type=“text/css”>
p.indent { padding-left: 0.5in; }
</style>
You can use the <blockquote> tag to easily indent a paragraph (both left and right). However, this method doesn’t allow the type of control possible in defining a special style for elements you wish indented.
Headings
HTML has six predefined heading tags. Headings use <h> tags containing the number of the heading. The <h1> tag specifies the highest (most important) level of headings, while <h6> specifies the lowest (least important) level of headings. As with most textual documents, HTML documents use larger fonts to specify higher-level headings. For example, consider the following example and its output, shown in Figure 4-8: |
|
Chapter 4 ✦ Lines, Line Breaks, and Paragraphs
67
|
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Heading Tags</title>
</head>
<body>
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
<p>Normal body text.</p>
</body>
</html>
Figure 4-8: There are six, predefined heading styles in HTML.
Each heading style acts like a paragraph tag, providing an automatic line break and extra line spacing after the element. As you can see in Figure 4-8, the default spacing after a heading is one line. You can use heading tags to delimit a wide range of text. However, their default use is to mark headings in a document, much like headings in a textual document. Also, like most tags, you can use styles to customize the size and appearance of the heading |
|
68
Part II ✦ HTML/XHTML Authoring Fundamentals
|
|
Cross-
Reference
Additional font elements and style guidelines can be found in Chapters 8 and
16–18.
tags. For example, consider the following style code, which defines the first four
heading levels in relationship to the normal paragraph font:
<style type=“text/css”>
h1 { font-size: 18pt; font-family: Arial;
font-weight: bold; }
h2 { font-size: 16pt; font-family: Arial;
font-weight: bold; }
h3 { font-size: 14pt; font-family: Arial;
font-weight: bold; }
h4 { font-size: 12pt; font-family: Arial;
font-weight: bold; }
p { font-size: 12pt; font-family: Palatino;
font-weight: normal; }
</style>
Horizontal Rules
Horizontal rules are used to visually break up sections of a document. The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly. For example, if you were reproducing text from a book, you might want to use rules to show a break between chapters, as shown in the following excerpt from Anna Sewell’s Black Beauty: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Excerpt of Black Beauty</title>
</head>
<body>
<p>One day he was at this game, and did not know that the
master was in the next field; but he was there, watching what
was going on; over the hedge he jumped in a snap, and
catching Dick by the arm, he gave him such a box on the ear
as made him roar with the pain and surprise. As soon as we
saw the master we trotted up nearer to see what went on.</p>
<p>“Bad boy!” he said, “bad boy! to chase the colts. This is
not the first time, nor the second, but it shall be the last.
There -- take your money and go home; I shall not want you on
my farm again.”</p>
<p>So we never saw Dick any more. Old Daniel, the man who
looked after the horses, was just as gentle as our master, so
we were well off.</p>
|
|
Chapter 4 ✦ Lines, Line Breaks, and Paragraphs
69
|
<hr>
<p>Chapter 02 The Hunt</p>
<p>Before I was two years old a circumstance happened
which I have never forgotten. It was early in the spring;
there had been a little frost in the night, and a light mist
still hung over the woods and meadows. I and the other colts
were feeding at the lower part of the field when we heard,
quite ... </p>
</body>
</html>
The output of this code is shown in Figure 4-9.
Figure 4-9: The <hr> tag inserts a horizontal rule in the document.
As with most tags, you can customize the look of the <hr> tag by using styles. For example, consider the following style: <style type=“text/css”>
hr { color: red; height: 5px; width: 50%; }
</style>
If this style were added to our last example, the results would be similar to the output shown in Figure 4-10. |
|
70
Part II ✦ HTML/XHTML Authoring Fundamentals
|
|
Figure 4-10: You can control various aspects of the horizontal rule, including its width, its
thickness (height), and the color.
Grouping with the <div> Element Now that you know how to format paragraphs, what about groups of paragraphs? Suppose, for example, that you wanted to indent an entire section of text and place a border around the section. Although you can accomplish the indent by using styles with paragraph tags, the unified border is harder to do. For example, consider the following code, which uses styles and paragraph tags: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>ParagraphBorderswithParagraphTags</title>
<style type=“text/css”>
p.indent-highlight { padding-left: 50px;
padding-right: 50px; border: solid 3px; }
</style>
</head>
<body>
<p class=“indent-highlight”>For the first few days I could
not feed in peace; but as I found that this terrible creature
never came into the field, or did me any harm, I began to
disregard it, and very soon I cared as little about the
|
|
Chapter 4 ✦ Lines, Line Breaks, and Paragraphs
71
|
passing of a train as the cows and sheep did.</p>
<p class=“indent-highlight”>Since then I have seen many
horses much alarmed and restive at the sight or sound of a
steam engine; but thanks to my good master’s care, I am as
fearless at railway stations as in my own stable.</p>
<p class=“indent-highlight”>Now if any one wants to break in
a young horse well, that is the way.</p>
</body>
</html>
The output of this code is shown in Figure 4-11. Note how each paragraph is
surrounded by its own border, which is not what you wanted.
Figure 4-11: Adding some formatting, such as borders, to paragraph tags causes the formatting to distinctly appear around individual paragraphs. This is where the division tag (<div>) comes in handy. The <div> tag is used to delimit divisions of a document, which can include several paragraphs or other block elements. Instead of defining a style for the paragraph tag, define it as an unattached class (one without a specified element) and use it with the <div> tag, as in the following code: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
|
|
72
Part II ✦ HTML/XHTML Authoring Fundamentals
|
|
<head>
<title>DivisionBorderswithDivisionTags</title>
<style type=“text/css”>
.indent-highlight { padding-left: 50px;
padding-right: 50px; border: solid 3px; }
</style>
</head>
<body>
<div class=“indent-highlight”>
<p>For the first few days I could not feed in peace; but as I
found that this terrible creature never came into the field,
or did me any harm, I began to disregard it, and very soon I
cared as little about the passing of a train as the cows and
sheep did.</p>
<p>Since then I have seen many horses much alarmed and
restive at the sight or sound of a steam engine; but thanks
to my good master’s care, I am as fearless at railway
stations as in my own stable.</p>
<p>Now if any one wants to break in a young horse well, that
is the way.</p>
</div>
</body>
</html>
Note the output of this code in Figure 4-12.
Figure 4-12: Moving the border definition to the <div> tag causes the border to appear
around the entire division instead of around the individual pieces.
|
|
Chapter 4 ✦ Lines, Line Breaks, and Paragraphs
73
|
|
Tip
Note that the border in Figure 4-12 appears at the margins of the document, not
at the indent of the paragraphs it surrounds. This is because the style specifies
padding-left and padding-right, which affects the spacing between the
parent element (the border) and its children (the paragraphs). To indent the
border itself, you would need to specify values for margin-left and margin-
right.
Keep in mind that the <div> tag can be used to group combinations of block
elements as well—it is not limited to paragraph blocks. For example, you could
easily have included a headline, horizontal rule, or other block element(s) in the
paragraphs in the last example, and the border would have been rendered around
them all.
Summary
This chapter covered the details of most of the block elements of XHTML— paragraphs, headings, horizontal rules, and more. The next few chapters cover more specialized elements, such as lists, images, links, and tables. After learning about the various elements you can create in an HTML document, Part II of this book shows you how Cascading Style Sheets (CSS) contribute to creating rich, online content. ✦✦✦ |
No comments:
Post a Comment