Writing HTML | About | FAQ | Alumni | References | Tags | Lessons | previous | next |

4. Breaking it up into paragraphs

Objectives

• Identify the paragraph break tag in HTML.
• Copy text from the web page and paste it in another document.
• Insert paragraph breaks into the text of your HTML document and view the changes within your web browser.

Lesson

HTML Paragraph Breaks

     <p>

     </p>

Also note the <h> tags have a built in break so it is unnecessary to put <p> tag before a header tag:

     <p>
     <h2>Blah Blah Blah Blah</h2>

Inserting Paragraph Breaks

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.html, in the text editor (if not already opened).
4. First we want to move the 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 these sentences, we want to add some more text. But rather than re-typing this in, from this web page use your mouse to select and copy the sentences:

   
        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 existing sentences under the <h2>Introduction</h2> 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 second sentence under <h2>Introduction</h2> (the one that ends " as a sticky, slow lava flow."), press RETURN (it is not necessary but it makes the HTML more readable as you work on it), 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

The HTML format for a hard rule tag is:

     <hr>

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:

Paragraph <p> tags Only
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?
Paragraph <p> and Line Break <br> tags
HTML	Result
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,<br> 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?

The <br> tag can be used for a different layout style for your section headings. If you notice, the header tags <h1>, <h2>, ... automatically insert white space above and below the text of the header tag. Some web page authors prefer a style that controls this white space.

Section titles with Header Tags
HTML	Result
and in the end it was all for naught. <h4>The New Cheese Edict</h4> Later, sir Longhorn declared that all makers of cheese would have to be certified before commencing production.	and in the end it was all for naught. The New Cheese Edict Later, sir Longhorn declared that all makers of cheese would have to be certified before commencing production.
Section titles with <b> and <br> tags NOTE! The <b> tag is covered in the next lesson but all it does is make the text bold.
HTML	Result
and in the end it was all for naught. <p> <b>The New Cheese Edict</b><br> Later, sir Longhorn declared that all makers of cheese would have to be certified before commencing production.	and in the end it was all for naught. The New Cheese Edict Later, sir Longhorn declared that all makers of cheese would have to be certified before commencing production.

The difference may seem trivial now, but it opens up possibilities when later we learn to create text of different size and color for our section headings. For example, take a look at Web Pages That Don't Look Like Web Pages

Check Your Work

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

Coming Next....

GO TO.... | Lesson Index | back: "Headings" | next: "Styled Text" |

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