4. Breaking it up into paragraphs

OK. So far you've created and modified HTML documents, & by now you should feel pretty comfortable with the process of editing the text inside your document and reloading it into your web browser for viewing. So now you can relax as this is a fast lesson on inserting paragraph breaks.

HTML Paragraph Breaks
We saw 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>Your Text in here</p>
					

Also, the <hN> Header tags have a built in break so it is not necessary to put <p> Paragraph 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. First of all we are going to move the sentence starting from ("Eazy Space Tours .....") so that they are under the Introduction heading. Use the mouse to cut and paste this text in the proper location.
4. After these sentences have been moved, we want to add some more text to the document. But rather than re-typing this in, from this web page use your mouse to select and copy the sentences:

      Volcanoes have long been a part of Venus's history
      long before humans ever landed. Compare the history 
      of human beings, a few million years in the making, 
      to that of the planet Venus, over four billion years 
      in the making.

5. Now, return to your HTML document in the text editor, and paste the text after the existing sentences in your document under the <h2>Introduction</h2> heading.
6. Save the changes in the text editor.
7. Return to your web browser. & Refresh the page. You should now see the new text we just added.
8. We now want to put a paragraph break between these sentences.
9. Again, return to your HTML document in the text editor.
10. Now, after the second sentence under <h2>Introduction</h2> (the one that ends "best Ski fields all year round."), press RETURN (it really isn't necessary but it makes the HTML more readable as you work on it), and then enter the paragraph tag and at the end of the following text after it insert a closing paragraph tag:

       <p>.......</p>

    This section should now look like:

       <h2>Introduction</h2>
        <p>
        Eazy Space Tours offers you special flights to and from
        The Inner & Outer Planets. From the hot volcanic
        surfaces of Venus, that may happen violently, in a massive
        supersonic explosion, or more quietly, as a sticky, 
        slow lava flow. Or as far out as the snowy slopes of 
        Mt. WannaHockALoogie of Uranus with the best Ski fields
        all year round.
        </p>
        <p>
        Volcanoes have long been a part of Venus's history
        long before humans ever landed. Compare the history 
        of human beings, a few million years in the making, 
        to that of the planet Venus, over four billion years 
        in the making.
        </p>

11. Save the changes in the text editor.
12. Return to your web browser and Reload the document. The two sentences should now be separate paragraphs.

OTHER TYPES OF BREAKS
To separate major sections of a web page use the horizontal rule or <hr> tag. This inserts a straight line like you see right above the heading for this section.

The HTML format for a horizontal rule tag is:

   <hr>   or    <hr />

Now you'll notice that there are two ways I just showed you how do to a horizontal rule, standardized HTML would only use <hr> but as HTML moves into compliance with XHTML standards, all empty tags like the <hr> must be closed. In HTML there is NO </hr> tag. So there for the <hr> tag should be <hr />.

Note the closing slash (/) comes after the tag name and before the closing bracket <hr /> and there is a SPACE in between.

Ok! Lets give it a try, put a <hr /> tag above the Introduction heading. This will help to separate the opening sentence of the lesson from the other portions of the web page that will follow.

And finally, there is the <br> tag; much like the <hr> tag it also does not have a closing tag. So just like the <hr /> tag it also should be closed like this <br /> The <br /> tag forces the text to a new line like the <p> tag, but it does it without inserting a blank line. You would probably use this tag when making a list of items or when writing the lines of a song on your page, etc. Now Compare the differences between using the <br /> and <p>...</p> in these two examples:

Paragraph <p> & </p> tags Only
HTML	Result
And then, we could all see at once the brilliant purpose of the paragraph tag. <p>Moving on...</p> <p> The more tags you write, the better you will feel? </p>	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> & 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? </p>	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?

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.

The difference may seem trivial now and irrelevant, but it opens up a lot of possibilities when later we learn to create text of different size and colour for our section headings.

CHECK YOUR WORK
Compare your document with a SAMPLE of how this document should look.If your page looks different than the example, review the text you entered in the text editor. Make sure it matches the text instructions in the Breaking it up into paragraphs section of this lesson. After viewing the sample, you can close the window that opened.

Practice
Use the <p> .... </p>, the <hr />, or the <br /> tags to create paragraphs or sections inside of your own document.

Top of page | Previous Lesson| Lessons Index | Next Lesson