Control Text Flow with Text Elements

If you pasted a text file into your sample Web page in Chapter 2, you noticed instantly that text loses even the simplest formatting when brought into an HTML document: indents; paragraph breaks, and line spacing all are gone. However, HTML provides several elements for creating paragraphs and identifying breaks in your text.

Create Line Breaks with <br /> and Paragraphs with <p>

The line break <br /> and paragraph <p> elements are structural in nature and help you control how your text will be divided on the page. The difference between the line break and the paragraph elements is that when you use <br /> you’re telling a browser to simply insert a line break and go to the next line, like this:

To insert a line break, use the line break element.<br />

On the other hand, the <p> element will drop down an extra line before it starts your new paragraph, as in the following:

<p>Use the paragraph element to identify paragraphs.</p> 

Did You Know?—What Is the Difference Between Block Level and Inline Elements?

Elements that start a separate division of the page, such as the <p> and <h#> elements, are block level elements. Elements that do not create separate divisions on the page, for example: <em> and <strong>, are inline elements.

Insert Ruler Lines with <hr />

Have you ever noticed how some Web pages are divided into sections by horizontal lines? You can create these with the horizontal rule element, <hr />. This element will draw a horizontal line all the way across the page. Notice also that this is an empty element. Because it has no content, it doesn’t require a closing tag. For example, if you want to put a dividing line beneath the preceding example, you would write it this way:

<p>Use the paragraph element to identify paragraphs.</p> <hr />

Identify Quotations with <q> and <blockquote>

Some other text elements are designed to identify short and long quotations. If you want to identify a short “inline” quotation, you could use the <q> element, as in the following line of markup:

<p>Use the paragraph element to identify paragraphs.<br /> Author James H. Pence says, <q>This is a very important element.</q> </p> 

A problem with the <q> element is that Internet Explorer does not support it. If you type the preceding line into an HTML document and view it in Internet Explorer 6 (IE), you’ll discover that the <q> element does not change the appearance of the quotation at all. However, if you view it in Netscape 7 or Opera 7, this element adds a set of quotation marks to the line, as in the following illustration:

Thus, the <q> element is not your best choice when identifying a short quotation on your page.

The other way to insert quotation marks around an inline quote is by using the &quot; entity. Since all three browsers support this entity, it’s probably the better choice. In this case your HTML would look like the markup that follows:

<p>Use the paragraph element to identify paragraphs.<br /> Author James H. Pence says, &quot;This is a very important element.&quot;</p>

If you have a long quotation that you want to set apart from the rest of the text on your page, the <blockquote> element will help you. Simply enclose your quotation inside the <blockquote> tags and the Web browser will indent the text from both sides and add a blank line before and after the quote. Your markup would look something like the following code and illustration:

<p>This sentence represents the main text of a Web page.<br />      <blockquote>These sentences are an extended <br /> quotation. These sentences are an extended <br /> quotation. These sentences are an extended <br /> quotation. These sentences are an extended quotation.      </blockquote> The main body of text continues with this sentence.</p> 

Project 4: Use Text Elements to Format Content

Before you move on to using CSS, it will be helpful for you to apply some of the elements you have learned in this section. In this project you’ll be using the <h#>, <br />, <p>, <hr />and <blockquote> elements to give structure to an unformatted body of text. When you have finished, your Web page should look something like Figure 3-1.

Figure 3-1: Text structured by means of text elements

For this project, you’ll need a fairly large block of unformatted text. If you have a word processing program such as Microsoft Word or WordPerfect, just open up any of your files, then click on File, Save As, and choose text or .txt. The program will save your file as plain text, without any formatting codes.

Tip

If you don’t have access to a file you can convert to plain text, you can download lorem.txt (a plain text, gibberish file) from the author’s Web site at www.jamespence.com.

Once you have your text file ready, perform the following steps:

1. Open your text file in Notepad and save it as text-format.htm. Don’t forget to select the “All Files” option in the Save As dialog box.

2. Add the <html> tag at the beginning of the document, and the </html> at the end.

3. Inside the first <html> tag, add the <head> and <title> elements. Don’t forget to nest the <title> element inside the <head> element.

4. Add a title to your page: <title>Text Formatting</title>

5. Create a heading by enclosing the first sentence of your text inside the <h1> element.

6. Divide your text into three paragraphs using the <p> element. Each paragraph should be enclosed inside one set of <p> </p> tags.

7. Add a dividing line by inserting the <hr /> element between the first and second paragraphs.

8. Try adding a few line breaks by placing the <br /> element wherever you want a line to break.

9. Set off a sentence from your center paragraph by enclosing it in between the <blockquote> tags.

10. Save your page and load it in your Web browser. Your results should be similar to Figure 3-1.

If you are having problems with this project and want to look at the HTML for Figure 3-1, you’ll find it at the end of this chapter.