Text
Now that you have all of your page colors set, let's add some text! Text can be added very easily. Simply type anywhere between your <body> statement and your </body> statement.
Right now your page might look something like this. Your <body> statement probably has more in it. The text for this example is Dark Orange:
<html>
<head><title></title></head>
<body text="#F68704">
</body>
</html>You can add text by typing between the <body> and </body> statement.
<html>
<head><title></title></head>
<body text="#F68704">
This is my first page and this is my first text. Look it's orange!
</body>
</html>Someone visiting your page would see this:
This is my first page and this is my first text. Look it's orange!
Adding text if fairly straight forward. You just type. However, if you want to make your text look nice, you'll probably want to do a bit of formatting. Without formatting, your text might be one long continuous line and would be very hard to read. You can format your text by adding a few simple commands. Here is a brief list of the commands and their syntax;
| Command | What it Does | Command | What it Does |
| <p></p> | Creates a new Paragraph. Similar to hitting <enter> twice in a word processing program. | <b></b> | Bold Text for emphasis, like this |
| <br> | Creates a Break Similar to hitting <enter> once. | <i></i> | Italicizes text for emphasis, like this |
| <p align="left"> | Aligns the text at the left. Similar to left justification | <u></u> | Underline text, like this Use this only when necessary because usually means a link. Use boldface and italics for emphasis. |
| <p align="center"> | Aligns text in the center | <p align="right"> | Aligns text at the right |
| <BLOCKQUOTE> </BLOCKQUOTE> | Indents text. Similiar to hitting the tab key. |
These commands are used in different ways to format text. The following areas will give examples of how each command is used. In each example, it is assumed that the rest of the necessary HTML code (<html>,</html>, <head>, etc) is also present on your pages. The text in each example goes between the <body text="#F68704"> and the </body>. The text the visitor sees in all examples is dark orange.
Paragraphs
Typing this is your text area (between the <body> and </body> statements):
<p>This is the first paragraph. It's pretty short as paragraphs go but it's long enough for my purposes.</p>
<p>This is the second paragraph. It's pretty short too. But its longer than the first paragraph. Not by much though.</p>Would result in a visitor seeing this:
This is the first paragraph. It's pretty short as paragraphs go but it's long enough for my purposes.
This is the second paragraph. It's pretty short too. But its longer than the first paragraph. Not by much though.
You can type as much text as you would like in between paragraphs. To make a new line simply add a <br> into your text (**Note: There is no "</br>". It is not needed**). Using the text from the previous example, we'll get:
Typing this is your text area (between the <body> and </body> statements):
<p>This is the first paragraph. It's pretty short as paragraphs go but it's long enough for my purposes.<br>
This is the second paragraph. It's pretty short too. But its longer than the first paragraph. Not by much though.</p>Would result in a visitor seeing this:
This is the first paragraph. It's pretty short as paragraphs go but it's long enough for my purposes.
This is the second paragraph. It's pretty short too. But its longer than the first paragraph. Not by much though.Instead of two spaces being shown, the <br> command simply takes the text to the next line. When you are writing the text for your web page, please remember that having a space between two sections of text denotes a new paragraph and you do NOT need to indent the new paragraph.
Alignment
The default alignment in most web browsers is left. This means that all the text will be lined up at the left hand side of the page the way the text on this page is. However, you may want to have the text aligned in the center or at the right instead. Or you may want to be sure that people see the text on your page aligned at the left. In these cases, you'll want to use an alignment command. The "align=" command goes inside of the <p> command at the beginning of a paragraph. Each paragraph can be a different kind of alignment, however the whole paragraph will be the same alignment.
Typing:
<p align="left">This text is aligned at the left for the whole paragraph.<br> Even if I type on the next line. </p>
Results in the reader seeing:
This text is aligned at the left for the whole paragraph.
Even if I type on the next line.---------------------------------------------------------------------------
Typing:
<p align="right">This text is aligned at the right for the whole paragraph.<br> Even if I type on the next line. </p>
Results in the reader seeing:
This text is aligned at the left for the whole paragraph.
Even if I type on the next line.------------------------------------------------------------------------------
Typing:
<p align="center">This text is aligned at the left for the whole paragraph.<br> Even if I type on the next line. </p>
Results in the reader seeing:
This text is aligned at the center for the whole paragraph.
Even if I type on the next line.Alignment can be a very useful formatting tool. Titles are often aligned at the center, while most text is aligned at the left.
Indenting
You may have noticed that some of the text on this page is indented. This effect is achieved by using the <blockquote> command. This command works the same way that a tab key would in a word processing program such as Microsoft Word or ClarisWorks.
Typing:
<p>This paragraph is not indented</p>
<blockquote>
<p>This paragrph is indented. <br>
The indent will continue until the end of the paragraph.</p>
</blockquote>Results in the reader seeing:
This paragraph is not indented
This paragraph is indented
The indent will continue until the end of the paragraph.If you wanted to indent it more you would use another <blockquote> beside the first <blockquote> and another </blockquote> after the original </blockquote>.
Typing:
<p>This paragraph is not indented</p>
<blockquote><blockquote>
<p>This paragrph is indented. <br>
The indent will continue until the end of the<br>paragraph.</p>
</blockquote></blockquote>Results in the reader seeing:
This paragraph is not indented
This paragraph is indented twice.
The indent will continue until the end of the paragraph.Bold, Italics, and Underline
The bold, italics, and underline are all used in the same way. You can use only one of the commands or a combination of them.
Typing:
<p align="left">This is <b>bold</b>, <i>italicized</i>, and <u>underlined</u> text.<br>
<u><i><b>This is a combination text.</b></i></u>.Results in the reader seeing.
This is bold, italicized, and underlined text.
This is a combination text.Please not that in the combination text, the bold, italics, and underline are turned off in the reverse order that they are turned on, much like parentheses in a math problem. This means that you turn off the bold before you turn off the italics and you turn off the italics before you turn off the underline.
Boldface and Italics are the usually used to place emphasis on text. Underlining text makes it look like a link, which may confuse readers. Save underlining for titles of books and other necessary words.
Text Size
Text sizing is another useful tool. You can change the text size in HTML to make it larger or smaller very easily. At the beginning of the paragraph, just type in how large you want the text size to be.
For example, typing in this:
<p><font size="6">This is the heading text.</font></p>
Would result in the reader seeing:
This is the heading text.
Typing in this:
<p>This is the <font size="5">next size </font>text.</p>
Would result in the reader seeing
This is the next size text.
To change the font size type <font size="some_value"> where some value is replaced by the appropriate number. The larger the number the larger the text will be. However, only numbers one through seven can be used with this command. See the table below:
| HTML Font Size | Word Processor Font Size | HTML Font Size | Word Processor Font Size |
| 1 | 8 pt | 5 | 18 pt |
| 2 | 10 pt | 6 | 24 pt |
| 3 | 12 pt | 7 | 36 pt |
| 4 | 14 pt |
Changing Individual Word Colors
Sometimes, you may want to change the color of individual words to make them stand out from the rest of the text on your page.
Your page may look something like this. For this example the text color is orange and the link color is red.
<html>
<head><title></title></head>
<body text="#F68704" link="#FF0000"> This is some text on my page. I want to change only one word to put emphasis on it. This is <font color="990099">not</font>hard to do.
</body>
</html>Results in the reader seeing:
This is some text on my page. I want to change only one word to put emphasis on it. This is not hard to do.
Add <font color="hex_representation_of _the_color"> before the word(s) you want colored and </font> after the word(s) you want colored. Try to choose colors that are different from the colors used for links and visited links so that a visitor to your web site is not confused.
