Section Two - Getting Started:

   Lesson 2-4: Text Layout: Paragraphs, Spaces, and Line Breaks

   Basic text layout on web pages is fairly simple and straightforward, but there are some quirks. The first lies in the way HTML treats spaces. If you put more than one space between words, HTML recognizes only the first space, and ignores all the rest! But sometimes you may want to use more than one space in the same place, for example, to indent a paragraph. When you want to put extra spaces in your text, you must use the space character code. The space code looks like this:

The letters "nbsp" stand for Non-Breaking SPace.
The words    in this    sentence have    extra     space codes    between the    words.
   This sentence is indented using three space codes.
This may seem like a cumbersome way to add spaces, but you only need to type the first code. After that, just copy and paste.

   To put a line break/carriage return anywhere on your page, use the break tag. The break tag looks like this:

 br

The break tag inserts a line break, but doesn't necessarily create an extra blank line,
like
this.
To insert a blank line, just use two break tags, the first one to break to the next line, and the second one to insert a blank line. The break tag is unusual in that it is not a container (paired) tag. There are no "opening" or "closing" break tags.

Paragraph tags look like this:

 p/p

The paragraph tag does three things:
   1) it aligns the paragraph, usually to the left margin,
   2) it automatically wraps words to the next line when they reach the right margin, and
   3) it adds a blank line between paragraphs.
This paragraph and the paragraph above are formatted with p/p paragraph tags. The paragraph tag is based on a business English style; paragraphs are not indented, and blank lines are added between paragraphs. That's fine if you never write anything but business letters, but most of the time you will probably want to indent your paragraphs. Ordinarily, on a typewriter, or in a word processor, the tab key is used to indent a paragraph, but there are no TAB or INDENT tags in HTML. To indent a paragraph on a web page, you need to use blank space codes.

   All ready for some actual practice? Open your practice file (mypage.htm) in your text editor. Add all of the red text below to your file. Remember, everything to be displayed on your web page goes between the body /body tags.
First, put a break code br at the top of the page just after the closing heading tag /h1.

Second, erase the sentence "Only this sentence should appear on the page."

Next, add the following two lines, putting several spaces between each word in the first sentence. Put one line break code br at the end of the second sentence:

   This   is a   sentence    with spaces between    the    words.
The extra spaces are ignored.br

br

br

br

br

p /p

p    You will find many helpful hints here on how to construct web pages. Basic home page creation is not difficult. However, once you learn the basics, you will want to try to do many things which you see on other people's pages on the Internet, The tips on this page should help beginning web page authors to learn new tricks and techniques. /p

html head titleMy First Home Page/title /head body bgcolor="#ddffff" h1 align="center"HTML Tips and Tricks/h1 br    This   is a   sentence    with spaces between    the    words. The extra spaces are ignored.br    This   sentence    uses   space  codes between    the  words. brbr p    You will find many helpful hints here on how to construct web pages. Basic home page creation is not difficult. However, once you learn the basics, you will want to try to do many things which you see on other people's pages on the Internet. The tips on this page should help beginning web page authors to learn new tricks and techniques./p /body /html

   Examine how the line break and paragraph tags function. Notice also how space codes insert spaces, and how actual spaces are ignored. Also notice that the line breaks in the above box are (probably) not in the same places as those on your own page. However, the paragraph is held together as one unit. When you use paragraph tags, the browser takes care of the line breaks for you automatically, adjusting the length of the lines to the size of your window. Try resizing the browser window and notice how the words in the paragraph are automatically wrapped in the proper places.

   Compare your source file with the same file displayed in your browser. Take your time, When you are satisfied that you understand how space codes, paragraph tags, and break tags work, you are ready for the next lesson.

• Paragraph tags p/p enclose text in a container which automatically wraps the text, aligns the text to the left side of the page, and adds a blank line between paragraphs. However, paragraph tags do not indent the first line of a paragraph. To indent, you must use space codes.
• Only one space in a series is recognized on web pages.
  To insert more than one space in the same place, you need to use the space code:  
• Break tags br work like carraige returns on a typewriter, or like the enter key in a word processing program. They break to the next line, but they do not automatically add blank lines the way paragraph tags do. To insert a blank line, just use two break tags.