• Line Spacing
• Paragraphs
• Page Margins

Begin by opening the file page03.html (the sample page you created in lesson three) and SAVE AS - copying it as page05.html so you don't make any changes to your sample page from lesson three. Remember, always create a new sample page with each lesson. As you proceed though this lesson, you may start editing page05.html, or wait until you have read all of the below text.

This is my sample page for this lesson: click here.
This is what the code looks like: click here.

This lesson appears long because of all the paragraph examples but it is actually very easy. When you write your sample page, base it on mine by using the same codes, but you may use your own paragraph text. Make sure you read the paragraphs on my sample page because they do contain valuable information not mentioned in the lesson below, especially the last two.

Section 1 - LINE BREAK TAG

Now you will learn how to format the text on your web page using line spacing and paragraph tags, and their attributes. The <BR> tag allows you to make your text stop in its tracks
and begin again on the next line, instead of naturally continuing across the page. Hopefully you noticed a new line in this paragraph began immediately after the word tracks above. Depending on how your browser renders this page on your screen, it might not have been noticeable so I will make this line end here
and finish the paragraph on this new line.

If neither of those two examples above are obvious to you, try resizing this browser window so that the paragraph above appears wider or narrower. Doing that should then allow you to see no matter what you do, new lines begin after the words track and end here that is because I inserted the tag <BR> right after those words.

<BR> is just a line breaking tag to end a line in a specific place and to then begin another line for the remaining text. Notice it did not add any paragraph space. Also, there is no need for a special closing tag.

A good example of when you might want to use <BR> is a poem, where you need short text lines without adding paragraph spacing between them. You could also use it to create a short list, but there is a special tag for making lists which gives you more control over how it looks. You will learn about that in another lesson.

Section 2 - PARAGRAPH TAGS

To add paragraph space, you use the <P> </P> tags.

In lesson two I told you to simply put <P> at the end of the first two lines. I did that intentionally to show you that tag alone will work in HTML coding. This created paragraph spacing after each of those lines, more spacing than if you had used <BR>.

Although <P> worked alone in that example, because we did not assign any specific attributes or styles to the tag, from now on begin a paragraph with <P> and then end the paragraph with </P>. You should get into this habit now because it is required when you learn to use Styles.

<P ALIGN="RIGHT">An attribute you will use in many tags is ALIGN. I have never had a need to use the ALIGN attribute in a paragraph tag but I thought I should tell you about it anyway. I have no idea what kind of a web page you will create and you might want to do this on your page. In this paragraph, can you guess what happens when you use this attribute in the opening paragraph tag and then assign the value Right ? </P>

<P ALIGN="CENTER">I suppose you could use the ALIGN attribute in an opening paragraph tag and assign a value of CENTER to it if you wanted to create a paragraph that looks like this one - all the lines centered. However, you have already learned a way to center text, in lesson two - using the CENTER tags. You can use the CENTER tags to center many paragraphs so again I do not see a reason to use the ALIGN attribute in this way, maybe you do.</P>

<P ALIGN="JUSTIFY">This is how you create paragraphs that are justified - all the lines starting and ending straight down on both sides of the paragraph so there are no jagged edges or indentations. This is a popular way to align paragraphs in the printed form, such as magazines and books, but it isn't very practical on web pages. This is because many browsers do not render this format very well. You may end up with big holes in your paragraphs when the browser forces words to the end of the line without spreading out the other words to take up the extra space it leaves. That situation is more common if you are using larger type than I am here, but you also have to keep in mind your web page visitors can force a larger text size by changing their browser options, and then this nice text may look terrible. Also, most people find it easier to read unjustified text on web pages.</P>

<P ALIGN="LEFT">You have just seen examples using ALIGN and assigning RIGHT, CENTER, and JUSTIFY. This paragraph you can see I have assigned LEFT in the opening tag. However, LEFT is the default for paragraphs without an ALIGN attribute. This is the only paragraph in this tutorial which uses ALIGN=LEFT, but as you can see, all other paragraphs, except my previous three ALIGN example paragraphs above, are naturally aligned left. You may use RIGHT. Doubtful you will use CENTER. I do not recommend using JUSTIFY for the reasons I have already stated. But LEFT... why bother?</P>

Section 3 - PARAGRAPH SCRIPT

Now I want to show you something I think you will really like... at least I was excited about this when I first discovered it.

You now know how to make text end in a specific place and begin again on a new line by using <BR>. You know how to begin (<P>) and end (</P>)a paragraph, and how to use the ALIGN attribute in the opening paragraph tag. Well when I began creating web pages many years ago, what I wanted to know was how to add space between the lines of a paragraph... to open up a paragraph so it wasn't so tight, which for me is easier to read on the web.

What I am going to show you now goes beyond basic HTML coding, however since I am dealing with paragraphs here, I want to share this with you now. I am referring to something called a Style. I am not going to explain the Hows and Whys of Styles but just tell you how to use this particular one.

All of the paragraphs in this lesson, have extra space between all the lines. To accomplish this, all you have to do is add the following code, just above the </HEAD> tag (at the top of your page) exactly as you see it below. You may change the percentage, up from 100%, to increase the white space between the lines in paragraphs. I have set the style for the tutorial paragraphs at 150%.

<style>
P {line-height:150%}
</style>

waiting patiently...
 

Okay, wasn't that fun... why do you think the above paragraph has less line spacing (if your browser let you see that) ? After all, I have used the paragraph Style code shown above, on this entire page. You will find the answer if you complete this lesson thoroughly.

Section 4 - NON-BREAKING SPACE

On the web, and even in print, long paragraphs are usually difficult to read. You do not want to design a web page where your paragraphs go clear across your visitor's monitor. If you don't believe me, click here to see the exact same paragraph example you just read, if you clicked on the link in the preceding paragraph.

(You will learn options to control the width of your paragraphs in lessons on page layout and design. However, later in this lesson I will show you how to control them by adding page margins to the BODY tag.)

Because HTML ignores returns (or any other extra white space in your text editor) you have use the paragraph tags for that to happen. So if you want to add extra returns (extra white space between paragraphs) what do you do?

Since you know how to change the color of text, to get an extra return between two paragraphs, you could just add a one word paragraph, changing the text to white to match your white background. Presto, invisible one word paragraph.

But you don't have to do that. No. The designers of HTML have made it much simpler than that. Based on the invisible paragraph idea, all you have to do its this...

That is the code for a Non-breaking space followed by the line break tag you learned how to use above. So using that code as an invisible space followed by <BR> gives you an additional line break space.

So it stands to reason that &nbsp;<P> gives you an extra paragraph space.

Notice examples 2 and 3 produce the same results. Note: When you write the code, you do not have to use all the white space shown in the examples above. Shown above is how they will look to your visitors. Also notice for the 6 examples above, I only used the opening paragraph tag - because they were only short, three word lines, not actual paragraphs.

Now you know how I created the extra white space, higher back up this page, above the sentence, "Okay, wasn't that fun..." You may wonder how I created the six boxes above. That layout is called Tables and is something I will discuss in another lesson.

Section 5 - MARGINS

Now I want to show you one way to add margins to the entire web page. Hopefully you remember that all the content of your web page goes between the opening and closing BODY tags. To add side margins to a page you add the margin attribute to the BODY tag as shown below.

    Explorer browsers recognize:

          leftmargin="50" topmargin="50"

    Navigator browsers recognize:

          marginwidth="50" marginheight="50"

So include all four in your BODY tag as shown below.

<BODY leftmargin="50" topmargin="50" marginwidth="50" marginheight="50">

Note: The margin attribute was first developed by Microsoft for Internet Explorer, version 4+. Older versions of Explorer and Netscape's Navigator may not recognize these attributes. If you continue to learn more about creating web pages, after learning basic HTML, you will find Cascading Style Sheets (CSS) will give you much more creative control and reliability regarding the way various browsers render your web pages.

For your sample page, I want you to create left/width margins of 100 pixels, the top/height margins of 50 pixels.

You should now have learned how to create a page that looks like my sample page (page05.html) for this lesson. Click here to see it again, then try to create the code before going to another lesson. Check to make sure you did it correctly, by clicking here to see the code.