Paragraph Formatting

Introduction

Text in your document is usually made of various sections. Your job as a Webmaster is to set where a section starts and ends. Normally, that is not always your job. For example, if you receive assignments from someone else, such as your boss or one of your customers, the documents handed to you usually have all the necessary section breaks. Besides, your boss or customer will still review and preview each page and make sure that all sections are broken to the desired results. You still need to know how to divide sections in an HTML file.

There are various tags used to control the beginning and end the overall display of a section.
HTML considers as paragraph any group of words that starts somewhere until you as the Webmaster decides where it ends, by breaking it. This means a character, a word, a line or a whole file can be considered as one paragraph. That's why we will learn how to set a paragraph's limit.
 
Practical Learning: Paragraph Formatting

  1. Start your text editor and type the following text:
    The Grier Summer Camp
  2. press Enter and type
    Located in the heart of Rockville, Maryland, the Grier Summer Camp is an attractive setting aimed at entertaining and supporting youth activities during their summer vacation. 
  3. Press Enter and type
    Program Presentation
  4. Press Enter and type
     
    We feature a state of the art, regularly renovated mansions with world-class sport facilities.
  5. Press Enter and type
    Coolfront Island, our star house of the season, is a 2-story like chateau featuring nicely finished brown bricks whose sight is tremendously appealing. The estate introduces two large living rooms with exquisite velour furniture. The colonial veranda offers a patio spanning two walls with a lost view down the far-reaching landscape. In this particular setting, besides their usual activities, children will learn special human needs to make their experience unforgettable. Press Enter.
    Please consult our catalogue and see why the Washington Tribune called us <i>the most attractive summer camp of the area</i>.
  6. Press Enter

  7. Save the file as exercise4.htm and preview it in the browser:



    As you can see, although you pressed Enter when typing the text, the browser didn't "sense" that, at least your text editor didn't send the signal.
  8. Bring back your text editor
  9. Titles and some section headers in a document are usually centered. To control a section as centered, you use the <center> and </center> tags.
    To see an example, center the title like this:
     
    <center>The Grier Summer Camp</center>
  10. Save the file. Preview it in the browser.
    Notice how the first line is now centered although the rest of the document is not.
  11. The <br> tag is used to set the end of a section. This tag doesn't use the beginning and end combinations that we have seen with the other tags. Simply type it somewhere, then the subsequent words would start on the following line.
    On the right side of the period after vacation, type
     
    <br>
  12. Save the file. Preview it in the browser. Notice that the first paragraph now breaks from the other.
  13. If you decide to completely control the way text is displaying, you can tell the browser that you want to preset settings unchanged and they should be displayed the way you determine. This is done using the <pre> tag. A section included between the <pre> and the </pre> tag will strictly display as "preformatted"
    To see an example, in your text editor, on the left of Located, type <pre> and replace the <br> tag with </pre>
  14. Save the file. Preview it in the browser.
    Remember that since you didn't press Enter throughout the first long paragraph, the browser believe that it is instructed to display text "as is"; in fact, it is using the default font set in the Internet Options dialog box.
  15. Although the <pre> tag imposes "preformatted" settings, you can change them manually.
    For example, in your text editor, position the cursor to the right in the Grier Summer Camp. Press Enter to set your own manual break.
  16. Save the file. Preview it in the browser.
    Notice that the line breaks at the set place and the rest of the paragraph continues on the next line. You can control a preformatted section like that, setting your own line breaks, font, and text color (using the techniques learned in Text Formatting)
  17. The text we typed earlier, at the beginning of this lesson was not breaking on any section, this is called that the browser was "wrapping" the text; this means it was going to the end of its line and was continuing to the next line until the section ended. We have already seen that you can type text and break its sections with the the <br> tag. This tag doesn't control where a section or paragraph starts and where it ends. The safest way to delimit a paragraph is by using an appropriate paragraph tag. The <p> tag controls where a section starts and where it ends. Everything between the <p> and the </p> tags is considered as belonging to the same paragraph.
    To see how it is done, change your whole document as follows:
     
    <html>
    <head>
    <title>Grier Summer Camp</title>
    </head>
    <body>
    <center>The Grier Summer Camp</center>
    <p>Located in the heart of Rockville, Maryland, the Grier Summer Camp is an attractive setting aimed at entertaining and supporting youth activities during their summer vacation.</p>
    <p>Program Presentation</p>
    <p>We feature a state of the art, regularly renovated mansions with world class sport facilities.</p>
    <p>Coolfront Island, our star house of the season, is a 2-story like chateau featuring nicely finished brown bricks whose sight is tremendously appealing. The estate introduces two large living rooms with exquisite velour furniture. The colonial veranda offers a patio spanning two walls with a lost view down the far-reaching landscape. In this particular setting, besides their usual activities, children will learn special human needs to make their experience unforgettable.Please consult our catalogue and see why the Washington Tribune called us <i>the most attractive summer camp of the area</i></p>.
    </body>
    </html>
  18. Save the file. Preview it in the browser

  19. As the <p> tag is used to control the beginning and end of a paragraph, it can also be used to control the alignment of its section. By default, any paragraph you type is left aligned. The <p> features an align attribute that is used to change that. Whenever that attribute is not set, the paragraph is aligned to the left. Using this attribute, a paragraph can be aligned to the left, to the center, or to the right. The paragraph can also be justified. The formula to use the tag and its attribute is
    <p align="Alignment"> The Alignment can be: left, center, right, or justify.
    Change the whole file as follows:
     
    <html>
    <head>
    <title>Grier Summer Camp</title>
    </head>
    <body>
    <center>The Grier Summer Camp</center>
    <p>Located in the heart of Rockville, Maryland, the Grier Summer Camp is an attractive setting aimed at entertaining and supporting youth activities during their summer vacation.</p>
    <p align="center">Program Presentation</p>
    <p align="right">We feature everything.</p>
    <p align="justify">Coolfront Island, our star house of the season, is a 2-story like chateau featuring nicely finished brown bricks whose sight is tremendously appealing. The estate introduces two large living rooms with exquisite velour furniture. The colonial veranda offers a patio spanning two walls with a lost view down the far-reaching landscape. In this particular setting, besides their usual activities, children will learn special human needs to make their experience unforgettable.</p>
    <p>Please consult our catalogue and see why the Washington Tribune called us <i>the most attractive summer camp of the area</i></p>.
    </body>
    </html>
  20. Save the file. Preview it in the browser. Notice how the middle three paragraphs are aligned.
  21. HTML is equipped with header tags that are preset formatting features that primarily control a section's text size and alignment. There are 6 of these and they are identified as h1, h2, h3, h4, h5, and h6. They range from the tall sized h1 to the small h6. They are used like the other tags, with an opening and a closing.
    To see an example, change the line that has Program Presentation as follows:
     
    <h2 align="center">Program Presentation</h2>
  22. Save the file. Preview it in the browser. Bring back your text editor.
  23. You can use the align attribute to control the alignment of a section lead by a header tag. The align attribute is used like that of the <p> attribute.
    To experiment with one, change the previous line as follows:
     
    <h2 align="center">Program Presentation</h2>
    <p>We feature a state of the art, regularly
    renovated mansions with world class sport facilities.</p>
  24. Save the file. Preview it in the browser:

  25. Bring back your text editor. Now you can close everything and move to our next lesson
 

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Related Scripting

Related Posts Plugin for WordPress, Blogger...

Disqus for Functions