For ALL PSP versionsHome  >  Tutorials  >   Web Applications  >
Basic HTML 102
E-mail this tutorial to a friend Email to a Friend

Basic HTML 102
Created by: Zu

 
In the last lesson we put together a very basic HTML page and began to learn ways to alter its appearance, including changing the color and alignment of the text. In this lesson we will explore additional methods of controlling our text. ;o)
 
Open File First, you will need to open the page you started in the last lesson in your simple text editor. You will also need to open your browser so that it displays this page.
 

We have learned how to make paragraphs and force line breaks, which helps us to organize our content. However, sometimes we also want to organize our paragraphs or just make a portion of our text stand out. One way to do this is using the Heading Tag.

HTML has six levels of headings, numbered 1 through 6, with 1 being the largest, 6 the smallest. Headings are typically displayed in larger and/or bolder fonts than normal body text. Heading tags look like this: <H1>, <H2>, <H3>, <H4>, <H5>, <H6>.

You must close the tags at the end of your heading, or the text on the rest of the document will appear just as large. Close with </H1>, </H2>, </H3>, etc. whatever the case may be.

In the last lesson, we used the align attribute to set the alignment of our text. You can also define this attribute in the heading tags to achieve the same effects.

 
Heading Tag Coding

Type the following in your text editor, just below the <body> tag:

<H1 align="center">Welcome to my homepage!</H1>
<H2>Bookmark this page and check back often!</H2>

Save your document and refresh your browser. You should see two new lines of text, both large and bold with the first one larger than the second.

 

As you can see, the heading tag really makes your text stand out. You can use this to divide your page into sections or to draw your visitors' eyes to a particular area.

However, the heading tag effects the whole paragraph and only gives you the specific look of that particular tag. Sometimes you might want to alter just a section of text. Fortunately, there are ways to do that. ;o)

You can make any portion of your text bold using the Bold Tag: <b>. If you want a sentence or word to stick out from the rest, use the bold tag before you type your text. To close the bold tag use </b>, otherwise the remainder of your document will be bolded. This tag can be used to bold an entire paragraph or just selected words.

 
Bold Tag

Type the following in your text editor just above the closing body </body> tag:

<p><b>This entire paragraph is bold ... yeah!</b>
<p>This paragraph only has <b>a few bold words</b> for emphasis.

Save your work and refresh your browser to see the results.

 
Italic Tag

You can also use the Italics Tag <i> to emphasize a certain word, sentence, paragraph, etc. To close italics, use </i> or all text on your page will be italicized.

Type the following text below the lines containing the bold tags:

<p> I can also make text <i>italic</i> to make things even more interesting.

Again, save and refresh. See what you can do? ;o)

 
Screen shot showing bold, italic and bold+italic

These tags can be used together as you can see in the following example:

<p>If I want to get really crazy, I can do <b><i>bold and italic</i></b> at the same time.

Note: Many HTML tags can be nested like this to apply more than one effect at a time. When using multiple tags, you must close them in the opposite order. In other words, close the last tag used first ... and the first tag, last. When nesting tags, be sure to close them all, or you may get more effect than you bargained for. ;o)

 

In addition to the type style, you can also change the font face, size and color of your text.

If you would like to change the font face of the entire document from the default Times New Roman, you would include the following tag directly after the opening body tag:
<font face="Arial">

You can also specify the font size in the same tag, like so:
<font face="Arial" size="3">

To change the color of the text, add the font color attribute:
<font face="Arial" size="3" color="#FF0000">

Since you have already specified the color of the text in your body tag, the last example that combines all three font attributes is most commonly used when you would like to change the font color further down the page, instead of having one uniform color.

Font tags can be used all throughout a document, to change face, size, or color. However, you'll want to make sure you close them all before starting a new tag. For each font tag used, one closing tag </font> is required.

 
Font Attributes

Type the following three examples of paragraphs into your text editor, just above the closing body tag </body>:

<p><font face="Arial" color="#FF0000" size="3">This paragraph will appear on your page in an Arial font with red text and average size 3 lettering.</font>

<p><font face="Verdana" color="#FFFFFF" size="2">This paragraph will combine Verdana font, white text, and smaller size 2 lettering.</font>

<p><font face="Helvetica" color="#000000" size="5"<When viewed on your webpage, this paragraph will display Helvetica font, black text, and larger size 5 lettering.</font>

 
Little Bit of Color

Refreshed Browser

You may type this last example into your text editor under the three you just finished, but above the </body> tag.

Remember, if you want it on a new line you need to add either a <br> or <p> tag. :) I added a <br> tag to go to the next line, rather than adding an extra space:

<p><font face="Verdana" size="2"<Sometimes you just want a little <font color="#FF0000">color</font>.</font>

Save your work and refresh your browser. Wow ... you're getting good. ;o)

 

As you may have noticed, the sizing system in the font attributes is opposite from Headings, where <H1> is the largest and <H6> is the smallest. (I think they do this to drive us crazy ... lol) Anyway, <font size="1"> is the smallest in this attribute and can get as large as <font size="9">. Depending on the font face you choose, you may be able to go larger than size 9, although 9 is approximately the largest available.

Ok ... so you can put your text on your page. You can force line breaks, create paragraphs and even manipulate the size, style and face of your text. Great ... but it's still just text. And looking at line after line of text gets boring fast ... and it also gets hard on the eyes. What we need now, is something to break up those endless lines of text. Enter ... drumroll please .. the Horizontal Rule Tag <hr>.

This tag tells the browser to draw ... you guessed it ... a horizontal line. This line automatically includes a line break. If you want a little extra space around the rule, you can preceed and/or follow it with a <p>. As with <br>, the <hr> does not require a closing tag.

You can also set the align and size attributes in the <hr> tag.

 
hr and attributes code

hr and attributes results

In your editor, add a <hr> tag just above the text where we used our first bold tag <b>. If you like, set the align and size attributes to whatever your heart desires (I'm not sure what the max is for size ... probably 9).

I did <hr align="center" size="3"> because I love to center things.

Save your work and refresh your browser.

 

TA DA ... your first non-text element. And you thought this would be hard. ;o)

Ok ... that's it for this lesson. In the next tutorial we will finally get to what I know you've all been waiting for ... graphics and links.

Remember to keep a copy of the document we've been working on. We will be adding to it in the next lesson.