How to write a document --- paragraphs, breaks and emphasizing text

 Back for more, eh? Okay, now we're going to add some text to our page -- and format it as well.

 Remember, HTML is an ASCII document. Unlike your favorite word processor, it does not allow you to break material into paragraphs, space your text or emphasize words and phrases automatically. You must do this yourself using the various tags.
[ Note: depending upon the editor you're using, some of these features may be automated. For the purposes of this tutorial, I'm assuming that you are using a simple text editor such as MS WordPad].

 Of course, before we can format our golden prose, we need to write it. Entering text in an HTML document is super-easy, all you need do is type. Any typed charactors you place in the document which are not enclosed in brackets, < >, show up on the page as plain old typed text.

 So, without further ado, let's add some information about Oscar the Turtle [ or whatever you are writing about ]. Remember, extra spaces will not show up on the page -- you have to use the 'non-breaking space' command if you want them. Carriage returns [ie, hitting the ENTER key on your keyboard] and tabs will also not show up. But don't worry about this just yet. We'll take care of that in a moment with some special tag commands. Right now, let's just get the verbage in there.

 That said, here's Oscar's story ......

There seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic palm tree stuck in the center], and the dried insects to feed them with. Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar. Oscar was purchased at a local pet shop here in Korea for the tidy sum of 4,000 won [ that's about 3 dollars, U.S. money ]. He was just a little tyke about the size of a quarter when I bought him and brought him home. I've alway's enjoyed strange and unusual pets and you don't get much stranger than a turtle. Oscar is a true turtle, as opposed to a tortoise, and spends all of his time in the water. His home consists of a 55 gallon aqarium -- completely filled with water, several rocks to hide under, and some plastic plants. These latter are more for my benefit than his, since he can't eat them [ though he tries ] and I doubt that he appreciates their asethic value. I've had Oscar for about three years now and am amazed at how he's grown. At the present time he is larger than a grown man's hand -- and still growing. Oscar will eat just about anything, but his favorite food seems to be small green frogs that abound around my neighborhood. Fish are also welcomed, and I can no longer keep tropical fish as pets along with him as I used to. Sooner or later he'll eat them. Turtles are interesting in several respects -- one being the length of time they can remain completely under water. And so forth and so on ......

 Enough of Oscar [ for the moment ] let's put the text in the page we're building. Open up your editor and add your story to the page. All text, pictures, and so forth will go between the <BODY> and </BODY> tags. As a matter of fact, everything else we will add during the tutorial will go between these tags so I won't mention this again.

 One thing to note. Stuff we put in the document between the <BODY> tags appears on the page in the order it appears in the document. With this in mind, we need to be sure to add the story above [ our text ] after the heading we already have. Otherwise, we'll end up with the story first and then the header !

 Let's look at the document .....

<HTML>


<HEAD>

<title> My Pet Turtle, Oscar </title>

</HEAD>


<BODY>

<CENTER><H1>Oscar, the Painted Turtle</H1></CENTER>

 There seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic palm tree stuck in the center], and the dried insects to feed them with.

 Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.

 Oscar was purchased at a local pet shop here in Korea for the tidy sum of 4,000 won [ that's about 3 dollars, U.S. money ]. He was just a little tyke about the size of a quarter when I bought him and brought him home. I've alway's enjoyed strange and unusual pets and you don't get much stranger than a turtle.

 Oscar is a true turtle, as opposed to a tortoise, and spends all of his time in the water. His home consists of a 55 gallon aqarium -- completely filled with water, several rocks to hide under, and some plastic plants. These latter are more for my benefit than his, since he can't eat them [ though he tries ] and I doubt that he appreciates their asethic value.

 I've had Oscar for about three years now and am amazed at how he's grown. At the present time he is larger than a grown man's hand -- and still growing. Oscar will eat just about anything, but his favorite food seems to be small green frogs that abound around my neighborhood. Fish are also welcomed, and I can no longer keep tropical fish as pets along with him as I used to. Sooner or later he'll eat them.

 Turtles are interesting in several respects -- one being the length of time they can remain completely under water. And so forth and so on ......

</BODY>


</HTML>


 Notice the spacing I use in the document above. This is just me placing a carriage return [ hitting the ENTER key ] to provide for a clearer document for my benefit. When displayed on the web browser, these carriage returns will not show up as I indicated earlier. You may note that the <H1> set of tags does add a carriage return after it.

 Look at Fig 3 to get an idea of how our HTML document shows up in it's current form.

Fig 3

Figure 3

 Well, great -- we got our story in, but it doesn't look right. Run-on paragraphs are not something they taught you to do in grammer school. So if we can't use the ENTER key and the SPACE bar to format our text, what do we do?

 I'm glad you asked that. Now we could use the 'non-breaking space' command --- but talk about tedious !! Instead we will use two tags. The <P> / </P> set of tags for paragraphs and the <BR> tag for line breaks. Notice that the <BR> tag does not have a corresponding </BR> tag -- it's not needed -- nor does it exist so don't try to use it.

 So, what do they do? The <P> set of tags causes the browser to break the text at the point in which it's inserted and add a blank line -- thus beginning a new paragraph [and you wondered why it was labeled <P> ]. By strict convention, you should add the </P> ending tag at the end of your paragraph, but this is one of those tags I mentioned earlier -- you can get away with not using the ending tag.

 Looking at a quick example, here's the <P> tag in action. We'll take some of Oscar's story and format it with the paragraph tag. Originally, our text looked this:

There seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic palm tree stuck in the center], and the dried insects to feed them with. Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.

 Now we'll insert the paragraph tag [ <P> ] to make the story more presentable. Our text entry now should look like this:

There seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic palm tree stuck in the center], and the dried insects to feed them with. <P> Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.</P>

 Now look at the result:

There seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic palm tree stuck in the center], and the dried insects to feed them with.

Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.

 Ahhhhh, instant formating. Great. Now to make our document a little easier for us to edit, lets hit the ENTER key a couple of times at the <P>. This won't do a thing to the way the page displays on a browser, but it sure makes it less burdensome for us to read as a document while we're writing and editing it. This is what I mean:

There seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic palm tree stuck in the center], and the dried insects to feed them with.

<P> Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.</P>

 Good enough. Now we know about the paragraph tag, how about the break tag [ <BR> ]

 The <BR> tag does much the same thing, but without adding a line in between the paragraphs. Probably the best way to show this is with an example, so we'll use Oscar again. Here's our original text, remember?

There seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic palm tree stuck in the center], and the dried insects to feed them with. Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.

 Now we'll put the <BR> tag where we had put the <P> tag before.

There seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic palm tree stuck in the center], and the dried insects to feed them with. <BR>Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.

 Remember the <BR> tag does not have a corresponding closing </BR> tag; it stands alone. Here's the way the story fragment shows up now:

There seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic palm tree stuck in the center], and the dried insects to feed them with.
Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.

 Now if we really want to get going, we'll add in a couple of 'non-breaking space' commands [ &nbsp; ] before the first word in each paragraph for indentation. Here's how it's done:

&nbsp;&nbsp;There seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic palm tree stuck in the center], and the dried insects to feed them with. <BR>&nbsp;&nbsp;Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.

 And how it will look:

  There seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic palm tree stuck in the center], and the dried insects to feed them with.
  Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.

 Whew! All right. Let's format our 'Oscar' story with these new tags. I'm going to use the <P> set of tags along with two &nbsp; commands for indentation. If you didn't want the extra line in between paragraphs, you'd just substitute the <BR> tag for the two <P> tags [ remember, you can get away without using the ending </P> tag ]. Here's our revised document:

<HTML>


<HEAD>

<title> My Pet Turtle, Oscar </title>

</HEAD>


<BODY>

<CENTER><H1>Oscar, the Painted Turtle</H1></CENTER>

 &nbsp;&nbsp;There seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic palm tree stuck in the center], and the dried insects to feed them with.

 <P>&nbsp;&nbsp;Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.

 <P>&nbsp;&nbsp;Oscar was purchased at a local pet shop here in Korea for the tidy sum of 4,000 won [ that's about 3 dollars, U.S. money ]. He was just a little tyke about the size of a quarter when I bought him and brought him home. I've alway's enjoyed strange and unusual pets and you don't get much stranger than a turtle.

 <P>&nbsp;&nbsp;Oscar is a true turtle, as opposed to a tortoise, and spends all of his time in the water. His home consists of a 55 gallon aqarium -- completely filled with water, several rocks to hide under, and some plastic plants. These latter are more for my benefit than his, since he can't eat them [ though he tries ] and I doubt that he appreciates their asethic value.

 <P>&nbsp;&nbsp;I've had Oscar for about three years now and am amazed at how he's grown. At the present time he is larger than a grown man's hand -- and still growing. Oscar will eat just about anything, but his favorite food seems to be small green frogs that abound around my neighborhood. Fish are also welcomed, and I can no longer keep tropical fish as pets along with him as I used to. Sooner or later he'll eat them.

 <P>&nbsp;&nbsp;Turtles are interesting in several respects -- one being the length of time they can remain completely under water. And so forth and so on ......

</BODY>


</HTML>


 A couple of things to note. First, we didn't use the <P> tag after the header. It's not necessary since the header tag will automatically add a blank line for you. Second, we used the ENTER key and SPACE bar in our document for clarity in editing -- but these extra spaces and blank lines will not show up when the page is displayed on a web browser.

 Let's looks at the results in Fig 4.

Fig 4

Figure 4

 Good. Now the text is all formatted nice and neat. By the way, you don't see the heading in this last Fig, but it's still there. I just scrolled the window a little to show what happened to the text after we formatted it.

 Almost time for a break, but before we wander off, let's talk about a couple of other handy little tags.

 We've got our header, we've got our text story, we've even got the story formatted so that it's easy to read. But how about some of the words or phrases you'd like to give special emphasis too? People can't hear you telling the story on the internet, they can only read what your write, so you need some way to show stress to certain words, phrases or ideas.

 This we can do with the following tags:

 Note that each of these emphasis tags require both a start and a stop tag. If you don't use the stop tag, then all of your text from the point of insertion on to the end of your document will be emphasized.

 Let's see some quick examples. We used the 'Mary had a little lamb, it's fleece was white as snow.' sentence before to introduce you to the tag concept. We'll use this sentence once again for each of the special emphasis commands

 For making bold text, use the <B>, </B> pair of tags.

 Here's how we'd write it in the document emphasizing the phrase, 'fleece was white':

Mary had a little lamb, it's <B>fleece was white</B> as snow.

 The document will display the sentence in a web browser as:

Mary had a little lamb, it's fleece was white as snow.

 For making underlined text, use the <U>, </U> pair of tags.

 Here's how we'd write it in the document emphasizing the phrase, 'fleece was white':

Mary had a little lamb, it's <U>fleece was white</U> as snow.

 The document will display the sentence in a web browser as:

Mary had a little lamb, it's fleece was white as snow.

 And lastly for making italisized text, use the <I>, </I> pair of tags.

 Here's how we'd write it in the document emphasizing the phrase, 'fleece was white':

Mary had a little lamb, it's <I>fleece was white</I> as snow.

 The document will display the sentence in a web browser as:

Mary had a little lamb, it's fleece was white as snow.

 And, yes, you can combine the tags together to use combinations of emphasis to suit your purpose.

 Here's how we'd write it in the document emphasizing the phrase, 'fleece was white' using all three sets of tags:

Mary had a little lamb, it's <U><I><B>fleece was white</B></I></U> as snow.

 The document will display the sentence in a web browser as:

Mary had a little lamb, it's fleece was white as snow.

 Be sure to keep your starting and ending tags straight or you could wind up with some strange results.

 Well, this has been a long lesson. Let's review what we've covered:

  1. Your text, the meat of your page is simply typed directly into the HTML document. Anything not included in
    brackets < > will show up on the visitor's web browser.
  2. All text [ as well as everything else we will add from now on ] goes between the <BODY> and </BODY> tags.
  3. Putting blank lines and extra spaces using the ENTER key and SPACE bar will make your HTML document easier for you to read and edit, but they will not show up in the page when it is displayed on a web browser. To format your paragraphs, you must use the <P>, </P> and <BR> tags and the &nbsp; command.
  4. If you're using a header <Hx> set of tags, you don't need to worry about using a paragraph set of tags <P> immediately after it. The header automatically inserts a blank line.
  5. The </P> ending tag is not mandatory [ but you should use it to develop good scripting habits ].
  6. The <BR> tag does not have and ending counterpart -- don't try to use one.
  7. You can give special emphasis to words, phrases or ideas by using the <B>, <I> and <U> sets of tags. Don't forget to add their ending counterparts or all text from the point you inserted them to the end of your document will be emphasized.
Well, are you ready for a break? I sure am. Take five --- uh, make that ten minutes then we'll return and learn how to manipulate our text a little more using size and color.

[Click on the icon below to proceed to the next step in the lesson]

This site copyrighted © 1998/1999 by George Batersly in it's entirety. No reproduction in any form is permitted without the express written consent of the author.