HTML Basics II

Basic Text Formatting

Once you have typed the <HTML>, <HEAD>, <TITLE> and <BODY> tags in with their corresponding end tags, we can now work on the body of the document. Like I said before, anything that appears between the <BODY> tags will show up on the browser screen.

You can now start typing in the information you want on the page, using the ENTER key only at the end of paragraphs. But wait! When I go to preview this in my browser all the words are in one big paragraph. The paragraphs I created in the script aren't there.

That's right. We need an HTML tag to describe the end of a paragraph. Let me show you the script that describes the preceeding three paragraphs.

<P>Once you have typed the <B>HTML</B>, <B>HEAD</B>, <B>TITLE</B> and <B>BODY</B> tags in with their corresponding end tags, we can now work on the body of the document. Like I said before, anything that appears between the <B>BODY</B> tags will show up on the browser screen. <P>You can now start typing inthe information you want on the page, using the ENTER key only at the end of paragraphs. But wait! When I go to preview this in my browser all the words are in one big paragraph. The paragraphs I created in the script aren't there. <P>That's right. We need an HTML tag to describe the end of a paragraph. Let me show you the script that describes the preceeding three paragraphs.

You can see the <P> tag at the beginning of the three paragraphs. It is also one of the few tags that don't require a closing tag "/". Well, most of the time. There are a few instances when a closing tag is needed, but I'll point them out when the time comes.

Another tag that shows up in the above script is the <B> </B> tag. It defines text that needs to be in Bold. There are some others that do similar tasks. <I> </I> italicizes text, <U> </U> underlines text. Somes examples and then the script.

This text is in bold.

This text has been italicized.

This text has been underlined.

This text has a combination of all three tags

You can also SUBSCRIPT text as well as SUPERSCRIPT text.

And now the script for the previous text examples

<P><CENTER><B>This text is in bold.</B></CENTER> <P><CENTER><I>This text has been italicized.</I></CENTER> <P><CENTER><U>This text has been underlined.</U></CENTER> <P><CENTER><U><I><B>This text has a combination of all three tags</B></I></U></CENTER> <P>You can also <SUB>SUBSCRIPT</SUB> text as well as <SUP>SUPERSCRIPT</SUP> text.

Justification

There is a justification tag in previous example script as well. The <CENTER> tag obviously puts your text in the centre of the page. (***NOTE. All HTML tags have American spellings; Center not Centre, Color not Colour, etc.) To put your text to the right of the page you have to use the <P> tag again and this time with the closing tag. There is also something called an "attribute" in the script. Here's an example with the line of script after it.

This text is justified to the right

<P ALIGN="Right">This text is justified to the right</P>

The ALIGN="RIGHT" attribute tells the browser to put the text on the right. This same attribute can also be used to center text as well with ALIGN="CENTER" but the <CENTER> tag is much more commonly used.

Text Size

Just as in word processing, you can change the size of your text with some simple tags. You can use the H or "header" tag to create titles or headings like this:

Your Title with Header 1

Your Title with Header 2

Your Title with Header 3

Your Title with Header 4

Your Title with Header 5

Your Title with Header 6

And here is the script for that

<CENTER><H1>Your Title with Header 1</H1></CENTER> <P><CENTER><H2>Your Title with Header 2</H2> </CENTER> <P><CENTER><H3>Your Title with Header 3</H3> </CENTER> <P><CENTER><H4>Your Title with Header 4</H4> </CENTER> <P><CENTER><H5>Your Title with Header 5</H5> </CENTER> <P><CENTER><H6>Your Title with Header 6</H6> </CENTER>

Note that as the number get bigger the size gets smaller. It's the opposite when you use the <FONT SIZE> tag. You would use this tag for enlarging or reducing the size of your body text. Here's an example with the script after:

Here's an example of Font Size 1

Here's an example of Font Size 2

Here's an example of Font Size 3

Here's an example of Font Size 4

Here's an example of Font Size 5

Here's an example of Font Size 6

<CENTER><FONT SIZE="1">Here's an example of Font Size 1</FONT></CENTER> <P><CENTER><FONT SIZE="2">Here's an example of Font Size 2</FONT></CENTER> <P><CENTER><FONT SIZE="3">Here's an example of Font Size 3</FONT></CENTER> <P><CENTER><FONT SIZE="4">Here's an example of Font Size 4</FONT></CENTER> <P><CENTER><FONT SIZE="5">Here's an example of Font Size 5</FONT></CENTER> <P><CENTER><FONT SIZE="6">Here's an example of Font Size 6</FONT></CENTER>

There is also a <FONT COLOR> tag. This allows you to change the colour of your text. If you choose to have a dark background color (coming up soon) then black text won't show up against it. Or you might want to emphasize some text to make it stand out. Like this:

The real problem with designing web pages is not having a clue as to who is going to read them. So you have to make them as interesting as possible so that they'll appeal to a broad spectrum of the web populace.

Here's the script.

<CENTER> <BLOCKQUOTE> <FONT COLOR="#CC6666" SIZE="4"> <B>The real problem with designing web pages is not having a clue as to who is going to read them. </FONT> <FONT COLOR="#0033CC"> So you have to make them as interesting as possible so that they'll appeal to a broad spectrum of the web populace.</B> </FONT> </BLOCKQUOTE> </CENTER>

A fairly complicated looking script. What you have to look for if this doesn't seem to work is that every tag has to have a closing tag. I've arranged the script in such a way that opening and closing tags are arranged in a logical fashion.

I've also introduce a new tag, <BLOCKQUOTE></BLOCKQUOTE>. If you have to make the text block narrower, say to handle a quote, the <BLOCKQUOTE> tag suits the bill. If the text needs to be narrower still, use more <BLOCKQUOTE> tags. Just be sure to close the tags after your block of text.

I think we've pretty well covered the basic tags. With these tags you can come up with a decent text oriented page. But most of the pages on the web have graphics, you say. Yes, that's our next topic.

Now let's check out Web Page Graphics