Sams Teach Yourself HTML 4 in 24 Hours

Sams Teach Yourself HTML 4 in 24 Hours

By Dick Oliver

Paragraphs and Line Breaks

When a Web browser displays HTML pages, it pays no attention to line endings or the number of spaces between words. For example, the top poem in Figure 2.3 appears with a single space between all words in Figure 2.4. When the text reaches the edge of the Netscape window, it automatically wraps down to the next line, no matter where the line breaks were in the original HTML file.

02fig03.gif

Figure 2.3 In HTML, extra spaces and line breaks (like those in the top poem here) are ignored.

02fig04.gif

Figure 2.4 When the HTML in Figure 2.3 is viewed as a Web page, line and paragraph breaks only appear where there are <br /> and <p> tags.

You must use HTML tags to control where line and paragraph breaks actually appear. To skip a line between paragraphs, put a <p> tag at the beginning of each paragraph and a </p> tag at the end.

The <br> tag forces a line break within a paragraph. Unlike the other tags you've seen so far, <br> doesn't require a closing </br> tag. To conform to the new XML and XHTML standards (see Hour 24, "Planning for the Future of HTML" ), you should always include a / within any opening tag that doesn't have a closing tag, like this: <br /> .

CAUTION

Note that most Web pages you see on the Internet today use <br> instead of <br />, and the current crop of Web browser software treats them both the same. However, you may save yourself a lot of work rewriting your pages in a year or two if you get in the habit of using the new <br /> form of the tag now.

Likewise, the closing </p> tag is always optional in HTML 4 and is often left out by Web page authors today. Closing </p> tags are required by the new XHTML 1 standard, so I recommend that you always include them.

The second poem in Figures 2.3 and 2.4 shows the <br /> and <p> tags being used to separate the lines and verses of a nursery rhyme and to separate two paragraphs of text commenting on the rhyme.

You might have also noticed the <hr /> tag in Figure 2.3, which causes a horizontal rule line to appear in Figure 2.4. Inserting a horizontal rule with the <hr /> tag also causes a line break, even if you don't include a <br /> tag along with it. For a little extra blank space above or below a horizontal rule, you can put a <p> tag before the <hr /> tag and a </p> tag after it.

Like <br />, the <hr /> horizontal rule tag never gets a closing </hr> tag.

To Do

Take a passage of text and try your hand at formatting it as proper HTML:

  1. Add <html><head><title> My Title </title></head><body> to the beginning of the text (using your own title for your page instead of My Title ).
  2. Add </body></html> to the very end of the text.
  3. Add a <p> tag at the beginning of each paragraph and a </p> tag at the end of each paragraph.
  4. Use <br /> tags anywhere you want single-spaced line breaks.
  5. Use <hr /> to draw horizontal rules separating major sections of text, or wherever you'd like to see a line across the page.
  6. Save the file as mypage . htm (using your own filename instead of mypage ). If you are using a word processor, always be sure to save HTML files in plain text or ASCII format.
  7. Open the file with Netscape Navigator or Microsoft Internet Explorer to see your Web page.
  8. If something doesn't look right, go back to the text editor to make corrections and save the file again. You then need to click Reload (in Netscape Navigator) or Refresh (in Microsoft Internet Explorer) to see the changes you made to the Web page.

Share ThisShare This

Informit Network