Writing HTML | About | FAQ | Alumni | Tags | Index | previous | next |

4. Breaking it up into paragraphs

So far you have created and modified HTML documents, and you should feel comfortable with the process of editing text and reloading it into your web browser. So now relax for this fast lesson on inserting paragraph breaks.

Objectives

After this lesson, you will be able to:

Lesson

HTML Paragraph Breaks

We've seen earlier that a web browser will ignore all of the CARRIAGE RETURNS typed into your text editor. But, wherever a browser sees the paragraph tag, it inserts a blank line and starts a new paragraph. The HTML code for forcing a paragraph break is: 
     <p>
Note that this tag is special in that it does not have an ending tag; you do not need to use: 
     </p>

Inserting Paragraph Breaks

Note: If you do not have the working document from the previous lesson, download a copy now.

Follow the directions below to insert and view a paragraph break in your HTML document.

  1. Re-open your workspace (if not already opened).
  2. Go to the text editor window.
  3. Open your working document, Volc.htm, in the text editor (if not already opened).
  4. First we want to move the second and third sentences ("A volcano is .....") so that they are under the Introduction heading. Use the mouse to cut and paste this text in the proper location.
  5. After this sentence, we want to add another line. But rather than re-typing this in, from this web page use your mouse to select and copy the sentence: 
         Volcanoes have been a part of earth's history
     long before humans. Compare the history of human 
     beings, a few million years in the making, to that of 
     the Earth, over four billion years in the making.
  6. Now, return to your HTML document in the text editor, and paste this text after the first sentence under the <h1>Introduction</h1> heading.
  7. Save the changes in the text editor.
  8. Return to your web browser.
  9. If your working document is not visible, Use the Open Local... command from the File menu to open the document.
  10. Select Reload from the File menu. You should now see the two sentences of the Introduction. We now want to put a paragraph break between these sentences.
  11. Again, return to your HTML document in the text editor.
  12. After the first sentence under <h1>Introduction</h1>, press RETURN (not necessary but it makes the HTML more readable), and then enter the paragraph tag: 
         <p>
    This section should now look like: 
      <h2>Introduction</h2>
  A volcano is a location where magma, 
  or hot melted rock from within a planet, reaches the surface. 
  It may happen violently, in a massive supersonic explosion, 
  or more quietly, as a sticky, slow lava flow.
  <p>
  Volcanoes have been a part of earth's history long before
  humans. Compare the history of human beings, a few million
  years in the making, to that of the Earth, over four
  billion years in the making.
  13. Save the changes in the text editor.
  14. Return to your web browser and Reload the document. The two sentences of the introduction should now be separate paragraphs.

Other types of breaks

To separate major sections of a web page, use the hard rule or hr tag. This inserts a straight line like you see right above the heading for this section.

The HTML format for a hard rule tag is: 

     <hr>
As practice, put an hr tag above the Introduction heading. This will help to separate the opening sentence of the lesson from the other portions that will follow.

And finally, there is the <br> tag which forces text to a new line like the <p> tag, but without inserting a blank line. You might use this tag when making a list of items, when writing the lines of a poem, etc. Compare the differences between using the <br> and <p> in these two examples:

HTML

Result

 
And then, we could all see
at once the brilliant purpose 
of the paragraph tag.
<p>
Moving on...
<p>
the more tags you write, the better you 
will feel?
 And then, we could all see at once the brilliant purpose of the paragraph tag.

Moving on...

the more tags you write, the better you will feel?

COMPARED TO 
And then, we could all see<br> 
at once the brilliant purpose<br>
of the paragraph tag.
<p>
Moving on...
<br>
the more tags you write, the better you 
will feel?
 And then, we could all see
at once the brilliant purpose
of the paragraph tag.

Moving on...
the more tags you write, the better you will feel?

Check Your Work

If you would like, compare your web page to this sample. If your document was different from the sample, review how you entered the paragraph break, <p>, into the text editor. Make sure you entered it as instructed in the Inserting Paragraph Breaks section of this lesson.

Review Topics

  1. What is the HTML tag for a paragraph break?
  2. What steps did you use for inserting a paragraph break in your document?
  3. How did you display and view the changes in your web browser?
  4. Extra Credit*- What is a hard rule <hr> tag? a <br> tag?

Independent Practice

Use the paragraph, the hard rule, or the br tags to create paragraphs or sections in your own document.

Coming Next....

Do you remember your first font?
How about adding Style... to your text.

GO TO.... | Lesson Index | back: "Headings" | next: "Styled Text" |
Writing HTML Lesson 4: Breaking it up into paragraphs
©1995 Maricopa Center for Learning and Instruction (MCLI)
Maricopa County Community College District, Arizona

The Internet Connection at MCLI is Alan Levine --}
Comments to levine@maricopa.edu

URL: http://www.mcli.dist.maricopa.edu/tut/tut4.htm